@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Hammersmith+One&display=swap');








*{
    margin: 0;
    padding: 0;
}
body{
 


font-family: 'Cabin', sans-serif;
}











header,#phoneside {font-family: 'Hammersmith One', sans-serif;}






h1{
    font-family: 'Playfair Display', serif;
}

#heading>div>div{
    font-weight: 900;

}
/* navbar start */
#bar1,
#bar2,
#bar3 {
    background-color: gray;
    width: 16px;
    height: 3px;
    margin-top: 4px;
    transition: all 0.5s;
}

#bar1 {
    margin: 0;
}
#fixednavebar{
    top: 0; /* Adjust as needed */
    left: 0; /* Adjust as needed */
    width: 100%;
}

#fixednavebar ul>div{
    font-family: 'Playfair Display', serif;;
}
#responsiveclosemenu {
    transition: all 0.3s ease;

}

#responsiveclosemenu #bar1 {
    transform: rotate(-53deg);
}

#responsiveclosemenu #bar2 {
    transform: rotate(51deg);
    margin: -3px 0 0;
}

#responsiveopenmenu:hover .bar,
#responsiveclosemenu:hover .bar {
    background: white
}

#menu div {
    position: relative;
}

#menu div div>div {
    cursor: pointer;
    text-decoration: none;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    height: 100%;
}

#menu ul {
    position: absolute;
    width: 400px;
    display: none;
    z-index: 10;

    background: #fff;
    padding: 20px;

    border: 0.5px solid rgb(191, 187, 187, 0.5);
    border-left: 0;
    border-top: 0;



}
#menu li a:hover{
    text-decoration: underline;
}

#bombaymenu {
    box-shadow: -20px 0 0 0 #FF1493;



}

#bombaymenu div {
    color: #FF1493;
}

#mumbaimenu {

    box-shadow: -20px 0 0 0 #01a77b;
}

#mumbaimenu div {
    color: #01a77b;
}


#delhimenu {

    box-shadow: -20px 0 0 0 #FF4500;

}

#delhimenu div {
    color: #FF4500;
}

#menu ul div {
    margin-top: 15px;
    margin-bottom: 23px;
    font-size: 20px;
}

#menu ul li {
    font-weight: 400;
    font-size: 16px;
}

#sidemenu>div {
    position: relative;
    list-style: none;
    height: 100%;
}

#sidemenu>div>div {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    height: 100%;
    

}


#sidemenu ul {
    position: absolute;
    width: 250px;
    display: none;
    padding: 0 0 10px 20px;
    border: 0.5px solid rgb(191, 187, 187, 0.5);
    background: #f4f4f4;
    border-top: 0;
    z-index: 100;
   
}

#sidemenu ul div {
    padding: 20px 0 20px 0;
    font-weight: bold;
}
#sidemenu ul li{
    font-size: 15px;
    transition: all 0.5s;
}

#sidemenu ul li:hover{
    text-decoration: underline;
}
/* for menu small */



#phoneside {
    background-color: #f4f4f4;
    transition: all 0.5s;
}
#phoneside div{
    cursor: pointer;
}
#phnmenu>div>div{
    font-weight: 600;
} 

#phoneside ul{
    display: none;
    transition: 0.5 all;
}
.side {
    right: 0;
}

.submenu{
    font-size: 13px
}
#phoneside li a:hover{
    text-decoration: underline;

}
/* navbar end */

/* carosel */
.carousel-container {
    width: 100%;
    margin: auto;
    top: 113px;
    overflow: hidden;

}

.carousel-track {
    position: relative;
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
}


.carousel-dots {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    background-color: #fdfaf5;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: #0067a1;
}

.carousel-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    border: none;
    background-color: hsla(0, 0%, 100%, .25);
    height: 34px;
    width: 34px;
    border-radius: 50%;

}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.carousel-item div{
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

.img1 {
    background-image: url("../images/1.jpg");
}

.img2 {
    background: url("../images/2.jpg");
}

.img3 {
    background: url("../images/42.jpg");
}


.img4 {
    background: url("../images/41.jpg");
}


.img5 {
    background: url("../images/41.jpg");
}


.img6 {
    background-image: url("../images/110.jpg");
}

.img7 {
    background-image: url("../images/112.jpg");
}


.img8 {
    background-image: url("../images/137.png");
}


.img9 {
    background-image: url("../images/113.jpg");
}


.img10 {
    background-image: url("../images/135.png");
}


.img11 {
    background-image: url("../images/122.jpg");
}


.img12 {
    background-image: url("../images/123.jpg");
}



.img13 {
    background-image: url("../images/124.jpg");
}



.img14 {
    background-image: url("../images/125.jpg");
}


.img15 {
    background-image: url("../images/126.jpg");
}

.img16 {
    background-image: url("../images/128.jpg");
}


.img17 {
    background-image: url("../images/129.jpg");
}

.img18 {
    background-image: url("../images/LansdowneCantonmentBoardCollaborationWithChildChapterAssociation.jpg");
}



.carousel-btn img {
    height: 20px;
    width: 20px;
    margin: auto;
    fill: #bbb;
}

.carousel-btn:hover{
    background-color: #002b59;
    
}
.carousel-btn:hover {
    background-color: #002b59;
    color:white;
    
}



/* care */
.circle{
    height: 200px;
    width: 200px;
    border:6px solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    transition: transform 0.3s ease;
    
}
.circle:hover{
    transform: scale(1.2);
    z-index: 10;
    color: white;
}

.circle1{
   
    position: absolute;
    left: 0px;
    top: 101px;
    border-color: rgb(238, 44, 130);
   
}
.circle1:hover{
    background: rgb(238, 44, 130);
    
}
.circle2{
   
    border-color: #FF4500;
}
.circle2:hover{
    background-color:#FF4500; 
}
.circle3{
    
    border-color: #01a77b;
}
.circle3:hover{
    background-color: #01a77b;
}

/*  */
.explore button:hover{
    background: #002b59;
    color: white;
    transition: all 0.5s;
}
/* new carosa;l */
.custom-carousel-container {
    position: relative;
    margin: auto;
    overflow: hidden;
  }

  .custom-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;

  }

  .custom-carousel-item {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
    gap: 3rem;
    font-weight: 600;
   
  }
  .custom-carousel-track>div div{
    padding: 10px 10px 10px 10px;
  }
  .custom-carousel-item div:hover{
    background-color: #002b59;
    color: white;
    transition: all 0.5s;
  }
  .custom-carousel-item span{
    color: #165ba4;
  }

  .custom-carousel-item div {
    background:#ebf5f8;
    border-radius: 15px;
  }

  .custom-carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .custom-dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
  }

  .custom-dot.active {
    background-color: #0067a1;
  }

  .custom-carousel-btn {
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    border: none;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    margin-top: 20px;
  }

  .custom-prev {
    left: 10px;
  }

  .custom-next {
    right: 10px;
  }

  .custom-carousel-btn img {
    height: 20px;
    width: 20px;
    margin: auto;
    fill: #bbb;
  }

  .custom-carousel-btn:hover {
    background-color: hsla(0, 0%, 73%, 0.25);
  }

  .explores img{
    transition: all 0.5s;
  }
  .explores img:hover{
    transform: scale(1.05);
  }

  /* founder */
  .founder-carousel-container {
    width: 100%;
    margin: auto;
    top: 113px;
    overflow: hidden;
  }

  .founder-carousel-track {
  
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .founder-carousel-item {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
  }

  .founder-carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .founder-dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
  }

  .founder-dot.active {
    background-color: #0067a1;
  }

  .founder-carousel-btn {
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    border: none;
    background-color: hsla(0, 0%, 100%, .25);
    height: 34px;
    width: 34px;
    border-radius: 50%;
  }

  .founder-prev {
    left: 10px;
  }

  .founder-next {
    right: 10px;
  }

  .founder-carousel-item div {
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .founder-carousel-btn img {
    height: 20px;
    width: 20px;
    margin: auto;
    fill: #bbb;
  }

  .founder-carousel-btn:hover {
    background-color: #002b59;
  }

  .founder-carousel-btn:hover {
    background-color: #002b59;
    color: white;
  }




















































.family{
    background: url("../images/educationbg.jpg");
}




section{
    padding-bottom: 30px;
}
section button:hover{
    background-color: #002b59;
    color: #fff;
}









.science {
    background: url('../images/background.jpg');
}









section button:hover {
    background: #002b59;
}

section{
    margin-bottom: 60px;
}
/* team */
.icon {
    margin-bottom: 30px;
}










.pink {
    background: url('../images/pinkbackground.jpg');
}







.pink1 {
    background: url('../images/pink1background.jpg');
}






















.index {
    background: url('../images/nearfooterbackground.jpg');
}







.blue {
    background: url('../images/bluebackground.jpg');
}































































































/* footer */
.footermenu ul li:nth-child(1){
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 23px;
}

.footermenu ul li{
    font-size: 13px;
}

footer li {
    transition: 0.5 all;
}
footer li:hover{
    color:#17d6e3;
    text-decoration: underline;
}
.footermenu ul li{
    margin-bottom: 15px;
}
.icon i{
    color: #17d6e3;
    font-size: 24px;
}
.icon i:hover{
   color: white;
}
.footermenu ul li:nth-child(1){
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 23px;
}

.footermenu ul li{
    font-size: 13px;
}

footer li {
    transition: 0.5 all;
}
footer li:hover{
    color:#17d6e3;
    text-decoration: underline;
}
.footermenu ul li{
    margin-bottom: 15px;
}
.icon i{
    color: #17d6e3;
    font-size: 24px;
}
.icon i:hover{
   color: white;
}

@media only screen and (max-width: 1024px) {
    .carousel-item {
        flex-direction: column-reverse;
    }
  }

  @media only screen and (max-width: 640px) {
    .custom-carousel-item{
        gap: 1rem;
    }
  }