@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800,900);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Sriracha&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Satisfy&display=swap);

@font-face {
    font-family: oriya;
    src: url(../fonts/OR51_Ananta.ttf);
}

/* GLOBAL */

html, body {
    font-family: 'Raleway', sans-serif;
    /* color: #737373; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

a, h1, h2, h3, h4, h5, h6, p {
    font-family: 'Raleway', sans-serif;
}

section p {
    font-family: 'Open Sans';
}

.bg-grey {
    background-color: #ecf0f1;
}

/* NAVBAR STARTS */

/* Navbar Brand */
.navbar .navbar-brand .navbar-logo {
    height: 70px;
    width: 70px;
}
.navbar .navbar-brand .navbar-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

/* Navbar Links and Link-Buttons */
.navbar .navbar-nav .nav-link {
    font-size: 1em;
    font-weight: 600;
    line-height: 45px;
    padding: 0 20px;
    color: #ffffff;
}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link:active {
    color: #ffb307;
}
.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus {
    color: #ffb307;
    /* background-color: transparent; */
}
.navbar .navbar-nav .nav-link.active {
    color: #ffb307;
}
/* Link-Buttons */
.navbar .navbar-nav .nav-button {
    border-radius: 3px;
    text-transform: none;
    font-weight: 600;
}

/* Navbar Toggle Button */
.custom-toggler.navbar-toggler {
    font-size: 28px;
    color: #fff;
    border-color: transparent;
    outline: transparent;
}
.custom-toggler.navbar-toggler[aria-expanded="true"], .custom-toggler.navbar-toggler:hover { 
    color: #ffb307;
} 

/* Navbar Scroll Behaviour */
.navbar.navbar-dark.navbar-scrolled {
    background-color: rgba(0,0,0,.5) !important;
}
.navbar.navbar-dark.navbar-scrolled-again {
    background-color: rgba(0,0,0,.85) !important;
}

/* Navbar non-transparent on small screens */
@media screen and (max-width: 991px){
    .navbar.bg-transparent.navbar-dark {
        background-color: rgba(0,0,0,.85) !important;
    }
}

/* Navbar Dropdown */
.dropdown:hover>.dropdown-menu {
    display: block;
}


/* SHOWCASE STARTS */

#top-section {
    background: url(../img/our_mission.jpg) 50% center no-repeat fixed;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100vw 120vh;
    padding: 0;
}
.top-section {
    position: relative;
}
.parallax-style, .no-parallax-style {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.parallax-style {
    position: relative;
    z-index: 1;
}
.parallax-overlay {
    background-color: rgba(0,0,0,.6);
}
.slider-txt-container {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    padding: 150px 0 185px 0;
    width: 100%;
    overflow: hidden;
}
.slider-txt-container .bold-txt {
    font-size: 3.875em;
    font-weight: 800;
    line-height: 70px;
}
.slider-txt-container .parallax-description {
    color: #ffffff;
    text-align: center;
    font-size: 1.7em;
    font-weight: 600;
    line-height: 40px;
    width: 70%;
    margin: auto;
}

/* Angular Cut on Showcase */
.angular {
    position: relative;
}
.angular .top-angle, .angular .bottom-angle {
    position: absolute;
    width: 100%;
    left: 0;
    height: 151px;
    overflow: hidden;
    z-index: 2;
}
.angular .top-angle {
    top: -150px;
}
.angular .top-angle:before, .angular .bottom-angle:before {
    content: "";
    width: 100%;
    height: 150px;
    background: #ffffff;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(-3deg) skew(-3deg) scale(1.1,1);
    -mox-transform: rotate(-3deg) skew(-3deg) scale(1.1,1);
    -ms-transform: rotate(-3deg) skew(-3deg) scale(1.1,1);
    -o-transform: rotate(-3deg) skew(-3deg) scale(1.1,1);
    transform: rotate(-3deg) skew(-3deg) scale(1.1,1);
}
.angular .top-angle:before {
    top: 75px;
}



/* FOOTER */

#contact .nav .nav-link {
    font-size: 1em;
    font-weight: 600;
    padding: 3px;
    color: #ffffff;
}
#contact .nav .nav-link:hover, #contact .nav .nav-link:focus {
    color: #ffb307;
}
#contact .nav>.active>a, #contact .nav>.active>a:hover, #contact .nav>.active>a:focus {
    color: #ffb307;
    /* background-color: transparent; */
}

#contact .social-icons a {
    font-size: 32px;
    margin-right: 12px;
    text-decoration: none;
}
/* #contact .social-icons .fa-facebook-square:hover {
    color: #1877f2 !important;
}
#contact .social-icons .fa-twitter:hover {
    color: #00acee !important;
} */

#contact .footer a {
    color: white;
    font-weight: 600;
}




/* HEXAGON */

.hex {
    position: relative;
    width: 100px;
    height: 61px;
    border-radius: 7px;
    margin: 30px auto 50px auto;
}

.hex:before, .hex:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    margin-left: -1px;
}

.hex , .hex:before, .hex:after {
    border-left: 2px solid #ff9800;
    border-right: 2px solid #ff9800;
}

.hex:before {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.hex:after {
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hex.hex-margin {
    margin-bottom: 60px;
}


/* SCROLL TO TOP */

#scroll-to-top {
    position: fixed;
    right: 30px;
    bottom: 40px;
    cursor: pointer;
    display: none;
    opacity: 1;
    z-index: 99;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

#scroll-to-top:hover {
    opacity: 1;
}

#scroll-to-top span {
    font-size: 20px;
}

#scroll-to-top span {
    color: #ffffff;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    z-index: 1;
}

.hex.scroll-top {
    width: 45px;
    height: 29px;
    margin-bottom: 5px;
    background-color: #ff9800;
}

.hex.scroll-top:after, .hex.scroll-top:before {
    margin-left: -2px;
    background-color: #ff9800;
}







/* ACTIVITIES SECTION ON ALL PAGES */

#activities .title, #events .title {
    color: #0d0d0d;
    /* font-size: 1.375em; */
    font-weight: 800;
    line-height: 1em;
    text-transform: uppercase;
    margin-top: 0;
}

#activities::before, #events::before {
    display: block;
    content: "";
    margin-top: -30px;
    height: 30px;
    visibility: hidden;
}

#activities .card, #events .card {
    border: none !important;
}

#activities .glide__slide .card, #events .glide__slide .card {
    max-width: 24rem;
    max-height: 40rem;
}

@media screen and (max-width: 760px) {
    #activities .glide__slide, #events .glide__slide {
        padding: 0 15px;
    }
    #activities .glide__slide .card, #events .glide__slide .card {
        max-width: 20rem;
        max-height: 40rem;
    }
}


/* GLIDE CARDS IMG */

.glide .card img {
    height: 270px;
}

@media screen and (max-width: 1199px){
    .glide .card img {
        height: 225px;
    }
}
@media screen and (max-width: 991px){
    .glide .card img {
        height: 288px;
    }
}
@media screen and (max-width: 767px){
    .glide .card img {
        height: 259px;
    }
}
@media screen and (max-width: 575px){
    .glide .card img {
        height: 240px;
    }
}


/* GALLERY "SHOW MORE" BUTTON */

.hidden{
    visibility:hidden;
    width:0px!important;
    height:0px!important;
    margin:0px!important;
    padding:0px!important;
}

/* Gallery Buttons */
.add-images>.btn, .approve-images>.btn {
    color: #ffb307;
    border-color: #ffb307;
    border-radius: 5px;
    border-width: 2px;
    font-weight: 700;
}
.add-images>.btn:hover, .approve-images>.btn:hover {
    background-color: #ffb307 !important;
    color: #ecf0f1 !important;
}
.add-images>.btn:focus, .add-images>.btn:active, .approve-images>.btn:focus, .approve-images>.btn:active {
    box-shadow: none !important;
    border-color: #ffb307 !important;
}