/* body{
    margin: 0 5%;
} */
 section{
    margin-top: 70px;
 }
 .section-1{
    margin-top: 250px; 
 }
 .section-1 .left {
    margin-left: 0;
    padding: 0 var(--spacing-lg);
 } 
.section-1 .left h1{
    font-size: var(--font-size-6xl);
}
 
.section-1 .left ul li{
    font-size: var(--font-size-lg);
    text-align: justify;

}
.section-1 .left{
    flex: 1.5;
}
.section-2 .right{
    flex: 1.5;
}
.section-1 .right{
    background-image: url('../resources/images/aboutUs1.png');   
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    width: 100%;
    flex: 2;
}
.section-2 .left{
    background-image: url('../resources/images/aboutUs2.jpg');   
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    width:100%;
    flex: 1;
}
.img-flex-div{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    
}
.values-section{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.values-section h2{
    font-size: var(--font-size-4xl);
}
.outer-section{
    display: flex;
    gap: 30px;
    justify-content: space-around;
    width: 100%;
    overflow-x: hidden;
}
.outer{
  display : flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.container1{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px 0;
}
.container1 .card{
    position: relative;
    overflow-y: hidden;
    max-width: 400px;
    width: 100%;
    height: 65vh;
    margin: 30px auto;
    padding: 20px 15px;
  display : flex;
  flex-direction : column;
  align-items: center;
  box-shadow : 0 5px 20px rgba(0,0,0,0.5);
  transition : all 0.5s ease-in-out;
  border-radius : 15px;
}

.container1 .card:hover {
    height : 85vh ;    
}
.container1 .card .card-img{
    width: 25vw;
}
.container1 .card .card-img img {
    width: 100%;
    height: 55vh;
    border-radius : 15px;
  }
.container1 .card .card-content {
    position : relative;
    top : -10px;
    padding : 10px 15px;
    visibility : hidden;
    opacity : 0;
    transition : 0.3s ease-in-out;
      
  }
  .outer-section h2{
    font-size: var(--font-size-6xl);
  }

  .container1 .card:hover .card-content {
    margin-top : 10px;
    visibility : visible; 
    opacity : 1;
    transition-delay: 0.2s;
   
 }    
 .card-content h4{
    font-size: var(--font-size-2xl);
 }
 .card-content p{
    text-align: justify;
    font-size: var(--font-size-base);

 } 

 .note{
    margin: 30px auto;
    padding: 0 var(--spacing-lg);
    max-width: 100%;
 }
 .note h3{
    font-size: var(--font-size-base);
 }

/* ===============================
   Responsive About Page
   =============================== */
@media (max-width: 1024px) {
    .section-1 .left h1 {
        font-size: var(--font-size-5xl);
    }

    .section-1 .left ul li {
        font-size: var(--font-size-base);
    }

    .card-content h4 {
        font-size: var(--font-size-xl);
    }

    .card-content p {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 768px) {
    .container1 .card .card-img{
        width: 80vw;
    }
    .section-1,
    .section-2 {
        margin: 40px var(--spacing-md);
        margin-top: 100px;
    }
    .section-2{
        flex-direction: column-reverse;
    }

    .section-1 .left {
        margin-left: 0;
        margin-bottom: var(--spacing-lg);
    }

    .section-1 .left h1 {
        font-size: var(--font-size-4xl);
    }

    .section-1 .left ul li {
        font-size: var(--font-size-sm);
    }

    .section-1 .right,
    .section-2 .left {
        height: 300px;
        flex: 1;
    }
    .container1 .card{
        height: auto;
        width: 100%;
        margin: 20px 0;
        padding: 20px 15px;
    }
    

    .section-2 .right {
        flex: 1;
    }

    .outer-section {
        grid-template-columns: 1fr;
    }

    .card-content h4 {
        font-size: var(--font-size-lg);
    }

    .card-content p {
        font-size: var(--font-size-xs);
    }

    .note {
        margin: 20px 0;
        padding: var(--spacing-lg);
    }

    .note h3 {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 640px) {
    section {
        margin-top: 40px;
        padding: 0;
    }

    .section-1 .left {
        padding: 0 var(--spacing-md);
    }

    .section-1 .left h1 {
        font-size: var(--font-size-3xl);
    }

    .section-1 .left ul li {
        font-size: var(--font-size-xs);
    }
    .outer-section{
        flex-direction: column;
        margin: 0;
        padding: 0 var(--spacing-md);
        gap: 20px;
    }
    .container1 .card{
    height: 60vh;
    width: 100%;
    margin: 20px 0;
    padding: 20px 0px;
}

    .container1 .card:hover {
        height : 70vh ;    
    }
    .container1 .card .card-img img {
        width: 100%;
        height: 55vh;
        border-radius : 15px;
    }

    .section-1 .right,
    .section-2 .left {
        height: 250px;
    }

    .card-content h4 {
        font-size: var(--font-size-base);
    }

    .card-content p {
        font-size: var(--font-size-xs);
    }

    .note {
        margin: 15px 0;
        padding: var(--spacing-md);
    }

    .note h3 {
        font-size: var(--font-size-xs);
    }
    .img-flex-div {
        min-height: 280px !important;
        height: 280px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        display: block !important;
    }
    
}