* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
/* ================Beggining of Slider Style-=============*/
.mySlides {display: none;}
img {vertical-align: middle;}
.header img{ max-width:100%;
height: auto;
padding: 10px;
}

/* Slideshow container */
.slideshow-container {
  width:100%;
  position: relative;
  margin: 0 auto; /* Center it */
  }

/* Caption text */
.text {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f0ec12;
  width: 100%;
  padding: 5px;
}


/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
/*  ===================Home Page Style =================== */  

/*Bringing text over image for trustee and chairman photo */
      
/* CSS property for header section */ 

    .header { 
                background-color:rgb(197, 197, 197); 
                padding: 2px; 
                text-align: left; 
                border-radius: 10px;
                } 

              
              
            /* CSS property for nevigation menu */ 
            .nav_menu { 
                overflow: hidden; 
                background-color: #666; 
                border-radius: 10px;
                margin: 15px; 
                box-shadow: 10px 10px 5px grey; 
            } 
            .nav_menu a { 
                float: left; 
                display: block; 
                color: green; 
                text-align: center; 
                padding: 10px 12px; 
                text-decoration: none; 
                font-family: Arial, Helvetica, sans-serif;
            } 
            .nav_menu a:hover { 
                background-color: blue; 
                color: black; 
                border-radius: 10px;
            } 
            
              
            /* CSS property for content section */ 
 
  .columnA { 
                float: left; 
                width: 25%; 
                padding: 5px; 
                text-align:justify; 
            } 

  .columnC { 
              width: 25%; 
              padding: 5px; 
              text-align: right;
               
             }

    .events { 
      float: left; 
      width: 100%; 
      padding: 5px;
               }
    .footer {
                float: right; 
                width: 100%; 
                padding: 10px; 
                text-align:justify;
            }
  
  

          /* Media query to set website layout  
            according to screen size */ 
            @media screen and (max-width:600px) { 
                .columnA, .slideshow-container, .columnC, { 
                    width: 50%; 
                } 
            } 
            @media screen and (max-width:400px) { 
                .columnA, .slideshow-container, .columnC { 
                    width: 100%; 
                } 
            }   

            
            /* Style The Dropdown Button */
.dropbtn {
  background-color: orange;
  color: rgb(22, 11, 11);
  padding: 25px;
  font-size: 20px;
  border: 20px;
  cursor: pointer;
  
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgba(39, 20, 22, 0.678);
  padding: 12px 16px;
  text-decoration: burlywood;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rebeccapurple}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
  color: rgba(39, 20, 22, 0.678);
  padding: 15px 19px;
  text-decoration: burlywood;
  display: block;
}     











/*Images of soletrustee and chairman*/

/* ============== Advertisement Scroll Up =======*/



/*===========Ticker News Container================*/
.tcontainer {
        background-color: rgb(5, 5, 5); 
        border-radius: 10px; 
        margin: 10px;
        padding: 5px;
              
}
.tcontainer a:link {
  text-decoration: none;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.tcontainer a:visited {
  color: #666
  background-color: transparent;
  text-decoration: none;
}

.tcontainer a {
    letter-spacing: 5px;
}
.tcontainer a:hover {
  color: white;
  text-decoration: underline;
}

.tcontainer a:active {
  color: white;
  text-decoration: underline;
}

/* =====TABs for Notification, News and Events==== */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #666;
  border-radius: 10px;
   margin: 20px; 
          box-shadow: 10px 10px 5px grey;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
  color:black;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width: auto;
  height: 600px;
  overflow: auto;
  background-color: rgb(236, 236, 236);
  border-radius: 10px; 
}

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 50px;
  color: black;
  }

.topright:hover {color: red;}

/* =====END TABs for Notification, News and Events==== */

/*A-SINGLE-LINE CSS*/

  hr.solid {
    border-top: 2px solid #666;
 
}

/*Row 4 */
/* Create three equal columns that floats next to each other */
.column11, .column22, .column33 {
  float: left;
  width: 33%;
  padding:10px;
}


.row4 h2{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;

}
.formatcolumn1, .formatcolumn2, .formatcolumn3 {
  border-radius: 25px;
  border: 2px solid #bbb;
  box-shadow: 10px 10px 5px grey;
   }

/* Clear floats after the columns */
.row4:after {
  content: "";
  display: t able;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column11, .column22, .column33 {
    width: 100%;
  }
}
/*Row 4 - 3 Columns Formatting*/

/*Misc - Blinking Text*/
.blink {
  animation: blinker 1s linear infinite;
  background-color: red;
  text-align: center;
}
@keyframes blinker {
  100% {
    opacity: 0;
  }
}
.blink-one {
  animation: blinker-one 1s linear infinite;
}
@keyframes blinker-one {
  0% {
    opacity: 0;
  }
}
.blink-two {
  animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {
  100% {
    opacity: 0;
  }
}
/* IMPORTANT LINKS */

.formatcolumn1 a:link, a:visited {
  background-color: #666;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 20px;
  margin:1px;
  
}

.formatcolumn1 a:hover, a:active {
  background-color: rgb(168, 9, 9);
}

/*Scrool Text Up*/

.scroll-up {
  height: 50px;	
  overflow: hidden;
  position: relative;
  background: rgb(236, 236, 236);
  
 }
 .scroll-up p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: le;
  /* Starting position */
  -moz-transform:translateY(100%);
  -webkit-transform:translateY(100%);	
  transform:translateY(100%);
  /* Apply animation to this element */	
  -moz-animation: scroll-up 5s linear infinite;
  -webkit-animation: scroll-up 5s linear infinite;
  animation: scroll-up 5s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-up {
  0%   { -moz-transform: translateY(100%); }
  100% { -moz-transform: translateY(-100%); }
 }
 @-webkit-keyframes scroll-up {
  0%   { -webkit-transform: translateY(100%); }
  100% { -webkit-transform: translateY(-100%); }
 }
 @keyframes scroll-up {
  0%   { 
  -moz-transform: translateY(100%); /* Browser bug fix */
  -webkit-transform: translateY(100%); /* Browser bug fix */
  transform: translateY(100%); 		
  }
  100% { 
  -moz-transform: translateY(-100%); /* Browser bug fix */
  -webkit-transform: translateY(-100%); /* Browser bug fix */
  transform: translateY(-100%); 
  }
 }
/*Testimonals*/



/*FOOTER CSS*/
.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 20px 20px 10px 20px;
  color: #2f2f2f;
  background-color:rgb(197, 197, 197); 
  border-top: 1px solid #e5e5e5;
  margin-left: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
 }

.footer > * {
  flex:  1 100%;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer__logo {
  font-size: 15px;
  font-size: 1.5rem;
}

.footer__addr h2 {
  margin-top: 1.3em;
  font-size: 15px;
}
.footer__addr{
  text-align: center;
}
.nav__title {
    font-size: 25px;
}
.divider {
    border-left: 1px solid black;
    height: 300px;
    float:left;
    position: relative;
    margin-right: 20px;
    margin-left: 15px;
}
.footer address {
  font-style: normal;
  color: rgb(0, 0, 0);
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  max-width: max-content;
  background-color: rgb(33, 33, 33, 0.07);
  border-radius: 100px;
  color: #2f2f2f;
  line-height: 0;
  margin: 0.6em 0;
  font-size: 1rem;
  padding: 0 1.3em;

}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}

.footer__nav {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.nav__ul a {
  color: rgb(0, 0, 0);

}

.nav__ul--extra {
  column-count: 2;
  column-gap: 1em;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  color: rgb(0, 0, 0);
}
  
.legal__links {
  display: flex;
  align-items: center;
}

.heart {
  color: #2f2f2f;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 40.375em) {
  .footer__nav > * {
    flex: 1;
  }
  
  .nav__item--extra {
    flex-grow: 2;
  }
  
  .footer__addr {
    flex: 1 0px;
  }
  
  .footer__nav {
    flex: 2 0px;
  }
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.dropdown-submenu {
  position: relative;
  background-color: olivedrab;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/*  CSS FOR SOCIAL MEDIA ICONS */
.sticky-container{
  padding:0px;
  margin:0px;
  position:fixed;
  right:-130px;
  top:230px;
  width:210px;
  z-index: 1100;
}
.sticky li{
  list-style-type:none;
  background-color:#fff;
  color:#efefef;
  height:43px;
  padding:0px;
  margin:0px 0px 1px 0px;
  -webkit-transition:all 0.25s ease-in-out;
  -moz-transition:all 0.25s ease-in-out;
  -o-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out;
  cursor:pointer;
}
.sticky li:hover{
  margin-left:-115px;
}
.sticky li img{
  float:left;
  margin:5px 4px;
  margin-right:5px;
}
.sticky li p{
  padding-top:5px;
  margin:0px;
  line-height:16px;
  font-size:11px;
}
.sticky li p a{
  text-decoration:none;
  color:#2C3539;
}
.sticky li p a:hover{
  text-decoration:underline;
}


/* css for menus */


nav {    
  display: block;
  text-align: center;
}
nav ul {
  margin: 0;
  padding:0;
  list-style: none;
}
.nav a {
  display:block; 
  background: #111; 
  color: #fff; 
  text-decoration: none;
  padding: 0.8em 1.8em;
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 #000;
  position: relative;
}
.nav{  
  vertical-align: top; 
  display: inline-block;
  box-shadow: 
    1px -1px -1px 1px #000, 
    -1px 1px -1px 1px #fff, 
    0 0 6px 3px #fff;
  border-radius:6px;
}
.nav li {
  position: relative;
}
.nav > li { 
  float: left; 
  border-bottom: 4px #aaa solid; 
  margin-right: 1px; 
} 
.nav > li > a { 
  margin-bottom: 1px;
  box-shadow: inset 0 2em .33em -0.5em #555; 
}
.nav > li:hover, 
.nav > li:hover > a { 
  border-bottom-color: orange;
}
.nav li:hover > a { 
  color:orange; 
}
.nav > li:first-child { 
  border-radius: 4px 0 0 4px;
} 
.nav > li:first-child > a { 
  border-radius: 4px 0 0 0;
}
.nav > li:last-child { 
  border-radius: 0 0 4px 0; 
  margin-right: 0;
} 
.nav > li:last-child > a { 
  border-radius: 0 4px 0 0;
}
.nav li li a { 
  margin-top: 1px;
}

.nav li a:first-child:nth-last-child(2):before { 
  content: ""; 
  position: absolute; 
  height: 0; 
  width: 0; 
  border: 5px solid transparent; 
  top: 50% ;
  right:5px;  
 }

 /* submenu positioning*/
.nav ul {
  position: absolute;
  white-space: nowrap;
  border-bottom: 5px solid  orange;
  z-index: 1;
  left: -99999em;
}
.nav > li:hover > ul {
  left: auto;
  margin-top: 5px;
  min-width: 100%;
}
.nav > li li:hover > ul { 
  left: 100%;
  margin-left: 1px;
  top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before { 
  border-top-color: #aaa; 
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-bottom-color: blue; 
  margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {  
  border-left-color: #aaa; 
  margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-right-color: green;
  right: 10px; 
}
div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
} 





/*  ===================Ending Home Page Style =================== */

/*  ===================Ending Home Page Style =================== */