/**** Global CSS Start ********/
*{
    font-family: "Poppins";
}
html,body{
    overflow-x:hidden;
}
h1{
    font-size: 55px !important;
    font-weight: 600 !important;
}
h2{
    font-size: 35px !important;
    font-weight: 600 !important;
    font-family: "Montserrat" !important;
}
h3{
    font-size: 20px !important;
     font-weight: 600 !important;
     font-family: "Montserrat" !important;
}
h4{
     font-size: 18px !important;
     font-weight: 600 !important;
     font-family: "Montserrat" !important;
}
h5{
    font-size: 16px !important;
    font-weight: 600 !important;
}
h6{
    font-size: 14px !important;
}
p{
    font-size: 16px !important;
    color: #111 !important;
}
.semibold_text{
    font-weight: 600 !important;
    color: #196AB2;
    font-family: "Montserrat" !important;
}
/**** Global CSS End ********/



/******** Header CSS ************/
header{
    background:#186AB4;
    border-radius: 0 0 30px 30px;
    position: fixed;
    width:100%;
    z-index: 99;
}
header nav{
    background-color:#FFF !important;
    border-radius: 0 0 30px 30px;
}
.logo_div{
    display:flex;
}
.header_sub{
    display:flex;
    align-items:center;
}
.header_location{
    text-align: center;
    padding: 0 20px;
    border-right: 2px solid #2388FF;
}
.header_location h5{
    color: #196AB2;
}
.trademark_logo{
    text-align: center;
    padding: 0 20px;
}
.gradient_btn{
    background: linear-gradient(to right, #5BC1D0, #1776B0) !important;
        padding: 15px 10px 18px 25px;
    border-radius: 30px;
    
}
.gradient_btn button{
    background: none !important;
    border:none;
    padding:0 !important;
    color:#fff;
}
.gradient_btn button img{
    height:30px;
    margin-left:10px;
}
.logo_div .trademark_logo img {
    width: 181px;
}
/******** Header CSS ************/



/******** Banner CSS Start ************/
#banner_section{
       padding: 168px 0 0;
    background: url(./images/banner_bg_sarja.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    min-height: 63vh;
}
section#banner_section div#enquire-now {
    position: absolute;
    right: 3%;
}
#banner_section h1{
    text-transform: uppercase !important;
    color:#fff;
    margin-top: 0;
}
section#banner_section .row {
    align-items: center;
}

.banner_col_1{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.banner_col_2{
    background: #FFF;
    border-radius: 10px;
    padding: 20px 25px !important;
    margin-bottom:50px;
}
/******** Banner CSS End ************/

/******** About Section CSS Start ************/
#about_section{
    padding: 80px 0;
     background-color: #edf9ff;
  background-image: url('./images/about_bg_element_1.png'), url('./images/about_bg_element_2.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: right 20%, left bottom;
  background-size: 100px auto, 150px auto;
}
#about_section .row{
    display:flex;
    align-items:center;
}
/******** About Section CSS End ************/


/******** Global Section CSS Start ************/
#global_section{
    padding: 60px 0;
    background: #edf9ff;
}
.blurb_col{
    background: #007DC5;
    padding: 20px 0 0 20px !important;
    border-radius: 40px 0 40px 40px;
    transition: 0.3s ease all;
}
.blurb_col:hover{
    background: #fff;
    
}
.blurb_col h5{
    color: #fff;
}
.blurb_col:hover h5{
    color: #007DC5;
}
.blurb_row{
    display:flex;
    justify-content: space-between;
}
/******** Global Section CSS End ************/



/******** Campuses Section CSS Start ************/
#campuses_section{
   background: url('./images/campuses_bg.svg');
   background-size:cover;
   background-repeat: no-repeat;
   padding: 60px 0;
}
#campuses_section h2{
    color: #fff;
}
.campuses_row img{
    margin-bottom: 20px;
    border-radius:40px 0 40px 40px;
}
.campuses_row h3,
.campuses_row p{
    color: #FFF !important;
    text-align: center;
}
#campuses_section a{
    text-decoration: none;
}
/******** Campuses Section CSS End ************/


/******** Classroom Section CSS Start ************/
#classroom_section{
    padding: 60px 0;
    background-color: #edf9ff;
  background-image: url('./images/bg_element\ \(3\).svg');
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom;
  background-size: 100px auto;
}
#classroom_section .row{
    align-items: center;
}
.classroom_lists{
    padding-left:20px;
}
.classroom_lists li{
    margin-bottom:30px;
}
.classroom_lists strong{
    font-weight: 500 !important;
    color: #196AB2 !important;
}

/******** Classroom Section CSS End ************/


/******** Facilities Section CSS Start ************/
#facilities_section{
    padding: 60px 0;
    background-color: #edf9ff;
 
}
#facilities_section img{
    border-radius: 20px 20px 0 0;
    z-index: 0;
    position: relative;
    height: 250px;
    object-fit: cover;
    width:100%;
}
.text_content{
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-top:-20px;
    z-index: 9;
     position: relative;
     min-height: 112px;
}
.text_content p{
 font-weight: 500 !important;
    color: #196AB2 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

/******** Facilities Section CSS End ************/


/******** Academic Section CSS Start ************/
#academic_section{
    padding: 60px 0;
     background-color: #edf9ff;
}

#academic_section .container{
     background: url('./images/campuses_bg.svg');
   background-size:cover;
   background-repeat: no-repeat;
   border-radius: 20px;
   padding: 60px 50px;
}

#academic_section h2{
    color: #FFF;
}
#academic_section .card_col{
    background: #FFF;
    border-radius: 10px;
    padding: 10px;
}
#academic_section .card_col .academic_image{
    border-radius: 10px;
    margin-bottom: 10px;
    height: 180px;
    object-fit: cover;
    width: 100%;
}
#academic_section .card_col .academic_logo{
    height: 60px;
    object-fit: contain;

}
#academic_section .card_col h5{
    font-family: "Montserrat" !important;
    font-weight: 600 !important;
    color: #196AB2 !important;
    font-size: 16px !important;
    text-align: center;
    margin: 10px 0 ;
}
#academic_section .card_col p{
   
    color: #464646 !important;
    font-size: 13px !important;
    text-align: center;
}

/******** Academic Section CSS End ************/



/******** Career Guidance CSS Start ************/
#career_guidance{
    padding: 60px 0;
     background-color: #edf9ff;
}
#career_guidance .left_col{
    background: url('./images/left_col_bg.svg') no-repeat;
    background-size: contain;
}

#career_guidance .right_image{
    border-radius: 30px 0 30px 30px;
    margin-left:30px;
}
/******** Career Guidance CSS End ************/


/******** Logo Slider CSS Start ************/
#logo_slider{
    padding: 60px 0;
    background-color: #edf9ff;
}
.logo-slick-slider img{
    height: 60px;
    object-fit: contain;
    width: 200px;
}
/******** Logo Slider CSS End ************/


/******** Development Slider CSS Start ************/

#development_slider{
     padding: 60px 0;
    background-color: #edf9ff;
}
.slider_content{
    display:flex !important;
    align-items:center;
    background: #007DC5;
    justify-content: space-between;
    gap:2%;
    padding: 20px;
    border-radius: 20px;
    margin:0 10px 0 35px;
}
.slick-next:before,
.slick-prev:before{
    content:unset !important;
}
.slider_content img{
    border-radius: 20px;
}
.slider_content>div{
    width: 48%;
}
.slider_content h3{
    font-size: 22px !important;
    margin-bottom: 30px;
    color: #FFF !important;
}
.slider_content p{
    color: #FFF !important;
}
/******** Development Slider CSS End ************/


/******** Testimonials Slider CSS Start ************/


#testimonials_slider{
     padding: 60px 0 100px;
    background: url('https://owis.org/in/india/sarjapur/images/sarjapur_testimonials_bg.svg') center 60px no-repeat;
    background-size: 350px;
}
#testimonials_slider .slick-track{
    display:flex;
    gap: 20px;
}
#testimonials_slider  iframe{
    width: 100% !important;
    height: 600px;
    border-radius: 10px;
}
#testimonials_slider video{
    width: 100% !important;
    height: 700px;
    border-radius: 10px;
    object-fit: cover;
}
#testimonials_slider .slick-list{
    margin:0 10px 0 25px;
}
/******** Testimonials Slider CSS End ************/



/******** Review Slider CSS Start ************/

.review_slider  .testimonial_content {
    background:#fff;
    padding: 30px;
    border-radius:30px;
    border-bottom:4px solid  #007DC5;
    border-right:4px solid  #007DC5;
}
.review_slider  .testimonial_content::before{
    content:url('./images/quote_icon.svg');
    position: absolute;
    /* left: 20px; */
    /* top: 0; */
    transform: scale(0.6) translate(-70px, -70px);
    z-index: 9999 !important;
}
.review_text{
    padding-top: 30px;
}
.review_slider  .testimonial_content 
.whitefield #testimonials_slider .slick-track{
    padding: 30px 0;
}
.review_info{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    margin-top:30px;
}
.review_info h5{
    font-family: "Montserrat" ;
    color:#196AB2;
}
.review_text{
    min-height: 120px;
}
.review_info p{
    color: #6D758F !important;
    font-size: 13px !important;
}
.review_info img{
    width: 100px;
    object-fit: contain;
}
.sarjapur section#testimonials_slider {
    background: url(https://owis.org/in/india/sarjapur/images/whitefield_testimonials_bg.svg) !important;

    background-size:30%;
    background-repeat: no-repeat;
}

/******** Review Slider CSS End ************/


/******** CTA Section CSS Start ************/
#cta_section{
     padding: 0px 0;
    background-image: url('./images/cta_section_element.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position:center left;
}
#cta_section .row{
    align-items: center;
}
#cta_section .lab_img{
    margin-top:-40px;
}
/******** CTA Section CSS End ************/


/******** Footer Section CSS Start ************/
#footer_section{
  background: url('./images/campuses_bg.svg');
   background-size:cover;
   background-repeat: no-repeat;
   padding: 60px 0;
}
.footer_logo {
    height: 70px !important;
    object-fit: contain;
}
.numbers_row .numbers{
    font-size: 50px !important;
    font-weight: 500 !important;
    color: #FFF !important;
    text-align: center;
}
.numbers_row p{
     color: #FFF !important;
     text-align: center;
}
.numbers_row >div{
    border-right: 1px solid #FFF;
}
.numbers_row >div:last-child{
    border:none;
}
/******** Footer Section CSS End ************/




/**** Media Queries Start ********/

@media screen and (max-width: 990px) {
 section#banner_section div#enquire-now {
    position: unset;
    }
}
@media(min-width: 992px){
    #academic_section .row{
        justify-content: space-between;
    }
    #academic_section .card_col{
        width: 23%;
    }  
    .whitefield #academic_section  .card_col{
       
            width:32%;
        
    }
    
}

@media(max-width: 981px){
    #cta_section{
        background:none;
        padding: 0px 0  50px;
    }
    #cta_section .row{
        gap: 20px;
    }
    #cta_section .lab_img{
        margin-top:-80px;
    }
   #cta_section .col-sm-12{
        text-align: center;
    }
    .numbers_row>div:nth-child(2),
    .numbers_row>div:nth-child(4){
        border:none;
    }
    .numbers_row .numbers{
        font-size:30px !important;
    }
}

@media(max-width: 768px){
 .header_cta{
    margin-top:20px;
    padding-bottom: 20px;
   }
    h1{
    font-size: 35px !important;
    font-weight: 600 !important;
}
h2{
    font-size: 25px !important;
    font-weight: 600 !important;
    font-family: "Montserrat" !important;
}
h3{
    font-size: 20px !important;
     font-weight: 600 !important;
     font-family: "Montserrat" !important;
}
h4{
     font-size: 18px !important;
     font-weight: 600 !important;
     font-family: "Montserrat" !important;
}
h5{
    font-size: 14px !important;
    font-weight: 600 !important;
}
h6{
    font-size: 12px !important;
}
p{
    font-size: 14px !important;
    color: #111 !important;
}
li{
    font-size: 14px !important;
    color: #111 !important;
}
.semibold_text{
    font-weight: 600 !important;
    color: #196AB2;
    font-family: "Montserrat" !important;
}



  
    .navbar-toggler, #collapsibleNavbar{
        display:block;
    }
    .navbar .container{
        justify-content: center !important;
    }
    .navbar-brand{
        text-align: center;
    }
    .logo_div{
    display:flex;
    align-items:center;
}
.logo_div>a{
    width: 30% !important;
}
.header_location{
    padding: 0 15px;
}
.header_sub{
    display:flex;
    align-items:center;
}
#global_section .blurb_col{
    margin-bottom: 20px;
}
#global_section .blurb_col h5{
    margin-bottom: 0px !important;
}
#career_guidance .right_image{
        margin-left:0;
    }
    .slider_content{
        display:block !important;
        margin:0 0px 0 10px !important;
    }
    .slider_content>div{
        width: 100%;
    }
    .slick-prev.slick-arrow
    {
        transform:scale(0.6);
    }
    .slick-next.slick-arrow{
        transform:scale(0.6) translateX(-10px);
    }

}


@media(max-width: 550px){
    .row{
        width: 95%;
        margin:auto !important
    }
    #banner_section{
        padding-bottom:50px;
        padding-top: 160px;
    }
    .gradient_btn{
        font-size:14px;
    }
    
    #about_section{
        padding:0 !important;
        background-image:unset;
    }
     #about_section .col-12{
        padding:0 !important;
     }
     #global_section .blurb_col h5{
    margin-bottom: 10px !important;
}
     #global_section .blurb_col img{
        height: 50px !important;
     }
     #global_section{
        padding: 40px 0;
     }
     #campuses_section{
        padding: 40px 0;
     }
     #classroom_section{
    padding: 40px 0;
     }
     #facilities_section{
    padding: 40px 0;
    }
    #facilities_section h2{
        margin-bottom:0 !important;
    }
    #facilities_section img{
        height: 200px;
    }
    .row .col-12:last-child{
        margin-bottom:0;
    }
    #academic_section{
        padding: 40px 0;
    }
    #academic_section .container{
        padding: 30px 20px;
        width: 90%;
    }
    #career_guidance{
        padding: 20px 0;
    }
    #logo_slider{
        padding-bottom:0;
    }
    .logo-slick-slider img{
        height: 60px;
        object-fit: contain;
        width: 100px;
    }
    #logo_slider .mt-5{
        margin-top:0 !important;
    }
    .slider_content h3{
        margin-top: 20px;
        font-size: 18px !important;
        margin-bottom:10px;
    }
    #development_slider .row>.text-center{
        margin-bottom:0;
    }
    #development_slider{
        padding-bottom: 20px;
    }
    #development_slider .row>.mt-5{
        margin-top: 15px !important;
    }
    #testimonials_slider .row>.mt-5{
        margin-top:15px !important;
    }
    #testimonials_slider iframe{
        height: 350px !important;
    }
    #testimonials_slider video{
   height: 600px !important;
}
    #testimonials_slider .slick-list{
        margin:0 !important;
    }
    .review_slider  .testimonial_content::before{
   
    transform: scale(0.6) translate(-50px, -50px);
    z-index: 9999 !important;
}
.whitefield #testimonials_slider{
   
    background-size:contain;
}
}
/**** Media Queries End ********/