@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap')

body{font-family: 'Open Sans', sans-serif; font-size:14px; line-height: 26px; font-weight:400; color: #888; overflow-x: hidden !important; -webkit-font-smoothing: antialiased;}

a, a:hover, input, input:hover, .nav-header.fixed-header, .nav-header, .splash-block.hide-splash{  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; text-decoration:none;}
a, a:hover{ text-shadow:none !important;box-shadow: none !important}

h1, h2, h3, h4, h5{ font-family:'Merriweather', serif; }

p {margin: 0 0 25px;}

.container, .container-header{max-width: 1330px; margin: auto;}

.relative{position: relative;}
.absolute{position: absolute;}

.half{width: 50%}

.sec-tb-pad{padding: 5rem 0;}

.pad-t20{padding-top: 20px;}

.d-flex{display: flex;}
.d-grid{display: grid;}

.justify-space-between{justify-content: space-between;}
.align-items-start{align-items: start;}
.align-items-center{align-items: center;}

.grid-col-2{grid-template-columns: 1fr 1fr;}
.grid-col-3{grid-template-columns: 1fr 1fr 1fr;}
.grid-col-4{grid-template-columns: 1fr 1fr 1fr 1fr;}


.gap1{gap: 1rem}
.gap2{gap: 2rem}
.gap3{gap: 3rem}

.text-center{text-align: center;}

.top-strip{background: #000; color: #fff; font-size: 12px; padding: 8px 0 2px;}
.left-contact a{color: #fff}
body.home header#masthead{
    position: absolute;
    z-index: 999;
    margin: auto;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.59);
    color: #fff;
}

header#masthead{
    position: static;
    margin: auto;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.79);
    color: #fff;
}

.rt-socials{ list-style:none; margin:0; padding:0; gap:1rem; color:#fff }
.rt-socials a:hover, .rt-socials a:focus{  }
.rt-socials a svg{ fill:#fff; width: 18px; }


.slider-heading h2{ font-family:'Merriweather', Times !important; font-weight:700 !important; }
.slider-heading h2 span{ color: #ffb422;}
.slider-content{}

.four-boxes{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; justify-content: center; text-align: center;}
.four-boxes img{ max-width:100% }
.projects-box, .activities-box, .programmes-box, .workshops-box{position: relative; overflow: hidden;}
.projects-box .overlay-holder{background-color: rgba(252, 191, 72, 0.66);}
.activities-box .overlay-holder{background-color: rgba(50, 50, 53, 0.42);}
.programmes-box .overlay-holder{background-color: rgba(109, 70, 73, 0.72);}
.workshops-box .overlay-holder{background-color: rgba(141, 198, 63, 0.62);}

.text-holder{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; justify-content: center;  width: 100%; height: 100%;  box-sizing: border-box; z-index: 1}
.text-holder h3{ color:#fff; font-size:34px; font-weight:600; text-shadow: 0px 0px 1px RGBA(0, 0, 0, 1); }
.overlay-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    transform: scale(1.01);
}
 
.section-title{ font-size: 35px; line-height: 1.2em; text-align: center;}
.section-title h2{ font-size: 35px; line-height: 1.2em; padding-bottom: 15px; font-weight: 600}
.section-subtitle {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0;
    color: #888;
    margin: 0;
}
.head-separator {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 2px solid #ffb422;
    margin: 5px 0;
    border-color: #ffb422;
    width: 55px;
    border-bottom-width: 3px;
    margin-top: 25px;
    margin-bottom: 50px;
}
 
 .objective-sec .objective-content p{ text-align:center; line-height:2; color:#333 }

.whoweare-sec{background: #f9f9f9}
.whoweare-box img{ max-width:100% }
.whoweare-box h3{font-size: 22px;color: #212121;  font-weight: 700; margin: 20px 0}
.whoweare-box p{ font-size: 14px; line-height: 26px; color: #888; font-weight: 400;}

.mid-button{display: inline-block;
    position: relative;
    outline: 0;
    font-style: normal;
    font-weight: 600;
    padding: 11px 39px;
    font-size: 15px;
    line-height: 1.7em;
    border-radius: 5em;
    color: rgb(255, 255, 255);
    background-color: rgb(48, 39, 28);
    border-color: rgb(48, 39, 28);
}
.mid-button:hover{
    background-color: #ffb422;
    border-color: #ffb422;
    color:#000;
}
.profile-vid-sec{ background:url(../images/banner.jpg); background-attachment:fixed; background-size:cover; color:#fff; padding:7rem 0 }
.profile-vid-sec h2 span{display: inline; padding: 2px 5px; background: #ffb422}
.profile-vid-sec .d-flex{ gap:3rem }
.father-mother .text-center{
background: #f2b200;
    padding: 30px 10px 30px 10px;
    border-radius: 100px 100px 0 0;
}
.father-mother h5 {padding: 30px; text-align: center;
    background: #f8b300b8;
    font-size: 22px;
}


.playImage{max-width: 100%; height: auto; cursor: pointer;}

.testimoanils-sec{background:url(../images/h1-parallax-3.jpg); background-attachment:fixed; background-size:cover; }
.testimonial-text-inner{
    text-align: left;
    background-color: #fff;
    padding: 42px 38px;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, .06);
    position: relative;
    margin: 5px 5px 40px;
    min-height: 190px;
}
.testimonial-text-inner h4{ margin-bottom: 10px; font-size: 18px; line-height: 1.445em; color: #212121}
p.testimonial-text{ margin: 0}
.testimonial-arrow {
    position: absolute;
    bottom: -15px;
    left: 27px;
    width: 0;
    height: 0;
    border-right: 9px solid transparent;
    border-top: 15px solid #ffb422;
    border-left: 9px solid transparent;
}
.testimonial-carousel-bottom {
    display: table;
    width: 100%;
    margin-bottom: 15px;
}
.testimonial-image-holder {
    width: 70px;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    padding-right: 14px;
    box-sizing: content-box;
}
.testimonial-image-holder img {
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
    border-radius: 50%;
}

.testimonial-author {
    display: table-cell;
    vertical-align: middle;
}
.testimonial-author-text {
    margin: 0;
    color: #212121;
    font-weight: 700;
}
.testimonials-job {
    font-family: Merriweather, serif;
    color: #934027;
    font-size: 14px;
    line-height: 30px;
}

.quote-bottom{
    padding-top: 36px !important;
    padding-bottom: 41px !important;
    background-color: #9fcf5d !important;
    /*text-align: center;*/
    color: #000;
    text-shadow: 0 1px 1px #c4ff5b;
}
.quote-bottom span{ display: block; padding-bottom: 15px; font-size: 18px;}

.rt-newsletter h4{padding-bottom: 15px}
.rt-newsletter p{margin: 0; padding: 0;}
.rt-newsletter .wpcf7-form input[type=email]{margin: 0; border-radius: 50px 0 0 50px; border: 0}
.rt-newsletter input.wpcf7-form-control.wpcf7-submit{margin: 0; border-radius: 0 50px 50px 0}
.rt-newsletter .wpcf7-spinner{position: absolute;}
.rt-newsletter .wpcf7 form .wpcf7-response-output{ margin: 0}

footer.site-footer .widget-title{ color:#fff }
footer.site-footer{
  background: #141414;
  color: #c7c7c7;
  font-size: 14px;
}
footer .widget-area{
    padding: 5rem 0;
}

footer .site-info{
     background: #000;
  color: #828282;
  font-size: 14px;
  padding: 5px 0;
}
footer .site-info a{color: #ffb422;}

#menu-primary-menu-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.widget #menu-primary-menu-1 a{
    color: #c7c7c7;
    font-family: Merriweather, serif;
    text-decoration: none;
}

.widget #menu-primary-menu-1 a:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #ffb422;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.widget #menu-primary-menu-1 a:hover{
    color: #ffb422;
}



/* Inner  */

.inner-header{background: #f6f4ee; padding: 3rem 0; text-align: center;}

.wpcf7-form input[type=text], .wpcf7-form input[type=email], .page-template-page-contact .site textarea{
    width: 100%;
    margin-bottom: 20px;
    padding: 15px 19px;
    border: 1px solid #e1e1e1;
    outline: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    background-color: #f6f4ee;
    color: #888;
    vertical-align: middle;
    -webkit-appearance: none;
    border-radius: 5px;
}

input.wpcf7-form-control.wpcf7-submit {
    display: inline-block;
    width: auto;
    font-family: 'Open Sans', sans-serif;
    padding: 12px 40px;
    line-height: 1.7em;
    border: 2px solid #ffb422;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background-color: #ffb422;
    border-radius: 5em;
    cursor: pointer;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    transition: all .15s ease-out;
}
.contact-txt{font-size: 16px; color: #666}
.contact-txt h4{font-size: 20px; color: #000; padding-bottom: 5px;}

    .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .video-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            background: #000;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            animation: scaleIn 0.3s ease;
        }

        @keyframes scaleIn {
            from { 
                transform: scale(0.8);
                opacity: 0;
            }
            to { 
                transform: scale(1);
                opacity: 1;
            }
        }

        .close-button {
            position: absolute;
            top: 0px;
            right: 0px;
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 24px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .close-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

/* ====================== */
/* =====  Responsive  ===== */
/* ====================== */

@media only screen and (max-width: 1440px) {
    .container, .container-header{max-width: 1170px; margin: auto;}
    div#n2-ss-2 .n2-ss-slide-limiter{max-width: 1170px !important; margin: auto;}
    .slider-heading h2{ font-size:66px !important }
    .testimonial-text-inner{min-height: 220px;}
}

@media (max-width: 1180px) {
    .container, .container-header{max-width:94%; margin: auto;}
    div#n2-ss-2 .n2-ss-slide-limiter{max-width:94% !important;}
    .slider-heading h2{ font-size:54px !important }
    .slider-content p{ font-size:16px !important }
    .profile-vid-sec .justify-space-between,
    .profile-sec .justify-space-between{gap: 2rem}
}
@media (max-width: 820px) {
    .four-boxes{grid-template-columns: 1fr 1fr}
    .slider-heading h2{ font-size:44px !important }
    img, figure{max-width: 100% !important; height: auto}
    .profile-vid-sec .justify-space-between, .profile-sec .justify-space-between, footer .site-info .justify-space-between{
        flex-direction: column;
    }
    .profile-vid-sec .justify-space-between .half, .profile-sec .justify-space-between  .half{
        width: 90%;
        margin: auto;
        justify-content: center;
    }
    footer .widget-area section{margin-bottom: 20px;}
    footer .site-info{padding: 15px 0;}

    .about-two-grid, .whoweare-sec .d-grid{grid-template-columns: 1fr; gap: 1rem;}
    .about-four-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 800px) { 
    body.home header#masthead, header#masthead{position: static; background: #fff}
    .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img{filter: invert(1);}
    .menu-button-container #primary-mobile-menu{margin-top: 40px}
    .primary-navigation a:link, .primary-navigation a:visited {
       color: #000 !important;
    }
    .primary-navigation .current-menu-item > a:link, .primary-navigation .current-menu-item > a:visited {
        color: #ffb422 !important;
    }
    .primary-navigation > .primary-menu-container{top:50px !important}
    .quote-bottom span{ display: block; padding-bottom: 15px; font-size: 14px;}
}
@media (max-width: 767px) {
    .slider-heading h2{ font-size:34px !important }
    .profile-vid-sec h2{font-size: 32px}
    .profile-sec h3{ font-size:22px; }

    .modal-content {
        max-width: 95%;
        max-height: 85%;
    }
    .quote-newsletter{flex-direction: column; gap: 2rem}

}
@media (max-width:480px) {
    .quote-bottom input.wpcf7-form-control.wpcf7-submit{padding: 12px 20px;}
    .top-strip{display: none;}
     .menu-button-container #primary-mobile-menu{margin-top: 0px}
    .slider-heading h2{ font-size:28px !important }
    .slider-content{display: none;}
    .four-boxes, .contact-top-sec { grid-template-columns: 1fr;}
    .contact-right { order: 1;}
    .contact-left{ order: 2;}
    .father-mother h5{padding: 25px 20px; font-size:18px}
    .father-mother .text-center{border-radius: 30px 30px 0 0;}
    footer .widget-area { padding: 0;}
    #youtubeIframe1{height: 320px}

    .profile-vid-sec h2 {
        font-size: 26px;
        text-align: center;
    }
}