/*ABOUT-US*/
.about-usdiv {
    align-items: center;
}

.aboutus-img {
   position: absolute;
   z-index: -2;
   width: 100%;
}

.img-div {
   position: absolute;
   width: 100%;
   height: 67vh;
   background: linear-gradient(135deg, #444444be, #ffffff2d);
   z-index: -1;
   /* Same as the text or slightly lower edited 1-30-25 */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.Title {
   color:#FFF; 
   font-size: 50px; 
   z-index: 3;
   align-self: center;
   margin-top: 100px;
}

.Sub {
   position: relative;
   color:#FFF; 
   font-size: 20px; 
   padding: 20px;
   padding-left: 70px;
   padding-right: 70px;
   word-wrap:break-word;
   text-align: justify;
   width: 100%;
   margin-top:40px;
   z-index: 3;
   letter-spacing: 0.7px;
}



.Imagediv {
   width: 600px; 
   height: 600px; 
}

/* CARDS */
.values-cards {
   margin-top: 8rem;
   z-index: 1;
}

.about-ustitle {
   color:green; 
   font-size: 50px; 
   padding: 20px;
}

.about-usSub {
   color:#000; 
   font-size: 20px; 
   padding: 20px;
   word-wrap:break-word;
   text-align: justify;
   width: 100%;
   margin-top:20px;
   letter-spacing: 0.7px;
}

.cards-div {
   display: flex;
   gap: 0px;
   justify-content: center;
   margin:20px;
   z-index: 1;
 }
 
 .card {
   background: #fff;
   border-radius: 15px;
   border: 1px solid currentColor;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   padding: 20px;
   text-align: center;
   width: 500px;
   min-height:465px;
   position:relative ;
}

/* Specific colors for each card */
.card.mission {
   color: #f85a5a; /* Red for Mission */
}

.card.vision {
   color: #5ab9f8; /* Blue for Vision */
}

.card.philo {
   color: #f8c25a; /* Orange for Values */
}
 
.icon-container {
   width: 100px;
   height: 100px;
   background: currentColor;
   border-radius: 50%;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   top: -70px;
}
 
.icon-about {
   font-size: 50px;
   color: #fff;
   }
 
.card-title {
   font-size: 2rem;
   font-weight: 600;
   margin-top:-20px;
   z-index: 1;
 }
 
.card-text {
   padding:10px;
   letter-spacing: 0.7px;
   margin-top: 12px;
   font-size: 15px;
   color: #000;
   line-height: 1.5;
   font-weight: 300;
   z-index: 1;
}

/* Colored base with side borders */
.card::before {
   content: '';
   bottom: -20px;
   left: -10px;
   width: 104%;
   height: 50%;
   background: currentColor;
   border-radius: 15px 15px 15px 15px; /* Rounded bottom corners */
   position: absolute;
   z-index: -1;
}





/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {
    .about-usdiv {
        align-items: center;
    }
 
    .aboutus-img {
        height: 600px;
        width: 100%;
    }
 
    .img-div {
        height: 600px;
    }
 
 
    /* CARDS */
    .values-cards {
        margin-top: 0rem;
    }
 
    .cards-div {
        display: grid;
         grid-template-columns: 1fr 1fr; /* Two columns */
         grid-template-rows: auto auto; /* Two rows */
         gap: 20px;
    }
 
     .cards-div:nth-child(1) { grid-column: 1; grid-row: 1; } /* 1st card */
     .cards-div:nth-child(2) { grid-column: 2; grid-row: 1; } /* 2nd card */
     .cards-div:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
    
    .card {
        margin-bottom: 80px;
    }
}

/* Normal desktop :992px.*/
@media (min-width: 992px) and (max-width: 1200px) {

    .about-usdiv {
        align-items: center;
        width: 100%;
    }
 
    .aboutus-img {
       height:700px;
    }
 
    .img-div {
       height: 700px;
    }
 
    /* CARDS */
    .values-cards {
       margin-top: 3rem;
       z-index: 1;
    }
 
    .cards-div {
       flex-direction: column;
       margin-left:200px;
       
    }
    
    .card {
       margin-bottom: 120px;
    }
 
    .card-text {
       font-size: 20px;
    }
    
    .icon-container {
       width: 100px;
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
    }
}
 
@media (min-width: 768px) and (max-width: 991px) {

   .about-usdiv {
       align-items: center;
   }

   .aboutus-img {
       height: 800px;
   }

   .img-div {
       height: 800px;
   }

   .Title {
       font-size: 50px; 
       margin-top: 70px;
   }

   .Sub {
       font-size: 20px; 
       padding: 20px;
       margin-top:20px;
   }


   /* CARDS */
   .values-cards {
       margin-top: 8rem;
       z-index: 1;
   }

   .about-ustitle {
       font-size: 50px; 
       padding: 20px;
   }

   .about-usSub {
       font-size: 20px; 
       padding: 20px;
       margin-top:20px;
       font-weight: 100;
   }

   .cards-div {
       margin-left:100px;
   }
   
   .card {
       padding: 20px;
       width: 500px;
       min-height:465px;
       margin-bottom: 100px;

   }

   .card-text {
        font-size: 15px;
   }

   

   /* Colored base with side borders */
   .card::before {
       content: '';
       bottom: -20px;
       left: -10px;
       width: 104%;
       height: 50%;
       background: currentColor;
       border-radius: 15px 15px 15px 15px; /* Rounded bottom corners */
       position: absolute;
       z-index: -1;
   }
}





/* Large Mobile :550px. */
@media only screen and (min-width: 550px) and (max-width: 766px) {
   .about-usdiv {
       align-items: center;
   }
   
   .aboutus-img {
       z-index: -2;
       width:100%;
       height: 45vh;
   }

   .img-div {
       height: 45vh;
   }


   .Title {
       font-size: 30px; 
       margin-top: 30px;
   }
   
   .Sub {
       padding: 10px;
       font-size: 14px; 
       margin-top:40px;
   }
   
   .about-ustitle {
       font-size: 30px;
       margin-top: 0px;
   }
   
   .about-usSub {
       font-size: 14px; 
       padding: 0px;
       margin-top:0px;
       font-weight:100;
   }
   
   .card {
       padding: 40px;
       text-align: center;
       margin-bottom: 80px;
       width: 100%;
       min-height: 200px;
       font-size: 13px;
       left: -20px;
   }   
   
   
   /* Colored base with side borders */
   .card::before {
       content: '';
       position: absolute;
       bottom: -15px;
       left: -9px;
       width: 103%;
       height: 50%;
   }
}


@media (max-width: 767px) {
   .about-usdiv {
       align-items: center;
   }
   
   .aboutus-img {
       z-index: -2;
       width:100%;
       height: 900px;
   }

   .img-div {
       height: 900px;
       background: linear-gradient(135deg, #444444be, #ffffff2d);
       z-index: -1;
       /* Same as the text or slightly lower edited 1-30-25 */
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }


   .Title {
       color:white; 
       font-size: 30px; 
       z-index: 1;
       align-self: center;
       margin-top: 60px;
   }
   
   .Sub {
       position: relative;
       color:#FFF; 
       padding: 10px;
       font-size: 14px; 
       margin-top:20px;
       z-index: 0;
       letter-spacing: 0.7px;
       font-weight:100;
   }
   
   .about-ustitle {
       color:green; 
       font-size: 30px; 
       z-index: 0;
       margin-top: 20px;
   }
   
   .about-usSub {
       color:black; 
       font-size: 14px; 
       padding: 0px;
       word-wrap:break-word;
       text-align: justify;
       width: 100%;
       margin-top:0px;
       z-index: 0;
       font-weight:100;
   }
   

   /* CARDS */
   .values-cards {
       margin-top: 0px;
   }
   
   .cards-div {
       align-items: center;
       justify-content: center;
   }
     
   .card {
       background: #fff;
       border-radius: 15px;
       border: 1px solid currentColor;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       padding: 40px;
       text-align: center;
       margin-bottom: 80px;
       width: 100%;
       min-height: 200px;
       font-size: 13px;
       left: -20px;
   }   
   
   /* Specific colors for each card */
   .card.mission {
       color: #f85a5a; /* Red for Mission */
       margin-top: 10px;
   }

   .card.vision {
       color: #5ab9f8; /* Blue for Vision */
   }

   .card.philo {
       color: #f8c25a; /* Orange for Values */
   }
   
   .icon-container {
       width: 100px;
       height: 100px;
       background: currentColor;
       border-radius: 50%;
       margin: 0 auto;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       top: -90px;
   }
   
   .icon {
       font-size: 60px;
       color: #fff;
   }
   
   .card-title {
       font-size: 22px;   
       font-weight: 600;
       margin-top:-50px;
   }
   
   .card-text {
       padding:10px;
       letter-spacing: 0.5px;
       margin-top: 0px;
       font-size: 15px;
       color: #000;
       line-height: 1.5;
       font-weight: 300;
   }
   
   /* Colored base with side borders */
   .card::before {
       content: '';
       position: absolute;
       bottom: -15px;
       left: -15px;
       width: 102%;
       height: 50%;
       background: currentColor;
       z-index: -1;
       border-radius: 15px 15px 15px 15px; /* Rounded bottom corners */
   }
}

@media (max-width: 540px) {
   .about-usdiv {
       align-items: center;
   }
   
   .aboutus-img {
       z-index: -2;
       width:100%;
       height: 500px;
   }

   .img-div {
       height: 500px;
  }

   .Title {
       font-size: 30px; 
       margin-top: 40px;
   }
   
   .Sub {
       padding: 5px;
       font-size: 14px; 
       margin-top:10px;
       font-weight:300;
   }
   
   .about-ustitle {
       color:green; 
       font-size: 30px; 
       margin-top: 0px;
   }
   
   /* CARDS */
   .card {
       padding: 10px;
   }   
   
   /* Specific colors for each card */
   .card.mission {
       color: #f85a5a; /* Red for Mission */
       margin-top: 10px;
   }

   .card.vision {
       color: #5ab9f8; /* Blue for Vision */
   }

   .card.philo {
       color: #f8c25a; /* Orange for Values */
   }
   
   .icon-container {
       width: 90px;
       height: 90px;
       top: -60px;
   }
   
   .icon {
       font-size: 60px;
       color: #fff;
   }
   
   .card-title {
       font-size: 22px;   
       font-weight: 600;
       margin-top:-50px;
   }

   
   /* Colored base with side borders */
   .card::before {
       bottom: -9px;
       left: -10px;
       width: 105%;
       height: 50%;
   }
}


@media only screen and (min-width: 401px) and (max-width: 490px) {
   .about-usdiv {
       align-items: center;
   }
   
   .aboutus-img {
       z-index: -2;
       width:100%;
       height: 600px;
   }

   .img-div {
       height: 600px;
  }

   .Title {
       font-size: 30px; 
       margin-top: 40px;
   }
   
   .Sub {
       padding: 5px;
       font-size: 14px; 
       margin-top:10px;
       font-weight:300;
   }
   
   .about-ustitle {
       color:green; 
       font-size: 30px; 
       margin-top: 0px;
   }
   
   /* CARDS */
   .card {
       padding: 10px;
   }   
   
   /* Specific colors for each card */
   .card.mission {
       color: #f85a5a; /* Red for Mission */
       margin-top: 10px;
   }

   .card.vision {
       color: #5ab9f8; /* Blue for Vision */
   }

   .card.philo {
       color: #f8c25a; /* Orange for Values */
   }
   
   .icon-container {
       width: 90px;
       height: 90px;
       top: -60px;
   }
   
   .icon {
       font-size: 60px;
       color: #fff;
   }
   
   .card-title {
       font-size: 22px;   
       font-weight: 600;
       margin-top:-50px;
   }

   
   /* Colored base with side borders */
   .card::before {
       bottom: -9px;
       left: -7px;
       width: 105%;
       height: 50%;
   }
}

@media only screen and (max-width: 401px) {

    .about-usdiv {
        align-items: center;
    }
    
    .aboutus-img {
        z-index: -2;
        width:100%;
        height: 750px;
    }
 
    .img-div {
        height: 750px;
     }
 
    .Title {
        font-size: 30px; 
        margin-top: 40px;
    }
    
    .Sub {
        padding: 5px;
        font-size: 14px; 
        margin-top:10px;
        font-weight:300;
    }
    
    .about-ustitle {
        color:green; 
        font-size: 30px; 
        margin-top: 0px;
    }
    
    /* CARDS */
    .card {
        padding: 10px;
    }   
    
    /* Specific colors for each card */
    .card.mission {
        color: #f85a5a; /* Red for Mission */
        margin-top: 10px;
    }
 
    .card.vision {
        color: #5ab9f8; /* Blue for Vision */
    }
 
    .card.philo {
        color: #f8c25a; /* Orange for Values */
    }
    
    .icon-container {
        width: 90px;
        height: 90px;
        top: -60px;
    }
    
    .icon {
        font-size: 60px;
        color: #fff;
    }
    
    .card-title {
        font-size: 22px;   
        font-weight: 600;
        margin-top:-50px;
    }
 
    
    /* Colored base with side borders */
    .card::before {
        bottom: -9px;
        left: -7px;
        width: 105%;
        height: 50%;
    }


}

@media only screen and (min-width: 365px) and (max-width: 400px) {
    .about-usdiv {
        align-items: center;
    }
    
    .aboutus-img {
        z-index: -2;
        width:100%;
        height: 680px;
    }
 
    .img-div {
        height: 680px;
     }
 
    .Title {
        font-size: 30px; 
        margin-top: 40px;
    }
    
    .Sub {
        padding: 5px;
        font-size: 14px; 
        margin-top:10px;
        font-weight:300;
    }
    
    .about-ustitle {
        color:green; 
        font-size: 30px; 
        margin-top: 0px;
    }
    
    /* CARDS */
    .card {
        padding: 10px;
    }   
    
    /* Specific colors for each card */
    .card.mission {
        color: #f85a5a; /* Red for Mission */
        margin-top: 10px;
    }
 
    .card.vision {
        color: #5ab9f8; /* Blue for Vision */
    }
 
    .card.philo {
        color: #f8c25a; /* Orange for Values */
    }
    
    .icon-container {
        width: 90px;
        height: 90px;
        top: -60px;
    }
    
    .icon {
        font-size: 60px;
        color: #fff;
    }
    
    .card-title {
        font-size: 22px;   
        font-weight: 600;
        margin-top:-50px;
    }
 
    
    /* Colored base with side borders */
    .card::before {
        bottom: -9px;
        left: -7px;
        width: 105%;
        height: 50%;
    }
 }