#about-us-section{
    
}
#about-us-section #about-us-inner-container{
min-height: 100vh;
padding-block: 50px;
}
#about-us-section #about-us-form-container{
display: flex;

    gap: 80px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
#about-us-section #about-us-heading{
display: flex;
flex-direction: column;
align-items: center;
}
#about-us-section #about-us-info{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
    padding: 0 110px;

}
#about-us-section #about-us-heading p{
    font-size: 50px;
    font-weight: 600;
}
#about-us-section #about-us-logo > div {
  
    position: absolute;
    height: 100px;
    width: 100px;
    background: linear-gradient(45deg,rgb(212, 0, 255),rgb(232, 142, 255));
    display: flex;
    justify-content: center;
    align-items: center;
    /* clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); */
    border-radius: 30% 70% 50% 50% / 68% 58% 42% 32% ;
    animation: cloud 2s linear infinite;
}
#about-us-section #about-us-logo >div:nth-child(1) {
top: -37px;
    left: 52px;

}
#about-us-section #about-us-logo > div h3{
   font-size: 29px;
   font-weight: 700;
   text-align: center;
}
#about-us-section #about-us-logo > div p{
   font-size: 11px;
   font-weight: 700;
}
#about-us-section #about-us-logo img{
width: 500px;
border-radius: 27px;
}
#about-us-section #about-us-logo div h2{
    font-size: 70px;
    font-weight: 700;
    /* color: #EE8F21; */
color:white;
}

@keyframes cloud {
    0% {
        transform: translate(0);
    }
    
    20% {
        transform: translate(-4px, 4px);
    }
    
    40% {
        transform: translate(-4px, -4px);
    }
    
    60% {
        transform: translate(4px, 4px);
    }
    
    80% {
        transform: translate(4px, -4px);
    }
    
    100% {
        transform: translate(0);
    }
    
}

#about-us-section #about-us-form > div{
    width: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 40px;
}
#about-us-section #about-us-form form{
      gap: 30px;
    width: 100%;
    display: flex;
    border-radius: 10px;
     background: linear-gradient(45deg,rgba(13, 0, 255, 0.651),rgba(142, 232, 255, 0.61));
    padding: 50px 30px;
    flex-direction: column;

}
#about-us-section #about-us-form form > div{
width: 100%;
display: flex;
justify-content: center;
background:white ;
align-items: center;
position: relative;
 border-radius: 10px;

}
#about-us-section #about-us-form form > div span{
position: absolute;
left: 24px;
z-index: 0;
transition: .3s;

}
#about-us-section #about-us-form form > div input{
    z-index: 1;
 width: 100%;
 background: transparent;
 padding: 10px;
 border-radius: 10px;
 border-color: rgb(66, 66, 66);
 outline: none;
}
#about-us-section #about-us-form form > div input:focus ~ span{
left: 85%;

}
#about-us-section #about-us-form form #pnone-no input:focus ~ span{
left: 75%;

}
#about-us-section #about-us-form textarea{
  z-index: 1;
 width: 100%;
 background: transparent;
 padding: 10px;
 border-radius: 10px;
 border-color: blue;
 outline: none;
}
#about-us-section #about-us-form form > div button{
background-color: #EE8F21;
color: black;
padding: 10px 30px;
width: 100%;
border: none;
border-radius: 6px;
}
#about-us-section #about-us-details-button {
    margin-top: 60px;
display: flex;
width: 100%;
gap: 30px;
justify-content: center;
}
#about-us-section #about-us-details-button > div {
width: 380px;
display: flex;
flex-direction: column;
align-items: start;
padding: 10px 20px;
justify-content: start;
border-radius: 10px;
   border: 2px solid blue;
}
#about-us-section #about-us-details-button > div h3{
font-size: 30px;
font-weight: 600;
color: #EE8F21;
}
#about-us-section #about-us-address-detail p{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 600;

}
#about-us-section #about-us-details-button > div span{
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
    background: linear-gradient(45deg,rgb(13, 0, 255),rgb(142, 232, 255));

border-radius: 50%;
height: 45px;
width: 45px;
}
#about-us-section #about-us-details-button > div svg{
width: 30px;
height: 30px;
fill: hsl(0, 0%, 100%);
}

#about-us-section #about-us-about-details > div{
width: 100%;
display: flex;
justify-content: start;
}
#about-us-section #about-us-about-details a{
display: flex;
justify-content: start;
align-items: center;
text-decoration: none;
gap: 10px;
background: transparent;
outline: none;
border: none;
margin-bottom: 5px;
cursor: pointer;
padding: 5px;
border-radius: 10px;
width: 100%;
transition: .4s ;
font-size: 18px;
font-weight: 600;
}

#about-us-section #about-us-about-details a:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.493);

}


@media only screen and (max-width: 1320px) {
    #about-us-section #about-us-form-container {
    gap: 23px;

}
#about-us-section #about-us-logo img {
    width: 400px;
    border-radius: 20px;
}
.blob-ring .blob {

    width: 80px;
    height: 80px;

}
.blob-container .blob-info h3 {
    font-size: 45px;

}
.blob-container  .blob-info p {
    font-size: 12px;
  
}
}
@media only screen and (max-width: 1120px) {
    #about-us-section #about-us-form-container {
    gap: 20px;

}
#about-us-section #about-us-heading > h2 {
font-size: 25px;
}
#about-us-form-container #about-desc{
font-size: 16px;
}
#about-us-section #about-us-heading p {
    font-size: 45px;
}
#about-us-section #about-us-logo img {
    width: 370px;
    border-radius: 17px;
}
.blob-ring .blob {

    width: 72px;
    height: 72px;

}
.blob-container .blob-info h3 {
    font-size: 40px;

}
.blob-container  .blob-info p {
    font-size: 12px;
  
}
}


@media only screen and (max-width: 1020px) {
    #about-us-section #about-us-form-container {
    gap: 20px;

}
#about-us-section #about-us-heading > h2 {
font-size: 23px;
}
#about-us-form-container #about-desc{
font-size: 14px;
}
#about-us-section #about-us-heading p {
    font-size: 40px;
}
#about-us-section #about-us-logo img {
    width: 330px;
    border-radius: 15px;
}
.blob-ring .blob {

    width: 62px;
    height: 62px;

}
.blob-container .blob-info h3 {
    font-size: 34px;

}
.blob-container  .blob-info p {
    font-size: 10px;
  
}
#about-us-section #about-us-info {

    padding: 0 40px!important;
}
#our-mission-section {
    gap: 20px!important;
}
}
@media only screen and (max-width: 920px) {
    #blob-outer-container {
 padding-block: 15px!important;
    gap: 37px!important;
 
}
    #about-us-section #about-us-form-container {
    gap: 10px;

}
#about-us-section #about-us-heading > h2 {
font-size: 22px;
}
#about-us-form-container #about-desc{
font-size: 13px;
}
#about-us-section #about-us-heading p {
    font-size: 38px;
}
#about-us-section #about-us-logo img {
    width: 310px;
    border-radius: 13px;
}
.blob-ring .blob {

    width: 55px;
    height: 55px;

}
.blob-container .blob-info h3 {
    font-size: 32px;

}
.blob-container  .blob-info p {
    font-size: 10px;
  
}
#our-mission-container {

    font-size: 14px;
  
}
#our-mission-cards-container {
    font-size: 14px;
   
    gap: 10px!important;
}

#about-us-section #about-us-info {

    padding: 0 20px!important;
}
#our-mission-section {
    gap: 10px!important;
}
}
@media only screen and (max-width: 820px) {
#about-us-section #about-us-form-container {

    flex-direction: column;
}
    #about-us-section #about-us-logo img {
        width: 700px;
        border-radius: 30px;
    }
        #about-us-section #about-us-heading > h2 {
        font-size: 26px;
    }
        #about-us-section #about-us-heading p {
        font-size: 50px;
    }
        #about-us-form-container #about-desc {
        font-size: 16px;
    }
    .blob-ring .blob {
        width: 100px;
        height: 100px;
    }
    #our-mission-section {
    flex-direction: column-reverse;
}
}
@media only screen and (max-width: 720px) {

    #about-us-section #about-us-logo img {
        width: 600px;
        border-radius: 30px;
    }
        #about-us-section #about-us-heading > h2 {
        font-size: 24px;
    }
        #about-us-section #about-us-heading p {
        font-size: 45px;
    }
        #about-us-form-container #about-desc {
        font-size: 15px;
    }
    .blob-ring .blob {
        width: 80px;
        height: 80px;
    }
}
@media only screen and (max-width: 620px) {

    #about-us-section #about-us-logo img {
        width: 500px;
    }
        .blob-container .blob-info h3 {
        font-size: 28px;
    }
        #about-us-section #about-us-heading > h2 {
        font-size: 22px;
    }
        #about-us-section #about-us-heading p {
        font-size: 40px;
    }
        #about-us-form-container #about-desc {
        font-size: 14px;
    }
        #blob-outer-container {
        padding-block: 15px !important;
        gap: 30px !important;
    }
    .blob-ring .blob {
        width: 60px;
        height: 60px;
    }
}
@media only screen and (max-width: 520px) {
#about-us-section #about-us-info {
  
    padding: 0 20px;
}
    #about-us-section #about-us-logo img {
        width: 400px;
    }
    .blob-container {

    width: 40%;
   
}
        .blob-container .blob-info h3 {
        font-size: 30px;
    }
        .blob-container .blob-info p {
        font-size: 13px;
    }
   
        #blob-outer-container {
        padding-block: 15px !important;
        gap: 20px !important;
        flex-wrap: wrap!important;
    }
    .blob-ring .blob {
        width: 80px;
        height: 80px;
    }
    #image-container {
    height: 250px!important;
    width: 100%!important;

}
#our-mission-container h2 {
 
    font-size: 32px!important;
}
#our-mission-container span {
    font-size: 32px!important;

}
#our-mission-cards-container h3 {
    font-size: 25px!important;
}
    #our-mission-container {
        font-size: 13px;
    }
        #our-mission-cards-container {
        font-size: 13px;
    }
}
@media only screen and (max-width: 420px) {
#about-us-section #about-us-info {
  
    padding: 0 20px;
}
    #about-us-section #about-us-logo img {
        width: 300px;
    }
    .blob-container {

    width: 40%;
   
}
    #about-us-section #about-us-heading > h2 {
        font-size: 19px;
    }

    #about-us-section #about-us-heading p {
        font-size: 30px;
    }
        #about-us-form-container #about-desc {
        font-size: 12px;
    }

        .blob-container .blob-info h3 {
        font-size: 30px;
    }
        .blob-container .blob-info p {
        font-size: 13px;
    }
   
    
    .blob-ring .blob {
        width: 55px;
        height: 55px;
    }
        #about-us-section #about-us-info {
        padding: 0 10px!important;
    }
        #our-mission-container h2 {
        font-size: 27px !important;
    }
        #our-mission-container span {
        font-size: 27px !important;
    }
        #our-mission-container {
        font-size: 12px;
    }
        #our-mission-cards-container {
        font-size: 10px;
    }
}