@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100;200;300;400;500;600;700;800&display=swap');

:root{
    --main-color: #1EBCB8;
    --main-color-2: #FE6766;
    --red: #c0392b;;
    --black: #333;
    --white: #fff;
    --light-black: #777;
    --light-white: #fff9;
    --dark-bg: rgba(0,0,0,.7);
    --light-bg: #eee;
    --border: 0.1rem solid var(--black);
    --box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    --box-shadow-dark: 1px 1px 20px rgba(0,0,0,0.3);
    --image-box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.8);
    --text-shadow: 0 1.5rem 3rem rgba(0,0,0,.3);
    --border-1: 1px solid #ccc;
    --border-light: .5px solid #ddd;
    --swiper-pagination-color: var(--main-color);
}

/* .swiper-pagination-bullet-active {
    background-color: #000 !important;
} */

/* <Swiper style={{
    "--swiper-pagination-color": "#FFBA08",
    "--swiper-pagination-bullet-inactive-color": "#999999",
    "--swiper-pagination-bullet-inactive-opacity": "1",
    "--swiper-pagination-bullet-size": "16px",
    "--swiper-pagination-bullet-horizontal-gap": "6px"
  }}>
    {content}
  </Swiper> */

*{
    font-family: 'Poppins', sans-serif;
    /* font-family: 'Nunito', sans-serif; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    /* transition: all 0.2s linear; */
}

html{
    overflow-x: hidden;
}

*::selection{
    background-color: var(--main-color);
    color: var(--white);
}

*::-webkit-scrollbar{
    width: 0.5rem;
}

*::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0.2);
    /* background: transparent; */
}

*::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
    border-radius: 1rem;
}

@keyframes fadeIn {
    0%{
        transform: scale(.5);
        opacity: 0;
    }
}

body{
    background-color: var(--white);
}

section{
    padding: 2.5rem 10%;
}

h4.h4-title{
    font-size: 1.5rem;
    color: var(--black);
    font-weight: 500;
    text-align: center;
}

h3.h3-title{
    font-size: 2rem;
    color: var(--black);
    text-align: center;
    margin: 1rem;
    font-weight: 500;
}

h2.h2-title{
    font-size: 3rem;
    color: var(--black);
    text-align: center;
    margin: 1rem;
    font-weight: 600;
}

h1.h1-title{
    font-size: 4rem;
    /* font-family: sans-serif; */
    color: var(--black);
    text-align: center;
    margin: 1rem;
    font-weight: 700;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

/* Buttons Starts */

.btn,
.option-btn,
.delete-btn,
.white-btn{
    display: inline-block;
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    color: var(--white);
    font-size: 1rem;
    border-radius: 0.5rem;
    text-transform: capitalize;
    transition: 0.3s;
}

.btn:hover,
.delete-btn:hover{
    background-color: var(--black);
    color: var(--white);
}

.white-btn,
.option-btn:hover,
.btn{
    background-color: var(--main-color);
}

.white-btn:hover{
    background-color: var(--white);
    color: var(--black);
}

.delete-btn{
    background-color: var(--red);
}

.option-btn{
    background-color: transparent;
    color: var(--main-color);
    font-weight: 500;
    border: 2px solid var(--main-color);
}


.option-btn:hover{
    color: var(--white);
}

/* Buttons Ends */

/* Header Section Starts */

.header .header-1{
    background-color: var(--light-bg);
}

.header .header-1 .flex{
    padding: 0.8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100vw;
    margin: 0 auto;
}

.header .header-2{
    background-color: var(--white);
    border-bottom: var(--border-1);
}

.header .header-2.active{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header .header-2 .flex{
    padding: 0.8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100vw;
    margin: 0 auto;
    position: relative;
}

.header .header-2 .flex .logo-box{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header .header-1 .flex .share a{
    font-size: 1.3rem;
    margin-right: 0.5rem;
    color: var(--black);
    transition: 0.3s;
}

.header .header-1 .flex .share a:hover{
    color: var(--main-color);
    transform: translateY(0.25rem);
}

.header .header-2 .flex .logo-box img{
    width: 40px;
}

.header .header-2 .flex .logo-box .logo-text{
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--main-color);
}

.header .header-2 .flex .logo-box .logo-text span{
    color: var(--main-color-2);
}

.header .header-2 .flex .navbar .dropbtn,
.header .header-2 .flex .navbar a{
    margin: 0 0.75rem;
    font-size: 1rem;
    color: var(--black);
    transition: 0.2s;
}

.header .header-2 .flex .navbar .dropbtn.active,
.header .header-2 .flex .navbar a.active{
    color: var(--main-color);
}

.header .header-2 .flex .navbar .dropbtn:hover,
.header .header-2 .flex .navbar a:hover{
    color: var(--main-color);
    text-decoration: underline;
}

#menu-btn{
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--light-black);
    transition: 0.3s;
    display: none;
}

#menu-btn:hover{
    color: var(--main-color);
}

/* Dropdown Button */
.dropdown{
    position: relative;
    display: inline-block;
}

.dropbtn{
    /* background-color: #04AA6D; */
    color: var(--white);
    font-size: 1rem;
    border: none;
    cursor: pointer;
}    

.drop-logo{
    transition: rotate .2s, color .01s;
}    

.dropdown:focus-within .dropbtn,
.dropdown:hover .dropbtn{
    color: var(--main-color) !important;
    text-decoration: underline;
}

.dropdown:focus-within .drop-logo,
.dropdown:hover .drop-logo{
    rotate: 180deg;
}

.dropdown-content{
    position: absolute;
    background-color: var(--white);
    /* min-width: 160px; */
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: .5rem;
    z-index: 10;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* display: none; */
    right: 10px;
}

.dropdown-content a{
    width: auto;
    color: var(--light-black);
    display: block;
    padding: 1rem;
    margin: 0 !important;
    border-top: var(--border-light);
    text-decoration: none !important;
    white-space: nowrap;
}

.dropdown-content a:first-child{
    border: none;
}

.dropbtn:focus-within ~ .dropdown-content,
.dropdown:hover .dropdown-content{
    /* display: block; */
    visibility: visible;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.dropdown-content a:hover{
    background-color: var(--light-bg);
}

/* Header Section Ends */

/* Home Starts */

/* Swiper Section-1 */

.home{
    padding: 0;
}

.home-slider{
    width: 100%;
}

.home .slide .slider-img{
    width: 100vw;
    size: cover;
    object-fit: contain;
}

.swiper-buttons{
    color: var(--black);
}

.swiper-buttons:hover{
    color: var(--main-color);
}

/* Section-2 */

.box-container-2{
    /* background-color: var(--light-bg); */
    max-width: 1300px;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    margin-bottom: 2rem;
    margin-top: 6rem;
    border-radius: 1rem;
    display: grid;
}

.box-container-2 .h3-title{
    background-color: var(--main-color);
    color: var(--white);
    border-radius: 1rem;
    display: inline;
    padding: 0.3rem 2rem;
    justify-self: center;
    margin-bottom: 2rem;
    /* border: var(--border-1); */
}

.box-container-2 .flex-box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.box-container-2 .flex-box .box{
    background-color: var(--light-bg);
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.box-container-2 .flex-box .box:hover{
    box-shadow: var(--box-shadow-dark);
}

.box-container-2 .impact-number{
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-container-2 .flex-box .box h2{
    font-size: 2.5rem;
    color: var(--main-color);
    font-weight: 600;
}

.box-container-2 .flex-box .box p{
    font-size: 1.1rem;
    color: var(--light-black);
}

.home_section-2 .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 0 auto;
    max-width: 1300px;
}

.home_section-2 .box-container .box{
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--light-bg);
    cursor: pointer;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: var(--border-1); */
    transition: all 0.3s ease;
}

.home_section-2 .box-container .box:hover{
    /* box-shadow: 0 0 20px rgba(48, 46, 77, 0.15); */
    transform: scale(1.05);
    box-shadow: var(--box-shadow-dark);
}

.home_section-2 .box-container .box img{
    height: 3rem;
    margin-bottom: 1rem;
}

.home_section-2 .box-container .box p{
    color: var(--light-black);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Section-3 */

.home_section-3 .flex{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.home_section-3 .flex .image{
    flex: 1 1 10rem;
}

.home_section-3 .flex .image img{
    width: 100%;
    border-radius: 1rem;
}

.home_section-3 .flex .content{
    flex: 1 1 20rem;
    padding: 1rem;
    background-color: var(--light-bg);
    /* border-radius: 0 1rem 1rem 0; */
    border-radius: 1rem;
}

.home_section-3 .flex .content .box{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.home_section-3 .flex .content .box p{
    color: var(--light-black);
    font-size: 1rem;
    text-transform: initial;
}

.home_section-3 .flex .content .box p span{
    color: var(--black);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Section-4 */

.home_section-4 .flex{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.home_section-4 .flex .image{
    flex: 1 1 10rem;
}

.home_section-4 .flex .image img{
    width: 100%;
    border-radius: 1rem;
}

.home_section-4 .flex .content{
    flex: 1 1 20rem;
    /* padding: 2rem 1rem; */
    background-color: var(--light-bg);
    /* border-radius: 0 1rem 1rem 0; */
    border-radius: 1rem;
    /* margin: auto; */
}

.home_section-4 .flex .content .about_tabs{
    /* text-align: center; */
    display: flex;
    flex-wrap: wrap;
    column-gap: 3rem;
    row-gap: 1rem;
    justify-content: center;
    margin: 1rem;
}

.home_section-4 .flex .content .about_details{
    margin: 2rem;
}

.home_section-4 .flex .content .about_details p,
.home_section-4 .flex .content .about_details li{
    color: var(--light-black);
    font-size: 1rem;
    text-transform: initial;
    padding: 1rem;
}

.home_section-4 .flex .content .about_details ul{
    /* text-align: center; */
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 10rem);
}

.home_section-4 .flex .content ul span{
    color: var(--main-color);
}

.home_section-4 .flex .content .about_details .detail-1,
.home_section-4 .flex .content .about_details .detail-2{
    text-align: center;
}

.home_section-4 .flex .content .about_details .about-answer{
    display: none;
    
}

.home_section-4 .flex .content .about_details .about-answer.active{
    display: block;
}

.home_section-4 .flex .content img{
    display: none;
}

.home_section-5{
    background-color: var(--light-bg);
    margin-bottom: 2rem;
    text-align: center;
}

.home_section-5 .box-container{
    max-width: 1300px;
    margin: 0 auto;
    background-color: var(--white);
    border-radius: 1rem;
    padding: 1.5rem 0.5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.home_section-5 .box-container .box{
    display: flex;
    gap: 2rem;
    overflow: hidden;
    justify-self: center;
    align-items: center;
}

.home_section-5 .box-container .box img{
    max-width: 400px;
    border-radius: 1rem;
    border: var(--border-1);
    /* margin: auto; */
}

.home_section-5 .box-container .box .content p{
    font-size: 1rem;
    color: var(--light-black);
    margin-bottom: 1rem;
    padding-top: 2rem;
    padding-right: 3rem;
}

.home_section-5 .box-container .box .content .option-btn{
    margin: 2rem;
}

.home_section-5 .swiper-buttons{
    color: var(--main-color);
    background-color: rgba(0, 0, 0, 0.3);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding: 1rem;
    transition: 0.3s;
}

.home_section-5 .swiper-buttons:hover{
    background-color: var(--light-black);
    color: var(--light-bg);
}

.home_section-6 .flex{
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
    justify-content: center;
    background-color: var(--light-bg);
    border-radius: 1rem;
    padding: 2rem;
}

.home_section-6 .flex h2{
    /* font-size: 2rem; */
}

.home_section-6 .flex h2 span{
    color: var(--main-color);
}

.home_section-6 .flex p{
    color: var(--light-black);
    font-size: 1.1rem;
    text-align: center;
}

.home_section-6 .flex .btn{
    margin-top: 1rem;
    width: auto;
}

.home_section-7 .box-container{
    max-width: 1200px;
    margin: 0 auto;
}

.home_section-7 .testimonial_card{
    background-color: var(--light-bg);
    padding: 1.8rem 2rem;
    border-radius: 1rem;
    margin: 2rem auto;
    /* margin-bottom: 3rem; */
    width: 600px;
}

.home_section-7 .icon{
    display: inline-flex;
    font-size: 1.5rem;
    color: var(--main-color);
    margin-bottom: 1rem;
}

.home_section-7 .testimonial_description{
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--light-black);
}

.home_section-7 .testimonial_date{
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: var(--black);
}

.home_section-7 .testimonial_profile{
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.home_section-7 .testimonial_profile-img{
    height: 60px;
    width: 60px;
    border-radius: 3rem;
}

.home_section-7 .testimonial_profile-data{
    display: flex;
    flex-direction: column;
    row-gap: 0.4rem;
}

.home_section-7 .testimonial_profile-name{
    font-size: 2rem;
    font-weight: 500;
    color: var(--black);
}

.home_section-7 .testimonial_profile-detail{
    font-size: 0.8rem;
    color: var(--light-black);
}

/* Home Ends */

/* About Starts */

.about_section-1{
    margin: 1rem 0;
}

.about_section-1 .box-container{
    max-width: 1300px;
    margin: 0 auto;
    background-color: var(--light-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.about_section-1 .box-container .images_reels-vertical{
    /* width: 600px; */
    height: 400px;
}

.about_section-1 .box-container .images_reels-horizontal{
    display: none;
}

.about_section-1 .box-container .reel-img img{
    /* width: 200px; */
    height: 200px;
    border-radius: 1rem;
}

.about_section-1 .box-container .about_details{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-left: 2rem;
}

.about_section-1 .box-container .about_details p{
    color: var(--light-black);
    font-size: 1rem;
}

.about_section-2 .flex{
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2rem;
}

.about_section-2 .flex .image{
    flex: 1 1 10rem;
}

.about_section-2 .flex .image img{
    width: 100%;
}

.about_section-2 .flex .content{
    flex: 1 1 20rem;
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 1rem;
}

.about_section-2 .flex .content .quote{
    color: var(--light-black);
    font-size: 1.25rem;
    font-weight: 500;
}

.about_section-2 .flex .content h3{
    margin-bottom: 0;
}

.about_section-2 .flex .content p{
    font-size: 1rem;
    color: var(--light-black);
    /* margin-top: 1rem; */
    padding: 1rem;
}

.about_section-3 .flex{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* column-gap: 1rem; */
}

.about_section-3 .flex .content{
    flex: 1 1 20rem;
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 1rem;
}

.about_section-3 .flex .content .image_responsive{
    display: none;
}

.about_section-3 .flex .content h2{
    text-align: left;   
}

.about_section-3 .flex .content h3{
    text-align: left;
    color: var(--light-black);
    font-weight: 400;
    font-size: 1.5rem;
    margin-bottom: .25rem;
}

.about_section-3 .flex .content p{
    /* font-family: 'Nunito', sans-serif; */
    font-size: 1.1rem;
    color: var(--light-black);
    padding: 1rem;
}

.about_section-3 .flex .image{
    flex: 1 1 10rem;
    position: relative;
    overflow: hidden;
    max-width: 400px;
}

.about_section-3 .flex .image img{
    width: 400px;
    border-radius: 1rem;
}

.about_section-3 .flex .image .share{
    position: absolute;
    top: 0;
    left: -5rem;
    transition: all 0.2s linear;
}

.about_section-3 .flex .image:hover .share{
    left: 1rem;
}

.about_section-3 .flex .image .share a{
    height: 4rem;
    width: 4rem;
    font-size: 2rem;
    background-color: var(--light-bg);
    color: var(--main-color);
    display: block;
    text-align: center;
    margin-top: 1rem;
    line-height: 4rem;
    border-radius: 1rem;
    transition: 0.3s;
    border: var(--border-1);
}

.about_section-3 .flex .image .share a:hover{
    background-color: var(--main-color);
    color: var(--light-bg);
}

.about_section-4{
    background-color: var(--light-bg);
    margin: 2rem 0;
}

.about_section-4 .box-container{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem 2rem;
    /* align-items: center; */
    justify-content: center;
}


.about_section-4 .box-container .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    background-color: var(--white);
    border-radius: 1rem;
    padding: 1rem;
    transition: .3s;
}

.about_section-4 .box-container .box:hover{
    box-shadow: var(--box-shadow-dark);
    transform: translateY(-5px);
}

.about_section-4 .box-container .box .image{
    position: relative;
    overflow: hidden;
}

.about_section-4 .box-container .box img{
    width: 100%;
    border-radius: 1rem;
    min-height: 22rem;
    object-fit: cover;
    object-position: top;
    border: var(--border-1);
}

.about_section-4 .box-container .box .image .share,
.about_section-5 .box-container .box .image .share{
    position: absolute;
    top: 0;
    left: -5rem;
    transition: 0.3s;
}

.about_section-4 .box-container .box .image:hover .share,
.about_section-5 .box-container .box .image:hover .share{
    left: 1rem;
}

.about_section-4 .box-container .box .image .share a,
.about_section-5 .box-container .box .image .share a{
    height: 3rem;
    width: 3rem;
    font-size: 1.8rem;
    background-color: var(--main-color);
    color: var(--light-bg);
    display: block;
    text-align: center;
    margin-top: 1rem;
    line-height: 3rem;
    border-radius: 1rem;
    transition: 0.3s;
}

.about_section-5 .box-container .box .image .share a{
    background-color: var(--white);
    color: var(--black);
}

.about_section-4 .box-container .box .image .share a:hover{
    background-color: var(--black);
    color: var(--light-bg);
}

.about_section-5 .box-container .box .image .share a:hover{
    background-color: var(--main-color);
    color: var(--light-bg);
}

.about_section-4 .box-container .box p{
    color: var(--light-black);
    font-size: 1rem;
    margin-top: 0.5rem;
}

.about_section-4 .box-container .box p span{
    color: var(--main-color);
    font-weight: 700;
}

.about_section-5 .box-container{
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 2rem;
    justify-content: center;
    /* align-items: center; */
}

.about_section-5 .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 1rem;
    transition: .3s;
}

.about_section-5 .box-container .box:hover{
    box-shadow: var(--box-shadow-dark);
    transform: translateY(-5px);
}


.about_section-5 .box .image{
    position: relative;
    overflow: hidden;
    transition: .3s;
}

.about_section-5 .box-container .box:hover .image{
    /* box-shadow: var(--box-shadow-dark); */
    /* transform: translateY(-5px); */
    transform: scale(1.05);
}

.about_section-5 .box img{
    border-radius: 1rem;
    width: 100%;
    min-height: 22rem;
    object-fit: cover;
}

.about_section-5 .box .details{
    position: relative;
}

.about_section-5 .box .details p{
    font-size: 1rem;
    color: var(--light-black);
    margin-top: .5rem;
}

.about_section-5 .box .details span{
    position: relative;
}

.about_section-5 .box .details i{
    color: var(--main-color);
    font-size: .5rem;
    /* padding-right: .5rem; */
    position: absolute;
    left: -1rem;
    top: .5rem;
}

/* About Ends */

/* Service Starts */

.service_section-2 .grid{
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}

.service_section-2 .grid .box{
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .3s;
}

.service_section-2 .grid .box:hover{
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-dark);
}

.service_section-2 .box .image{
    max-width: 400px;
    margin-top: 1rem;
}

.service_section-2 .box .image img{
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    transition: .3s;
}

.service_section-2 .box:hover .image img{
    transform: scale(1.1);
    box-shadow: var(--image-box-shadow);
}

.service_section-2 .box .content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.service_section-2 .box .content p{
    color: var(--light-black);
    font-size: 1rem;
}

.service-page_section-1 .flex{
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-wrap: wrap;
}

.service-page_section-1 .image{
    flex: 1 1 10rem;
    /* position: relative;
    overflow: hidden; */
}

.service-page_section-1 .image img{
    width: 500px;
    border: var(--border-1);
    border-radius: 1rem;
}

.service-page_section-1 .content{
    flex: 1 1 20rem;
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 1rem;
}

.service-page_section-1 .content p{
    font-size: 1rem;
    color: var(--light-black);
    margin-top: 1rem;
    padding: 1rem;
}

.service-page_section-2{
    background: var(--light-bg);
}

.service-page_section-2 .grid{
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    /* align-items: center; */
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

.service-page_section-2 .grid .box{
    background: var(--white);
    margin: 1rem;
    padding: 1rem;
    border-radius: .5rem;
}

.service-page_section-2 .grid .box h3{
    margin-bottom: .5rem;
}

.service-page_section-2 .grid .box p{
    color: var(--light-black);
    font-size: 1rem;
    text-align: center;
}

/* Service Ends */

/* Events Starts */

.calendar_container{
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 2rem;
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 1rem;
}

.events_section-1 .colors{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    border-top: var(--border-1);
    padding-top: 1rem;
}

.colors .box{
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    border: var(--border-1);
    border-radius: 1rem;
    padding: .5rem;
    color: var(--light-black);
}

.colors .box div{
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}

.colors .box:nth-child(1) div{
    background-color: var(--main-color);
}

.colors .box:nth-child(2) div{
    background-color: var(--main-color-2);
}

.colors .box:nth-child(3) div{
    background-color: #FFB302;
}

.colors .box:nth-child(4) div{
    background-color: #A4ABB6;
}

.fc-event-title{
    white-space: normal !important;
}

.fc-event{
    overflow-y: auto;
    max-height: 5rem;
    padding-right: .5rem;
}

.custom-toolbar{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.custom-toolbar select{
    margin: 0 10px;
}

/* Upcoming Events Starts */

.upcoming_events{
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 2rem;
}

.upcoming_events .event_card{
    margin: 1rem 0;
    transition: .3s;
}

.upcoming_events .event_card .content{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.upcoming_events .event_card .event_img{
    flex: 1 1 5rem;
    text-align: center;
    margin: auto;
}

.upcoming_events .event_card .event_img img{
    width: 200px;
}

.upcoming_events .content .details{
    flex: 1 1 50rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 1rem;
}

.upcoming_events .content .details .event_type{
    text-align: left;
    margin-bottom: 1rem;
    color: var(--light-black);
}

.upcoming_events .content .details .event_date{
    font-size: 1rem;
}

.upcoming_events .content .details .event_title{
    /* font-size: 1rem; */
    text-align: left;
    margin-bottom: 1rem;
}

.upcoming_events .content .details .event_button{
    width: 7rem;
}

.empty_events{
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty_events .empty-msg{
    height: 10rem;
    width: 100%;
    margin: 5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--light-bg);
    border: var(--border-1);
    border-radius: .5rem;
    font-size: 2rem;
    color: var(--black);
    font-weight: 500;
}

/* Upcoming Events Ends */

.events_filters,
.blogs_filters,
.counsellors_filters,
.gallery_filters{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap ;
}

.event_tab,
.blog_tab,
.counsellor_tab,
.gallery_tab{
    margin: .5rem;
}

.events_container{
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 350px);
    gap: 2rem;
    justify-content: center;
    padding-top: 1rem;
}

.event_card{
    background-color: var(--light-bg);
    padding: 1.25rem;
    border-radius: 1rem;
    /* max-width: 25rem; */
    /* display: none; */
}

.event_card:hover{
    box-shadow: var(--box-shadow-dark);
}

/* .event_card:nth-child(1),
.event_card:nth-child(2),
.event_card:nth-child(3),
.event_card:nth-child(4),
.event_card:nth-child(5),
.event_card:nth-child(6){
    display: inline-block;
} */

.event_img{
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event_img img{
    max-width: 300px;
    object-fit: cover;
    /* height: 250px; */
    border-radius: 1rem;
    margin: auto;
    transition: .3s;
}

.event_card:hover img{
    transform: scale(1.1);
}

.event_content{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.event_date{
    color: var(--light-black);
    font-size: .85rem;
}

.event_detail{
    color: var(--light-black);
    color: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.event_button{
    color: var(--main-color);
    font-size: 1rem;
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    cursor: pointer;
}

.event_button-icon{
    font-size: 1rem;
    transition: 0.3s;
}

.event_button:hover .event_button-icon{
    transform: translateX(0.25rem);
}

.load-more{
    text-align: center;
    margin-top: 1rem;
}

.event_item-details{
    display: none;
}

.event_popup{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 1rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.event_popup.open{
    opacity: 1;
    visibility: visible;
}

.event_popup-inner{
    background-color: var(--light-bg);
    max-height: 700px;
    width: 900px;
    border-radius: 0.5rem;
    padding: 2.5rem;
    position: relative;
    overflow: auto;
}

.event_popup-inner::-webkit-scrollbar{
    width: 0;
}

.event_popup-content{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    column-gap: 3rem;
}

.event_popup-close{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--main-color);
    cursor: pointer;
}

.ep_thumbnail{
    text-align: center;
}

.event_popup-img{
    border-radius: 0.5rem;
    max-width: 400px;
    border: var(--border-1);
}

.event_popup-info{
    /* overflow-y: auto; */
}

.event_popup-subtitle{
    color: var(--black);
    font-size: 1rem;
    margin-bottom: .25rem;
}

.event_popup-subtitle span{
    color: var(--light-black);
    font-weight: 500;
}

.event_popup-info{
    color: var(--black);    
}

.event_popup-info .flex-box{
    display: flex;
}

.details_title{
    font-size: var(--h3-font-size);
    font-weight: 400;
    margin-bottom: 1rem;
}

.details_description{
    font-size: 1rem;
    margin-bottom: 2rem;
}

.details_info li{
    margin-bottom: .75rem;
    text-transform: capitalize;
    font-size: 1rem;
}

.details_info li:last-child{
    margin-bottom: 0;
}

.details_info li span{
    font-weight: 1.2rem;
    text-transform: initial;
}

.details_info li a{
    text-transform: lowercase;
    color: var(--main-color);
}

/* Events Ends */

/* Blogs Starts */

.blogs_container{
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.blogs_container .blog{
    background-color: var(--light-bg);
    border-radius: 1rem;
    overflow: hidden;
    padding-top: 0;
}

.blogs_container .blog:hover{
    box-shadow: var(--box-shadow-dark);
    transform: translateY(-5px);
    transition: 0.3s;
}

.blogs_container .blog .image{
    display: flex;
    justify-content: center;
    align-items: center;
}

.blogs_container .blog img{
    width: 100%;
    object-fit: cover;
    object-position: center;
    text-align: center;
    filter: grayscale(0.5);
    transition: 0.3s;
}

.blogs_container .blog:hover img{
    filter: grayscale(0);
    transform: scale(1.1);
    box-shadow: var(--image-box-shadow);
}

.blog_description{
    padding: 1rem;
}

.blog_description .date{
    font-size: .8rem;
    color: var(--light-black);
}

.blog_description p{
    font-size: 1rem;
    color: var(--light-black);
    margin: 1rem 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog_description .option-btn{
    text-align: center;
    width: 100%;
}

/* Blog Page */

.blog_content{
    max-width: 1300px;
    margin: 0 auto;
}

.blog_content .image{
    margin: 2rem 0;
}

.blog_content .blog_img{
    width: 100%;
    border-radius: .5rem;
}

.blog_content .image .inner-text{
    font-size: 1rem;
    color: var(--light-black);
}

.blog_content .content p{
    font-size: 1rem;
    color: var(--light-black);
}

.empty-blog{
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-blog .empty-msg{
    height: 10rem;
    width: 100%;
    margin: 5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--light-bg);
    border: var(--border-1);
    border-radius: .5rem;
    font-size: 2rem;
    color: var(--black);
    font-weight: 500;
}

/* Blogs Ends */

/* Counsellors Starts */

.counsellors_container{
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.profile_card{
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 1rem;
    /* transition: 0.3s; */
}

.profile_card:hover{
    box-shadow: var(--box-shadow-dark);
    transform: translateY(-5px);
    transition: 0.3s;
}

/* .profile_card:hover .counsellor_profile{
    box-shadow: var(--image-box-shadow);
    transform: translateY(-5px);
} */

.profile_card:hover .icon{
    background-color: var(--main-color);
    color: var(--light-bg);
}

.profile_card:hover .icon i{
    color: var(--light-bg);
}

.counsellor_profile{
    padding-top: 1rem;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 1rem;
    transition: 0.3s;
}

.counsellor_profile img{
    border: var(--border-1);
    border-radius: 50%;
    height: 8rem;
    width: 8rem;
    object-fit: cover;
}

.counsellor_profile h4{
    color: var(--white);
    padding: 1rem;
}

.counsellor_details{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.counsellor_details .info{
    text-align: left;
}

.profile_card p{
    font-size: 1rem;
    color: var(--light-black);
}


.designation p{
    padding-top: .5rem;
}

.counsellor_details .points{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.counsellor_details .icon{
    background-color: var(--white);
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.counsellor_details .icon i{
    color: var(--main-color);
    font-size: 1.5rem;
    transition: 0.3s;
}

/* Counsellors Ends */

/* Gallery Starts */

.gallery_container{
    max-width: 1300px;
    margin: 0 auto;
}

.gallery{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.gallery .item{
    position: relative;
    margin: .5rem;
    width: calc(25% - 1rem);
    /* width: 100%; */
    height: 15rem;
    overflow: hidden;
    cursor: pointer;
    border-radius: 1rem;
    text-align: center;
}

.item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.3s;
    object-position: center;
}

/* .horizontal{
    grid-column: span 2;
}

.vertical{
    grid-row: span 2;
}

.big{
    grid-column: span 2;
    grid-row: span 2;
} */

.item .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgba(5, 85, 92, 0.7); */
    background-color: rgba(30, 188, 184, 0.3);
    color: var(--white);
    font-size: 1.25rem;
    padding: 15px;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.item:hover .overlay{
    opacity: 1;
}

.gallery .item:hover img{
    transform: scale(1.1);
}

/* Gallery Ends */

/* Video Library Starts */

.video_section-1{
    max-width: 1300px;
    margin: 0 auto;
}

.video_section-1 .video_container{
    display: grid;
    grid-template-columns: repeat(3, 330px);
    gap: 1.8rem;
    justify-content: center;
}

.video_container .video_card{
    margin-top: 2rem;
    background-color: var(--light-bg);
    padding: 1.25rem;
    border-radius: 0.5rem;
}

.video_container .thumbnail{
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    transition: .3s;
}

.video_container .video_card:hover .thumbnail{
    scale: 1.025;
    box-shadow: var(--box-shadow-dark);
}

.video_container .video_date{
    font-size: 1rem;
    color: var(--light-black);
    margin-bottom: 0.5rem; 
}

.video_container .video_title{
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem; 
}

.video_container .video_button{
    color: var(--main-color);
    font-size: 1rem;
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    cursor: pointer;
}

.video_container .video_button-icon{
    font-size: 1rem;
    transition: 0.3s;
}

.video_container .video_button:hover .video_button-icon{
    transform: translateX(0.25rem);
}

/* Video Library Ends */

/* FAQS Starts */

.faq-section{
    padding: 4em 2em;
    max-width: 1300px;
    margin: 0 auto;
}

.faq-section .faq{
    list-style: none;
    border-radius: .5rem;
}

.faq-section .faq li{
    background: var(--light-bg);
    border-bottom: 1px solid #ccc;
}

.faq-section .faq li:first-child{
    border-top: 1px solid #ccc;
}

.faq-section .q{
    padding: 1em 0;
    color: var(--black);
    border-left: 10px var(--light-bg) solid;
    cursor: pointer;
    transition: .3s;
}

.faq-section li{
    overflow: hidden;
}

.faq-section .faq li:first-child{
    border-radius: .5rem .5rem 0 0;
}

.faq-section .faq li:last-child{
    border-radius: 0 0 .5rem .5rem;
}

.faq-section .q:hover,
.faq-section .q:hover .arrow{
    border-left-color: var(--main-color);
}

.faq-section .arrow{
    display: inline-block;
    margin: 0 .5em;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 10px solid #555;
    border-bottom: 6px solid transparent;
    transition: .3s;
}

.faq-section .faq p{
    color: #888;
    line-height: 25px;
}

.faq-section .a{
    padding: 0 1em 0 3.3em;
    overflow: hidden;
    height: 0;
    transition: .3s;
}

.faq-section .a-opened{
    padding: 1em 1em 2em 3.3em;
    height: initial;
}

.faq-section .arrow-rotated{
    transform: rotate(90deg);
}

/* FAQS Ends */

/* Pricing Starts */

.pricing-section{
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
}

.pricing-section .flex{
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
}

.pricing-section .flex .card{
    width: 15rem;
    background-color: var(--light-bg);
    padding: 1.5rem;
    padding-top: .5rem;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    text-align: center;
}

.pricing-section .flex .card h3{
    line-height: 1.25;
}

.pricing-section .flex .card .price{
    font-size: 2rem;
    font-weight: 600;
    color: var(--main-color);
    padding-bottom: .5rem;
}

.pricing-section .flex .card p{
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--light-black);
}

.pricing-section .flex .card p.description-2{
    font-size: 1rem;
    font-weight: 400;
    color: var(--light-black);
    padding-top: .5rem;
}

/* Pricing Ends */

/* 404 Starts */

.wrapper_404{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding: 2rem;
}

.container_404{
    max-width: 1300px;
    margin: 0 auto;
}

.container_404 .flex{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem;
}

.container_404 .flex h1{
    color: var(--black);
    font-size: 10rem;
}

.container_404 .flex h2{
    color: var(--black);
    font-size: 5rem;
}

.container_404 .flex p{
    color: var(--light-black);
    font-size: 2rem;
    text-transform: initial;
    margin-bottom: 1rem;
}

.container_404 .flex .details{
    flex: 1 1 20rem;
}

.container_404 .flex img{   
    width: 30rem;
    flex: 1 1 40rem;
}

/* 404 Ends */

/* Footer Starts */

.footer{
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/ff-center.jpg);
    background-size: cover;
    background-position: bottom;
    /* background-attachment: fixed; */
}

.footer .about-footer{
    width: 100%;
    /* background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem; */
}

.footer .about-footer h3{
    text-align: center;
}

.footer .about-footer p{
    color: var(--light-white);
    font-size: 1rem;
    text-align: center;
    text-transform: initial;
    margin-bottom: 1.5rem;
}

.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.footer .about-footer h3,
.footer .box-container .box h3{
    color: var(--white);
    font-size: 1.5rem;
    padding-bottom: 1rem;
}

.footer .about-footer h3{
    text-align: center;
}

.footer .box-container .box{
    /* background: rgba(0, 0, 0, 0.6);
    border-radius: .5rem;
    padding: 1rem; */
}

.footer .box-container .box a{
    color: var(--light-white);
    font-size: 0.8rem;
    padding-bottom: 0.75rem;
    width: 12rem;
    display: block;
}

.footer .box-container .box a.email{
    width: 15rem;
    text-transform: lowercase;
}

.footer .box-container .box a i{
    color: var(--main-color);
    padding-right: .5rem;
}

.footer .box-container .box a:hover i{
    padding-right: 1rem;
    transition: .2s linear;
}

.footer .credit{
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: .1rem solid var(--light-white);
    font-size: 1rem;
    color: var(--white);
}

.footer .credit span{
    color: var(--main-color);
}

/* Footer Ends */

/* Media Queries */
@media (max-width:1200px){

    .header .header-2 .flex .logo-box .logo-text{
        font-size: 1.25rem;
    }

    .header .header-2 .flex .navbar .dropbtn,
    .header .header-2 .flex .navbar a{
        margin: 0 0.5rem;
        font-size: 1rem;
    }

    section{
        padding: 1.5rem 5%;
    }

    .box-container-2{
        margin-top: 2rem;
    }

    .about_section-3 .flex .image img{
        width: 380px;
        border-radius: 1rem;
    }

    .events_container{
        grid-template-columns: repeat(2, 350px);
        gap: 2rem;
    }

    .gallery .item{
        width: calc(33.33% - 1rem);
    }

    .video_section-1 .video_container{
        grid-template-columns: repeat(3, 300px);
        gap: 1rem;
    }
}

@media (max-width:1020px){

    .header .header-2 .flex .logo-box .logo-text{
        font-size: 1.75rem;
    }

    section{
        padding: 1.5rem 1rem;
    }

    #menu-btn{
        display: inline-block;
        transition: .2s linear;
    }

    #menu-btn.fa-times{
        transform: rotate(180deg);
    }

    .header .navbar{
        position: absolute;
        top: 99%; left: 0; right: 0;
        background-color: var(--white);
        border-top: var(--border-1);
        border-bottom: var(--border-1);
        padding: 1rem;
        transition: .2s linear;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
    }
    
    .header .navbar.active{
        z-index: 1000;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .header .navbar .dropbtn,
    .header .navbar a{
        display: block;
        margin: 1rem;
        text-align: left;
        border-top: var(--border-light);
        padding-top: .5rem;
    }

    .header .navbar a:first-child{
        border: none;
    }

    .dropdown-content{
        display: none;
        visibility: hidden;
        opacity: 0;
        position: relative;
        width: 75%;
        left: 3rem;
    }
    
    .dropdown-content a{
        /* background-color: var(--light-bg); */
        border-bottom: var(--border-light) !important;
        border-top: none !important;
    }

    .dropdown-content a:last-child{
        border: none !important;
    }

    .dropdown:focus-within .dropdown-content,
    .dropdown:hover .dropdown-content{
        display: initial;
    }

    .home_section-5 .swiper-buttons{
        display: none;
    }

    .home_section-5 .box{
        flex-direction: column;
    }
    
    .home_section-5 .box .image{
        text-align: center;
    }

    .home_section-5 .box .content{
        text-align: center;
    }

    .home_section-5 .box-container .box .content p{
        padding-top: 1rem;
        padding-right: 1rem;
    }

    .about_section-3 .flex .image img{
        width: 100%;
        border-radius: 1rem;
    }

    .event_popup-img{
        width: 300px;
    }

    .service_section-2 .grid{
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .service-page_section-1 .image img{
        width: 400px;
        border: var(--border-1);
        border-radius: 1rem;
    }

    .blogs_container{
        grid-template-columns: repeat(2, 1fr);
    }

    .counsellors_container{
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery .item{
        width: calc(50% - 1rem);
    }

    .video_section-1 .video_container{
        grid-template-columns: repeat(2, 330px);
        gap: 2.5rem;
    }

    .container_404 .flex{
        flex-wrap: wrap;
    }

    .container_404 .flex h1{
        font-size: 8rem;
    }
    
    .container_404 .flex h2{
        font-size: 4rem;
    }
    
    .container_404 .flex p{
        font-size: 1.5rem;
    }

    .container_404 .flex .details{
        flex: 1 1 20rem;
    }
    
    .container_404 .flex img{   
        width: 20rem;
        flex: 1 1 4 0rem;
    }
}

@media (max-width:768px){

    .heading h1{
        font-size: 4rem;
    }

    .header-2 .flex{
        padding: 0.4rem 2rem !important;
    }

    .swiper-buttons{
        display: none;
    }

    h3.h3-title{
        font-size: 1.5rem;
    }
    
    h2.h2-title{
        font-size: 2.5rem;
    }

    .home_section-3 .flex,
    .home_section-4 .flex{
        flex-direction: column;
    }

    .home_section-4 .flex{
        text-align: center;
    }

    .home_section-4 .flex img{
        height: 300px;
    }

    .home_section-5 .box img{
        height: 300px;
    }

    .home_section-7 .testimonial_card{
        width: 400px;
    }

    .about_section-1 .box-container{
        /* padding: 1.5rem; */
        flex-direction: column;
    }

    .about_section-1 .box-container .about_details{
        gap: 0.5rem;
        margin: 1rem;
    }

    .about_section-1 .box-container .images_reels-vertical,
    .about_section-1 .box-container .images_reels-horizontal{
        width: 600px;
        /* height: 400px; */
        text-align: center;
        align-self: center;
    }

    .about_section-1 .box-container .images_reels-vertical{
        display: none;
    }

    .about_section-1 .box-container .images_reels-horizontal{
        display: inline-block;
        height: 300px;
    }

    .about_section-1 .box-container .reels_slider{
        height: 300px;
    }

    .about_section-1 .box-container .reel-img{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about_section-2 .flex{
        flex-direction: column;
        max-width: 600px;
    }
    
    .about_section-3 .flex .image{
        display: none;
    }

    .about_section-3 .flex .content .image_responsive{
        display: block;
        margin: auto;
        max-width: 400px;
        position: relative;
        overflow: hidden;
    }

    .about_section-3 .flex .content .image_responsive img{
        max-width: 400px;
    }

    .service-page_section-1 .flex{
        flex-direction: column;
    }
    
    .events_container{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .event_popup-inner{
        width: 420px;
        padding: 2.8rem 1.5rem 2.5rem;
        overflow-y: scroll;
    }

    .event_popup-content{
        grid-template-columns: 1fr;
        row-gap: 1.6rem;
    }
    
    .event_popup-img{
        margin-top: 1rem;
        max-width: 300px;
    }

    .details_title{
        font-size: var(--normal-font-size);
    }

    .event_popup-close{
        top: 0.5rem;
    }

    .empty_events .empty-msg,
    .empty-blog .empty-msg{
        margin: 2.5rem;
    }

    .video_section-1 .video_container{
        grid-template-columns: repeat(2, 300px);
        gap: 1rem;
    }

    .container_404 .flex{
        /* flex-wrap: wrap; */
    }

    .container_404 .flex .details{
        flex: 1 1 20rem;
    }
    
    .container_404 .flex img{
        flex: 1 1 30rem;
    }
}

@media (max-width:670px){

    .header .header-2 .flex .logo-box .logo-text{
        font-size: 1.25rem;
    }

    .home_section-7 .testimonial_date{
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .about_section-1 .box-container .images_reels-horizontal{
        width: 400px;
    }
    
    .counsellors_container{
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .empty_events .empty-msg,
    .empty-blog .empty-msg{
        margin: 2rem;
    }

    .video_section-1 .video_container{
        grid-template-columns: 330px;
    }
}

@media (max-width:620px){

    .header .header-1 .flex{
        padding: 0.5rem 2rem;
    }
    
    .header-1 .buttons{
        display: none;
    }
    
    .header-1 .share{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }
    
    .header-2 .flex{
        padding: 0.4rem 2rem !important;
    }
    
    .header .header-2 .flex .logo{
        width: 30px;
    }
    
    .header .header-2 .flex .logo-text{
        font-size: 1rem;
        color: var(--black);
    }
    
    #menu-btn{
        font-size: 1rem;
    }

    .box-container-2{
        margin-top: 1rem;
    }

    .box-container-2 .flex-box .box h2{
        font-size: 2rem;
    }
    
    .box-container-2 .flex-box .box p{
        font-size: 1rem;
    }
    
    .home_section-4 .flex .content .about_tabs{
        column-gap: 2rem;
        margin-bottom: 1rem;
    }
    
    .home_section-4 .flex .content .about_details ul{
        grid-template-columns: repeat(2, 10rem);
    }
    
    .home_section-4 .flex .image img{
        height: 300px;
    }
    
    .home_section-5 .box img{
        height: 250px;
    }
    
    .home_section-7 .testimonial_card{
        width: 350px;
    }

    .home_section-7 .testimonial_profile-name{
        font-size: 1.5rem;
    }
    
    .about_section-1 .box-container .images_reels-horizontal{
        width: 350px;
    }

    .service-page_section-2 .grid{
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .upcoming_events .event_card .content{
        flex-direction: column;
    }

    .upcoming_events .event_card .content .event_img{
        flex: 1 1 5rem;
    }

    .upcoming_events .event_card .content .details{
        flex: 1 1 10rem;
    }

    .upcoming_events .event_card .content .event_img img{
        width: 300px;
    }
    
    .event_popup-inner{
        height: 600px;
    }
    
    .blogs_container{
        grid-template-columns: repeat(1, 25rem);
    }

    .empty_events .empty-msg,
    .empty-blog .empty-msg{
        margin: 1.5rem;
    }
    
    .gallery .item{
        width: 100%;
    }

    .container_404 .flex h1{
        font-size: 6rem;
    }
    
    .container_404 .flex h2{
        font-size: 3rem;
    }
    
    .container_404 .flex p{
        font-size: 1rem;
    }
}

@media (max-width:450px){

    h1.h1-title{
        font-size: 2.5rem;
    }

    h2.h2-title{
        font-size: 2rem;
    }

    h3{
        font-size: 1.5rem !important;
    }

    .box-container-2 .flex-box .box p{
        font-size: 1rem;
        word-wrap: break-word;
    }

    .home_section-4 .flex .content .about_tabs{
        column-gap: 1rem;
    }

    .home_section-4 .flex .image img{
        height: 250px;
        border-radius: 1rem;
    }

    .home_section-4 .flex .content .about_details ul{
        text-align: left;
        grid-template-columns: 10rem;
    }

    .home_section-5 .box img{
        height: 200px;
    }

    .home_section-7 .testimonial_card{
        width: 300px;
    }

    .home_section-7 .testimonial_date{
        font-size: .8rem !important;
        margin-bottom: 1rem;
    }

    .about_section-1 .box-container .images_reels-horizontal{
        width: 300px;
    }

    .about_section-3 .flex{
        /* margin: 1rem; */
    }

    .about_section-3 .flex .content .image_responsive{
        max-width: 300px;
    }

    .about_section-3 .flex .content .image_responsive img{
        max-width: 300px;
    }

    .about_section-4 .box-container .box{
        max-width: 400px;
    }

    .about_section-5 .box-container{
        max-width: 400px;
    }

    .service-page_section-1 .image img{
        width: 280px;
    }

    .upcoming_events .event_card .content .event_img img{
        width: 275px;
    }

    .event_popup-img{
        width: 250px;
    }

    .blogs_container{
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .empty_events .empty-msg,
    .empty-blog .empty-msg{
        margin: 1rem;
    }

    .wrapper_404{
        overflow: hidden;
    }

    .container_404 .flex h1{
        font-size: 5rem;
    }
    
    .container_404 .flex h2{
        font-size: 2.5rem;
    }
    
    .container_404 .flex p{
        font-size: 1rem;
    }
}