h1 {
    font-size: clamp(2.3rem, 5vw, 3.7rem);
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 100px 0 20px 0;
    /* height: 700px;    */
    background: #022e68;
}

.hero .hero-imgs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero .hero-imgs img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.hero h1 {
    color: #fff;
    text-transform: uppercase;
}


.transforming-img {
    height: 100%;
    justify-content: center;
    align-items: center;
}

.since-imgs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.since-imgs img {
    max-width: 200px;
    width: 100%;
}

.since-imgs .sin-sub-img{
    display: flex;
    gap: 15px;
    flex-direction: column;
}

.since-text {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

/* change section  */

.change {
    background: url("../img/impact.jpg") no-repeat;
    background-size: cover;
    background-position: center; 
    background-attachment: fixed; 
    padding: 20px;  
}

.change .change-half {
    background: rgba(233, 226, 226, 0.6);
    padding: 15px;
}

.change .change-half p {
    color: #323030;
}

/* classroom section  */

.classroom h2 {
    text-align: center;
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 600;
}

.classroom-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 561px) {
    .hero{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .since-imgs img{
        max-width: 400px;
        width: 100%;
    }
}


/* event page style  */

.event {
    background: #022e68;
}

.event-hero {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 12px 20px 12px;
    gap: 20px;
}

.event-hero h1 {
    color: #fff;
}

/* upcomimg events card section  */

.upcoming-event h1 {
    margin-bottom: 20px;
}

.upcoming-event .event-card {
    background: #022e68;
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 20px;
}

.upcoming-event .event-card h2 {
    color: rgb(250, 142, 102);
    margin-bottom: 30px;
}

.upcoming-event .event-card h3 {
    color: #fff;
}

.upcoming-event .event-card img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.event-card .card-btns {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    max-width: 400px;
    width: 100%;
}

.event-card .card-btns button {
    border: none;
    padding: 6px 30px;
    background: #000;
    color: #fff;
    text-transform: capitalize;
    font-size: 1.1rem;
}

span {
    color: rgb(250, 142, 102);
}

@media (max-width: 561px) {
    .event-card {
        flex-wrap: wrap;
    }

    .event-hero {
        flex-wrap: wrap;
        padding: 30px 12px;
    }

}


/* csr page style  */

.csr-container {
    background: url("../img/csr-head.jpg") no-repeat;
    background-size: cover;
    padding: 160px 0;
    background-position: center;
}

.csr-container .overlay {
    width: 100%;
    display: flex;
    background: rgb(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    color: #fff;
    height: 100%;
}

.overlay h1, .overlay h4 {
    color: #fff;
}

/* partner section  */

.why-partner {
    display: flex;
}

.partner-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 30px 30px;
}

.partner-head {
    text-align: center;
    margin-bottom: 30px;
}


/* focus section  */

.focus {
    background: #022e68;
    padding: 30px 12px;
}

.focus-head {
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}

.focus-head h1 {
    color: #fff;
}

.focus-slider {
    display: flex;
    overflow: auto;
    gap: 20px;
}

.focus-slider::-webkit-scrollbar{
    display: none;
}

.slider-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    animation: scroll 20s linear infinite;
}

.focus-slider:hover .slider-cards {
    animation-play-state: paused;
}

@keyframes scroll {
    from{transform: translateX(0%);}
    to{transform: translateX(-100%);}
}

.slider-cards .slide-card {
    width: 360px;
    height: 360px;
    border: 1px solid rgb(250, 142, 102);
    background: #fff;
    gap: 15px;
    padding: 15px 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 12px;
}

.slider-cards .slide-card h4 {
    text-transform: capitalize;
    font-size: 1.3rem;
}

.slider-cards .slide-card img {
    width: 90px;
    height: auto;
}

.slide-card li {
    text-align: start;
}

/* solution section  */

.solution-content {
    display: flex;
    flex-wrap: wrap;
}

.solution-img {
    padding: 30px 12px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* sponsor page style  */

.sponsor-hero {
    background: url("../img/sponsor-head.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

.sponsor-hero .overlay {
    background: rgb(0, 0, 0, 0.4);
    padding: 100px 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/* why sponsor section  */

.sponsor-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 30px 20px;
}

/* sponsorship plans section  */

.plans .plan-card {
    border: 1px solid #000;
    background: #022e68;
    color: #fff;
    padding: 20px 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: .4s ease;
    margin-bottom: 20px;
}

.plans .plan-card:hover {
    box-shadow: 0 0 15px 4px #022e68;
    background: #fff;
    color: #000;

}

.plans .plan-card h3 {
    color: #fff;
    text-align: center;
}

.plan-card:hover h3 {
    color: #000;
}

/* work section  */

.how-work .work-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px 12px;
}

/* faq section  */

.faq-boxs {
    display: flex;
    flex-direction: column;
}

.faq-boxs .faq-box .box-que {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.faq-boxs .faq-box {
    border-bottom: 1px solid #000;
    padding: 14px 12px;
    cursor: pointer;
}

.faq-boxs .faq-box:nth-child(1) {
    border-top: 1px solid #000;
}

.faq-box .pera {
    visibility: hidden;
    opacity: 0;
    display: none;
    transition: .4s;
}

.bi-chevron-right {
    transition: .4s;
}

.bi-chevron-right.rotate {
    transform: rotate(90deg);
}

.pera.faq-show {
    opacity: 1;
    visibility: visible;
    display: block;
}


/* celebration page style  */

.celebrate-head {
    background: url("../img/celebrate.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

.celebrate-head .overlay {
    background: rgb(0, 0, 0, 0.4);
    padding: 200px 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spacial-day {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.spacial-img {
    background: #022e68;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 40px 12px;
    color: #fff;
}

.spacial-img h3 {
    color: #fff;
}

@media (max-width: 561px) {
    .spacial-img {
        flex-wrap: wrap;
    }
}

.spacial-img video {
    max-width: 450px;
    width: 100%;
    height: auto;
}

/* occasion section  */

.occasion .oc-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.oc-cards .oc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    max-width: 350px;
    width: 100%;
    padding: 20px 9px;
    height: 350px;
    box-shadow: 0 0 15px 4px #ccc;
    border-radius: 12px;
    text-align: center;
}

/* .oc-card::before {
    position: absolute;
    background: conic-gradient(from 0deg, transparent 70%, white, blue);
    width: 100%;
    height: 100%;
    z-index: 1;
    inset: 5px;
} */

.oc-cards .oc-card img {
    width: 70px;
    height: auto;
}

.celebration-form form {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    width: 100%;
    gap: 20px;
}

form .join-form {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

form .join-form input {
    border: 1px solid #ccc;
    padding: 5px 12px;
    cursor: pointer;
    outline: none;
}

/* kit donation page style  */

.kit-head {
    background: url("../img/impact-about.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

.kit-head .overlay {
    background: rgb(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    padding: 200px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.kit-img {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    height: 100%;
    justify-content: start;
    align-items: center;
}

.kit-img img {
    max-width: 160px;
    width: 100%;
}

.kit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 1px solid #fff;
}

.kit-card {
    width: 270px;
    border-radius: 12px;
    padding-bottom: 20px;
}

.kit-card img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    width: 100%;
    height: 200px;
}

.kit-card h4 {
    color: #fff;
}