@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); /*font-family: 'Lato', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap'); /*font-family: 'Nanum Myeongjo', serif;*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); /*font-family: 'Lato', sans-serif;*/
@import url('../bootstrap/font/bootstrap-icons.css');
.container{max-width: 1199px}
body{font-family: 'Lato', sans-serif; overflow-x: hidden;}
h1{font-size: 2.875rem; font-family: 'Nanum Myeongjo', serif;} /*46px regular*/
    @media(max-width: 992px){.h1{font-size : 1.875rem;}} /*30px regular */
h2{font-size: 2.5rem;  font-family: 'Nanum Myeongjo', serif;} /*40px regulart*/
    @media(max-width: 992px){.h2{font-size: 1.875rem;}} /*30px regular */
h3{font-size: 1.5rem; font-family: 'Nanum Myeongjo', serif;} /*24px regular*/
h5{font-size: 1.25rem; font-weight: 300;} /*20px regular*/
h6{font-size: 1.125rem; font-weight: 400;} /*18px regular*/
p{font-size: 1rem; font-weight: 400; color: #fff;} /*16px regular*/
article p{ text-align: justify; color: #000; font-size: 1rem; font-weight: 400;}
a{font-size: 1rem; font-weight: 400; text-decoration: none; color: #fff;}
a:hover{color: rgb(255, 255, 222); transition: .5s;}
ol, ul {line-height: 1.75rem; font-size: 1rem;}
ul{list-style: none; padding: 0; padding: 0; font-size: 1rem;}
span{color:#06557D}
/*------COMMON CLASSES--------*/
.ul-styling li::before{ content:"\f280"; font-family: bootstrap-icons !important; margin-right: 5px; position: relative;}
article ul li{list-style-type: disc; margin-left: 18px;}
/*----BANNER-----*/
#banner{background:url(../../assets/img/BANNER-BG.png)center center no-repeat; background-size:cover;}
/*----HEADER-----*/
.logo-lg{z-index: 9999; position: absolute;}
nav ul li a:hover,nav ul li a.active{color: #93303a !important;}
    @media(max-width:786px){.upper-header-fonts{font-size: 10px;}}
#header .top-header{background: #06557d; background-size: 100% 100%; }
#header .top-header p{ font-weight: 500; font-size: 20px; color: #fff; font-family: 'Nanum Myeongjo', serif;}
.navbar { width:100%; z-index: 999;}
        @media(max-width:992px){.navbar-collapse{ background-color: white;}}
.dropdown{position: relative; display: inline-block}
.dropdown-menu{display: none; position:absolute; border: none; border-radius: 0%; background-color: #06557d; box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2); z-index: 1}
.dropdown-menu a{color: #fff; padding: 10px 16px;}
@media(min-width: 992px){.dropdown:hover .dropdown-menu{ display: block;}}

/*-----BANNER----*/
#banner article h4{font-family: 'Nanum Myeongjo', serif;}
#banner article h2{color:#93303a ;font-family: 'Nanum Myeongjo', serif;}
#banners{background: url(../../assets/img/BANNERS-BG.png)center center no-repeat; background-size: cover;}
#banners a,h1{color:#93303a}
/*-----HM-ACTIVITIES----*/
#activities{background:url(../../assets/img/ACTIVITIES-BG.png)center center no-repeat; background-size:cover; background-attachment: fixed;}

#activities .gallery_sec img {width: 100%;margin-bottom: 30px;object-fit: cover;}
.activities1 .gallery_sec img {width: 132px !important;margin-bottom: 30px;height:132px;object-fit:unset !important}
.activities2 .gallery_sec img {margin-bottom: 30px;height:220px;object-fit:unset !important; width: 131px!important;}



#activities .gallery_sec a {position: relative;transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;}
#activities .gallery_sec a::before {position: absolute;content: "";width: 30px;height: 30px;background: none;background-size: contain;background-repeat: no-repeat;top: -15%;left: 50%;transform: translate(-50%, -50%);}
#activities .gallery_sec img {transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;}
#activities .gallery_sec a:hover img {position: relative;            }
#activities .gallery_sec a:hover img {opacity: 0.2;}
#activities .gallery_sec a:hover::before {position: absolute;content: "";width: 50px;height: 50px;background: url(https://i.ibb.co/3fMkjjF/Resize.png);background-size: contain;background-repeat: no-repeat;z-index: 99;}
/*-----DIRECTOR&STAFF--------*/
.custom-tab-content .tab .tHead.btn {color: #555; background-color: transparent; border: none; border-radius: 0;}
.custom-tab-content .tab .tHead.btn.inactive { color: #ccc; }
.custom-tab-content .content { padding-top: 20px; padding-bottom: 20px; display: block; float: left;}
.custom-tab-content .content .tContent { display: none; }
.custom-tab-content .content .tContent.active { display: block;}
.custom-accordian:not(:last-of-type) { border-bottom: solid 1px rgba(209, 18, 66, 0.4);}
.collapsable {padding-bottom: 25px; padding-top: 25px; }
.collapsable:not(:last-of-type) { border-bottom: solid 1px rgba(209, 18, 66, 0.4); padding-bottom: 0;}
.reveal-me { display: none;}
.read-more-self { cursor: pointer;}
/*------SINDHI-PERSONALITIES-------*/
/* Style the tab */
.tab { float: left; border: 1px solid #ccc;background-color: #f1f1f1; width: 30%;height: auto;}
        
/* Style the buttons inside the tab */
.tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%;
  border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 17px; }
/* Change background color of buttons on hover */
.tab button:hover { background-color: #ddd; }
/* Create an active/current "tab button" class */
.tab button.active { background-color: #ccc;}
/* Style the tab content */
.tabcontent {color: #000!important ; float: left; padding: 0px 12px;width: 70%; border-left: none;height: 900px; margin: 0 auto; display: block;}
/*-----CIRCULARS-AND-FORM----*/
#circulars .gallery_sec img {width: 100%;margin-bottom: 30px;object-fit: cover;}
#circulars .gallery_sec a {position: relative;transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;}
#circulars .gallery_sec a::before {position: absolute;content: "";width: 30px;height: 30px;background: none;background-size: contain;background-repeat: no-repeat;top: 45%;left: 50%;transform: translate(-50%, -50%);}
#circulars .gallery_sec img {transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;}
#circulars .gallery_sec a:hover img {position: relative;}
#circulars .gallery_sec a:hover img {opacity: 0.2;}
/*#circulars .gallery_sec a:hover::before {position: absolute;content: "";width: 50px;height: 50px;background: url(https://i.ibb.co/3fMkjjF/Resize.png);background-size: contain;background-repeat: no-repeat;z-index: 99;}*/
/*-----MUSEUM-AND-ART----*/
#museum-and-art .gallery_sec img {width: 100%;margin-bottom: 30px;width: 250px;height: 250px;object-fit: cover;}
#museum-and-art .gallery_sec a {position: relative;transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;}
#museum-and-art .gallery_sec a::before {position: absolute;content: "";width: 30px;height: 30px;background: none;background-size: contain;background-repeat: no-repeat;top: 45%;left: 50%;transform: translate(-50%, -50%);}
#museum-and-art .gallery_sec img {transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;}
#museum-and-art .gallery_sec a:hover img {position: relative;            }
#museum-and-art .gallery_sec a:hover img {opacity: 0.2;}
#museum-and-art .gallery_sec a:hover::before {position: absolute;content: "";width: 50px;height: 50px;background: url(https://i.ibb.co/3fMkjjF/Resize.png);background-size: contain;background-repeat: no-repeat;z-index: 99;}
/* Common style */
/* .grid figure { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 420px; max-width: 600px; 	max-height: 400px; width: auto; height: auto; background: #3085a3; text-align: center; cursor: pointer; } */
.grid figure { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width:auto; max-width: 600px; 	max-height:webkit-fill-available; width: auto; height: auto; text-align: center; cursor: pointer; }
.grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8;}
.grid figure figcaption { color:#000; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0;opacity: 0;}
/***** Apollo *****/
figure.effect-apollo { background: #3498db;}
figure.effect-apollo img { opacity: 0.95; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;	-webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1);}
figure.effect-apollo figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;	background: rgba(255,255,255,0.5);	content: ''; -webkit-transition: -webkit-transform 0.6s;	transition: transform 0.6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);}
figure.effect-apollo p { position: absolute; right: 0; bottom: 0; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0;	-webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
figure.effect-apollo h2 { text-align: left;}
figure.effect-apollo:hover img { opacity: 0.6; -webkit-transform: scale3d(1,1,1);transform: scale3d(1,1,1);}
figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);}
figure.effect-apollo:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
/*-------ABOUT------*/
.aboutCard { position: relative; width: 100%; height: 270px; background-color: #fff; color:#fff; overflow: hidden;}
figure img { display: block; object-fit: cover !important; object-position: center center !important; height: 100%; width: 100%;}
.overlay{ background: #06557d; background: -moz-linear-gradient(0deg, #06557d 0%, #06557d 100%);    background: -webkit-linear-gradient(0deg, #06557d 0%, #06557d 100%);   background: linear-gradient(0deg, #06557d 0%, rgba(89,59,116,0) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#281a36",endColorstr="#593b74",GradientType=1); display: block;  position: absolute; height: 200px; width: 100%; bottom: 0; z-index: 3; }
.aboutCaption {position: absolute; top: auto; bottom: 31px; left: 0; width: 100%; height: 35%; z-index: 10; padding: 15px; -webkit-transform: translateY(80%);          transform: translateY(80%); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:  -webkit-transform 0.4s; transition:  -webkit-transform 0.4s;       transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s;}
/* .aboutCaption i{font-size: 24px;} */
.aboutCaption-title h5{ margin-top: 0px; font-family: 'Lato', sans-serif;}
.aboutCaption-content { margin-top: 0;}
.aboutCaption-link { color: #fff; text-decoration: underline; opacity: .8; -webkit-transition-property: opacity;   transition-property: opacity; -webkit-transition-duration: 0.15s; transition-duration: 0.15s;     -webkit-transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1); transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);}
.news-Slide-up:hover .overlay{ background: #06557d; background: -moz-linear-gradient(0deg, #06557d 0%, );   background: -webkit-linear-gradient(0deg, #06557d 0%, ); background: linear-gradient(0deg, #06557d 0%, rgba(89,59,116,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#400a6f",endColorstr="#023c5a",GradientType=1);}
.news-Slide-up:hover .aboutCaption { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition:  -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s,}
/*----DONATIONS-----*/
#donations{background:url(../../assets/img/donations-bg.png)center center no-repeat; background-size:cover;}
.ecllipse-1{box-sizing: border-box; position: absolute; width: 83px; border-radius: 50%; height: 83px; border: 1px solid #06557D; margin: 0 auto}
.ecllipse-2{position: absolute; width: 83px; height: 83px; color: #06557D; border-radius: 50%; border: 1px solid #06557D; transform: translate(-5px, -5px); background: transparent;}
.ecllipse-1:hover{border-color:#fff;}
.ecllipse-2:hover{border-color: #fff; background: #06557D;color: #fff; cursor: pointer; transition: .5s;}
/*------FOOTER------*/
.footer-top{background-color: #06557d;}
#footer .footer-subhead:before{content: ''; border-bottom: 3px solid #fff; width: 45px; position: absolute; padding: 13px 0; margin-left: 2px;} 
#footer a:hover , #footer a.active {border-bottom: 1px solid #fff;}  
.footer-bottom{background-color: #023c5a; color: #fff}
.sub-btn-1{box-sizing: border-box; position: absolute; width: 83px; border-radius: 50%; height: 83px; border: 1px solid #fff;}
.sub-btn-2{position: absolute; width: 83px; height: 83px; color: #fff; border-radius: 50%; border: 1px solid #fff; transform: translate(-5px, -5px); background: transparent;}
.sub-btn-1:hover{border-color:#06557d;}
.sub-btn-2:hover{border-color: #fff; background: #fff; color: #023c5a; cursor: pointer; transition: .5s;}
/*-------FOOTER-MEDIA-ICONS-------*/
.socialbtns a, a:hover { text-decoration: none;}
.socialbtns, .socialbtns ul, .socialbtns li { margin: 0; padding: 10px;}
.socialbtns li { list-style: none outside none; display: inline-block; }
.socialbtns .fa { width: 45px; height: 42px; color: #06557d; background-color: #fff; padding-top: 12px; transition: all ease 0.5s; -moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -o-transition: all ease 0.5s; text-align: center;}
.socialbtns .fa:hover {border-radius: 22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; -o-border-radius: 22px; transition: all ease 0.5s;-moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -o-transition: all ease 0.5s;}
/*-------About Us-Trustees-------*/ 
#cards .card { border-radius: 15px; min-height: 100%;} /* ==== Cards using Bootstrap === */
#cards .heading-border { position: absolute; width: 100%; top: 60%;}
#cards .card .user-picture img { position: absolute; top: -10%; right: 10%; background: #f8f9fa!important; padding: 10px;}
#cards .card .user-content .user-name { margin-right: 150px;}
/*----patron/member----*/
.table tr>th{ color:antiquewhite}
.table-bluish{color:antiquewhite; background-color: #023c5a;}
/*----EDUCATION----*/
.rankers .card{width: auto; border: none; border-radius: 10px; background-color:#06557D; color: #fff;}
/*----MUSIC----*/
#music h6{font-size: 15px; font-weight: bold;}
#music img{height: 110px; width: 110px;}
/*----CONTACT US----*/
#contact-us h3{color:#666;font-weight: 700;}
#contact-us h6{color: #666;}
#contact-us a{color: #3085a3;}
#contact-us a:hover{color: #06557D;}
/*----BACK-TO-TOP----*/
#button { display: inline-block; background-color: #06557D; width: 50px; height: 50px; text-align: center; border-radius: 4px;
    position: fixed; bottom: 30px; right: 30px; transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0; visibility: hidden; z-index: 1000; border-radius: 50%; }
#button::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 50px; color: #fff;}
#button:hover { cursor: pointer; background-color: #3085a3; }
#button:active { background-color: #555; }
#button.show { opacity: 1; visibility: visible; }
@media (min-width: 500px) { #button { margin: 30px;}}

/*#circulars .gallery_sec a.pdf{position:unset;}*/
    #circulars .gallery_sec a.pdf:hover img {
        opacity: unset
    }