@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Jost:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:wght@300..700&display=swap');
*{
    margin:0;
    padding:0;
    font-family: "Jost", sans-serif;
}

/* topnav */

.topbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px;
    background-color: rgb(227, 46, 76);
}
.contactinfo{
    margin-left: 10%;
}
.contactinfo span{
    margin-right:15px;
    font-size: 15px;
    color:white;
}

.media{
    display: flex;
    margin-right:5%;
}

.links{
    color:white;
    margin:0 5px;
    text-decoration:none;
    font-size:13px;
    border:1px solid rgb(236, 120, 120);
    padding:5px;
    border-radius: 3px;
    transition: color 0.3s ease ;
}
.links:hover{
    background-color: rgb(238, 104, 55);
}

@media(max-width:1020px) {
    .topbar{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .contactinfo{
        flex-direction: column;
        align-items: center;
        gap:10px;
        margin-left:-10px;
        margin-bottom: 10px;
    }
    .media{
        justify-content: center;
    }
}

@media(max-width:640px){
     .topbar{
        display: none;
     }
    
}

/* Navbar */

.navbar{
    display: flex;
    align-items:center;
    padding:5px 10px;
    position:sticky;
    top:0;

}
.logo{
    display: flex;
   
}

.logo span{
    font-size:30px ;
    font-weight:500;
}
.navmenu{
    display: flex;
    list-style: none;
    font-weight: 500;
  
}


.nav a{
    display: block;
    color:black;
    padding: 15px 20px;
    text-decoration: none;
    font-size:17px;
}
.nav a:hover{
    color: rgb(234, 146, 68);
}

/* dropdownmenu */

.dropdown-menu{
    display: none;
    position:absolute;
    top:100%;
    left:0;
    background-color:rgb(255, 255, 255);
    list-style:none;
  

}
.dropdown-menu li a{
    padding:10px 20px;
    /* white-space:nowrap; */
}
.dropdown-menu li a:hover{
    background-color: rgb(244, 159, 62);
    color: white;
   
}
.nav.dropdown:hover .dropdown-menu{
    display: block;
}

.search{
    border:none;
    background:none;
}

.buttonani {
 padding: 15px 25px;
 border:none;
 border-radius: 15px;
 color: white;
 z-index: 1;
  padding:10px;
 background-color:#1CBBB4;
 position: relative;
 transition: all 0.5s;
 overflow: hidden;
}

.buttonani::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 0;
 border-radius: 3px;
 background-color:#73BE48;
 z-index: -1;
 transition: all 0.5s;
}

.buttonani:hover {
 color: #e8e8e8;
}

.buttonani:hover::before {
 width: 100%;
}


.navbar-toggler{
    display:none;
}
.offcanvas-header button{
    background-color: #e8932b;
    color:white;
}
.contactsinfo{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.contactsinfo .infos{
    color:rgb(56 84 105)
}
.contactsinfo span{
    color:gray;
}
.contactsinfo button{
    background-color: #F7941E;
    border:none;
    color:white;
}
.medias .links:hover{
     background-color: #F7941E;
     color:white;
}
@media(max-width:1290px){
    .navmenu{
        display: none;
    }
}
@media(max-width:1290px){
    .navbar-toggler{
      display:block;
}
}
@media(max-width:640px){
  .buttons{
    display: none;
  }
}
/* FirstPage */

.abouts{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aboutus h1{
    font-size: 70px;
    color:black;
    font-weight: 700;
}
.aboutus h3{
    font-size: 28px;
    color:black;
}
.breadimg{
    display: flex;
    flex-direction: column;
}
.catbread{
    margin-top: 50%;
    animation: moved 2s infinite alternate;
}
.childbread{
      margin-top: 40%;
     margin-left: -23%;
    animation:circle 2s infinite alternate;
    
}
.firstpge{
    background-color: #FFF0E5;
}
@media(max-width:350px){
    .breedimg .thumb{
        width:200px;
    }
}
@media(max-width:1030px){
      .aboutus h1{
          font-size: 40px;
     }
}

@media(max-width:1600px){
     .abouts{
        display: flex;
        flex-wrap: wrap;
     }
}
@keyframes moved{
    0%{
      transform:translateY(0) ;
      
    }
  100%{
    transform:translateY(-15px) ;
  }
    
}
 @keyframes circle{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-40px);
    }
}

/* 2nd page */
.contacts{
    display: flex;
    justify-content: space-around;
    
}
.location{
    text-align: center;
    padding:40px;
        background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.mails{
    text-align: center;
      padding:40px;
        background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.calls{
    text-align: center;
      padding:40px;
        background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.icons{
   margin-left:37%;
    width:70px;
    height:70px;
    background-color: #73BE48;
    border-radius:50% ;
    color:white;
    font-size: 30px;
    padding-top:14px;
    padding-left:5px; 
}
.location h5{
    font-size:20px;
    font-weight: 700;
    color:black
}
.mails h5{
    font-size:20px;
    font-weight: 700;
    color:black
}
.calls h5{
    font-size:20px;
    font-weight: 700;
    color:black
}
@media(max-width:1030px){
    .contacts{
        display:flex ;
        flex-wrap: wrap;
    }
}
/* 4thpage */
.educontact{
    text-align: center;
}
.shield{
    font-size: 45px;
}
.winner{
    display: flex;
    background-color: #e8932b;
    color:white;
    padding-left:20px;
    padding-top:15px;
    border-radius: 12px;
    position: absolute;
    bottom:30px;
    animation:circle 2s infinite alternate;
}
.contactimg{
    position: relative;
}
.img2{
    position: absolute;
    top:60px;
    left:0;
     animation: moved 2s infinite alternate;
}
.subcategory{
    display: flex;
    justify-content: space-between;
    border: 1px solid gray;
    align-items: center;
    border-radius: 12px; 
    /* padding:10px; */
}
.subcategory input{
    border: none;
}
.detail{
    display: flex;
}
.sendmsg button{
    border:none;
    background-color: #e8932b;
    color:white;
    
}
.wholecontact{
    display: flex;
    justify-content: space-around;

}
@media(max-width:1030px){
    .wholecontact{
        display: flex;
        flex-wrap: wrap;
    }
}
@media(max-width:500px){
    .imgs1 img{
        margin-left:40px;
        width:230px;
    }
    .img2 img{
        width:80px;
    }
    .shield{
    font-size: 20px;
    }
    .winner{
        display: flex;
        flex-wrap: wrap;
        width:100px;
        font-size: 10px;
        position: absolute;
        top:40%;
    }
    .sendmsg{
        width:300px;
    }
    .detail{
       display: flex;
       flex-wrap: wrap
    }
}
/* lastpage */
 .staytuned{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.staypge{
    background-color: #FFF0E5;
}
.staywith h5{
     font-family: "Bubblegum Sans", sans-serif;
      font-size: 19px;
      color:black;
}
.staywith h3{
      font-size: 28px;
      font-weight:700;
      color:black;
}
.readmores{
    background-color: #f7931e;
    border:none;
    color:white;
    transition: .5s ease;
}
.readmores:hover{
    background-color: white;
    border:1px solid #f7931e;
    color:#f7931e;
}
@media(max-width:998px){
    .staytuned{
        display: flex;
        flex-direction: column;
    }
    .stay1 img{
         width:300px;
    }
}

@media(max-width:768px){
    .stay1 img{
         width:200px;
    }
}
@media(max-width:568px){
    .stay1 img{
         width:150px;
    }
}
@media(max-width:338px){
    .stay1 img{
         width:100px;
    }
}
/* footerpage */
.list3 h5{
    font-size: 24px;
    font-weight: 700;
    color: white;
    border-bottom:1px solid white;
    width:80px;
}

.list3 li{
    list-style-type: none;
    color:white
}
.list4 h4{
    font-size: 24px;
    font-weight: 700;
    color: white;
       border-bottom:1px solid white;
    width:100px;
}
.list4 li{
    list-style-type: none;
      color:white
}
.list5 li{
     list-style-type: none;
     margin-right: 10px;
}
/* footer */
.footers{
    background-color: rgb(10 99 117);
    color:white;
  
}
.newsletter input{
    background-color: rgb(10 99 117);
    padding:10px;
    opacity:0.8;
    border:none;
    border-radius:12px;
    background-color: rgb(31, 118, 135);
 
}
.newsletter input::placeholder{
     color:white
}