:root {
    --color-p: #2f82ff;
    --color-p-vairant: #f9f221;
    --color-g-0: #f3f6f7;
    /* --color-g-50: #d6e1e6; */
    --color-g-100: #bdcdd4;
    --color-g-200: #a0b2b9;
    --color-g-300: #8ea3ac;
    --color-g-400: #7a8b93;
    --color-g-500: #5a6d75;
    --color-g-600: #3f4d53;
    --color-g-700: #2a3439;
    --color-g-800: #182023;
    --color-g-900: #080b0c;
    --color-danger: #c72156;
    --color-success: #06c4c4;
    --color-info: #ffcd56;
    --color-purple: rgb(166, 27, 191);

    --transition: all 300ms ease;

    --radius-1: 0.4rem;
    --radius-2: 0.8rem;
    --radius-3: 1.2rem;
    --radius-4: 1.6rem;
    --radius-5: 2rem;
    --radius-6: 4rem;

    --container-w-lg: 84%;
    --container-w-md: 92%;
}

.blog_more_btn{
    text-align: center;
    display: flex;
    width: 20%;
    margin-inline: auto;
    margin-top: 2rem;
}
section {
    padding: 2rem 0;
    overflow-x: hidden;

}
.section {
    padding: 5rem 0;
}
.section_header {
    text-align: center;
}
.section_header h4 {
    /* color: var(--color-primary); */
    margin-bottom: 0.5rem;
}

/* =============================HERO============================ */
.hero{
    /* min-height: 110vh; */
    background: linear-gradient(var(--color-g-0), var(--color-g-50));
}

body.dark .hero {
    background: linear-gradient(var(--color-g-200), var(--color-g-0));
}

.hero_container {
    text-align: center;
}
.hero_content {
    width: 70%;
    margin-inline: auto;
}

.hero_content p {
    margin-top: 0.5rem;
    /* width: 60%; */
    /* text-align: center; */
}

.hero_cta {
    margin-top: 3rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.hero_images {
    width: fit-content;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4rem;
    margin-top: 5rem;
}

.hero_image {
    /* width: 14rem; */
    height: 20rem;
    border-radius: 6rem;
    overflow: hidden;
    /* box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.3); */
    /* border: 6px solid #dfe5fc; */
}
    
/* .hero_image img {
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    padding: 0  10px;

}
  */
    

.hero_image:nth-child(1),
.hero_image:nth-child(5){
    transform: translateY(-10rem);
}

 
.hero_image:nth-child(3){
    transform: translateY(+5rem);
}

/* =============================ABOUT============================ */
.about {
    background: var(--color-g-50);
    
}

.about_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    
}

.about_left {
    border-radius: 3rem;
    overflow: hidden;
    /* margin: 2rem 0; */
    
}
.about_left img {
    border: 1px solid #000;
    padding: 20px;
}
.about_right p{
    margin-bottom: 1rem;
    font-size: 16px;
    margin-top: 1rem;

}
.about_container a {
    margin-top: 1rem;
}

/* =============================Programs============================ */

.programs {
    background: var(--color-g-50);
}
.program_list {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 4rem;
}
.program_item {
    background-color: var(--color-g-100);
    height: 28rem;
    border-radius: var(--radius-6);
    overflow: hidden;

}
.program_item-image {
    height: 20rem;
    border-radius: 3rem;
    overflow: hidden;
}

.program_item-content {
    padding: 2.5rem 2rem;
}

/* ================================WHy US================================== */
span svg{
    color: var(--color-p);
    width: 30px;
    height: 30px;
    margin-bottom: 1rem;
    
 }


.whyus_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.whyus_left h4 {
    margin-bottom: 0.8rem;
}
.whyus_left p {
    margin: 1rem 0.2rem;
}
.whyus_left a {
    margin-top: 1rem;
}

.whyus_right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.whyus_item{
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
}
.whyus_item:hover {
    box-shadow: none;
    transition: var(--transition);
}
.whyus_item h4 {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.whyus_item p{
    color: var(--color-g-500);
    font-size: 16px;
}


.posts_container a span {
    width: 50px;
    font-size: 1rem;
    padding-left: 0.6rem;
}

 

/* ==========================================Testimonial============================= */

  
 .swiper-wrapper {
    margin-top: 4rem;
    padding-bottom: 5rem;
     
 }

 .swiper-slide {
    background: var(--color-g-50);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-6);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    transition: var(--transition);
     
    
 }

 .testimonial_client {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1rem;
 }
 .swiper-slide:hover {
    box-shadow: none;
 }
 .testimonial_cliant-image {
    width: 3rem;
    aspect-ratio: 1/1;
    overflow: hidden;
    margin: 1rem 0;
 }
 .testimonial_cliant-image img{
    border-radius: 50%;
 }


 /* ==============================VIdeo================================= */
.video-container header {
    margin-bottom: 1rem;
}
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin: 0 auto;
   
}
video {
    border: 1px solid #000;
    padding: 2rem;
 
    width: 100%;
    height: auto;
    border-radius: 10px; /* Optional: Adds rounded corners */
}





@media screen and (max-width: 1000px) {
    section {
        padding: 1.5rem 0;
    
    }
    .blog_more_btn{
         
        width: 60%;
        margin-inline: auto;
        margin-top: 1rem;
    }
    .hero{
        padding-top: 4.5rem;
    }
    .hero_content {
        width: 100%;
    }
    .hero_content p{
        font-size: 15px;


    }
    .hero_cta{
        flex-direction: column;
    }

    .hero_images {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;margin-top: 3.5rem;
    }
    .hero_image {
        border-radius: var(--radius-5);
        width: 100%;
    }
    .hero_image:nth-child(1),
    .hero_image:nth-child(3),
    .hero_image:nth-child(5){
    display: none;
}

 

.about_container {
    grid-template-columns: 1fr;
    gap: 2rem;
}

.about_left {
    border-radius: 1rem;
}

.about_left img {
    border: none;
    padding: 0;
}
.whyus_container {
    grid-template-columns: 1fr;
}
.whyus_right {
    grid-template-columns: 1fr;
    width: 90%;
    margin-inline: auto;

}
video {
    border: none;
    padding: 1rem 0;


}

}