@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');







:root {



    --primary: #ef3090;



     /* --primary: #ff188a; */



    --white: #fff;



    --black: #000;



    --gray: gray;



    --light: #f8f8f8;



    /* --font-family: "Sora", sans-serif; */



    --yellow: #ffc107;



}







* {



    padding: 0;



    margin: 0;



    box-sizing: border-box;



    font-family: "Inter", sans-serif;



}







h1,



h2,



.h1,



.h2,



.fw-bold {



    font-weight: 600 !important;



    font-family: var(--font-family);



}







h3,



h4,



.h3,



.h4,



.fw-medium {



    font-weight: 500 !important;



    font-family: var(--font-family);



}







h5,



h6,



.h5,



.h6,



.fw-normal {



    font-weight: 400 !important;



    font-family: var(--font-family);



}







p,



span,



ul,



li {



    font-size: 14px;



}







body {



    font-family: var(--font-family);



    padding: 0;



    margin: 0;



    box-sizing: border-box;



    overflow-x: hidden !important;



    font-family: "Inter", sans-serif;



}







a {



    text-decoration: none;



}







.border_white {



    border-bottom: 1px solid var(--white) !important;



}







.border_black {



    border-bottom: 1px dotted #292828;



}







.common_border {



    border: 2px solid var(--primary) !important;



}







.common_text_slogan {



    color: #ffc107 !important;



}







.common_text_pink {



    color: var(--primary)



}







.heading_text {



    color: var(--light);



}







.back-to-top {



    position: fixed;



    display: none;



    right: 30px;



    bottom: 30px;



    z-index: 99;



    background-color: #e91e63;



    color: var(--white);



}







.back-to-top:hover {



    color: var(--white);



}







.common_text {



    color: var(--primary) !important;



        font-size: 14px !important;



}







.logo_size {



    width: 250px;



}







/*** Navbar ***/



.top_header {



    background-color: #ee5da5 !important;



}







.bg-brown {



    background-color: #ee5da5 !important;



}







.dropdown-item {



    padding: 6px 12px;



    font-size: 16px!important;



    color: #333;



    transition: all 0.3s ease;



    position: relative;



    border-bottom: 1px solid #f5f5f5;



    /* margin: 4px!important; */



    border-radius: 0;



}







.dropdown-item.active,



.dropdown-item:active {



    color: var(--white);



    text-decoration: none;



    background-color: var(--primary) !;



}







.navbar .dropdown-toggle::after {



    border: none;



    content: "\f107";



    font-family: "Font Awesome 5 Free";



    font-weight: 900;



    vertical-align: middle;



    margin-left: 8px;



}







.navbar .navbar-nav .nav-link {



    margin-right: 20px;



    padding: 1px 0;



    color: var(--dark);



    font-weight: 500;



    text-transform: capitalize;



    outline: none;



    font-size: 16px;



}







.navbar .navbar-nav .nav-link:hover,



.navbar .navbar-nav .nav-link.active {



    color: var(--primary);



}







@media (max-width: 1062px) and (min-width: 652px) {



    .navbar .navbar-nav .nav-link {



        font-size: 16px;



    }



}







.navbar.sticky-top {



    top: -100px;



    transition: .5s;



}







.dropdown-item {



    font-size: 16px;



    padding: 0.7rem 0.2rem;



}







@media (max-width: 991.98px) {



    .navbar .navbar-nav .nav-link {



        margin-right: 0;



        padding: 10px 0;



    }







    .navbar .navbar-nav {



        border-top: 1px solid var(--white);



        ;



    }



}







@media (min-width: 992px) {



    .navbar .nav-item .dropdown-menu {



        display: block;



        visibility: hidden;



        top: 100%;



        transform: rotateX(-75deg);



        transform-origin: 0% 0%;



        transition: .5s;



        opacity: 0;



    }







    .navbar .nav-item:hover .dropdown-menu {



        transform: rotateX(0deg);



        visibility: visible;



        transition: .5s;



        opacity: 1;



    }



}



































/* Multi-level dropdown */



.dropdown-submenu {



    position: relative;



}







.dropdown-submenu > .dropdown-menu {



    top: 0;



    left: 100%;



    margin-left: 0.1rem;



    display: none;



        height: 146px;



}



.dropdown-menu {



    min-width: 180px;



    max-height: none;



    padding: 0;



    border: 1px solid #e0e0e0;



    border-radius: 0;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);



    background: white;



    z-index: 1000;



    animation: slideDown 0.3s ease-out;



    overflow: visible;



    margin-top: 10px;



}







/* Show submenu on hover (desktop) */



@media (min-width: 992px) {



    .dropdown-submenu:hover > .dropdown-menu {



        display: block;



    }



}







/* Arrow icon */



.dropdown-submenu > a::after {



    content: "›";



    float: right;



}







/* Mobile fix */



@media (max-width: 991px) {



    .dropdown-submenu > .dropdown-menu {



        position: static;



        margin-left: 0;



    }







    .dropdown-submenu > a::after {



        content: "▼";



    }



}















































@media (min-width:320px) {



    .event-gallery-item img {



        object-fit: cover;



    }







    /* .carousel-slide img {



        object-fit: none !important;



    } */



}







@media (max-width:320px) {



    .ourlatest_news_card {



        padding: 0px !important;



    }







    .logo_size {



        width: 200px !important



    }







    .events_all .event {



        width: 100% !important;



        overflow-y: hidden;



    }







    .news .news_img {



        width: 100% !important;



    }



}







.navbar-light .navbar-toggler {



    border-color: transparent !important;



}







/* ********home page event carosoule**********/











@media (max-width: 320px) {



    .mobile-img {



        display: block !important;



    }







    .desktop-img {



        display: none;



    }



}







.carousel-caption-custom {



    position: relative;



    background: rgba(255, 255, 255, 0.97);



    border-radius: 12px;



    padding: 40px 30px;



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);



    display: flex;



    flex-direction: column;



    justify-content: center;



    height: 100%;



}







/* ===== Event Label ===== */



.event-label {



    position: absolute;



    top: 15px;



    right: 20px;



    background-color: #ffc107;



    color: #fff;



    padding: 6px 16px;



    font-size: 14px;



    font-weight: 600;



    border-radius: 20px;



    text-transform: uppercase;



    letter-spacing: 0.5px;



    z-index: 10;



}







/* ===== Event Date ===== */



.event-date {



    display: inline-flex;



    align-items: center;



    gap: 6px;



    font-size: 14px;



    color: #333;



    margin-bottom: 10px;



}







.event-date i {



    color: #ffc107;



}







/* ===== Paragraph ===== */



.carousel-caption-custom p {



    font-size: 15px;



    color: #555;



    line-height: 1.6;



    flex-grow: 1;



}







/* ===== Responsive ===== */



@media (max-width: 992px) {



    .carousel-container {



        flex-direction: column;



    }







    .carousel-left,



    .carousel-right {



        flex: 1 1 100%;



        min-height: 400px;



    }







    .carousel-caption-custom {



        padding: 30px 20px;



    }







    .event-label {



        top: 12px;



        right: 15px;



        font-size: 13px;



    }



}







@media (max-width: 576px) {



    .carousel-caption-custom {



        padding: 20px 15px;



    }







    .event-label {



        top: 8px;



        right: 10px;



        font-size: 12px;



        padding: 4px 10px;



    }







    .event-date {



        font-size: 13px;



    }







    h5 {



        font-size: 18px;



    }







    .carousel-left,



    .carousel-right {



        min-height: 350px;



    }



}







.carousel-container {



    display: flex;



    flex-wrap: wrap;



    align-items: stretch;



    gap: 20px;



}







.carousel-left,



.carousel-right {



    flex: 1 1 500px;



    display: flex;



    flex-direction: column;



}







.carousel-left .carousel-inner,



.carousel-right .carousel-inner {



    height: 100%;



}







.carousel-left img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    border-radius: 10px;



}







.carousel-caption-custom {



    background: #fff;



    color: #000;



    padding: 25px;



    height: 100%;



    display: flex;



    flex-direction: column;



    justify-content: center;



    border-radius: 10px;



    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);



}

@media (max-width: 991px) {

    .navbar-nav .mobile-cta-row .kids-btn {

        box-shadow: none !important;

        animation: none !important;

        transition: none !important;

        padding: 10px 14px !important;

        border-radius: 8px !important;

        background: linear-gradient(135deg, #ff188a, #ffca28) !important;

        background-size: 100% 100% !important;

        width: auto !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 0.9rem !important;

        text-align: center !important;

        margin: 0 !important;

        flex: 0 0 auto !important;

        white-space: nowrap !important;

        color: #fff;

    }

}





@media (max-width: 991px) {



    .carousel-container {



        flex-direction: column;



    }







    .carousel-left,



    .carousel-right {



        flex: 1 1 100%;



    }







    .carousel-caption-custom {



        height: auto;



    }







    .carousel-left img {



        height: auto;



    }



}







.main-card {



    min-height: 450px;



    transition: transform 0.8s ease-in-out;



}







.carousel-item {



    transition: transform 1s ease-in-out, opacity 0.8s ease-in-out;



}







.carousel-inner {



    overflow: hidden;



    border-radius: 12px;



}







/* Label */



.top-label {



    position: absolute;



    top: 10px;



    right: 15px;



    background: #0d6efd;



    color: #fff;



    font-size: 0.85rem;



    padding: 6px 12px;



    border-radius: 50px;



    font-weight: 600;



    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);



    letter-spacing: 0.3px;



}







/* Event Date */



.event-date {



    font-weight: 600;



    color: #198754;



    margin-top: -5px;



    margin-bottom: 10px;



}







/* Responsive Design */



@media (max-width: 768px) {



    .main-card {



        flex-direction: column;



    }







    .top-label {



        top: 8px;



        right: 10px;



        font-size: 0.75rem;



        padding: 4px 10px;



    }







    .event-date {



        font-size: 0.9rem;



    }







    .right-content {



        margin-top: 10px;



    }







    .left-slider img {



        border-radius: 10px;



    }



}







.slider-wrap {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 15px;



}







.main-card {



    display: flex;



    flex-wrap: wrap;



    background: #fff;



    border-radius: 14px;



    overflow: hidden;



    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);



    min-height: 420px;



    position: relative;



}







/* left slider area (custom) */



.left-slider {



    flex: 1;



    min-width: 320px;



    max-width: 680px;



    height: 420px;



    position: relative;



    overflow: hidden;



    background: #000;



}







.left-slider .inner-slide {



    position: absolute;



    inset: 0;



    opacity: 0;



    transition: opacity 0.8s ease;



    display: flex;



    align-items: center;



    justify-content: center;



}







.left-slider .inner-slide img {



    width: auto;



    height: auto;



    max-width: 100%;



    max-height: 100%;



    object-fit: contain;



    display: block;



    margin: 0 auto;



}







.left-slider .inner-slide.active {



    opacity: 1;



}







/* right content */



.right-content {



    flex: 1;



    min-width: 320px;



    padding: 36px 0px;



    display: flex;



    flex-direction: column;



    justify-content: center;



    /* background: linear-gradient(180deg, #fff, #fbf6ff); */



}







.right-content h2 {



    color: var(--accent-1);



    margin-bottom: 12px;



    font-size: 1.6rem;



}







.right-content p {



    color: #444;



    line-height: 1.7;



    margin-bottom: 16px;



    text-align: justify;



    white-space: normal;



    word-wrap: break-word;



}







/* next button */



.main-next {



    position: absolute;



    right: 18px;



    bottom: 18px;



    width: 48px;



    height: 48px;



    border-radius: 50%;



    border: 0;



    background: var(--primary);



    color: var(--white);



    font-size: 1.9rem;



    box-shadow: 0 6px 18px rgba(142, 36, 170, .22);



    cursor: pointer;



}







/* responsive adjustments */



@media (max-width:992px) {



    .main-card {



        flex-direction: column;



        min-height: auto;



    }







    .left-slider {



        height: 260px;



    }







    .right-content {



        padding: 24px;



        text-align: center;



    }







    .main-next {



        right: 50%;



        transform: translateX(50%);



    }



}







/*** social media iconsButton ***/



.btn {



    font-weight: 500;



    transition: .5s;



}







.btn.btn-primary,



.btn.btn-secondary {



    color: var(--white);



}







.btn-square {



    width: 38px;



    height: 38px;



}







.btn-sm-square {



    width: 32px;



    height: 32px;



}







.btn-lg-square {



    width: 48px;



    height: 48px;



    /* border: 2px solid #e91e63; */



    border-radius: 42px;



}







.btn-square,



.btn-sm-square,



.btn-lg-square {



    padding: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    font-weight: normal;



}







.btn-outline-body {



    color: var(--white);



    border-color: var(--white);



}







.btn-outline-body:hover {



    color: var(--primary);



    background: var(--white);



    border-color: var(--primary);



}







.bg-light {



    background-color: #efefef !important;



}







/* *********btn socialmedia********* */







/* ***********donate now button blinking************* */



.blinking {



    animation: blink 1s infinite;



}







@keyframes blink {







    0%,



    100% {



        opacity: 1;



    }







    50% {



        opacity: 0.3;



    }



}







.donate_button {



    background-color: var(--primary);



    color: var(--white);



    border-radius: 6px;



}







.donate_button:hover {



    color: var(--white);



}







/* ***********donate now button blinking************* */











/* DOTS */



.carousel-dots {



    position: absolute;



    bottom: 15px;



    width: 100%;



    display: flex;



    justify-content: center;



    gap: 8px;



    z-index: 1000;



}







.carousel-dots .dot {



    width: 12px;



    height: 12px;



    background: #fff;



    opacity: 0.6;



    border-radius: 50%;



    cursor: pointer;



}







.carousel-dots .dot.active {



    opacity: 1;



}







/* RESPONSIVE SETTINGS */



@media (max-width: 768px) {



    .parallax-carousel {



        height: 77vh;



    }







    .carousel-controls .arrow {



        font-size: 30px;



        padding: 10px 14px;



    }



}







@media (max-width: 480px) {



    .parallax-carousel {



        height: 60vh;



    }







    .carousel-controls .arrow {



        font-size: 22px;



        padding: 8px 10px;



    }







    .carousel-controls .prev {



        left: 10px;



    }







    .carousel-controls .next {



        right: 10px;



    }



}



/* ===== Slide Layer ===== */



.carousel-slide {



    position: absolute;



    width: 100%;



    height: 100%;



    opacity: 0;



}







.carousel-slide.active {



    opacity: 1;



    transform: scale(1);



    z-index: 1;



}



/* ===== Background Image with Parallax ===== */



.carousel-slide img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







@keyframes zoomParallax {



    from {



        transform: scale(1.05) translateY(0px);



    }







    to {



        transform: scale(1.15) translateY(-20px);



    }



}



/* ===== Controls ===== */



.carousel-controls {



    position: absolute;



    bottom: 35px;



    display: flex;



    gap: 15px;



    z-index: 5;



}



.arrow {



    border: none;



    background: rgba(255, 255, 255, 0.25);



    color: #fff;



    font-size: 2rem;



    border-radius: 50%;



    width: 50px;



    height: 50px;



    cursor: pointer;



}







.arrow:hover {



    background: linear-gradient(45deg, #00ffc3, #00c3ff);



    box-shadow: 0 0 15px rgba(0, 255, 204, 0.6);



}







/* ===== Dots ===== */



.carousel-dots {



    position: absolute;



    left: 30px;



    bottom: 35px;



    display: flex;



    flex-direction: column;



    gap: 10px;



    z-index: 5;



}







.dot {



    width: 13px;



    height: 13px;



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.5);



    cursor: pointer;



    transition: all 0.3s;



}







.dot.active {



    background: linear-gradient(45deg, #00ffc3, #00c3ff);



    transform: scale(1.3);



}







/* ===== Animations ===== */



@keyframes fadeUp {



    from {



        opacity: 0;



        transform: translateY(40px);



    }







    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@media (max-width: 576px) {



    .parallax-carousel {



        height: 70vh;



    }







    .carousel-slide img {



        height: 58vh;



    }



    .arrow {



        font-size: 1.5rem;



        width: 42px;



        height: 42px;



    }



}







/* ********hero section end********** */



/* *****kids******* */



/* Kids Button */



.kids-btn {



    position: relative;



    display: inline-block;



    padding: 2px 13px;



    font-size: 1rem;



    color: #2fa7bb;



    font-weight: 600;



    border: none;



    margin-right: 7px;



    border-radius: 50px;



    background: white;



    background-size: 200% 200%;



    cursor: pointer;



    text-decoration: none;



    box-shadow: 0 6px 25px rgba(255, 111, 97, 0.4);



    transition: all 0.4s ease;



    animation: gradientMove 5s ease infinite;



}







/* Gradient movement animation */



@keyframes gradientMove {



    0% {



        background-position: 0% 50%;



    }







    50% {



        background-position: 100% 50%;



    }







    100% {



        background-position: 0% 50%;



    }



}







/* ✨ Glowing highlight ring */



.kids-btn::before {



    content: "";



    position: absolute;



    inset: -5px;



    border-radius: 60px;



    /* background: linear-gradient(135deg, #ff188a, #ffca28); */



    z-index: -1;



    filter: blur(12px);



    opacity: 0.8;



    transition: all 0.4s ease;



}







.kids-btn:hover {



    color: #2fa7bb !important;



    transform: translateY(-2px) scale(1.05);



    box-shadow: 0 8px 30px rgba(255, 111, 97, 0.6);



    background: white;



}







/* Emoji bounce */



.kids-icon {



    font-size: 1.3rem;



    margin-right: 4px;



    color: #f41317 !important;



    animation: bounce 1.5s ease-in-out infinite alternate;



}







/* Bounce animation */



@keyframes bounce {



    from {



        transform: translateY(0);



    }







    to {



        transform: translateY(-5px);



    }



}







/*Responsive */



@media (max-width:768px) {



    .kids-btn {



        padding: 12px 26px;



        font-size: 1rem;



    }







    .kids-icon {



        font-size: 1.1rem;



    }



}







/* ******kids*******/



/* *****program section start*********/



.headline-double {



    display: block;



    height: 3px;



    width: 100%;



    margin-top: 8px;



    background: linear-gradient(135deg, #ffc107, #ffc107);



    position: relative;



}







.headline-double::after {



    content: "";



    display: block;



    height: 3px;



    width: 50%;



    margin: 4px auto 0;



    background: var(--primary);



    box-shadow: 0 0 10px rgba(255, 150, 102, 0.8);



}



/* Parallax Background */



.programs {



    position: relative;



    overflow: hidden;



}







.parallax-bg {



    background: url('../img/carosoule_one.png') no-repeat center/cover;



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: -1;



    background-attachment: fixed;



    filter: brightness(0.5);



}



/* Section Title */



.section-title {



    font-size: 2.5rem;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 1px;



}



/* Program Card */



.program-card {



    background: rgba(255, 255, 255, 0.1);



    backdrop-filter: blur(12px);



    border-radius: 20px;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);



    transition: transform 0.6s ease, box-shadow 0.6s ease;



}



.program-card:hover {



    transform: translateY(-12px) scale(1.05) rotateX(5deg);



    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);



}



.icon {



    font-size: 2.5rem;



}



.program-card h3 {



    color: var(--white);



}







.program-card p {



    color: #f0f0f0;



    font-size: 0.95rem;



}



/* Responsive Fix */



@media(max-width: 768px) {



    .section-title {



        font-size: 2rem;



    }



}







@media(max-width: 480px) {



    .icon {



        font-size: 2rem;



    }







    .program-card {



        padding: 20px;



    }



}







/* ******learn more page css********** */



.learn_more p {



    text-align: justify;



    word-break: break-word;



    hyphens: auto;



}



.px-2 {



    padding-right: .4rem !important;



    padding-left: .4rem !important;



}















/* Quote Box Styles */



.quote-box {



    /* background: #fff3cc; */



    border-radius: 20px;



    padding: 15px 15px;



    position: relative;



    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); */



    overflow: hidden;



    min-height: 130px;



}











.quote-content {



    display: flex;



    align-items: center;



    gap: 10px;



    position: relative;



    z-index: 2;



    padding: 0px;



}







.quote-icon {



    font-size: 16px;



    color: #000;



    opacity: 0.9;



    flex-shrink: 0;



}







.quote-start {



    align-self: flex-start;



    margin-top: 10px;



}







.quote-end {



    align-self: flex-end;



    margin-bottom: 10px;



}







.quote-text {



    flex: 1;



    text-align: center;



}







.quote-title {



    color: var(--primary);



    font-weight: 600!important;



    font-size: 1.4rem;



    margin-bottom: 8px;



    font-family: "Inter", sans-serif;



}







.quote-description {



    color: #000;



    font-size: 1rem;



    line-height: 1.4;



    margin: 0;



    font-weight: 400;



    text-align: justify;



}







/* Responsive Design */



@media (max-width: 768px) {



    .quote-box {



        padding: 30px 20px;



        margin: 0 15px;



    }



    



    .quote-content {



        flex-direction: column;



        gap: 20px;



        text-align: center;



    }



    



    .quote-icon {



        font-size: 2rem;



    }



    



    .quote-start,



    .quote-end {



        align-self: center;



    }



    



    .quote-title {



        font-size: 1.8rem;



    }



    



    .quote-description {



        font-size: 20px;



    }



}







@media (max-width: 480px) {



    .quote-box {



        padding: 25px 15px;



        border-top-right-radius: 0;



    }



    



    .quote-box::before {



        width: 40px;



        height: 40px;



    }



    



    .quote-title {



        font-size: 1.3rem;



    }



    



    .quote-description {



        font-size: 0.9rem;



    }



}







/* *****learn more page css***********/







.service-item .service-text {



    background: #f8f8f8;



    transition: .5s;



    box-shadow: 1px 1px 10px 1px var(--primary);



    border-radius: 5px;







}







.service-item:hover .service-text {



    background: rgba(0, 0, 0, .3);



}







.service-item * {



    transition: .5;



}







.service-item:hover * {



    color: var(--white);







}







.service-item:hover {



    background-color: #86281c96;



}







.service-item .btn {







    display: inline-flex;



    align-items: center;



    color: var(--primary);



    background: var(--white);



    white-space: nowrap;



    overflow: hidden;



    transition: .5s;



    border: 2px solid var(--primary);



}







.service-text {



    width: 100%;



}







.service-text ul {



    width: 100%;



    text-align: justify;



    word-break: break-all;



}







.icon_color {



    color: var(--primary);



}







.fa-plus:before {



    color: var(--primary);



}







.service-text i {



    color: var(--primary);



}







.service-text h5 {



    color: var(--primary);



}







.common_text li {



    font-size: 1rem;



    line-height: 1.9;



}







/* ********our programmes end********** */



/* ************************ */



/*** About & Feature ***/



.left-box {



    background: #f3f7ff;



    border-radius: 12px;



    text-align: justify;



    white-space: normal;



    word-break: break-all;



}







.main-btn {



    padding: 10px 28px;



    background: var(--primary);



    color: white;



    border-radius: 30px;



    text-decoration: none;



    transition: 0.3s;



}







.main-btn:hover {



    background: var(--primary);



}







/* Equal-height cards */



.info-card {



    background: #f4f7ff;



    border: 1px solid #e6e6e6;



    padding: 53px 15px;



    border-radius: 12px;



    text-align: center;



    transition: 0.3s;



    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);



}







.info-card:hover {



    transform: translateY(-6px);



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);



    border-top: 2px solid #e91e63;



}







.icon {



    font-size: 38px;



    color: var(--primary);



    margin-bottom: 10px;



}







.about-img img {



    position: relative;



    z-index: 2;



}







.about-img::before {



    position: absolute;



    content: "";



    top: 0;



    left: -50%;



    width: 100%;



    height: 100%;



    background: linear-gradient(90deg, #4A1711, #882B1D, #C74433);



    ;



    transform: skew(20deg);



    z-index: 1;



}







/* ************countdown************* */



.stats-section {



    background: linear-gradient(135deg, #dc3545, #ffbf00);



    padding: 80px 0;



    transform: skewY(-3deg);



}







.stats-section .container {



    transform: skewY(3deg);



}







.stat-box {



    background: rgb(255 255 255);



    border-radius: 20px;



    padding: 30px 20px;



    color: #000;



    transition: all 0.4s ease;



    backdrop-filter: blur(8px);



}







.stat-box img {



    width: 140px;



}







.stat-box:hover {



    transform: translateY(-10px);



    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);



}







.stat-icon {



    width: 60px;



    height: 60px;



    margin-bottom: 15px;



    transition: transform 0.3s ease;



}







.stat-box:hover .stat-icon {



    transform: scale(1.1) rotate(5deg);



}







.counter {



    font-size: 2.5rem;



    font-weight: 700;



    margin-bottom: 8px;



    /* color: #fff; */



    color: #000;



}







.stat-box p {



    font-weight: 500;



    font-size: 1rem;



    margin: 0;



    color: #000;



}







/* Responsive Design */



@media (max-width: 768px) {



    .stat-box {



        margin-bottom: 25px;



    }







    .counter {



        font-size: 2rem;



    }



}







/* ***************latest event end****************** */



/*** Internship Page Two Column Layout ***/



.internship-section {



    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);



}







.internship-program-card {



    background: url('../img/internwithus-img.png') right top/cover no-repeat;



    overflow: hidden;



    transition: transform 0.3s ease, box-shadow 0.3s ease;



    border: none;



    position: relative;



    border-radius: 15px;



}







.program-image-container {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 1;



    display: block;



    background: url('./img/internwithus-img.png') right top/cover;



    background-size: cover;



    background-position: right top;



    background-repeat: no-repeat;



}







.program-image-container img {



    display: none;



}







.program-content {



    text-align: justify;



    padding: 30px;



    position: relative;



    z-index: 10;



    height: 100%;



    display: flex;



    flex-direction: column;



    justify-content: center;



}







.program-content strong {



    color: #000; 



    font-weight: 600!important;



    font-size: 18px!important;







}







.program-content h2 {



    color: #000; 



    font-weight: 700!important;



    margin-bottom: 12px;



    font-size: 1.5rem;



    text-align: center;







}







.program-content ul {



    padding-left: 20px;



    margin-bottom: 10px;



}







.program-content li {



    /* margin-bottom: 4px; */



    line-height: 1.4;



}







.projects-header {



    background: transparent;



    color: #000;



    font-weight: 700!important;



    border-radius: 15px 15px 0 0;



    padding: 15px 20px;



    margin-bottom: 0;



    border: none;



}







.projects-header h2 {



    font-weight: 700!important;



    font-size: 1.5rem;



    color: #000;



    margin: 0;



}



.program-content p{



    font-size:14px!important;



}







.projects-content-scrollable {



    display: grid;



    grid-template-columns: 1fr;



    gap: 8px;



    padding: 4px;



    /* background: #fff; */



    border-radius: 0 0 15px 15px;



    max-height: none; 



    overflow: visible; 



}







.project-dropdown-card {



    background: #fff;



    border-radius: 8px;



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);



    overflow: hidden;



    transition: box-shadow 0.3s ease;



    border: 1px solid #e0e0e0;



    margin-bottom: 6px;



}







.project-dropdown-card:hover {



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);



}







.project-dropdown-card.active {



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);



   



}







.project-header {



    background: #fff;



    padding: 12px 8px;



    cursor: pointer;



    transition: background-color 0.3s ease;



    border-bottom: none;



    position: relative;



    display: flex;



    align-items: center;



    justify-content: space-between;



}







.project-header:hover {



    background: #f5f5f5;



}







.project-header h4 {



    font-size: 14px;



    font-weight: 500;



    color:var(--primary);



    margin: 0;



    line-height: 1.4;



    flex: 1;



}







.project-header h4::after {



    content: '▼';



    position: absolute;



    right: 12px;



    top: 50%;



    transform: translateY(-50%);



    font-size: 12px;



    color: #666;



    transition: transform 0.3s ease;



    font-family: Arial, sans-serif;



}







.project-dropdown-card.active .project-header h4::after {



    transform: translateY(-50%) rotate(180deg);



}







.toggle-icon {



    display: none;



}







.project-dropdown-content {



    max-height: 0;



    overflow: hidden;



    transition: max-height 0.3s ease;



    background: #fafafa;



    border-top: 1px solid #e0e0e0;



}







.project-dropdown-content.active {



    max-height: 500px;



    background: #fafafa;



}







.project-content-wrapper {



    padding: 16px;



    display: flex;



    gap: 15px;



    align-items: flex-start;



}







.project-image-fixed {



    flex: 0 0 140px;



    height: 180px;



    overflow: hidden;



    border-radius: 6px;



    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



    display: none;



    transition: all 0.3s ease;



}







.project-dropdown-card.active .project-image-fixed {



    flex: 0 0 200px;



    height: 250px;



}







.project-image-fixed img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.3s ease;



}







.project-image-fixed:hover img {



    transform: scale(1.02);



}







.project-description {



    flex: 1;



    min-width: 0;



    max-height: 250px;



    overflow-y: auto;



    padding-right: 8px;



}







.project-description p {



    font-size: 0.85rem;



    margin-bottom: 6px;



    line-height: 1.4;



    color: #555;



}







.project-description strong {



    color: var(--primary);



    font-weight: 600;



}







/* Custom scrollbar */



.project-description::-webkit-scrollbar {



    width: 4px;



}







.project-description::-webkit-scrollbar-track {



    background: #f0f0f0;



    border-radius: 4px;



}







.project-description::-webkit-scrollbar-thumb {



    background: #808080;



    border-radius: 4px;



}







.project-description::-webkit-scrollbar-thumb:hover {



    background: #666666;



}







.project-item {



    border-bottom: 1px solid #e9ecef;



    padding-bottom: 15px;



    margin-bottom: 15px;



}







.project-item:last-child {



    border-bottom: none;



    margin-bottom: 0;



}







.project-info {



    display: flex;



    gap: 15px;



    align-items: flex-start;



}







.project-image-fixed {



    flex: 0 0 120px; /* Fixed width for image */



    height: 120px; /* Fixed height for image */



    overflow: hidden;



    border-radius: 8px;



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);



}







.project-image-fixed img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.3s ease;



}







.project-image-fixed:hover img {



    transform: scale(1.02);



}







.project-details {



    flex: 1;



    min-width: 0; /* Allow text to wrap properly */



    max-height: 120px; /* Fixed height for description area */



    overflow-y: auto; /* Add scrollbar only to description area */



    padding-right: 5px; /* Space for scrollbar */



    transition: max-height 0.3s ease; /* Smooth transition for expand/collapse */



}







.project-details.collapsed {



    max-height: 40px; /* Collapsed state - only show title */



    overflow: hidden;



}







.project-details h4 {



    font-size: 1.1rem;



    font-weight: 600;



    color: #333;



    margin-bottom: 10px;



    line-height: 1.3;



    cursor: pointer; /* Indicate clickable */



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.toggle-icon {



    font-size: 0.8rem;



    transition: transform 0.3s ease;



    color: #FF6B9D;



}







.project-details.expanded .toggle-icon {



    transform: rotate(180deg); /* Rotate arrow when expanded */



}







.description-content {



    opacity: 1;



    transition: opacity 0.3s ease;



}







.project-details.collapsed .description-content {



    opacity: 0;



    height: 0;



    overflow: hidden;



}







.project-details p {



    font-size: 0.9rem;



    margin-bottom: 8px;



    line-height: 1.4;



    color: #555;



}







.project-details strong {



    color: #FF6B9D; /* Pink color for labels */



    font-weight: 600;



}







/* Custom scrollbar for description area only */



.project-details::-webkit-scrollbar {



    width: 6px;



}







.project-details::-webkit-scrollbar-track {



    background: #f8f9fa;



    border-radius: 6px;



}







.project-details::-webkit-scrollbar-thumb {



    background: #808080; /* Gray scrollbar */



    border-radius: 6px;



}







.project-details::-webkit-scrollbar-thumb:hover {



    background: #666666; /* Darker gray on hover */



}







/* Responsive Design */



@media (max-width: 768px){



    .program-content li {



    /* margin-bottom: 4px; */



    line-height: 1.4;



    font-size:16px!important;



}



.program-content p{



    font-size:16px!important;



    padding-top:10px;



}



.project-description p {



    font-size: 16px!important;



    margin-bottom: 6px;



    line-height: 1.4;



    color: #555;



}



.project-content-wrapper {



    flex-direction: column;



    gap: 12px;



}



.project-image-fixed {



    width: 100%;



    max-width: 100%;



    flex: 0 0 auto;



    height: auto;



}



.project-image-fixed img {



    height: auto;



    object-fit: contain;



}



.project-description {



    width: 100%;



    max-height: none;



    overflow: visible;



    padding-right: 0;



}



.project-dropdown-content.active {



    max-height: none;



}



    



} 



@media (max-width: 991px) {



    .internship-section .row {



        flex-direction: column;



    }



    



    .program-image-container {



        height: 250px;



    }



    



    .projects-content-scrollable {



        grid-template-columns: 1fr;



        padding: 15px;



        max-height: 500px; /* Slightly smaller on mobile */



        overflow-y: auto;



    }



    



    .project-info {



        flex-direction: column;



        gap: 10px;



    }



    



    .project-image-fixed {



        flex: 0 0 100px;



        height: 100px;



    }



}







@media (max-width: 1024px) {



    .program-image-container {



        /* Keep visible for mobile/tablet with custom background */



        height: 250px;



    }



    



    .internship-program-card {



        background: none !important;



    }



    



    .program-content h2,



    .projects-header h2 {



        font-size: 1.3rem;



    }



    



    .projects-content-scrollable {



        padding: 10px;



        gap: 10px;



        max-height: 450px; /* Even smaller on small mobile */



        overflow-y: auto;



    }



    



    .project-image-fixed {



        flex: 0 0 80px;



        height: 80px;



    }



    



    .project-details h4 {



        font-size: 1rem;



    }



    



    .project-details p {



        font-size: 0.85rem;



    }



}



@media (max-width: 765px){



    .program-content li {



    /* margin-bottom: 4px; */



    line-height: 1.4;



    font-size:16px!important;



}



.program-content p{



    font-size:16px!important;



    padding-top:10px;



}



.project-description p {



    font-size: 16px!important;



    margin-bottom: 6px;



    line-height: 1.4;



    color: #555;



}



    



}







/*** gallery Start ***/



.gallery {



    columns: 3;



    column-gap: 1.5rem;



    width: 100%;



}







@media (max-width: 768px) {



    .gallery {



        columns: 2;



    }



}







@media (max-width: 480px) {



    .gallery {



        columns: 1;



    }



}







.gallery-item {



    break-inside: avoid;



    margin-bottom: 1.5rem;



    position: relative;



    border-radius: 12px;



    overflow: hidden;



    opacity: 0;



    transform: translateY(20px);



    animation: fadeUp 0.8s ease forwards;



    animation-delay: calc(var(--delay) * 0.2s);



}







.gallery-item:hover .overlay {



    opacity: 1;



    transform: translateY(0);



}







.gallery-item img {



    width: 100%;



    height: auto;



    display: block;



    transition: transform 0.3s ease;



}







.gallery-item:hover img {



    transform: scale(1.05);



}







.overlay {



    position: absolute;



    bottom: 0;



    left: 0;



    right: 0;



    background: linear-gradient(to top, var(--primary), transparent);



    padding: 2rem 1.5rem;



    color: white;



    opacity: 0;



    transform: translateY(20px);



    transition: all 0.3s ease;



}







.overlay h2 {



    font-size: 1.5rem;



    margin-bottom: 0.5rem;



    font-weight: 600;



}







.overlay p {



    font-size: 0.9rem;



    line-height: 1.4;



    opacity: 0.9;



}







.photo-credit {



    position: absolute;



    bottom: 10px;



    right: 10px;



    color: white;



    font-size: 0.8rem;



    opacity: 0.8;



    text-decoration: none;



}







.photo-credit:hover {



    opacity: 1;



}







@keyframes fadeUp {



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







.scroll-indicator {



    position: fixed;



    top: 0;



    left: 0;



    height: 3px;



    background: #00A89D;



    z-index: 1000;



    transition: width 0.3s ease;



}







/*** gallery End ***/



/*** Counter Facts Start ***/



.counter-facts {



    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.8)), url('../img/gallery_counter.png');



    background-size: cover;



    background-attachment: fixed;



    background-position: center center;



    background-repeat: no-repeat;



}







.counter-facts .counter {



    position: relative;



    text-align: center;



    width: 200px;



    min-height: 215px;



    padding: 10px 15px;



    margin: 0 auto;



    border-radius: 100px;



    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.2);



    background: var(--bs-white);



}







.counter-facts .counter:before {



    content: "";



    position: absolute;



    height: 105px;



    width: 100%;



    left: 0;



    top: 0;



    border-radius: 10px 10px 0 0;



    background-color: #521e18;



}







.counter-facts .counter .counter-icon {



    position: relative;



    width: 120px;



    height: 100px;



    margin: 0 auto 10px;



    border-radius: 10px 10px 0 0;



    transform: translateY(-20px);



    font-size: 50px;



    line-height: 90px;



    color: var(--white);



    background: #8d6d69;



    clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);



}







.counter-facts .counter .counter-icon:before {



    content: "";



    position: absolute;



    width: 120px;



    height: 90px;



    top: 0;



    left: 50%;



    transform: translateX(-50%);



    border-radius: 10px 10px 0 0;



    background: #86281c;



    z-index: -1;



    clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);



}







.counter-facts .counter:hover .counter-icon i {



    transform: rotate(360deg);



    transition: all 0.3s ease;



}







.counter-facts .counter h3 {



    color: var(--primary);



    font-size: 17px;



    font-weight: 600;



    text-transform: uppercase;



    margin: 0 0 5px 0;



}







.counter-facts .counter .counter-value {



    font-size: 23px;



    font-weight: 700;



    display: block;



    color: var(--bs-secondary);



}







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



    .counter-facts .counter {



        margin-bottom: 40px;



    }



}







/*** Counter Facts End ***/



/* *******patners******** */



/* .patners {



    overflow: hidden;



}







.logos img {



    width: 200px;



    padding: 30px;



}







.patners .slider {



    animation: slidein 10s linear infinite;



    white-space: nowrap;



}







@keyframes slidein {



    from {



        transform: translateX(0);



    }







    to {



        transform: translateX(100px);



    }



}







.patners .slider .logos {



    display: inline-block;



    margin: 0px 0;



}







.patners .slider .logos .fab {



    width: calc(100% / 100);



    animation: fade-in 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);



}







@keyframes slidein {



    from {



        transform: translate3d(0, 0, 0);



    }







    to {



        transform: translate3d(-100%, 0, 0);



    }



}







@keyframes fade-in {



    0% {



        opacity: 0;



    }







    100% {



        opacity: 1;



    }



} */



.partner-slider {



    width: 100%;



    overflow: hidden;



    position: relative;



    padding: 20px 0;



}







.partner-track {



    display: flex;



    width: calc(200%);



    /* Double for infinite scroll */



    animation: scroll 22s linear infinite;



}







.partner-track img {



    height: 80px;



    margin: 0 40px;



    object-fit: contain;



    /* filter: grayscale(100%); */



    transition: 0.3s;



}







.partner-track img:hover {



    filter: grayscale(0%);



    transform: scale(1.1);



}







/* Infinite sliding animation */



@keyframes scroll {



    0% {



        transform: translateX(0);



    }







    100% {



        transform: translateX(-50%);



    }



}







/* Responsive images */



@media (max-width: 992px) {



    .partner-track img {



        height: 70px;



        margin: 0 30px;



    }



}







@media (max-width: 768px) {



    .partner-track img {



        height: 55px;



        margin: 0 25px;



    }



}







@media (max-width: 480px) {



    .partner-track img {



        height: 40px;



        margin: 0 15px;



    }



}







.h2,



h2 {



    font-size: 1.75rem;



}







/* ********about us page****************** */



.image-header {



    position: relative;



    width: 100%;



    height: 150px;



    /* Adjust height as needed */



    overflow: hidden;



}







.image-header img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.gradient-overlay {



    position: absolute;



    inset: 0;



    z-index: 1;



}







/* Text overlay area */



.text-overlay {



    position: absolute;



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%);



    z-index: 2;



    text-align: center;



    color: white;



    width: 100%;



    padding: 0 15px;



}







.text-overlay h1 {



    font-size: 2.2rem;



    font-weight: 700;



    color: #fff;



    text-align: center;



    margin: 0;



    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */



}







/* Banner logo and text container */



.banner-logo-text {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 15px;



    /* margin-bottom: 10px; */



}







/* Banner logo styling */



.banner-logo {



    height: 15px;



    width: auto;



    max-width: 100px;



    object-fit: contain;



}







/* Banner title styling */



.banner-title {



    font-size: 1.8rem;



    font-weight: 700;



    color: #000 !important;



    text-align: center;



    margin: 0;



    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);



    font-family: Archivo;



}







/* Child reaching icon color */



.fa-solid.fa-child-reaching {



    color: #000 ;



}

.fa-solid.fa-child-reaching:hover {



    color: #f41317 !important;



}















/* Center breadcrumb */



.breadcrumb-overlay .breadcrumb {



    justify-content: center;



    background: transparent;



    padding: 0;



    margin: 0;



}











.breadcrumb-item a {



    color: #f5f5f5;



    text-decoration: none;



    font-weight: 500;



    transition: color 0.3s ease;



}







.breadcrumb-item a:hover {



    color: #e01fa0;



}







.breadcrumb-item+.breadcrumb-item::before {



    color: #000;



}







/* Responsive adjustments */



@media (max-width: 768px) {



    .image-header {



        height: 280px;



    }







    .text-overlay {



        padding: 0 25px;



    }







    .text-overlay h1 {



        font-size: 1.8rem;



    }







    .banner-logo-text {



        flex-direction: column;



        gap: 10px;



    }







    .banner-logo {



        height: 12px;



        max-width: 70px;



    }







    .banner-title {



        font-size: 1.8rem !important;



    }







    .breadcrumb {



        font-size: 0.95rem;



        padding: 0 25px;



    }



}







@media (max-width: 480px) {



    .image-header {



        height: 230px;



    }







    .text-overlay {



        padding: 0 20px;



    }







    .text-overlay h1 {



        font-size: 1.5rem;



    }







    .banner-logo-text {



        flex-direction: column;



        gap: 8px;



    }







    .banner-logo {



        height: 10px;



        max-width: 50px;



    }







    .banner-title {



        font-size: 1.5rem !important;



    }







    .breadcrumb {



        font-size: 0.9rem;



        padding: 0 20px;



    }



}







/* Mobile navbar spacing fixes */



@media (max-width: 768px) {



    .navbar {



        padding: 0.5rem 1rem !important;



    }



    



    .navbar-brand {



        padding-left: 0.5rem !important;



    }



    



    /* .navbar-toggler {



        padding-right: 0.5rem !important;



        margin-right: 0.5rem !important;



    } */



}







@media (max-width: 480px) {



    .navbar {



        padding: 0.5rem 0.75rem !important;



    }



    



    .navbar-brand {



        padding-left: 0.25rem !important;



    }



    



    .navbar-toggler {



        /* padding-right: 0.25rem !important; */



        margin-right: 0.25rem !important;



    }



}











/* 3D Slider */



.about_us_section .slider-container {



    perspective: 1000px;



    width: 100%;



    max-width: 350px;



    /* Adjusted for col-md-6 */



    height: 380px;



    position: relative;



}







.about_us_section p {



    text-align: justify;



    word-break: break-word;



    hyphens: auto;



}







.about_us_section .slider {



    width: 100%;



    height: 100%;



    position: absolute;



    transform-style: preserve-3d;



    animation: rotateSlider 12s infinite linear;



}







.about_us_section .slide {



    position: absolute;



    width: 100%;



    height: 100%;



    border-radius: 12px;



    overflow: hidden;



    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);



}







.about_us_section .slide img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







/* Cube faces (smaller depth so fits nicely) */



.about_us_section .slide:nth-child(1) {



    transform: rotateY(0deg) translateZ(180px);



}







.about_us_section .slide:nth-child(2) {



    transform: rotateY(90deg) translateZ(180px);



}







.about_us_section .slide:nth-child(3) {



    transform: rotateY(180deg) translateZ(180px);



}







.about_us_section .slide:nth-child(4) {



    transform: rotateY(270deg) translateZ(180px);



}







@keyframes rotateSlider {



    0% {



        transform: rotateY(0deg);



    }







    25% {



        transform: rotateY(-90deg);



    }







    50% {



        transform: rotateY(-180deg);



    }







    75% {



        transform: rotateY(-270deg);



    }







    100% {



        transform: rotateY(-360deg);



    }



}







/* Responsive fix */



@media (max-width: 767px) {



    .about_us_section .slider-container {



        max-width: 250px;



        height: 180px;



    }







    .about_us_section .slide:nth-child(1) {



        transform: rotateY(0deg) translateZ(120px);



    }







    .about_us_section .slide:nth-child(2) {



        transform: rotateY(90deg) translateZ(120px);



    }







    .about_us_section .slide:nth-child(3) {



        transform: rotateY(180deg) translateZ(120px);



    }







    .about_us_section .slide:nth-child(4) {



        transform: rotateY(270deg) translateZ(120px);



    }



}







/* ********about us page end****************** */



/* *********blog css start**********/



.cta-section {



    background: linear-gradient(135deg, #3faee1, #01277b);



    color: var(--white);



    border-radius: 20px;



    margin: 40px auto;



    padding: 60px 30px;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);



    position: relative;



    overflow: hidden;



}







/* Decorative animated circles */



.cta-section::before,



.cta-section::after {



    content: '';



    position: absolute;



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.1);



    animation: float 8s infinite ease-in-out;



}







.cta-section::before {



    width: 200px;



    height: 200px;



    top: -80px;



    left: -80px;



}







.cta-section::after {



    width: 150px;



    height: 150px;



    bottom: -60px;



    right: -60px;



}







@keyframes float {







    0%,



    100% {



        transform: translateY(0) scale(1);



    }







    50% {



        transform: translateY(-20px) scale(1.1);



    }



}







/* Title */



.cta-title {



    font-size: 2.2rem;



    font-weight: 700;



    margin-bottom: 15px;



}







/* Text */



.cta-text {



    font-size: 1.1rem;



    line-height: 1.6;



    max-width: 600px;



}







/* Button */



.btn-cta {



    background: var(--white);



    color: var(--primary);



    border-radius: 40px;



    font-weight: 600;



    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);



    transition: all 0.3s ease-in-out;



    text-decoration: none;



}







.btn-cta:hover {



    background: #ffe6e6;



    color: var(--primary);



    transform: translateY(-3px);



    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.5);



}







/* Responsive Fixes */



@media (max-width: 767px) {



    .cta-title {



        font-size: 1.8rem;



        text-align: center;



    }







    .cta-text {



        text-align: center;



        margin-bottom: 20px;



    }



}







/* *********blog css end***************/



/* ********volunteer******************/



/* ===== Intro Card ===== */



.intro-card {



    background: rgba(255, 255, 255, 0.8);



    backdrop-filter: blur(10px);



    border-radius: 20px;



    transition: all 0.4s ease;



    border: 1px solid rgba(255, 255, 255, 0.3);



}







.intro-card:hover {



    transform: translateY(-10px);



    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);



}







.intro-card ul {



    list-style: none;



    padding-left: 0;



}







.intro-card li {



    margin-bottom: 10px;



    font-size: 1.05rem;



    position: relative;



    padding-left: 30px;



    line-height: 1.6;



}







.intro-card li::before {



    content: "🌱";



    position: absolute;



    left: 0;



    top: 0;



    font-size: 1.2rem;



}







/* ===== Form Section ===== */



.volunteer-card {



    background: rgba(255, 255, 255, 0.9);



    border-radius: 20px;



    overflow: hidden;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



    backdrop-filter: blur(10px);



    transition: all 0.4s ease;



}







.volunteer-card:hover {



    transform: translateY(-6px);



    box-shadow: 0 20px 40px rgba(171, 71, 188, 0.3);



}







.text-content {



    padding: 40px;



}







.text-content ul {



    list-style: none;



    padding: 0;



    margin: 0;



}







.text-content li {



    font-size: 1rem;



    margin-bottom: 15px;



    line-height: 1.7;



    position: relative;



    padding-left: 35px;



}







.text-content li::before {



    content: "🌿";



    position: absolute;



    left: 0;



    top: 0;



    font-size: 1.2rem;



}







.image-content img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: all 0.4s ease;



}







.image-content img:hover {



    transform: scale(1.05);



}







/* Equal Height Columns */



.volunteer-card .row {



    align-items: stretch;



}







@media (max-width: 992px) {



    .text-content {



        padding: 25px;



    }







    .image-content {



        height: 300px;



    }



}







.glass-box {



    background: rgba(255, 255, 255, 0.2);



    backdrop-filter: blur(12px);



    border-radius: 25px;



    padding: 40px;



    max-width: 700px;



    border: 1px solid rgba(255, 255, 255, 0.3);



    transition: all 0.4s ease;



    text-align: revert-layer !important;



}







.glass-box:hover {



    transform: translateY(-5px);



}







.glass-box ul {



    list-style: none;



    padding: 0;



    margin: 0;



}







.glass-box li {



    font-size: 1rem;



    margin-bottom: 15px;



    line-height: 1.7;



    position: relative;



    padding-left: 35px;



    color: #2e1348;



}







.glass-box li::before {



    content: "■";



    position: absolute;



    left: 0;



    top: 2px;



    font-size: 1rem;



    color: #9c27b0;



    opacity: 0.7;



    transition: all 0.3s ease;



}







.glass-box li:hover::before {



    color: #ab47bc;



    transform: scale(1.2);



}







strong {



    /* color: #ff0000!important; */



    color:#ef3090;



}



strong1 {



    color:var(--primary);



        font-weight: bolder;



}



.about-title{



     color:var(--primary);



        font-weight: bolder;







}



.common_text1{



     color:#000;







}



.kids-heading{



    color:#f41317;



    font-weight: 600!important;



}







@media (max-width: 768px) {



    .glass-box {



        padding: 25px;



        margin: 20px;



    }



}







.volunteer-form {



    background: rgba(255, 255, 255, 0.9);



    backdrop-filter: blur(12px);



    border-radius: 20px;



    transition: none;



    border: 1px solid rgba(255, 255, 255, 0.4);



}







/* Card2 styling for internship form */



.card2 {



    background: rgba(255, 255, 255, 0.9);



    backdrop-filter: blur(12px);



    border-radius: 20px;



    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);



}







/* Removed hover effect */



.volunteer-form {



    transform: none;



    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */



}







.form-label {



    font-weight: 600;



    color: #4a148c;



}







input,



textarea,



select {



    border-radius: 12px !important;



    border: 1px solid #ccc !important;



    transition: all 0.3s ease;



}







input:focus,



textarea:focus,



select:focus {



    /* border-color: #7e57c2 !important;



    box-shadow: 0 0 8px rgba(126, 87, 194, 0.3) !important; */







    border-color: #fff !important;



    box-shadow: 0 0 8px rgba(136, 110, 180, 0.3) !important;



}







/* ===== Button ===== */







.shimmer-btn {



    position: relative;



    display: inline-block;



    padding: 6px 20px;



    font-size: 1rem;



    font-weight: 600;



    color: #fff;



    background: linear-gradient(135deg, #ffc107, #ee0979);



    text-decoration: none;



    border-radius: 4px;



    border: none;



    overflow: hidden;



    text-align: center;



    transition: none;



    min-width: 250px;



    width: fit-content;

       display: block;

    margin: 20px auto 0 auto;



}







/* Removed hover lift effect */



.shimmer-btn {



    transform: none;



    background: linear-gradient(135deg, #ee0979, #ffc107);



    color: #fff;



}







/* Shimmer effect */



.shimmer-btn::before {



    content: "";



    position: absolute;



    top: 0;



    left: -150%;



    width: 120%;



    height: 100%;



    background: linear-gradient(120deg,



            rgba(255, 255, 255, 0.0) 0%,



            rgba(255, 255, 255, 0.4) 50%,



            rgba(255, 255, 255, 0.0) 100%);



    transform: skewX(-20deg);



    animation: shimmer 2.2s infinite;



}







.shimmer-btn-kidspage {



    position: relative;



    display: inline-block;



    padding: 6px 20px;



    font-size: 1rem;



    font-weight: 600;



    color: #fff;



     background: linear-gradient(135deg, #f41317, #f3261bbf);



    text-decoration: none;



    border-radius: 4px;



    border: none;



    overflow: hidden;



    text-align: center;



    transition: transform 0.3s ease, background 0.3s ease;



    min-width: 250px;



    width: fit-content;



}







/* Hover lift effect */



.shimmer-btn-kidspage :hover {



    transform: translateY(-3px);



    /* background: linear-gradient(135deg, #ffc107, #ee0979); */



    background: linear-gradient(135deg, #f41317, #f3261bbf);



    color: #fff;



}







/* Shimmer effect */



.shimmer-btn-kidspage ::before {



    content: "";



    position: absolute;



    top: 0;



    left: -150%;



    width: 120%;



    height: 100%;



    background: linear-gradient(120deg,



            rgba(255, 255, 255, 0.0) 0%,



            rgba(255, 255, 255, 0.4) 50%,



            rgba(255, 255, 255, 0.0) 100%);



    transform: skewX(-20deg);



    animation: shimmer 2.2s infinite;



}







/* Keyframes for shimmer motion */



@keyframes shimmer {



    0% {



        left: -150%;



    }







    100% {



        left: 150%;



    }



}







/* Responsive text size */



@media (max-width: 768px) {



    .shimmer-btn {



        padding: 10px 22px;



        font-size: 0.9rem;



    }



}



.download-icon {



    display: inline-block;



    animation: arrowMove 1.4s ease-in-out infinite;



}







@keyframes arrowMove {



    0% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(8px);



    }



    100% {



        transform: translateY(0);



    }



}



.download-icon{



    animation: arrowMove 1.8s ease-in-out infinite;



}



/* ===== Responsive ===== */



@media (max-width: 768px) {







    .intro-card,



    .volunteer-form {



        padding: 20px !important;



    }







    .form-label {



        font-size: 0.9rem;



    }



}







/* Keyframes for shimmer motion */



@keyframes shimmer {



    0% {



        left: -150%;



    }







    100% {



        left: 150%;



    }



}







/* Responsive text size */



@media (max-width: 768px) {



    .shimmer-btn-kidspage  {



        padding: 10px 22px;



        font-size: 0.9rem;



    }



}



.download-icon {



    display: inline-block;



    animation: arrowMove 1.4s ease-in-out infinite;



}







@keyframes arrowMove {



    0% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(8px);



    }



    100% {



        transform: translateY(0);



    }



}



.download-icon{



    animation: arrowMove 1.8s ease-in-out infinite;



}



/* ===== Responsive ===== */



@media (max-width: 768px) {







    .intro-card,



    .volunteer-form {



        padding: 20px !important;



    }







    .form-label {



        font-size: 0.9rem;



    }



}







/* ********volunteer******************/



/* **************news*****************/



.news-section {



    background: #f9f9f9;



}







.section-title {



    font-size: 2.2rem;



    font-weight: 700;



}







.section-subtitle {



    color: #666;



    font-size: 1.1rem;



}







/* Card Styling */



.news-card {



    background: var(--white);



    border-radius: 16px;



    overflow: hidden;



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.news-card:hover {



    transform: translateY(-8px);



    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);



}







/* Image Section */



.news-img {



    position: relative;



    overflow: hidden;



}







.news-img img {



    width: 100%;



    height: 220px;



    object-fit: cover;



    transition: transform 0.4s ease;



}







.news-card:hover .news-img img {



    transform: scale(1.1);



}







.news-date {



    position: absolute;



    bottom: 12px;



    left: 12px;



    background: linear-gradient(135deg, #3faee1, #01277b);



    color: var(--white);



    padding: 5px 12px;



    border-radius: 8px;



    font-size: 0.9rem;



    font-weight: 600;



}







/* ******team**********/



.team-card {



    perspective: 1000px;



}







.team-inner {



    position: relative;



    width: 100%;



    height: 320px;



    transition: transform 0.8s;



    transform-style: preserve-3d;



}







.team-card:hover .team-inner {



    transform: rotateY(180deg);



}







.team-front,



.team-back {



    position: absolute;



    width: 100%;



    height: 100%;



    border-radius: 16px;



    backface-visibility: hidden;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    padding: 20px;



}







.team-front {



    background: var(--white);



}







.team-front img {



    width: 120px;



    height: 120px;



    border-radius: 50%;



    object-fit: cover;



    border: 4px solid var(--primary);



    margin-bottom: 15px;



}







.team-front h4 {



    font-size: 1.2rem;



    margin-bottom: 5px;



}







.team-front p {



    color: #777;



    font-size: 0.9rem;



}







.team-back {



    background: linear-gradient(135deg, #3faee1, #01277b);



    color: var(--white);



    transform: rotateY(180deg);



    text-align: center;



}







.team-back h4 {



    margin-bottom: 10px;



}







.team-back p {



    font-size: 0.95rem;



    margin-bottom: 15px;



}







.social-links a {



    color: var(--white);



    font-size: 1.3rem;



    margin: 0 8px;



    transition: opacity 0.3s;



}







.social-links a:hover {



    opacity: 0.8;



}







/* Responsive */



@media (max-width: 768px) {



    .team-inner {



        height: 280px;



    }







    .team-front img {



        width: 100px;



        height: 100px;



    }



}







/* ******team*********/



/* ******histroy timelune********/







.timeline-section {



    background: #f9f9f9;



}







/* Timeline wrapper */



.timeline {



    position: relative;



    max-width: 1100px;



    margin: auto;



    padding: 20px 0;



}







.timeline::before {



    content: "";



    position: absolute;



    top: 0;



    bottom: 0;



    width: 4px;



    background: var(--primary);



    left: 50%;



    transform: translateX(-50%);



}







/* Timeline Item */



.timeline-item {



    width: 50%;



    position: relative;



    padding: 20px 30px;



}







.timeline-item.left {



    left: 0;



    text-align: right;



}







.timeline-item.right {



    left: 50%;



}







/* Timeline Dot */



.timeline-dot {



    position: absolute;



    top: 30px;



    width: 18px;



    height: 18px;



    background: var(--primary);



    border-radius: 50%;



    border: 4px solid var(--white);



    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.2);



    z-index: 1;



}







.timeline-item.left .timeline-dot {



    right: -10px;



}







.timeline-item.right .timeline-dot {



    left: -10px;



}







/* Timeline Content */



.timeline-content {



    background: #dfdfdf;



    padding: 20px;



    border-radius: 16px;



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);



    display: inline-block;



    max-width: 400px;



    transition: transform 0.3s ease;



}







.timeline-content:hover {



    transform: translateY(-6px);



}







.timeline-content .date {



    font-size: 0.9rem;



    color: var(--primary);



    font-weight: bold;



    display: block;



    margin-bottom: 8px;



}







.timeline-content h4 {



    margin-bottom: 10px;



    font-size: 1.2rem;



    font-weight: 600;



}







/* Responsive */



@media (max-width: 992px) {



    .timeline::before {



        left: 20px;



    }







    .timeline-item {



        width: 100%;



        left: 0 !important;



        padding-left: 60px;



        padding-right: 20px;



        text-align: left !important;



    }







    .timeline-item .timeline-dot {



        left: 10px !important;



        right: auto;



    }



}







@media (max-width: 576px) {



    .timeline::before {



        display: none;



    }







    .timeline-item {



        padding: 0;



        margin-bottom: 25px;



    }







    .timeline-content {



        max-width: 100%;



        text-align: center;



    }



}







/* *****history timeline*********/



/* Content Section */



.news-content {



    padding: 20px;



}







.news-content h5 {



    font-size: 1.2rem;



    font-weight: 700;



    margin-bottom: 10px;



}







.news-content p {



    font-size: 0.95rem;



    color: #555;



    margin-bottom: 15px;



}







.read-more {



    font-weight: 600;



    text-decoration: none;



    color: var(--primary);



    transition: color 0.3s;



}







.read-more:hover {



    color: var(--primary);



}







/* **********news********************/



/* **************about page without heading content css********************/



.about-bridgers {



    background: linear-gradient(135deg, #fff 0%, #f8faff 100%);



    overflow: hidden;



    position: relative;



}







.text-gradient {



    background: linear-gradient(90deg, #ff6f61, #ff9966);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.about-content p {



    text-align: justify;



    color: #444;



    line-height: 1.8;



}







.btn-read-more {



    background-color: #ff6f61;



    color: #fff;



    padding: 10px 24px;



    border-radius: 30px;



    text-decoration: none;



    font-weight: 600;



    transition: 0.4s;



    box-shadow: 0 4px 10px rgba(255, 111, 97, 0.3);



}







.btn-read-more:hover {



    background-color: #ff4f4f;



    transform: translateY(-3px);



    box-shadow: 0 6px 14px rgba(255, 111, 97, 0.5);



}







/* Floating Hearts Animation */



.floating-hearts {



    position: relative;



    display: inline-block;



}







.heart {



    position: absolute;



    width: 40px;



    opacity: 0.8;



    animation: floatUp 6s infinite ease-in-out;



}







.heart.h1 {



    left: 10%;



    animation-delay: 0s;



}







.heart.h2 {



    left: 50%;



    animation-delay: 2s;



}







.heart.h3 {



    left: 80%;



    animation-delay: 4s;



}







@keyframes floatUp {



    0% {



        transform: translateY(0) scale(1);



        opacity: 1;



    }







    50% {



        transform: translateY(-30px) scale(1.2);



        opacity: 0.9;



    }







    100% {



        transform: translateY(-80px) scale(0.8);



        opacity: 0;



    }



}







.main-illustration {



    max-width: 300px;



    animation: floatImage 4s ease-in-out infinite alternate;



}







@keyframes floatImage {



    from {



        transform: translateY(0);



    }







    to {



        transform: translateY(-15px);



    }



}







/* Responsive */



@media (max-width: 768px) {



    .about-content {



        text-align: center;



    }







    .floating-hearts {



        display: none;



    }







    .main-illustration {



        margin-top: 20px;



        max-width: 220px;



    }



}







/* *********about page without heading content css**************/



/* *********OUR PHILOSOPHY******* */



.love-bridge-section {



    background: linear-gradient(135deg, #fff, #f8f9ff);



    position: relative;



    overflow: hidden;



    padding-top: 80px;



    padding-bottom: 80px;



}







/* Floating Heart Icons */



.heart-icon {



    position: absolute;



    color: #ff6f61;



    opacity: 0.8;



    font-size: 26px;



    z-index: 3;



    animation: floatIcon 6s infinite ease-in-out;



}







.heart-icon.h1 {



    top: 10%;



    left: 25%;



    animation-delay: 0s;



}







.heart-icon.h2 {



    top: 70%;



    left: 80%;



    animation-delay: 2s;



}







.heart-icon.h3 {



    top: 40%;



    left: 10%;



    animation-delay: 4s;



}







@keyframes floatIcon {







    0%,



    100% {



        transform: translateY(0);



        opacity: 0.8;



    }







    50% {



        transform: translateY(-20px);



        opacity: 1;



    }



}







/* Text Section */



.love-text p {



    color: #444;



    line-height: 1.8;



    text-align: justify;



    margin-bottom: 15px;



}







.text-gradient {



    background: linear-gradient(90deg, #ff6f61, #ff9966);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.btn-learn {



    background: #ff6f61;



    color: #fff;



    padding: 10px 25px;



    border-radius: 30px;



    text-decoration: none;



    font-weight: 600;



    box-shadow: 0 5px 15px rgba(255, 111, 97, 0.3);



    transition: 0.4s;



}







.btn-learn:hover {



    background: #ff4f4f;



    transform: translateY(-3px);



    box-shadow: 0 8px 20px rgba(255, 111, 97, 0.5);



}







/* Responsive */



@media (max-width: 992px) {



    .floating-img {



        max-width: 250px;



        margin-bottom: 30px;



    }







    .circle-bg {



        width: 250px;



        height: 250px;



    }







    .heart-icon {



        font-size: 20px;



    }



}







@media (max-width: 768px) {



    .love-text {



        text-align: center;



    }







    .circle-bg,



    .heart-icon {



        display: none;



    }



}







/* *********OUR PHILOSOPHY******* */



.about-bridgers {



    background: linear-gradient(135deg, #fff 0%, #f8faff 100%);



    overflow: hidden;



    position: relative;



}







.text-gradient {



    background: linear-gradient(90deg, #ff6f61, #ff9966);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.about-content p {



    text-align: justify;



    color: #444;



    line-height: 1.8;



}







.btn-read-more {



    background-color: #ff6f61;



    color: #fff;



    padding: 10px 24px;



    border-radius: 30px;



    text-decoration: none;



    font-weight: 600;



    transition: 0.4s;



    box-shadow: 0 4px 10px rgba(255, 111, 97, 0.3);



}







.btn-read-more:hover {



    background-color: #ff4f4f;



    transform: translateY(-3px);



    box-shadow: 0 6px 14px rgba(255, 111, 97, 0.5);



}







/* Floating Hearts Animation */



.floating-hearts {



    position: relative;



    display: inline-block;



}







.heart {



    position: absolute;



    width: 40px;



    opacity: 0.8;



    animation: floatUp 6s infinite ease-in-out;



}







.heart.h1 {



    left: 10%;



    animation-delay: 0s;



}







.heart.h2 {



    left: 50%;



    animation-delay: 2s;



}







.heart.h3 {



    left: 80%;



    animation-delay: 4s;



}







@keyframes floatUp {



    0% {



        transform: translateY(0) scale(1);



        opacity: 1;



    }







    50% {



        transform: translateY(-30px) scale(1.2);



        opacity: 0.9;



    }







    100% {



        transform: translateY(-80px) scale(0.8);



        opacity: 0;



    }



}







.main-illustration {



    max-width: 300px;



    animation: floatImage 4s ease-in-out infinite alternate;



}







@keyframes floatImage {



    from {



        transform: translateY(0);



    }







    to {



        transform: translateY(-15px);



    }



}







/* Responsive */



@media (max-width: 768px) {



    .about-content {



        text-align: center;



    }







    .floating-hearts {



        display: none;



    }







    .main-illustration {



        margin-top: 20px;



        max-width: 220px;



    }



}







/* ***********OUR PHILOSOPHY******** */



/*** Team Start ***/



.zigzag-content {



    background: var(--white);



    border-radius: 16px;



    padding: 20px;



    display: flex;



    align-items: center;



    gap: 15px;



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);



    position: relative;



    transition: transform 0.3s ease-in-out;



}







.zigzag-content:hover {



    transform: translateY(-6px);



}







/* Images */



.zigzag-img {



    width: 100px;



    height: 100px;



    border-radius: 50%;



    object-fit: cover;



    flex-shrink: 0;



    border: 4px solid var(--primary);



}







/* Card text */



.zigzag-card h4 {



    margin: 5px 0;



    font-size: 1.2rem;



}







.zigzag-card .date {



    font-size: 0.85rem;



    color: var(--primary);



    font-weight: 600;



}







/* Responsive - Tablet & Mobile */



@media (max-width: 992px) {



    .zigzag::before {



        left: 20px;



    }







    .zigzag-item {



        width: 100%;



        padding-left: 60px;



        padding-right: 20px;



        left: 0 !important;



    }



}







@media (max-width: 576px) {



    .zigzag::before {



        display: none;



    }







    .zigzag-item {



        padding: 0;



        margin-bottom: 20px;



    }







    .zigzag-content {



        flex-direction: column;



        text-align: center;



        padding: 15px;



    }







    .zigzag-img {



        width: 80px;



        height: 80px;



    }



}







/*** our Team End ***/



/* ******programm css******* */



.tab-rounded .nav-link {



    border-radius: 30px;



    margin: 5px;



    padding: 10px 20px;



    border: 2px solid transparent;



    transition: all 0.3s ease-in-out;



    font-weight: 500;



    color: #444;



}







.tab-rounded .nav-link.active {



    background: linear-gradient(135deg, #3faee1, #01277b);



    color: var(--white) !important;



    border-color: transparent;



    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);



}







.tab-rounded .nav-link:hover {



    border-color: #ff416c;



    color: #ff416c;



}







/* Masonry Card Styling */



.project-card {



    border: none;



    border-radius: 12px;



    overflow: hidden;



    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */



    border: 1px solid #ffc107;



    transition: transform 0.3s ease-in-out;



}







.project-progress a {



    font-size: 14px;



}







.project-card:hover {



    transform: translateY(-5px);



}







.project-card img {



    border-bottom: 1px solid var(--white);



}







.project-card .badge {



    font-size: 0.75rem;



}







.project-card {



    display: flex;



    flex-direction: column;



    height: 100%;



}







/* Ensures image + content takes space and footer sticks to bottom */



.project-content {



    flex: 1;



    display: flex;



    flex-direction: column;



}







.project-footer {



    margin-top: auto;



    /* Pushes footer to bottom */



}







/* Optional: Make all cards equal height */



.project-card {



    height: 100%;



}







/* Filter Bar */



.filter-bar {



    background: var(--white);



    border-radius: 12px;



    padding: 15px 20px;



    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);



    margin-bottom: 25px;



}







.filter-bar select,



.filter-bar input {



    border-radius: 30px;



    border: 1px solid #ddd;



    padding: 8px 15px;



}







.filter-bar label {



    font-weight: 500;



    margin-bottom: 5px;



    display: block;



}







/* ******gallery**** */



.gallery-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));



    gap: 15px;



}







.gallery-item {



    position: relative;



    overflow: hidden;



    border-radius: 12px;



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);



    transition: transform 0.3s ease;



}







.gallery-item:hover {



    transform: scale(1.03);



}







.gallery-item img,



.gallery-item video {



    width: 100%;



    height: 100%;



    object-fit: cover;



    display: block;



}







.gallery-overlay {



    position: absolute;



    inset: 0;



    background: rgba(0, 0, 0, 0.5);



    color: #fff;



    display: flex;



    align-items: center;



    justify-content: center;



    opacity: 0;



    transition: 0.3s ease;



    font-size: 1.8rem;



}







.gallery-item:hover .gallery-overlay {



    opacity: 1;



}







/* ****gallery***** */



/* ******programm css****** */



/* ****success stories **** */



.story-card {



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.story-card:hover {



    transform: translateY(-6px);



    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);



}







/* Before/After Section */



.before-after {



    height: 250px;



}







.before-after img {



    object-fit: cover;



    height: 100%;



}







.after-img {



    width: 50%;



    clip-path: inset(0 50% 0 0);



    transition: clip-path 0.3s ease;



}







.handle {



    width: 4px;



    background: #0d6efd;



    cursor: ew-resize;



}







.label-pill {



    display: inline-block;



    background: linear-gradient(135deg, #3faee1, #01277b);



    color: var(--white);



    font-weight: 600;



    padding: 6px 16px;



    border-radius: 50px;



    font-size: 0.9rem;



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);



    transition: transform 0.2s ease;



}







.label-pill i {



    color: var(--white);



}







.label-pill:hover {



    transform: scale(1.05);



}







.label-gradient {



    display: inline-block;



    background: linear-gradient(135deg, #00b09b, #96c93d);



    color: var(--white);



    font-weight: 600;



    padding: 6px 16px;



    border-radius: 50px;



    font-size: 0.9rem;



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);



    transition: transform 0.2s ease;



}







.label-gradient:hover {



    transform: scale(1.05);



}







.human-stories p {



    text-align: justify;



    word-break: break-word;







}







/* *****success stories******* */



/* ****event page css********* */



.events-section {



    background: #f9f9f9;



}







/* Buttons */



.btn-gradient {



    background: linear-gradient(135deg, #6a11cb, #2575fc);



    color: var(--white);



    font-weight: 600;



    border-radius: 12px;



    transition: 0.3s;



}







.btn-gradient:hover {



    opacity: 0.9;



    transform: translateY(-2px);



}







/* Event Card */



.event-card {



    background: var(--white);



    border-radius: 16px;



    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */



}







.event-card:hover {



    /* transform: translateY(-5px); */



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);



}







.event-date {



    font-weight: 600;



    color: var(--primary);



}







.event-title {



    font-weight: 600;



    margin-bottom: 5px;



}







.event-location {



    font-size: 0.9rem;



    color: #555;



    margin-bottom: 10px;



}







/* Gradient Buttons */



.btn-gradient {



    background: linear-gradient(135deg, #6a11cb, #2575fc);



    color: var(--white);



    border-radius: 12px;



}







.btn-gradient:hover {



    opacity: 0.9;



}























/* ---------- RESPONSIVE FIXES ---------- */







@media (max-width: 768px) {



    .event-slider-container {



        padding-bottom: 80px;



    }







    .custom-bottom-arrows {



        bottom: 15px;



        gap: 16px;



    }







    /* .swiper-button-prev,



    .swiper-button-next {



        width: 40px;



        height: 40px;



    } */



}







@media (max-width: 480px) {



    .event-slider-container {



        padding-bottom: 70px;



    }







    .custom-bottom-arrows {



        bottom: 12px;



        gap: 14px;



    }







    /* .swiper-button-prev,



    .swiper-button-next {



        width: 34px;



        height: 34px;



    } */



}



















/* .swiper-button-next,



.swiper-button-prev {



    color: #3f51b5;



    background-color: rgba(255, 255, 255, 0.9);



    border: none;



    border-radius: 50%;



    width: 45px;



    height: 45px;



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);



    top: 50%;



    margin-top: -22.5px;



    z-index: 10;



    transition: all 0.3s ease;



}







.swiper-button-next:after,



.swiper-button-prev:after {



    font-size: 20px !important;



    font-weight: 700;



}







.swiper-button-next:hover,



.swiper-button-prev:hover {



    background-color: var(--primary);



    color: white;



    transform: scale(1.1);



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);



}







.swiper-button-prev {



    left: -15px;



}







.swiper-button-next {



    right: -15px;



} */







/* ======================================================= */



/* RESPONSIVE ADJUSTMENTS (For all devices) */



/* ======================================================= */







/* Adjust position for Tablet/Desktop to keep them visible within container */



/* @media (min-width: 768px) {



    .swiper-button-prev {



        left: 10px;



    }







    .swiper-button-next {



        right: 10px;



    }



} */







/* Hide arrows on small mobile view (< 480px) as they clutter the screen */



/* @media (max-width: 480px) {







    .swiper-button-next,



    .swiper-button-prev {



        display: none !important;



    }



} */







/* *****event page css********** */



/* *******our events start********/



.event-card-3d {



    background: var(--white);



    border-radius: 20px;



    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);



   



    cursor: pointer;



}







.event-card-3d:hover {



    transform: rotateX(8deg) rotateY(8deg) scale(1.05);



    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);



}







.event-card-3d h4 {



    font-weight: 600;



    color: #222;



}







.event-card-3d p {



    font-size: 0.95rem;



    color: #555;



}







/* Responsive Fix */



@media (max-width: 768px) {



    .event-card-3d {



        padding: 20px;



    }



}







@media (max-width: 576px) {



    .event-card-3d img {



        width: 100%;



        height: auto;



    }



}







/* ********our event end **************/



/* *************with love wishlist**************** */



.wishlist-section {



    color: #000;



    overflow: hidden;



    position: relative;



}







/* Gradient Title */



.text-gradient {



    background: linear-gradient(90deg, #ff9a9e, #e91e63, #a1c4fd);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







/* Card Design */



.wishlist-card {



    background: rgba(255, 255, 255, 0.1);



    border-radius: 16px;



    padding: 2rem 1.5rem;



    text-align: center;



    color: #000;



    backdrop-filter: blur(12px);



    border: 2px solid transparent;



    background-clip: padding-box;



    position: relative;



    transition: all 0.4s ease;



    box-shadow: 0 4px 25px rgba(255, 255, 255, 0.08);



}







.wishlist-card::before {



    content: "";



    position: absolute;



    inset: 0;



    padding: 2px;



    border-radius: 16px;



    background: linear-gradient(135deg, #ffc107, #ee0979);



    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);



    -webkit-mask-composite: xor;



    mask-composite: exclude;



    pointer-events: none;



}







.wishlist-card:hover {



    transform: translateY(-10px) scale(1.03);



    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.2);



}























/* Equal Height Cards */



.wishlist-card {



    background: #fff;



    padding: 25px 20px;



    border-radius: 12px;



    text-align: center;



    height: 100%;



    /* Makes all cards equal height */



    display: flex;



    /* Flexible layout */



    flex-direction: column;



    /* Stack content vertically */



    justify-content: flex-start;



    /* Align content from top */



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}







/* Icon styling */



.icon-circle {



    width: 70px;



    height: 70px;



    background: #fce9f3;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 0 auto 20px;



    font-size: 28px;



    color: #d63384;



}







/* Hover effect */



.wishlist-card:hover {



    transform: translateY(-5px);



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);



}







/* Responsive text and spacing */



.wishlist-card h5 {



    font-size: 20px;



    margin-bottom: 12px;



    font-weight: 600;



}







.wishlist-card p {



    flex-grow: 1;



    font-size: 15px;



    color: #555;



}







/* Icon Circle */



.icon-circle {



    width: 70px;



    height: 70px;



    border-radius: 50%;



    background: linear-gradient(135deg, #ffb347, #ffcc33);



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 0 auto 1rem;



    color: #fff;



    font-size: 1.8rem;



    box-shadow: 0 0 25px rgba(255, 200, 100, 0.4);



    animation: pulseGlow 2s infinite;



}







@keyframes pulseGlow {







    0%,



    100% {



        transform: scale(1);



        box-shadow: 0 0 20px rgba(255, 200, 100, 0.4);



    }







    50% {



        transform: scale(1.15);



        box-shadow: 0 0 40px rgba(255, 200, 100, 0.8);



    }



}







/* Fade-in Animation */



.fade-in {



    opacity: 0;



    transform: translateY(40px);



    animation: fadeUp 1s forwards;



}







@keyframes fadeUp {



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







.delay-1 {



    animation-delay: 0.2s;



}







.delay-2 {



    animation-delay: 0.4s;



}







.delay-3 {



    animation-delay: 0.6s;



}







.delay-4 {



    animation-delay: 0.8s;



}







.delay-5 {



    animation-delay: 1s;



}







.delay-6 {



    animation-delay: 1.2s;



}







.delay-7 {



    animation-delay: 1.4s;



}







/* Responsive Adjustments */



@media (max-width: 768px) {



    .wishlist-card {



        padding: 1.5rem 1rem;



    }







    .icon-circle {



        width: 60px;



        height: 60px;



        font-size: 1.5rem;



    }







    h2.display-6 {



        font-size: 1.75rem;



    }



}







/* *************with love wishlist**************** */



.horizontal-card {



    max-width: 100%;



}







.card-img-right {



    width: 100%;



    height: 100%;



    object-fit: cover;



    border-top-right-radius: 0.375rem;



    border-bottom-right-radius: 0.375rem;



}







.image-col {



    max-width: 300px;



}







@media (max-width: 768px) {



    .image-col {



        max-width: 100%;



    }







    .card-img-right {



        border-radius: 0 0 0.375rem 0.375rem;



    }



}







.donate_now_list ul li {



    list-style: none;



    position: relative;



    padding: 0 0 0 20px;



    line-height: 2.4;



    font-weight: 500;



}







.donate_now_list ul.square li::before {



    content: "";



    position: absolute;



    left: 0;



    top: 10px;



    width: 10px;



    height: 10px;



    background-color: var(--primary);



}







/*** Contact ***/



@media (min-width: 992px) {



    .container.contact {



        max-width: 100% !important;



    }







    .contact-text {



        padding-left: calc(((100% - 960px) / 2) + .75rem);



    }



}







@media (min-width: 1200px) {



    .contact-text {



        padding-left: calc(((100% - 1140px) / 2) + .75rem);



    }



}







@media (min-width: 1400px) {



    .contact-text {



        padding-left: calc(((100% - 1320px) / 2) + .75rem);



    }



}







.contact_us .icon-box {



    background-color: white;



    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);



    transition: background-color 0.3s, color 0.3s;



    display: inline-flex;



    align-items: center;



    justify-content: center;



    width: 60px;



    height: 60px;



    border-radius: 50%;



    border: 2px solid var(--primary);



}







/*** Contact ***/



/*** awards Start ***/



.award_recognition .tab-class .tab-content .tab-pane .award_recognition_img {



    position: relative;



    overflow: hidden;



    border-radius: 10px;



    z-index: 1;



}







.award_recognition .tab-class .tab-content .tab-pane .award_recognition_img .destination-overlay {



    position: absolute;



    bottom: -100%;



    left: 0;



    z-index: 3;



    transition: 0.5s;



}







.award_recognition .tab-class .tab-content .tab-pane .award_recognition_img .search-icon {



    position: absolute;



    width: 100%;



    height: 100%;



    top: 0;



    right: 0;



    display: flex;



    justify-content: end;



    padding: 20px 20px 0 0;



    background: rgba(0, 0, 0, 0.1);



    border-radius: 10px;



    transition: 0.5s;







}







.award_recognition .tab-class .tab-content .tab-pane .award_recognition_img .search-icon a i {



    opacity: 0;



    transition: 0.5s;



}







.award_recognition .tab-class .nav-item {



    padding: 0 0 20px 0;



}







.award_recognition .tab-class .nav-item a.active {



    background: var(--primary) !important;



}







.award_recognition .tab-class .nav-item a.active span {



    color: var(--white) !important;



}







.award_recognition .tab-class .tab-content .award_recognition_img:hover .search-icon {



    background: rgba(19, 53, 123, 0.4);



}







.award_recognition .tab-class .tab-content .award_recognition_img:hover .destination-overlay {



    bottom: 0;



}







.award_recognition .tab-class .tab-content .award_recognition_img:hover .search-icon a i {



    opacity: 1;



}







.award_recognition .tab-class .tab-content .award_recognition_img img {



    transition: 0.5s;



}







.award_recognition .tab-class .tab-content .award_recognition_img:hover img {



    transform: scale(1.2);



}







/*** award End ***/



/* ***********learn more*************** */



.news_images img {



    width: 100%;



    height: 300px;



    object-fit: contain;



}







.common_learnmore_img img {



    width: 500px;



    max-height: 500px;



    object-fit: cover;



}







.common_learnmore_img p {



    text-align: justify;



    word-break: break-all;



}







@media(max-width:420px) {



    .captcha-wrap {



        transform: scale(.85)



    }



}







/************learn more*************** */



/* **********media query********** */



.email-link {



    word-break: break-all;



    overflow-wrap: anywhere;



    white-space: normal;



}







@media (max-width: 576px) {



    .email-link {



        display: inline-block;



        font-size: 14px;



        line-break: anywhere;







    }



}







/* *****csr patner css******* */



/* Container with gradient background animation */



.csr-container {



    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);



    background: #fff;



    transition: all 0.3s ease;



}







.csr-container:hover {



    transform: translateY(-5px);



    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);



}







.csr-text {



    background: linear-gradient(135deg, #fff0f5, #ffeef8);



    padding: 24px 40px;



}







.csr-text h2 {



    color: #e91e63;



    font-weight: 700;



    font-size: 2rem;



    margin-bottom: 20px;



}







.csr-text p {



    color: #555;



    line-height: 1.8;



    margin-bottom: 16px;



}







.highlight {



    color: #e91e63;



    font-weight: 600;



}







.btn-custom {



    border-radius: 50px;



    padding: 10px 25px;



    font-weight: 600;



    transition: all 0.3s ease;



    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);



}







.btn-pink {



    background: linear-gradient(135deg, #ff4081, #ff7eb3);



    color: #fff;



    border: none;



}







.btn-pink:hover {



    background: linear-gradient(135deg, #e91e63, #ff4081);



    transform: translateY(-2px);



    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.4);



}







.btn-blue {



    background: linear-gradient(135deg, #2196f3, #21cbf3);



    color: #fff;



    border: none;



    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);



}







.btn-blue:hover {



    background: linear-gradient(135deg, #1e88e5, #26c6da);



    transform: translateY(-2px);



    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);



}







.csr-image img {



    width: 100%;



    border-radius: 0;







}







@media (max-width: 992px) {



    .csr-text {



        padding: 40px 25px;



        text-align: center;



    }







    .csr-text h2 {



        font-size: 1.75rem;



    }



}







/* ******csr patners******* */



/* ********Companies Benefit*********** */



.benifit {



    margin: auto;



    padding: 50px;



    border-radius: 25px;



    background: rgba(255, 255, 255, 0.2);



    backdrop-filter: blur(12px);



    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);



    position: relative;



    overflow: hidden;



    transition: all 0.5s ease;



}







.benifit::before {



    content: "";



    position: absolute;



    top: -50%;



    left: -50%;



    width: 200%;



    height: 200%;



    background: linear-gradient(120deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));



    transform: rotate(25deg);



    transition: opacity 0.5s ease;



    opacity: 0;



}







.benifit:hover::before {



    opacity: 1;



    animation: shine 2.5s linear infinite;



}







@keyframes shine {



    0% {



        transform: translateX(-100%) rotate(25deg);



    }







    50% {



        transform: translateX(0%) rotate(25deg);



    }







    100% {



        transform: translateX(100%) rotate(25deg);



    }



}







.benefit-title {



    text-align: center;



    font-weight: 700;



    color: #e91e63;



    font-size: 2rem;



    margin-bottom: 35px;



}







.benefit-list p {



    color: #333;



    line-height: 1.8;



    position: relative;



    margin-bottom: 18px;



    padding-left: 28px;



}







.benefit-list p::before {



    content: "•";



    color: #e91e63;



    font-size: 1.4rem;



    position: absolute;



    left: 0;



    top: -4px;



}







.highlight {



    color: var(--primary);



    font-weight: 600;



}







.benefit-image {



    text-align: center;



    margin-top: 40px;



}







.benefit-image img {



    width: 100%;



    max-width: 700px;



    border-radius: 20px;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



    transition: transform 0.6s ease, box-shadow 0.6s ease;



}







.benefit-image img:hover {



    transform: scale(1.04);



    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);



}







@media (max-width: 768px) {



    .benifit {



        padding: 30px 20px;



    }







    .benefit-title {



        font-size: 1.6rem;



    }







    .benefit-list p {



        font-size: 1rem;



    }



}







/* *********Companies Benefit********** */



/* **********gratituied************ */



.gratitude-section {



    margin: auto;



    background: rgba(255, 255, 255, 0.2);



    backdrop-filter: blur(15px);



    border-radius: 25px;



    padding: 0px 40px;



    text-align: center;



    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);



    position: relative;



    overflow: hidden;



    transition: all 0.4s ease;



}







/* Soft moving light on hover */



.gratitude-section::before {



    content: "";



    position: absolute;



    top: -50%;



    left: -50%;



    width: 200%;



    height: 200%;



    background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));



    transform: rotate(25deg);



    transition: opacity 0.5s ease;



    opacity: 0;



}







.gratitude-section:hover::before {



    opacity: 1;



    animation: shine 3s linear infinite;



}







@keyframes shine {



    0% {



        transform: translateX(-100%) rotate(25deg);



    }







    50% {



        transform: translateX(0%) rotate(25deg);



    }







    100% {



        transform: translateX(100%) rotate(25deg);



    }



}







.gratitude-section h2 {



    font-weight: 700;



    color: #e91e63;



    font-size: 2.2rem;



    margin-bottom: 20px;



    position: relative;



    display: inline-block;



}







.gratitude-section h2::after {



    content: "";



    position: absolute;



    bottom: -10px;



    left: 50%;



    transform: translateX(-50%);



    width: 80px;



    height: 3px;



    background: linear-gradient(90deg, #e91e63, #ff80ab);



    border-radius: 10px;



}







.gratitude-section p {



    color: #444;



    margin: 10px auto 10px;



    line-height: 1.8;



    text-align: -webkit-auto;



}







@media (max-width: 768px) {



    .gratitude-section {



        padding: 40px 25px;



    }







    .gratitude-section h2 {



        font-size: 1.8rem;



    }







    .gratitude-section p {



        font-size: 1rem;



    }



}







/* **********gratituied************ */



/* ******project tab******** */



.project-section {



    max-width: 1300px;



    margin: auto;



    background: #fff;



    border-radius: 25px;



    padding: 1px 35px;



}







.nav-tabs {



    border: none;



    justify-content: center;



    margin-bottom: 40px;



}







.nav-tabs .nav-link {



    border: none;



    color: #555;



    font-weight: 600;



    font-size: 1.1rem;



    border-radius: 50px;



    padding: 4px 25px;



    transition: all 0.3s ease;



}







.nav-tabs .nav-link.active {



    /* background: linear-gradient(135deg, #e91e63, #ff80ab); */



    /* background: linear-gradient(135deg, #f41317, #0dcaf0bf); */



    background:  #ef3090;







    color: #fff;



    /* box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3); */



}

.nav-tabs2 {



    border: none;



    justify-content: center;



    margin-bottom: 40px;

    /* background:#fff!important; */

    



}







.nav-tabs2 .nav-link {



    border: none;



    color: #555;



    font-weight: 600;



    font-size: 1.1rem;



    border-radius: 50px;



    padding: 4px 25px;



    transition: all 0.3s ease;

    



}

.nav-tabs2 .nav-link.active {



    /* background: linear-gradient(135deg, #e91e63, #ff80ab); */



    /* background: linear-gradient(135deg, #f41317, #0dcaf0bf); */



    background: var(--primary);







    color: #fff;



    /* box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3); */



}







.card {



    border: none;



    overflow: hidden;



    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);



    transition: all 0.4s ease;



    height: 100%;



}







.card:hover {



    transform: translateY(-8px);



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);



}







.card img {



    height: 280px;



    object-fit: inherit;



}







.card-body h5 {



    color: #e91e63;



    font-weight: 600;



    margin-bottom: 8px;



}







.card-body p {



    color: #555;



}







.see-more-container {



    text-align: right;



    margin-top: 25px;



}







.see-more-btn {



    border: none;



    background: transparent;



    color: #e91e63;



    font-weight: 600;



    font-size: 1.1rem;



    cursor: pointer;



    transition: all 0.3s ease;



    display: inline-flex;



    align-items: center;



    gap: 8px;



}







.see-more-btn:hover {



    color: #d81b60;



}







/* 



.arrow {



    display: inline-block;



    animation: moveArrow 1.2s infinite alternate;



}







@keyframes moveArrow {



    from {



        transform: translateX(0);



    }







    to {



        transform: translateX(6px);



    }



} */







@media (max-width: 992px) {



    .card img {



        height: 160px;



    }



}







@media (max-width: 768px) {



    .project-section {



        padding: 30px 20px;



    }







    .nav-tabs .nav-link {



        font-size: 1rem;



        padding: 8px 16px;



    }



}







/* ******projects tab********** */



/* ****KIDS WITH CAPES IMPORTANT********/



.galaxy {



    font-size: clamp(32px, 6vw, 70px);



    font-weight: 600!important;



    color: #f41317;



    text-transform: uppercase;



    text-align: center;



    background: #f41317;



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;







}







.kids-section {



    /* background: linear-gradient(180deg, #f8faff 0%, #eef2ff 100%); */



    background: #fff!important;



    padding: 0.5rem 2rem;



    display: flex;



    justify-content: center;



    overflow-x: hidden !important;



}







.kids-container {



    max-width: 1200px;



    display: flex;



    flex-direction: column;



    gap: 3rem;



}







/* CARD LAYOUT */



.kids-card {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 3rem;



    background: linear-gradient(to bottom left, rgb(238 245 245 / 65%), #eff7f7);



    border-radius: 20px;



    padding: 2.5rem;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);



    transition: all 0.4s ease;



    opacity: 0;



    transform: translateY(40px);



    border: 2px solid #ff0000!important;



    width: 100%;



    max-width: 100%;



    box-sizing: border-box;



    overflow: hidden;



}







.kids-card.reverse {



    flex-direction: row-reverse;



}







/* MOBILE RESPONSIVE FOR KIDS-CARD */



@media (max-width: 992px) {



    .kids-card {



        flex-direction: column;



        text-align: center;



        padding: 2rem;



        gap: 2rem;



        width: 100%;



        max-width: 100%;



        overflow-x: hidden;



    }







    .kids-card.reverse {



        flex-direction: column;



    }







    .kids-image img {



        max-width: 280px;



        height: auto;



    }







    .kids-content {



        width: 100%;



        max-width: 100%;



        overflow-x: hidden;



    }







    .kids-content h2 {



        font-size: 1.4rem;



        word-wrap: break-word;



        hyphens: auto;



    }



}







@media (max-width: 768px) {



    .kids-card {



        padding: 1.5rem;



        gap: 1.5rem;



        margin-bottom: 1.5rem;



        width: 100%;



        max-width: 100%;



        overflow-x: hidden;



    }







    .kids-card.reverse {



        flex-direction: column;



    }







    .kids-image {



        order: 1;



        margin-bottom: 1rem;



        text-align: center;



    }







    .kids-content {



        order: 2;



        width: 100%;



        max-width: 100%;



        overflow-x: hidden;



        word-wrap: break-word;



        hyphens: auto;



    }







    .kids-image img {



        max-width: 100%;



        height: auto;



        border-radius: 15px;



    }







    .kids-content h2 {



        font-size: 1.3rem;



        text-align: center;



        margin-bottom: 1rem;



    }







    .kids-content p,



    .kids-content ul {



        font-size: 0.95rem;



        text-align: justify;



        word-wrap: break-word;



        hyphens: auto;



    }



}







@media (max-width: 600px) {



    .kids-card {



        padding: 1.2rem;



        gap: 1.2rem;



        margin-bottom: 1.2rem;



        width: 100%;



        max-width: 100%;



        overflow-x: hidden;



    }







    .kids-image img {



        max-width: 100%;



        height: auto;



        max-height: 200px;



        object-fit: contain;



    }







    .kids-content h2 {



        font-size: 1.2rem;



        text-align: center;



    }







    .kids-content p,



    .kids-content ul {



        font-size: 0.9rem;



        line-height: 1.5;



    }







    .video-box video {



        height: auto !important;



        max-width: 100% !important;



        margin: 0 !important;



        max-height: 180px !important;



        object-fit: contain !important;



    }



}







@media (max-width: 480px) {



    .kids-card {



        padding: 1rem;



        gap: 1rem;



        margin-bottom: 1rem;



        width: 100%;



        max-width: 100%;



        overflow-x: hidden;



        border-radius: 15px;



    }







    .kids-image img {



        max-width: 100%;



        height: auto;



        max-height: 180px;



        object-fit: contain;



        border-radius: 12px;



    }







    .kids-content h2 {



        font-size: 1.1rem;



        text-align: center;



        margin-bottom: 0.8rem;



    }







    .kids-content p,



    .kids-content ul {



        font-size: 0.85rem;



        line-height: 1.4;



    }







    .video-box video {



        max-height: 150px !important;



    }







    .btn-gradient {



        padding: 8px 16px;



        font-size: 0.85rem;



    }



}







/* CARD CONTENT */



.kids-content {



    flex: 1;



}







.kids-content h2 {



    color: #f41317!important;



    font-size: 1.6rem;



    margin-bottom: 1rem;



    text-transform: uppercase;



    text-align: justify;



}







.kids-content p,



.kids-content ul {



    color: #444;



    line-height: 1.6;



    margin-bottom: 1rem;



    text-align: justify;



    word-wrap: break-word;



    /* word-break: break-all; */



}







/* CARD IMA GE */



.kids-image {



    /* flex: 1; */



    text-align: center;



}







.kids-image img {



    width: 100%;



    max-width: 350px;



    border-radius: 20px;



    transition: transform 0.4s ease;



}







.kids-image img:hover {



    transform: scale(1.05);



}







/* BUTTON STYLE */



.btn-gradient {



    display: inline-block;



    background: linear-gradient(135deg, #6a5cff, #8a4cff);



    color: #fff;



    font-weight: 600;



    padding: 10px 25px;



    border-radius: 30px;



    text-decoration: none;



    transition: all 0.3s ease;



}







.btn-gradient:hover {



    background: linear-gradient(135deg, #7d6fff, #a16cff);



    box-shadow: 0 5px 15px rgba(106, 92, 255, 0.3);



    transform: translateY(-2px);



}







/* VIDEO BOX */



.media-box {



    margin-top: 1rem;



    border-radius: 12px;



    overflow: hidden;



    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);



}







.media-box video {



    width: 100%;



    border-radius: 12px;



}







/* HOVER EFFECT */



.kids-card:hover {



    transform: translateY(-5px);



    box-shadow: 0 12px 35px rgba(106, 92, 255, 0.15);



}







/* ANIMATION EFFECTS */



@keyframes fadeUp {



    0% {



        opacity: 0;



        transform: translateY(40px);



    }







    100% {



        opacity: 1;



        transform: translateY(0);



    }



}







.fade-up {



    animation: fadeUp 1s ease forwards;



}







.fade-up.delay-1 {



    animation-delay: 0.3s;



}







.fade-up.delay-2 {



    animation-delay: 0.6s;



}







/* MOBILE ANIMATION FIXES */



@media (max-width: 768px) {



    .fade-up {



        animation-duration: 0.8s;



        transform: translateY(30px);



    }



    



    .fade-up.delay-1 {



        animation-delay: 0.2s;



    }



    



    .fade-up.delay-2 {



        animation-delay: 0.4s;



    }



}







@media (max-width: 600px) {



    .fade-up {



        animation-duration: 0.6s;



        transform: translateY(20px);



    }



    



    .fade-up.delay-1 {



        animation-delay: 0.15s;



    }



    



    .fade-up.delay-2 {



        animation-delay: 0.3s;



    }



}







@media (max-width: 480px) {



    .fade-up {



        animation-duration: 0.5s;



        transform: translateY(15px);



    }



    



    .fade-up.delay-1 {



        animation-delay: 0.1s;



    }



    



    .fade-up.delay-2 {



        animation-delay: 0.2s;



    }



}







/* COMMON BORDER MOBILE FIXES */



@media (max-width: 768px) {



    .common_border {



        border: 2px solid #f41317 !important;



        border-radius: 15px !important;



        overflow: hidden !important;



    }



}







@media (max-width: 600px) {



    .common_border {



        border: 1.5px solid #f41317 !important;



        border-radius: 12px !important;



    }



}







@media (max-width: 480px) {



    .common_border {



        border: 1px solid #f41317 !important;



        border-radius: 10px !important;



    }



}







/* RESPONSIVE DESIGN */



@media (max-width: 992px) {



    .kids-card {



        flex-direction: column;



        text-align: center;



        padding: 2rem;



    }







    .kids-card.reverse {



        flex-direction: column;



    }







    .kids-image img {



        max-width: 280px;



    }







    .kids-content h2 {



        font-size: 1.4rem;



    }



}







/* MOBILE OVERFLOW FIXES FOR KIDS SECTION */



@media (max-width: 768px) {



    .kids-section {



        padding: 2rem 1rem;



        overflow-x: hidden !important;



        width: 100% !important;



        max-width: 100vw !important;



    }



    



    .kids-container {



        width: 100% !important;



        max-width: 100% !important;



        overflow-x: hidden !important;



    }



    



    .kids-card {



        padding: 1.5rem;



        margin-bottom: 1.5rem;



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



    }



    



    .kids-content {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



    }



    



    .kids-content p {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



        width: 100% !important;



    }



    



    .kids-content h2 {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



        width: 100% !important;



    }



    



    .kids-content h6 {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



        width: 100% !important;



    }



    



    .kids-content ul {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



        width: 100% !important;



    }



    



    .kids-content ul li {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



        width: 100% !important;



    }



}







@media (max-width: 600px) {



    .kids-section {



        padding: 1.5rem 0.8rem;



        overflow-x: hidden !important;



        width: 100% !important;



        max-width: 100vw !important;



    }



    



    .kids-container {



        width: 100% !important;



        max-width: 100% !important;



        overflow-x: hidden !important;



    }



    



    .kids-card {



        padding: 1rem;



        overflow-x: hidden !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



    }



    



    .kids-content {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



    }



}







@media (max-width: 480px) {



    .kids-section {



        padding: 1rem 0.5rem;



        overflow-x: hidden !important;



        width: 100% !important;



        max-width: 100vw !important;



    }



    



    .kids-container {



        width: 100% !important;



        max-width: 100% !important;



        overflow-x: hidden !important;



    }



    



    .kids-card {



        padding: 0.8rem;



        overflow-x: hidden !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



    }



    



    .kids-content {



        overflow-x: hidden !important;



        word-wrap: break-word !important;



        hyphens: auto !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



    }



}







@media (max-width: 600px) {



    .kids-content h2 {



        font-size: 1.2rem;



    }







    .kids-content p,



    .kids-content ul {



        font-size: 0.95rem;



    }







    .btn-gradient {



        padding: 8px 18px;



    }



    



    .kids-card {



        padding: 1rem;



    }



    



    .video-box video {



        height: auto !important;



        max-width: 100% !important;



        margin: 0 !important;



    }



}







@media (max-width: 480px) {



    .kids-section {



        padding: 1.5rem 0.5rem;



    }



    



    .kids-content h2 {



        font-size: 1.1rem;



    }



    



    .kids-content p,



    .kids-content ul {



        font-size: 0.9rem;



    }



    



    .kids-card {



        padding: 0.8rem;



    }



}







/* *****KIDS WITH CAPES IMPORTANT*******/



/* --- KIDS WITH CAPES KINDNESS DEEDS --- */



.kwc-youtube {



    padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 40px);



    background: radial-gradient(1200px 500px at 10% -10%, #ecebff 0%, transparent 55%),



        radial-gradient(1000px 600px at 100% 10%, #f6e6ff 0%, transparent 60%),



        #f8faff;



}







/* --- Layout --- */



.kwc-wrap {



    /* max-width: 1100px; */



    margin: 0 auto;



    display: grid;



    grid-template-columns: 1.1fr 1fr;



    gap: clamp(20px, 4vw, 48px);



    align-items: center;



}







/* --- Text --- */



.kwc-text h2 {



    font-size: clamp(1.6rem, 3.2vw, 2.4rem);



    line-height: 1.15;



    margin: 0 0 .6rem;



    color: #2b2b2f;



}







.kwc-text p {



    color: #4a4a54;



    font-size: clamp(1rem, 1.6vw, 1.125rem);



    line-height: 1.7;



    margin: 0 0 1.2rem;



}







/* --- CTA Button --- */



.kwc-cta {



    --bg1: #ff3b3b;



    --bg2: #ff6a6a;



    display: inline-flex;



    align-items: center;



    gap: .75rem;



    padding: .9rem 1.3rem;



    border-radius: 999px;



    color: #fff !important;



    text-decoration: none;



    font-weight: 700;



    background: linear-gradient(135deg, var(--bg1), var(--bg2));



    box-shadow: 0 12px 28px rgba(255, 59, 59, .28);



    transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;



}







.kwc-cta:hover {



    transform: translateY(-2px);



    filter: saturate(1.05);



    box-shadow: 0 16px 36px rgba(255, 59, 59, .35);



}







.kwc-cta:active {



    transform: translateY(0);



}







/* Play triangle built with CSS */



.play-icon {



    width: 14px;



    height: 14px;



    position: relative;



}







.play-icon::before {



    content: "";



    position: absolute;



    inset: 0;



    margin: auto;



    width: 0;



    height: 0;



    border-left: 14px solid #fff;



    border-top: 9px solid transparent;



    border-bottom: 9px solid transparent;



    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));



    transition: transform .35s ease;



}







.kwc-cta:hover .play-icon::before {



    transform: translateX(3px);



}







/* --- Player (responsive 16:9) --- */



.kwc-player {



    border-radius: 18px;



    overflow: hidden;



    box-shadow: 0 14px 40px rgba(30, 20, 90, .18);



    background: #000;



    transform: translateY(8px);



    animation: floatIn .8s ease .1s both;



}







.kwc-player iframe {



    display: block;



    width: 100%;



    aspect-ratio: 16/9;



    border: 0;



}







/* Entrance animation for text */



.kwc-text {



    opacity: 0;



    transform: translateY(14px);



    animation: fadeUp .7s ease .05s both;



    text-align: center;



}







@keyframes fadeUp {



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@keyframes floatIn {



    from {



        opacity: 0;



        transform: translateY(18px) scale(.98);



    }







    to {



        opacity: 1;



        transform: translateY(8px) scale(1);



    }



}







/* --- Reduced motion friendly --- */



@media (prefers-reduced-motion: reduce) {







    .kwc-text,



    .kwc-player {



        animation: none;



        opacity: 1;



        transform: none;



    }







    .kwc-cta,



    .play-icon::before {



        transition: none;



    }



}







/* ******KIDS WITH CAPES KINDNESS DEEDS******* */



/* *******somethem are********* */



.kindness-deeds {



    position: relative;



    padding: 3rem 1.5rem;



    background: radial-gradient(circle at top left, #f5edff, #edf0ff 40%, #ffffff 100%);



    overflow: hidden;



}







.deeds-container {



    max-width: 1200px;



    margin: 0 auto;



    text-align: center;



}







/* ---------- TITLE ---------- */



.deeds-title {



    font-size: 32px;



    font-weight: 700;



    color: #f41317;



    text-transform: uppercase;



    margin-bottom: 0.7rem;



    /* background: linear-gradient(135deg, #ffc107, #ff188a); */



    background:#f41317;



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;







}







@keyframes titleGlow {



    0% {



        filter: drop-shadow(0 0 0px rgba(106, 92, 255, 0.6));



    }







    100% {



        filter: drop-shadow(0 0 20px rgba(180, 76, 255, 0.6));



    }



}







.deeds-subtitle {



    color: #555;



    font-size: clamp(1rem, 2vw, 1.1rem);



    margin-bottom: 3rem;



    line-height: 1.6;



}







/* ---------- GRID ---------- */



.deeds-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));



    gap: 2rem;



    padding: 0 1rem;



}







/* ---------- CARD ---------- */



.deed-card {



    background: #ffffff;



    padding: 2.2rem;



    border-radius: 20px;



    box-shadow: 0 8px 30px rgba(106, 92, 255, 0.1);



    position: relative;



    overflow: hidden;



    transition: transform 0.4s ease, box-shadow 0.4s ease;



    border: 2px solid transparent;



    animation: fadeInUp 0.8s ease forwards;



    opacity: 0;



}







@keyframes fadeInUp {



    0% {



        opacity: 0;



        transform: translateY(40px) scale(0.98);



    }







    100% {



        opacity: 1;



        transform: translateY(0) scale(1);



    }



}







/* ---------- CARD CONTENT ---------- */



.deed-card h3 {



    color: #f41317;



    font-size: 1.2rem;



    margin-bottom: 0.8rem;



    font-weight: 700;



}







.deed-card p {



    color: #444;



    line-height: 1.6;



}







.deed-number {



    position: absolute;



    top: 10px;



    right: 15px;



    font-size: 2.8rem;



    font-weight: 800;



    color: #ea83b657;



}







/* ---------- HOVER EFFECT ---------- */



.deed-card:hover {



    transform: translateY(-10px) scale(1.03);



    border-image: linear-gradient(135deg, #ea83b6, #ffc107) 1;



    background: linear-gradient(135deg, #ffffff, #faf7ff);



    border-radius: 20px;



    border: 2px solid #f41317!important;



}







.deed-card:hover h3 {



    color: #f41317;;



    text-shadow: 0 0 8px rgba(180, 76, 255, 0.3);



}







.deed-card:hover p {



    color: #333;



    transition: color 0.3s ease;



}







/* ---------- FLOATING SHAPES ---------- */



.floating-shape {



    position: absolute;



    opacity: 0.12;



    animation: floaty 10s infinite ease-in-out alternate;



    z-index: 0;



}







@keyframes floaty {



    0% {



        transform: translateY(0) rotate(0deg);



    }







    100% {



        transform: translateY(-50px) rotate(20deg);



    }



}







.heart {



    width: 100px;



    height: 100px;



    top: 10%;



    left: 5%;



    background: radial-gradient(circle at 30% 30%, #ff76b8, #ff4fa1);



    clip-path: path('M50 15C45 0 0 0 0 40c0 20 50 60 50 60s50-40 50-60C100 0 55 0 50 15z');



}







.circle {



    width: 120px;



    height: 120px;



    top: 50%;



    right: 20%;



    background: radial-gradient(circle at 30% 30%, #e91e63, #ff188a);



    border-radius: 50%;



}







/* ---------- RESPONSIVE ---------- */



@media (max-width: 768px) {



    .deeds-grid {



        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));



        gap: 1.5rem;



        padding: 0 0.5rem;



    }



    



    .deed-card {



        padding: 1.8rem;



    }







    .deed-card h3 {



        font-size: 1.1rem;



    }







    .deed-card p {



        font-size: 0.95rem;



    }



}







@media (max-width: 600px) {



    .deeds-grid {



        grid-template-columns: 1fr;



        gap: 1.2rem;



        padding: 0;



    }



    



    .kindness-deeds {



        padding: 2rem 1rem;



    }



    



    .deed-card {



        padding: 1.5rem;



    }



    



    .deed-card h3 {



        font-size: 1rem;



    }



    



    .deed-card p {



        font-size: 0.9rem;



    }



    



    .deed-number {



        font-size: 2.2rem;



        top: 8px;



        right: 12px;



    }



}







@media (max-width: 480px) {



    .kindness-deeds {



        padding: 1.5rem 0.5rem;



    }



    



    .deed-card {



        padding: 1.2rem;



    }



    



    .deed-card h3 {



        font-size: 0.95rem;



    }



    



    .deed-card p {



        font-size: 0.85rem;



    }



    



    .deed-number {



        font-size: 2rem;



    }



}







/* *******somethem are********** */



/* *****kids club********* */



.kwc-section {



    background: linear-gradient(180deg, #f8faff 0%, #edf1ff 100%);



    padding: 3rem 1.5rem;



    overflow: hidden;



    position: relative;



    margin-bottom: 40px;



}







/* ===== Title Section ===== */



/* ===== Header ===== */



.kwc-header {



    text-align: center;



    max-width: 900px;



    margin: 0 auto 3rem;



}







.kwc-header h2 {



    font-size: clamp(1.5rem, 2.3vw, 2.5rem);



    font-weight: 800;



    background: #f41317;



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    letter-spacing: 1px;



    margin-bottom: 1rem;



}







.kwc-header p {



    color: #444;



    font-size: clamp(1rem, 1.6vw, 1.1rem);



    line-height: 1.7;



}







/* ===== Membership Section ===== */



.kwc-membership {



    display: flex;



    flex-wrap: wrap;



    justify-content: center;



    align-items: stretch;



    gap: 2rem;



}







/* ===== Card Styles ===== */



.kwc-card {



    background: rgba(255, 255, 255, 0.8);



    backdrop-filter: blur(10px);



    border-radius: 20px;



    box-shadow: 0 8px 25px rgba(106, 92, 255, 0.15);



    border: 2px solid #f41317;



    /* border-image: linear-gradient(135deg, #6a5cff, #b44cff) 1; */



    padding: 2rem;



    transition: all 0.4s ease;



    flex: 1 1 360px;



    display: flex;



    flex-direction: column;



    justify-content: center;



}







.kwc-card:hover {



    transform: translateY(-8px) scale(1.02);



    box-shadow: 0 15px 40px rgba(106, 92, 255, 0.25);



}







/* ===== Text Card ===== */



.kwc-card h3 {



    color: #f41317;



    margin-bottom: 1rem;



    font-size: 1.3rem;



}







.kwc-card ul {



    list-style: none;



    padding: 0;



    margin: 0;



    color: #444;



    line-height: 1.8;



}







.kwc-card ul li {



    display: flex;



    align-items: center;



    gap: 0.6rem;



    margin-bottom: 0.6rem;



    transition: transform 0.3s ease;



}







.kwc-card ul li:hover {



    transform: translateX(5px);



    color: #f41317;



}







.kwc-card ul li i {



    color: #f41317;



    font-size: 1rem;



    transition: transform 0.3s ease;



}







.kwc-card ul li:hover i {



    color: #f41317;



    transform: scale(1.2);



}







/* ===== Image Card ===== */



.image-card {



    text-align: center;



}







.image-card img {



    width: 100%;



    max-width: 320px;



    height: auto;



    border-radius: 16px;



    margin: auto;



    object-fit: contain;



    transition: transform 0.4s ease;



}







.image-card img:hover {



    transform: scale(1.05);



}







/* ===== Responsive Layout ===== */



@media (max-width: 992px) {



    .kwc-membership {



        flex-direction: column;



        align-items: center;



    }







    .kwc-card {



        max-width: 100%;



        width: 100%;



    }







    .image-card img {



        max-width: 100%;



    }



}







@media (max-width: 768px) {



    .kwc-section {



        padding: 2rem 1rem;



    }



    



    .kwc-header {



        margin-bottom: 2rem;



    }



    



    .kwc-header h2 {



        font-size: 1.8rem;



    }



    



    .kwc-header p {



        font-size: 1rem;



    }



    



    .kwc-membership {



        gap: 1.5rem;



    }



    



    .kwc-card {



        padding: 1.5rem;



        margin: 0 0.5rem;



    }



    



    .kwc-card h3 {



        font-size: 1.1rem;



    }



    



    .kwc-card ul {



        font-size: 0.9rem;



    }



}







@media (max-width: 600px) {



    .kwc-section {



        padding: 1.5rem 0.5rem;



    }



    



    .kwc-header h2 {



        font-size: 1.5rem;



    }



    



    .kwc-header p {



        font-size: 0.95rem;



    }



    



    .kwc-card {



        padding: 1.2rem;



        margin: 0;



    }



    



    .kwc-card h3 {



        font-size: 1rem;



    }



    



    .kwc-card ul {



        font-size: 0.85rem;



        line-height: 1.6;



    }



    



    .kwc-card ul li {



        gap: 0.4rem;



    }



    



    .kwc-card ul li i {



        font-size: 0.9rem;



    }



}







@media (max-width: 480px) {



    .kwc-section {



        padding: 1rem 0.5rem;



    }



    



    .kwc-header h2 {



        font-size: 1.3rem;



    }



    



    .kwc-header p {



        font-size: 0.9rem;



    }



    



    .kwc-card {



        padding: 1rem;



    }



    



    .kwc-card h3 {



        font-size: 0.95rem;



    }



    



    .kwc-card ul {



        font-size: 0.8rem;



    }



}







/* ===== Media Section ===== */



/* *****kids club******** */



.media-card {



    border-radius: 20px;



    color: #000;



    padding: 2rem 1.5rem;



    transition: all 0.4s ease;



}







.media-card:hover {



    transform: translateY(-5px);



    box-shadow: 0 20px 40px rgba(255, 100, 100, 0.3);



}







/* ===== Title ===== */



.media-title {



    color: #ffc107;



    animation: glow 3s ease-in-out infinite alternate;



}







@keyframes glow {



    from {



        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);



    }







    to {



        text-shadow: 0 0 18px rgba(255, 255, 255, 0.7);



    }



}







/* ===== Subtitle ===== */



.media-subtitle {



    max-width: 700px;



    color: #ffc107;



    font-size: clamp(1rem, 1.4vw, 1.1rem);



    line-height: 1.7;



    opacity: 0.95;



}







/* ===== List Styling ===== */



.media-list li {



    margin-bottom: 0.75rem;



    font-size: 1rem;



    display: flex;



    align-items: center;



    gap: 0.6rem;



    transition: all 0.3s ease;



}







.media-list li i {



    min-width: 22px;



    transition: transform 0.3s ease, color 0.3s ease;



}







.media-list li:hover {



    transform: translateX(6px);



    color:#f41317;



}







.media-list li:hover i {



    color:  #f41317;



    transform: scale(1.2);



}







/* ===== Responsive ===== */



@media (max-width: 768px) {



    .media-card {



        padding: 2rem 1rem;



    }







    .media-list {



        font-size: 0.95rem;



    }



    



    .media-subtitle {



        font-size: 0.95rem;



    }



    



    .media-list li {



        font-size: 0.9rem;



        margin-bottom: 0.6rem;



    }



}







@media (max-width: 600px) {



    .media-card {



        padding: 1.5rem 0.8rem;



    }



    



    .media-subtitle {



        font-size: 0.9rem;



        max-width: 100%;



    }



    



    .media-list {



        font-size: 0.85rem;



    }



    



    .media-list li {



        font-size: 0.85rem;



        margin-bottom: 0.5rem;



        gap: 0.4rem;



    }



    



    .media-list li i {



        min-width: 18px;



        font-size: 0.9rem;



    }



}







@media (max-width: 480px) {



    .media-card {



        padding: 1.2rem 0.5rem;



    }



    



    .media-subtitle {



        font-size: 0.85rem;



    }



    



    .media-list {



        font-size: 0.8rem;



    }



    



    .media-list li {



        font-size: 0.8rem;



        margin-bottom: 0.4rem;



        gap: 0.3rem;



    }



    



    .media-list li i {



        min-width: 16px;



        font-size: 0.8rem;



    }



}







/* ****read recognisation*****/



/* ******newsslider******** */



.news-slider {



    background: linear-gradient(180deg, #f8faff 0%, #edf0ff 100%);



    overflow: hidden;



}







/* --- Flip Slider --- */



.flip-slider {



    display: flex;



    gap: 2rem;



    justify-content: center;



    align-items: center;



    flex-wrap: nowrap;



    position: relative;



    animation: slide 18s infinite linear;



}







/* --- Each Card --- */



.flip-card {



    background: transparent;



    width: 280px;



    height: 360px;



    perspective: 1000px;



    flex-shrink: 0;



}







.flip-inner {



    position: relative;



    width: 100%;



    height: 100%;



    transition: transform 0.8s;



    transform-style: preserve-3d;



    border-radius: 20px;



    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);



}







/* Flip Effect */



.flip-card:hover .flip-inner {



    transform: rotateY(180deg);



}







/* --- Front --- */



.flip-front,



.flip-back {



    position: absolute;



    width: 100%;



    height: 100%;



    backface-visibility: hidden;



    border-radius: 20px;



    overflow: hidden;



}







/* --- Front Image --- */



.flip-front img {



    width: 100%;



    height: 100%;



    /* object-fit: cover; */



    object-fit: fill;



}







/* --- Back --- */



.flip-back {



    background:  #f41317!important;



    color: #fff;



    transform: rotateY(180deg);



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    text-align: center;



    padding: 1.5rem;



}







.flip-back h5 {



    font-size: 1.2rem;



    margin-bottom: 0.5rem;



}







.flip-back p {



    font-size: 0.95rem;



    line-height: 1.5;



}







/* --- Auto Scroll Animation --- */



@keyframes slide {



    0% {



        transform: translateX(0);



    }







    100% {



        transform: translateX(-50%);



    }



}







/* --- Responsive --- */



@media (max-width: 992px) {



    .flip-card {



        width: 220px;



        height: 300px;



    }







    .flip-back h5 {



        font-size: 1rem;



    }







    .flip-back p {



        font-size: 0.85rem;



    }



}







@media (max-width: 768px) {



    .flip-slider {



        overflow-x: auto;



        justify-content: flex-start;



        padding: 0 1rem;



    }



    



    .flip-card {



        width: 200px;



        height: 280px;



        flex-shrink: 0;



    }



    



    .flip-back h5 {



        font-size: 0.9rem;



    }



    



    .flip-back p {



        font-size: 0.8rem;



    }



}







@media (max-width: 600px) {



    .flip-slider {



        animation: none;



        flex-wrap: wrap;



        gap: 1rem;



        justify-content: center;



        padding: 0 0.5rem;



    }







    .flip-card {



        width: 100%;



        max-width: 300px;



        height: 320px;



    }



    



    .flip-back {



        padding: 1rem;



    }



    



    .flip-back h5 {



        font-size: 1rem;



    }



    



    .flip-back p {



        font-size: 0.85rem;



    }



}







@media (max-width: 480px) {



    .news-slider {



        padding: 2rem 0.5rem;



    }



    



    .flip-card {



        height: 280px;



        max-width: 280px;



    }



    



    .flip-back {



        padding: 0.8rem;



    }



    



    .flip-back h5 {



        font-size: 0.9rem;



    }



    



    .flip-back p {



        font-size: 0.8rem;



    }



}







/* ****news slider******* */



/* *******last section image and content****** */



.kids-section {



    background: linear-gradient(180deg, #f8faff 0%, #edf0ff 100%);



    overflow: hidden;



}







.image-box img {



    border: 5px solid #ffffff;



    border-radius: 20px;



    transition: all 0.4s ease;



}







.image-box img:hover {



    transform: scale(1.05);



    box-shadow: 0 15px 30px rgba(106, 92, 255, 0.3);



}







/* ===== Text Styling ===== */



.text-gradient {



    background: #f41317;



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    font-size: clamp(1.5rem, 2.3vw, 2.5rem);



}







.content-box p {



    font-size: clamp(1rem, 1.4vw, 1.1rem);



    color: #444;



    line-height: 1.7;



}







/* ===== Social Buttons ===== */



.social-icons {



    display: flex;



    align-items: center;



    gap: 1rem;



}







.social-btn {



    display: inline-flex;



    justify-content: center;



    align-items: center;



    width: 45px;



    height: 45px;



    border-radius: 50%;



    color: #fff;



    font-size: 1.3rem;



    transition: all 0.3s ease;



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);



}







.social-btn.insta {



    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);



}







.social-btn.yt {



    background: #ff0000;



}







.social-btn:hover {



    transform: scale(1.1);



    box-shadow: 0 8px 20px rgba(106, 92, 255, 0.3);



}







/* ===== Animation ===== */



.fade-up {



    opacity: 0;



    transform: translateY(30px);



    animation: fadeUp 1s ease forwards;



}







.delay-1 {



    animation-delay: 0.4s;



}







@keyframes fadeUp {



    100% {



        opacity: 1;



        transform: translateY(0);



    }



}







/* ===== Responsive ===== */



@media (max-width: 991px) {



    .kids-section {



        text-align: center;



    }







    .social-icons {



        justify-content: center;



    }



    



    /* Video responsive fixes */



    .video-box video {



        height: auto !important;



        max-width: 100% !important;



        margin: 0 !important;



    }



    



    /* Image responsive fixes */



    .img-fluid {



        max-width: 100% !important;



        height: auto !important;



    }



}







@media (max-width: 768px) {



    /* Enhanced video fixes */



    .video-box {



        margin: 1rem 0;



    }



    



    .video-box video {



        width: 100% !important;



        height: auto !important;



        max-height: 200px !important;



        object-fit: contain !important;



    }



    



    /* Image fixes */



    .kids-image img {



        width: 100% !important;



        height: auto !important;



        max-height: 250px !important;



        object-fit: contain !important;



    }



    



    .image-box img {



        width: 100% !important;



        height: auto !important;



        border-width: 3px !important;



    }



}







@media (max-width: 600px) {



    /* Video fixes for small screens */



    .video-box video {



        max-height: 180px !important;



    }



    



    .video-box {



        margin: 0.5rem 0;



    }



    



    /* Image fixes */



    .kids-image img {



        max-height: 200px !important;



    }



    



    .image-box img {



        border-width: 2px !important;



    }



}







@media (max-width: 480px) {



    /* Video fixes for very small screens */



    .video-box video {



        max-height: 150px !important;



    }



    



    /* Image fixes */



    .kids-image img {



        max-height: 180px !important;



    }



    



    .image-box img {



        border-width: 1px !important;



        border-radius: 12px !important;



    }



}







/* ===== Global Mobile Optimizations ===== */



@media (max-width: 992px) {



    /* General spacing adjustments */



    .container {



        padding: 0 1rem;



    }



    



    /* Text adjustments */



    h1, h2 {



        font-size: clamp(1.5rem, 4vw, 2rem);



    }



    



    h3, h4 {



        font-size: clamp(1.2rem, 3vw, 1.5rem);



    }



    



    p, span, ul, li {



        font-size: 0.95rem;



    }



}







@media (max-width: 768px) {



    /* Enhanced spacing */



    .container {



        padding: 0 0.8rem;



    }



    



    /* Section padding adjustments */



    section {



        padding: 2rem 0;



    }



    



    /* Button adjustments */



    .btn, .shimmer-btn {



        padding: 8px 16px;



        font-size: 0.9rem;



    }



    



    /* Card adjustments */



    .card {



        margin-bottom: 1rem;



    }



}







@media (max-width: 600px) {



    /* Minimal spacing for very small screens */



    .container {



        padding: 0 0.5rem;



    }



    



    /* Section minimal padding */



    section {



        padding: 1.5rem 0;



    }



    



    /* Text minimal sizes */



    h1, h2 {



        font-size: clamp(1.3rem, 5vw, 1.8rem);



    }



    



    h3, h4 {



        font-size: clamp(1.1rem, 4vw, 1.3rem);



    }



    



    p, span, ul, li {



        font-size: 0.9rem;



    }



    



    /* Button minimal sizes */



    .btn, .shimmer-btn {



        padding: 6px 12px;



        font-size: 0.85rem;



        margin-left: -20px;



    }



}







@media (max-width: 480px) {



    /* Ultra-small screen optimizations */



    .container {



        padding: 0 0.3rem;



    }



    



    section {



        padding: 1rem 0;



    }



    



    /* Hide some decorative elements on very small screens */



    .floating-shape {



        display: none;



    }



    



    /* Reduce animations for performance */



    * {



        animation-duration: 0.5s !important;



        transition-duration: 0.2s !important;



    }



}







.text-color {



    color: #ff188a;



}







/* ******last section image and content****** */



/* ****readmore css****** */



.read_more_tiitle {



    background: linear-gradient(135deg, #ffc107, #ff188a);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.read_more .card {



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.read_more .card:hover {



    transform: translateY(-5px);



    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);



}







.readmore_cards .card {



    transition: all 0.3s ease;



    height: 100%;



}







.readmore_cards .card:hover {



    transform: translateY(-5px);



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);



}







.readmore_cards .card img {



    width: 100%;



    height: 280px;



    object-fit: cover;



    border-radius: 16px;



}







/* Responsive Adjustments */



@media (max-width: 768px) {



    .readmore_cards .card img {



        height: 220px;



    }



}







/* ****readmore css********* */



/* ******events and media******* */



.event-card {



    overflow: hidden;



    border-radius: 16px;



    transition: all 0.4s ease;



}







.event-card img {



    width: 100%;



    height: 460px;



    object-fit: cover;



    transition: transform 0.4s ease;



}







.overlay {



    position: absolute;



    bottom: 0;



    left: 0;



    right: 0;



    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);



    padding: 1.2rem;



    border-radius: 0 0 16px 16px;



}







/* Tabs Styling */



.nav-pills .nav-link {



    border-radius: 30px;



    color: #555;



    font-weight: 600;



    background: #e8e8e8;



    margin: 0 8px;



    transition: all 0.3s ease;



}







.nav-pills .nav-link.active {



    background: #6a5cff;



    color: #fff;



    box-shadow: 0 4px 12px rgba(106, 92, 255, 0.4);



}







.nav-pills .nav-link:hover {



    background: #b7a9ff;



    color: #fff;



}







/* Responsive */



@media (max-width: 768px) {



    .event-card img {



        height: 200px;



    }







    .overlay h5 {



        font-size: 1rem;



    }



}







/* *****events and media*******/



/* *******intern with us*******/



.internship-card {



    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));



    border-radius: 20px;



    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);



    padding: 40px;



    position: relative;



    overflow: hidden;



    border: 1px solid rgba(186, 104, 200, 0.2);



}







/* Decorative gradient corner */



.internship-card::before {



    content: "";



    position: absolute;



    top: -60px;



    right: -60px;



    width: 160px;



    height: 160px;



    background: radial-gradient(circle at center, rgba(186, 104, 200, 0.2), transparent 70%);



    border-radius: 50%;



    z-index: 0;



}







/* Text */



.internship-card h2 {



    font-weight: 700;



    color: #e91e63;



    text-align: center;



    margin-bottom: 25px;



}







.internship-card p,



.internship-card li {



    color: #333;



    position: relative;



    z-index: 2;



    text-align: justify;



    word-break: break-all;



   hyphens: auto;



   



}



/* List styling */



.internship-card ul {



    padding-left: 20px;



    margin-bottom: 20px;



}







.internship-card ul li::marker {



    color: #9c27b0;



    font-weight: 600;



}







/* Highlighted text */



.internship-card strong {



    color: #e91e63;



}







/* Responsive behavior */



@media (max-width: 768px) {



    .internship-card {



        padding: 25px;



    }







    .internship-card h2 {



        font-size: 1.6rem;



    }







    .btn-intern {



        width: 100%;



    }



}







.internship-section {



    background: linear-gradient(180deg, #f9fafc, #f2f4ff);



}







.card {



    background-color: #ffffff;



    border: 2px solid #f41317!important;



}



.card2 {



    background-color: #ffffff;



    border: 2px solid var(--primary)!important;



    



}







.custom-list {



    list-style: none;



    padding: 0;



}







.custom-list li {



    position: relative;



    padding-left: 28px;



    margin-bottom: 8px;



    color: #333;



    font-size: 1rem;



}







.custom-list li::before {



    content: "\f058";



    font-family: "Font Awesome 6 Free";



    font-weight: 900;



    color: #6a5cff;



    position: absolute;



    left: 0;



    top: 0;



}







/* Responsive Adjustments */



@media (max-width: 320px) {



    .program-content {



        /* background: rgba(255, 255, 255, 0.9) !important; */



        padding: 5px !important;



        border-radius: 15px !important;



        margin: 20px !important;



        



    }



}



@media (max-width: 768px) {



    .internship-section {



        padding: 2rem 1rem;



        margin: 6px;



    }







    .card {



        padding: 1.5rem;



    }



}







/* *******intern with us*******/



/* ****internship form********* */



.internship-form-section {



    background: linear-gradient(180deg, #f8faff, #eef0ff);



}







.form-label {



    font-weight: 600;



    color: #333;



}







.btn-gradient {



    background: linear-gradient(135deg, #6a5cff, #b44cff);



    color: #fff;



    border: none;



    border-radius: 8px;



    transition: all 0.3s ease;



}







.btn-gradient:hover {



    background: linear-gradient(135deg, #b44cff, #6a5cff);



    transform: translateY(-3px);



    box-shadow: 0 6px 18px rgba(106, 92, 255, 0.3);



}







/* *****internship form****** */



/* ****internship projects****** */



.custom-card {



    background: #fff;



    border: none;



    border-radius: 20px;



    overflow: hidden;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



    transition: all 0.4s ease;



    height: 100%;



    display: flex;



    flex-direction: column;



}







.custom-card:hover {



    transform: translateY(-8px);



    box-shadow: 0 20px 40px rgba(171, 71, 188, 0.3);



}







.custom-card img,



.custom-card video {



    width: 100%;



    width: 100%;



    height: 339px;



    object-fit: inherit;



}







.card-body {



    padding: 20px;



    flex-grow: 1;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



}







.card-title {



    font-weight: 700;



    color: #4a148c;



    font-size: 1.3rem;



}







.card-text {



    color: #555;







    margin-bottom: 20px;



    flex-grow: 1;



}







@media (max-width: 768px) {



    .custom-card {



        margin-bottom: 30px;



    }



}
@media(max-width:425px){
    .card-body{
        padding:0px;
    }
}







/* *******internship projects******/



/* *******Awards**********/



  .awards .card-img-top {



      height: 200px;



      object-fit: scale-down;



    }







    .awards .card {



      transition: all 0.3s ease;



      cursor: pointer;



    }







    .awards .card:hover {



      transform: translateY(-8px);



      box-shadow: 0 15px 30px rgba(0,0,0,0.2);



    }







    .awards .modal-img {



      height: 250px;



      object-fit: cover;



    }



/* *******Awards**********/



/* *****project and event cards******* */







.small-card {



    display: flex;



    flex-direction: column;



    border-radius: 8px;



    overflow: hidden;



    background: #fff;



    height: 100%;



}







/* Card image */



.small-card .card-img {



    width: 100%;



    height: 280px; /* equal height for all cards */



    /*object-fit: cover;*/



}







/* Card body */



.small-card .card-body {



    display: flex;



    flex-direction: column;



    flex-grow: 1;



    padding: 1rem;



}







/* Description - 5 lines max with vertical scroll if overflow */



.description {



    display: -webkit-box;



    -webkit-line-clamp: 5; /* show 5 lines */



    -webkit-box-orient: vertical;



    overflow-y: auto; /* scroll if content exceeds 5 lines */



    max-height: 7.5em; /* 5 lines * 1.5em line-height */



    line-height: 1.5em;



    margin-bottom: 1rem;



    padding-right: 4px; /* for scrollbar spacing */



}







/* Scrollbar styling */



.description::-webkit-scrollbar {



    width: 5px;



}



.description::-webkit-scrollbar-thumb {



    background-color: rgba(0,0,0,0.3);



    border-radius: 10px;



}







/* Button always at bottom */



/* .shimmer-btn {



    margin-top: auto;



} */







/* Responsive adjustments */



@media (max-width: 991px) {



    .small-card .card-img { height: 180px; }



    .description { max-height: 6em; }



}







@media (max-width: 575px) {



    .small-card .card-img { height: 150px; }



    .description { max-height: 5.5em; }



}







/* Equal height cards in a row using flex */



.project-section .row.g-4 {



    display: flex;



    flex-wrap: wrap;



}



.project-section .row.g-4 > [class*="col-"] {



    display: flex;



    flex-direction: column;



}































.dropdown-item.active,



.dropdown-item:active {



    background-color: transparent !important;



}







/* READ MORE BUTTON */



/* RESPONSIVE */



@media (max-width: 768px) {



    .small-card .card-img {



        height: 150px;



    }



}







@media (max-width: 576px) {



    .small-card {



        border-radius: 10px;



    }







    .small-card .card-img {



        height: 140px;



    }



}







/* ******projects and event card********* */



.event-slider-container {



    margin-top: 40px;



}







.event-card-inner {



    display: flex;



    height: 385px;



    border-radius: 15px;



    overflow: hidden;



    background: #ffffff;



    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);



}







.event-left {



    width: 50%;



    height: 100%;



}







.event-photo {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.event-right {



    width: 50%;



    padding: 28px;



    background: #f8f9fc;



    position: relative;



    display: flex;



    flex-direction: column;



    justify-content: center;



}







.event-tag {



    position: absolute;



    top: 15px;



    right: 15px;



    background: #ffc107;



    padding: 6px 14px;



    color: white;



    font-size: 12px;



    font-weight: 700;



    border-radius: 20px;



    text-transform: uppercase;



}







.event-date {



    font-weight: 600;



    margin-bottom: 10px;



    color: #444;



    font-size: 15px;



}







.event-title {



    font-size: 18px;



    font-weight: 700;



    margin-bottom: 10px;



    color: var(--primary);



}







.event-desc {



    color: #555;



    margin-bottom: 20px;



    font-size: 15px;



}







.event-btn {



    background: #ef3090;



    padding: 6px 30px;



    color: white;



    border-radius: 30px;



    text-decoration: none;



    width: fit-content;



    transition: 0.3s;



}







.event-btn:hover {



    transform: translateY(-5px);



    box-shadow: 0 8px 20px rgba(171, 71, 188, 0.4);



    color: white;



}







/* Center arrows */



.swiper-button-next,



.swiper-button-prev {



    top: 50%;



    transform: translateY(-50%);



    color: #333;



}







/* RESPONSIVE */



@media (max-width: 991px) {



    .event-card-inner {



        flex-direction: column;



        height: auto;



    }







    .event-left,



    .event-right {



        width: 100%;



        height: auto;



    }







    .event-photo {



        height: 250px;



        object-fit: cover;



    }







    .event-title {



        font-size: 20px;



    }







    .event-btn {



        width: 100%;



        text-align: center;



    }



}







@media (max-width: 576px) {



    .event-photo {



        height: 220px;



    }







    .event-right {



        padding: 20px;



    }



}



.stat {



    text-align: center;



}







.stat-value {



    font-size: 1.5rem;



    font-weight: 700;



    color: var(--primary);



}







.stat-label {



    font-size: 0.8rem;



    color: var(--yellow);



}







.project-footer {



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.project-progress {



    flex-grow: 1;



    text-align: end;



}







.progress-bar {



    height: 6px;



    background: #e0e0e0;



    border-radius: 3px;



    overflow: hidden;



}







.progress-fill {



    height: 100%;



    background: var(--primary);



    border-radius: 3px;



}







.project-link {



    color: var(--primary);



    text-decoration: none;



    font-weight: 600;



    display: flex;



    align-items: center;



    gap: 5px;



    transition: color 0.3s ease;



}







.project-link:hover {



    color: var(--accent);



}







.cta-section {



    text-align: center;



    margin-top: 60px;



    padding: 40px;



    background: white;



    border-radius: 12px;



    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);



}







.cta-section h3 {



    font-size: 1.8rem;



    color: var(--dark);



    margin-bottom: 15px;



}







.cta-section p {



    max-width: 600px;



    margin: 0 auto 25px;



}







.cta-btn {



    display: inline-block;



    padding: 12px 30px;



    background: var(--primary);



    color: white;



    border-radius: 30px;



    text-decoration: none;



    font-weight: 600;



    transition: all 0.3s ease;



}







.cta-btn:hover {



    background: var(--primary);



    transform: translateY(-3px);



    box-shadow: 0 10px 20px rgba(16, 172, 132, 0.2);



}







@media (max-width: 992px) {



    .projects-grid {



        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));



    }



}







@media (max-width: 768px) {



    .section-header h2 {



        font-size: 2rem;



    }







    .projects-grid {



        grid-template-columns: 1fr;



    }







    .project-stats {



        flex-wrap: wrap;



        gap: 15px;



    }







    .stat {



        flex: 1 0 40%;



    }



}







@media (max-width: 576px) {



    .projects-section {



        padding: 40px 15px;



    }







    .section-header h2 {



        font-size: 1.8rem;



    }







    .filter-container {



        justify-content: flex-start;



        overflow-x: auto;



        padding-bottom: 10px;



    }







    .project-content {



        padding: 20px;



    }







    .project-title {



        font-size: 1.2rem;



    }



}







/* *******project css*********** */



.parallax-carousel {



    position: relative;



    width: 100%;



    overflow: hidden;



}







.carousel-slide {



    position: relative;



    width: 100%;



    display: none;



}







.carousel-slide.active {



    display: block;



}







.desktop-img,



.mobile-img {



    width: 100%;



    display: block;



}







.mobile-img {



    display: none;



}







@media (max-width: 768px) {



    .desktop-img {



        display: none;



    }







    .mobile-img {



        display: block;



    }



}







/* Text container */



.carousel-text {



    position: absolute;



    top: 50%;



    left: 5%;



    transform: translateY(-50%);



    max-width: 550px;



    color: #fff;



    z-index: 5;



}







/* Slide 1: Inflating Text */



.slide1-text h1 {



    font-size: 3rem;



    animation: inflateText 1s ease forwards;



}







@keyframes inflateText {



    0% {



        transform: scale(0);



        opacity: 0;



    }







    100% {



        transform: scale(1);



        opacity: 1;



    }



}







/* Slide 2: Sliding Text Reveal */



.slide2-text h1 {



    font-size: 3rem;



    overflow: hidden;



    white-space: nowrap;



    display: inline-block;



}







.slide2-text h1 span {



    display: inline-block;



    transform: translateX(-100%);



    animation: slideReveal 0.6s forwards;



}







@keyframes slideReveal {



    0% {



        transform: translateX(-100%);



        opacity: 0;



    }







    100% {



        transform: translateX(0);



        opacity: 1;



    }



}







.slide3-text h1 {



    font-size: 3rem;



    animation: bouncyText 1s ease;



}







@keyframes bouncyText {



    0% {



        transform: translateY(-50px);



        opacity: 0;



    }







    50% {



        transform: translateY(10px);



        opacity: 1;



    }







    70% {



        transform: translateY(-5px);



    }







    100% {



        transform: translateY(0);



    }



}







.carousel-text p {



    font-size: 1.2rem;



    margin-top: 10px;



    



}







.carousel-controls {



    position: absolute;



    bottom: 20px;



    width: 100%;



    display: flex;



    justify-content: center;



    gap: 30px;



    z-index: 10;



}







.carousel-controls .arrow {



    background: rgba(255, 255, 255, 0.85);



    color: #333;



    border: none;



    font-size: 2rem;



    padding: 0px 15px;



    cursor: pointer;



    border-radius: 50%;



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);



    transition: all 0.3s ease;



}







.carousel-controls .arrow:hover {



    background: #ff2e85;



    color: #fff;



    transform: scale(1.2);



}







/* Dots */



.carousel-dots {



    position: absolute;



    left: 50%;



    transform: translateX(-50%);



}







.carousel-dots .dot {



    display: inline-block;



    width: 12px;



    height: 12px;



    background: rgba(255, 255, 255, 0.6);



    border-radius: 50%;



    margin: 0 5px;



    cursor: pointer;



}







.carousel-dots .dot.active {



    background: #ff2e85;



}







/* Responsive Text */



@media (max-width: 768px) {



    .carousel-text {



        max-width: 300px;



        display: none;



    }







    .carousel-text h1 {



        font-size: 2rem;



    }







    .carousel-text p {



        font-size: 1rem;



    }







    .carousel-controls .arrow {



        font-size: 1.5rem;



        padding: 8px 12px;



    }



}







.slide2-text {



    overflow: hidden;



}







.slide2-text h1 {



    font-size: 3rem;



    opacity: 0;



    transform: translateX(-100px) scale(0.8);



    animation: slide2Heading 1s forwards ease-out;



    animation-delay: 0.2s;



}







.slide2-text p {



    font-size: 1.2rem;



    opacity: 0;



    transform: translateY(20px);



    animation: slide2Paragraph 1s forwards ease-out;



    animation-delay: 0.8s;



}







/* Keyframes for heading */



@keyframes slide2Heading {



    0% {



        opacity: 0;



        transform: translateX(-100px) scale(0.8);



    }







    60% {



        opacity: 1;



        transform: translateX(15px) scale(1.05);



    }







    100% {



        opacity: 1;



        transform: translateX(0) scale(1);



    }



}







/* Keyframes for paragraph */



@keyframes slide2Paragraph {



    0% {



        opacity: 0;



        transform: translateY(20px);



    }







    100% {



        opacity: 1;



        transform: translateY(0);



    }



}







#archive-cards {



  animation: fadeIn 0.8s ease-in-out;



}







@keyframes fadeIn {



  from { opacity: 0; transform: translateY(20px); }



  to { opacity: 1; transform: translateY(0); }



}







.accordion-item {



    border-radius: 12px;



    overflow: hidden;



    margin-bottom: 20px;



    box-shadow: 0 8px 20px rgba(0,0,0,0.1);



}







.accordion-button {



    font-weight: 600;



    color: #ff006a;



}







.accordion-body {



    background: #fff;



    padding: 20px;



}







.accordion-body .row {



    align-items: center;



}







.accordion-body img {



    width: 100%;



    max-width: 500px;



    border-radius: 12px;



    object-fit: cover;



    transition: transform 0.4s;



}







.accordion-body img:hover {



    transform: scale(1.05);



}







.label {



    font-weight: 600;



    color: #ff006a;



}







@media (max-width: 767px) {



    .accordion-body .row {



        flex-direction: column;



        text-align: center;



    }



    .accordion-body img {



        max-width: 100%;



        margin-bottom: 15px;



    }



    .accordion-body {



        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);



        color: white;



    }



}







.btn-primary:hover {



    transform: translateY(-2px);



    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);



}







.btn-outline-primary {



    background: transparent;



    color: #667eea;



    border: 2px solid #667eea;



}







.btn-outline-primary:hover {



    background: #667eea;



    color: white;



    transform: translateY(-2px);



}







/* Sponsor Section Styles - Learn With Love Page */



.sponsor-section {



    /* background: #f8f9fa; */



    border-radius: 15px;



    padding: 40px 20px;



    margin-top: -30px;



}







.py-5 {



    padding-top: 2.5rem !important;



    padding-bottom: 2.5rem !important;

/* 

    margin-bottom: 40px; */



}







.sponsor-nav {



    background: transparent;



    border-radius: 12px;



    padding-top: 0px!important;



    padding: 15px;



    border: none;



}







.sponsor-nav .nav-item {



    display: flex;



    align-items: center;



    padding: 10px 10px;



    margin-bottom: 15px;



    background: white;



    border-radius: 12px;



    border: 1px solid #e0e0e0;



    cursor: pointer;



    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;



    min-height: 80px;



    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);



    position: relative;



    overflow: visible;



}







.sponsor-nav .nav-item::after {



    content: '';



    position: absolute;



    top: 50%;



    right: -24px;



    width: 24px;



    height: 40px;



    background: #fff;



    clip-path: polygon(0 0, 100% 50%, 0 100%);



    opacity: 0;



    pointer-events: none;



    transition: opacity 0.28s ease, transform 0.28s ease;



    transform: translateY(-50%) scale(0.85);



    z-index: 2;



}







.sponsor-nav .nav-item::before {



    content: '';



    position: absolute;



    top: 50%;



    right: -25px;



    width: 25px;



    height: 42px;



    background: #e3e3e3;



    clip-path: polygon(0 0, 100% 50%, 0 100%);



    opacity: 0;



    pointer-events: none;



    transition: opacity 0.28s ease, transform 0.28s ease;



    transform: translateY(-50%) scale(0.85);



    z-index: 1;



}







.sponsor-nav .nav-item:hover {



    background: #fff;



    border-color: #e0e0e0;



    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);



    transform: translateY(-2px);



}







.sponsor-nav .nav-item.active {



    background-color: #fff;



    border: 1px solid #e0e0e0;



    color: #ef3090;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);



    transform: translateY(-2px);



}







.sponsor-nav .nav-item.active::after {



    opacity: 1;



    transform: translateY(-50%) scale(1);



    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));



}







.sponsor-nav .nav-item.active::before {



    opacity: 1;



    transform: translateY(-50%) scale(1);



}







.sponsor-nav .nav-item img {



    width: 70px;



    height: 70px;



    object-fit: cover;



    border-radius: 12px;



    margin-right: 10px;



    border: 1px solid #e0e0e0;



}







.sponsor-nav .nav-item span {



    font-size: 15px;



    font-weight: 600;



    /* color: #ef3090; */



    color: var(--primary)!important;



    margin-left: 15px;



    line-height: 1.4;



}







.sponsor-nav .nav-item.active span {



    color: var(--primary);



    font-weight: 700;



}







.sponsor-content {



    background:  #f8f9ff;



    border-radius: 16px;



    padding: 10px 10px;



    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);;



    height: 100%;



    border: 1px solid #d9d9d9;



    position: relative;



    text-align: left;



}







.sponsor-title {



    color: #1f2937;



    font-size: 22px;



    font-weight: 700!important;



    margin-bottom: 18px;



    line-height: 1.2;



    text-align: center !important;



}







.sponsor-details {



    margin-bottom: 10px;



}







.detail-item {



    display: flow;



    margin-bottom: 4px;



    padding: 0;



    background: transparent;



    border: none;



    align-items: flex-start;



}







.detail-item strong {



    color: var(--primary);



    font-weight: 600;



    min-width: 170px;



    margin-right: 0px;



    font-size: 15px;



    line-height: 1.25;



}







.detail-item span {



    color: #1f2937;



    font-weight: 400;



    font-size: 14px;



    line-height: 1.35;



}







.sponsor-description {



    margin-bottom: 10px;



}







.description-content {



    max-height: 225px;



    overflow-y: auto;



    padding-right: 6px;



}







.description-content::-webkit-scrollbar {



    width: 4px;



}







.description-content::-webkit-scrollbar-track {



    background: #f1f1f1;



    border-radius: 3px;



}







.description-content::-webkit-scrollbar-thumb {



    background: #808080;



    border-radius: 3px;



}







.description-content::-webkit-scrollbar-thumb:hover {



    background: #666666;



}







/* Custom scrollbar for projects-content-scrollable */



.projects-content-scrollable::-webkit-scrollbar {



    width: 6px;



}







.projects-content-scrollable::-webkit-scrollbar-track {



    background: #f1f1f1;



    border-radius: 3px;



}







.projects-content-scrollable::-webkit-scrollbar-thumb {



    background: #808080; /* Gray scrollbar */



    border-radius: 3px;



}







.projects-content-scrollable::-webkit-scrollbar-thumb:hover {



    background: #666666; /* Darker gray on hover */



}







.sponsor-description h4 {



    color: var(--primary);



    font-size: 15px;



    font-weight: 600!important;



    margin-bottom: 8px;



    padding: 0;



    border: none;



}







.sponsor-description p {



    color: #3f3f46;



    line-height: 1.45;



    margin-bottom: 6px;



    font-size: 14px;



    text-align: left;



}







.sponsor-image {



    margin: 0 0 15px 0;



    text-align: left;



}







.sponsor-image img {



    width: 353px;



    height: 370px;



    object-fit: cover;



    border-radius: 22px;



    border-top: 6px solid #ef3090;



    border-bottom: 6px solid #ef3090;



    border-left: none;



    border-right: none;



    box-shadow: none;



    max-width: 100%;



}







.see-more {



    text-align: left;



    margin-top: 10px;



    margin-bottom: 0;



}







.see-more-link {



    color: var(--primary)!important;



    font-weight: 600;



    font-size: 14px;



    text-decoration: none!important;



    padding: 0;



    border: none;



    border-radius: 0;



    transition: all 0.3s ease;



    display: inline-block;



    background: transparent;



}







.see-more-link:hover {



    color: #ef3090;



    text-decoration: underline;



    background: transparent;



    transform: none;



    box-shadow: none;



}







.see-more-link::after {



    content: ' >>';



    color: #ef3090;



}







/* Navigation Buttons */



.sponsor-nav-buttons {



       /* display: flex;



    justify-content: start;



    gap: 15px;



    margin-top: -10px;



    padding: 15px; */







        display: inline-flex;



    justify-content: start;



    gap: 15px;



    margin-top: -15px;



    padding: 6px 15px;



}







.sponsor-nav-btn {



    width: 40px;



    height: 40px;



    border-radius: 8px;



    border: none;



    background:#FF69B4;



    color: #FFF;



    font-size: 16px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



}







.sponsor-nav-btn:hover {



    background: #FF69B4;



    color: #FFF;



    transform: translateY(-2px);



}











.sponsor-nav-btn:active {



    transform: translateY(0);



}







/* Responsive Design */



@media (max-width: 991px) {



    .sponsor-section {



        padding: 30px 15px;



    }



    



    .sponsor-nav {



        margin-bottom: 25px;



    }



    



    .sponsor-nav .nav-item img {



        width: 50px;



        height: 50px;



    }



    



    .sponsor-nav .nav-item span {



        font-size: 13px;



    }



    



    .sponsor-content {



        padding: 26px;



    }



    



    .sponsor-title {



        font-size: 26px;



    }







    .detail-item strong {



        min-width: 140px;



        font-size: 14px;



    }







    .detail-item span {



        font-size: 14px;



    }







    .sponsor-description h4 {



        font-size: 20px;



    }







    .sponsor-description p {



        font-size: 14px;



    }



    



    .sponsor-image img {



        width: 100%;



        height: auto;



        max-height: 400px;



    }



}







@media (max-width: 576px) {



    .sponsor-section {



        padding: 20px 10px;



    }



    



    .sponsor-nav {



        padding: 15px;



    }



    



    .sponsor-nav .nav-item {



        padding: 15px 12px;



        margin-bottom: 12px;



        min-height: 70px;



    }



    



    .sponsor-nav .nav-item img {



        width: 45px;



        height: 45px;



        margin-right: 12px;



    }



    



    .sponsor-nav .nav-item span {



        font-size: 13px;



    }



    



    .sponsor-nav-buttons {



        gap: 10px;



        margin-top: 15px;



    }



    



      .sponsor-nav-btn {



        width: 35px;



        height: 35px;



        font-size: 14px;



    }



    



    .sponsor-content {



        padding: 20px;



    }



    



    .sponsor-title {



        font-size: 22px;



    }



    



    .detail-item {



        flex-direction: column;



        padding: 10px;



    }



    



    .detail-item strong {



        min-width: auto;



        margin-right: 0;



        margin-bottom: 5px;



        font-size: 14px;



    }







    .detail-item span {



        font-size: 14px;



    }







    .sponsor-description h4 {



        font-size: 18px;



    }



    



    .sponsor-description p {



        font-size: 14px;



    }



    



    .sponsor-image img {



        width: 100%;



        height: 300px;



    }



}







/* Mobile/tablet navbar CTA alignment override */



@media (max-width: 991px) {



    #top_header .navbar-nav .mobile-cta-row {



        justify-content: flex-start !important;

        color: #fff;



    }



}







/* Internship Form Section Titles - Primary Text Only */



.internship-form .section-title {



    color: var(--primary);



    padding: 0;



    border-radius: 0;



    font-size: 1.2rem;



    font-weight: 600!important;



    margin-bottom: 20px;



    box-shadow: none;



    position: static;



    overflow: visible;



    text-transform: uppercase;



    letter-spacing: 0.5px;



    display: inline-block;



    background: transparent;



    border: none;



    text-decoration: underline;



    text-decoration-color: var(--primary);



    text-decoration-thickness: 2px;



    text-underline-offset: 4px;



}







/* Add space between form fields */



.internship-form .mb-3 {



    margin-bottom: 1rem !important;



}







.internship-form .form-control,



.internship-form .form-select {



    margin-bottom: 4px;



}







.internship-form textarea.form-control {



    min-height: 100px;



    resize: vertical;



}







/* Specific height for skills and other textareas */



.internship-form textarea#skills,



.internship-form textarea#whyIntern,



.internship-form textarea#hopeToLearn,



.internship-form textarea#socialIssue,



.internship-form textarea#hobbies,



.internship-form textarea#experience {



    min-height: 180px;



    resize: vertical;



}







.internship-form .col-md-6,



.internship-form .col-lg-6 {



    margin-bottom: 15px;



    padding-right: 20px;



}







.internship-form .col-12 {



    padding-right: 10px;



    margin-bottom: 10px;



}







/* Add right margin to form rows for horizontal spacing */



.internship-form .row {



    margin-right: 15px;



    margin-bottom: 5px;



}







/* Reduce left padding to balance right spacing */



.internship-form {



    padding-left: 30px !important;



    padding-right: 40px !important;



}







/* Reduce excessive space between sections */



.internship-form .col-12.mt-4 {



    margin-top: 1rem !important;



}







.internship-form .section-title {



    margin-bottom: 8px !important;



}







/* Remove extra space from form groups */



.internship-form .row.g-1 {



    margin-bottom: 0 !important;



}







.internship-form .row > div {



    margin-bottom: 0 !important;



}







/* Responsive adjustments for section titles */



@media (max-width: 768px) {



    .internship-form .section-title {



        font-size: 0.85rem;



        margin-bottom: 14px;



    }



}







@media (max-width: 480px) {



    .internship-form .section-title {



        font-size: 0.8rem;



        margin-bottom: 12px;



    }



}







/* Volunteer Form Section Titles - Primary Text Only */



.volunteer-form .section-title {



    color: var(--primary);



    padding: 0;



    border-radius: 0;



    font-size: 1.2rem;



    font-weight: 600!important;



    margin-bottom: 20px;



    box-shadow: none;



    position: static;



    overflow: visible;



    text-transform: uppercase;



    letter-spacing: 0.5px;



    display: inline-block;



    background: transparent;



    border: none;



    text-decoration: underline;



    text-decoration-color: var(--primary);



    text-decoration-thickness: 2px;



    text-underline-offset: 4px;



}







/* Add space between form fields */



.volunteer-form .mb-3 {



    margin-bottom: 1rem !important;



}







.volunteer-form .form-control,



.volunteer-form .form-select {



    margin-bottom: 4px;



}







.volunteer-form textarea.form-control {



    min-height: 100px;



    resize: vertical;



}







/* Specific height for skills and why volunteer textareas */



.volunteer-form textarea#skills,



.volunteer-form textarea#whyVolunteer {



    min-height: 100px;



    resize: vertical;



}







.volunteer-form .col-md-6,



.volunteer-form .col-lg-6 {



    margin-bottom: 15px;



    padding-right: 20px;



}







.volunteer-form .col-12 {



    padding-right: 10px;



    margin-bottom: 10px;



}







/* Add right margin to form rows for horizontal spacing */



.volunteer-form .row {



    margin-right: 15px;



    margin-bottom: 5px;



}







/* Reduce left padding to balance right spacing */



.volunteer-form {



    padding-left: 30px !important;



    padding-right: 0px !important;



}







/* Reduce excessive space between sections */



.volunteer-form .col-12.mt-4 {



    margin-top: 1rem !important;



}







.volunteer-form .section-title {



    margin-bottom: 8px !important;



}







/* Remove extra space from form groups */



.volunteer-form .row.g-1 {



    margin-bottom: 0 !important;



}







.volunteer-form .row > div {



    margin-bottom: 0 !important;



}







/* Responsive adjustments for section titles */



@media (max-width: 768px) {



    .volunteer-form .section-title {



        font-size: 0.85rem;



        margin-bottom: 14px;



    }



}







@media (max-width: 480px) {



    .volunteer-form .section-title {



        font-size: 0.8rem;



        margin-bottom: 12px;



    }



}

/* Global sticky arrows for project pages using sponsor section */
.sponsor-section .row > .col-lg-4.col-md-5 {
    display: flex;
    flex-direction: column;
}

.sponsor-section .row > .col-lg-4.col-md-5 .sponsor-nav {
    flex: 1 1 auto;
}

.sponsor-section .row > .col-lg-4.col-md-5 .sponsor-nav-buttons {
    margin-top: auto;
    position: sticky;
    bottom: 12px;
    z-index: 5;
    align-self: flex-start;
}

/* Kidswithcapes-style sticky nav buttons for program sidebars */
.kindness-sponsor-left {
    display: flex;
    flex-direction: column;
}

.kindness-sponsor-left .sponsor-nav {
    flex: 1 1 auto;
}

.kindness-sponsor-left .sponsor-nav-buttons {
    margin-top: auto;
    position: sticky;
    bottom: 12px;
    z-index: 5;
}

@media (max-width: 991px) {
    .kindness-sponsor-left .sponsor-nav-buttons {
        position: static;
        bottom: auto;
    }
}

@media (max-width: 991px) {
    .sponsor-section .row > .col-lg-4.col-md-5 .sponsor-nav-buttons {
        position: static;
        bottom: auto;
        margin-top: 12px;
    }
}

.short-link a {
  display: inline-block;
  transition: all 0.2s ease;
}

.short-link a:hover {
  transform: translateX(4px);
  color: #f6a400; /* highlight color */
}

.short-link a i {
  transition: transform 0.2s ease;
}

.short-link a:hover i {
  transform: translateX(4px);
}