html{
    scroll-behavior: smooth;
}
@keyframes headingGradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes appear {
    from{
        opacity: 0;
        
        transform: scale(0.7);
     
    }
    to{
        opacity: 1;
       
        transform: scale(1);
      

    }
}
@keyframes slide-left {
    from{
        opacity: 0;
        transform: translateX(20%);
        
    }
    to{
        opacity: 1;
        transform: translateX(0);
        
    }
}

@keyframes slide-out {
    from{
        opacity: 0;
        transform: translateX(-100px);
       
    }
    to{
        opacity: 1;
        transform: translateX(0px);
        

    }
}
@keyframes slide-top-bottom {
    from{
        opacity: 0;
        transform: translateY(80px);
       
    }
    to{
        opacity: 1;
        transform: translateY(0px);
     
    }
}
@keyframes slide-in {
    0%{
        transform: translateY(-90px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.aboutus-heading{
    margin-top: 100px;
    text-align: center;
    color: #00529C;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    animation:slide-in 2s ease forwards;

}
.aboutus-name{
    padding-top: 20px;
    width: 96%;
    height: 100px;
    background: linear-gradient(270deg, #cad0ff, #e3e3e3);
    background-size: 400% 400%;
    animation: headingGradientAnimation 6s ease infinite; 
    border-radius: 20px;
   

}
@media(max-width:700px){
    .aboutus-name{
        font-size: 20px;
    }
    
}

.desc1 p{
    text-indent: 50px;
}
.desc2 p{
    text-indent: 50px;
}
.desc3 p{
    text-indent: 50px;
}
.desc5 p{
    text-indent: 50px;
}

.aboutus_container1{
    margin: 20px 30px 30px 30px;
    padding: 20px;
    height: auto;
    width: 96%;
    background: linear-gradient(to right, #cad0ff, #e3e3e3);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
     animation: headingGradientAnimation 6s ease infinite; 
}

.aboutus_text{
    height:65vh;
    width: 40%;  
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation :slide-out 1s linear;
   

}

.aboutus_image{
    height: vh;
    width: 50%;
   background-size: cover;
   animation :slide-left 1s ease-in-out;
   

  
}

.asaram_photo{
    height: 100%;
    width: 100%;
    border: 6px outset  #cad0ff;
    border-radius: 20px;
   /* #e3e3e3 */
}
.about1{
    margin-bottom: 10%;
    font-size: 45px;
    color: #00529C;
    font-weight: 200;
    
}

.about3{
    font-size:40px;
    margin-bottom: 6%;
    color: #00529C;
}

.aboutus_button{
    height: 50px;
    width: 150px;
    border-radius: 25px;
    color: white;
    background-color: #00529C;
    padding-left: 5px;
    padding-top: 15px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20%;
    animation: bounce 1s infinite; 
    animation-play-state: running; 

}
.aboutus_button:hover{
    animation-play-state: paused;
}



@media(max-width:700px){
    .aboutus_container1{
        flex-direction: column;
        width: 95%;
        margin: 10px;
        
    }

    .aboutus_text{
        height:70%;
        width: 100%;
    }
    .aboutus_image{
        height: 105%;
        width:105%
    }
}
.aboutus_container2{
    height: auto;
   
    width: 96%;
    margin:30px;
    padding: 20px;
    /* border: 1px solid black; */
    border-radius: 25px;
    padding: 50px;
    background: linear-gradient(to right, #cad0ff, #e3e3e3);
    background-size: cover;
}
.maindesc{
    font-size: 20px;
    /* font-weight: ; */
    margin-bottom: 25px;
    animation :slide-out 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;

  
}

.desc4{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    animation :slide-left 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;

}
.os1{
    height: 20%;
    width: 96%;
   color: white;
   background-color: rgb(41, 59, 159);
  

}

.desc0{
    text-align: center;
    font-size: 25px;
    color: #00529C;
    font-weight: 600;
}

@media(max-width:700px){
   

    .aboutus_container2{
        width:95%;
        padding: 20px;
        margin: 10px;
    }
}



/* animation of counting */

.aboutus_counter-box {
    display: inline-block;
    margin: 20px;
    text-align: center;
    font-family: Arial, sans-serif;
    width: 30%;
    background-color: #2457a7; /* Apply background color to the boxes */
    padding: 20px;
    border-radius: 8px; /* Optional: Adds a smooth border */
}

.aboutus_counter {

    font-size: 48px;
    font-weight: bold;
    color: white; /* Set number color to white */
}

.aboutus_counter p {
    margin-top: 10px;
    font-size: 18px;
    color: white; /* Set the text color to white */
}

/* Responsive design for screens with max width of 700px */
@media only screen and (max-width: 700px) {
    .aboutus_counter-box {
        width: 100%; /* Full width on smaller screens */
        margin: 10px 0;
    }

    .aboutus_counter {
        font-size: 36px; /* Smaller font size for numbers */
    }

    .aboutus_counter p {
        font-size: 16px; /* Smaller font size for text */
    }
}