/* ============================================
   Custom Responsive Fixes for Homepage
   ============================================ */

/* ===== Header WhatsApp Book Button ===== */
.main-menu-wrapper__btn--whatsapp {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}

.main-menu-wrapper__btn--whatsapp:hover {
    background-color: #128C7E !important;
    border-color: #128C7E !important;
    color: #fff !important;
}

.main-menu-wrapper__btn--whatsapp i {
    margin-right: 5px;
    font-size: 18px;
}

/* Show header buttons on tablets and larger screens */
@media (min-width: 768px) and (max-width: 1199px) {
    .main-menu-wrapper__right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        float: none !important;
        padding: 20px 0;
    }
    
    /* Show only phone button on tablets */
    .main-menu-wrapper__btn:not(.main-menu-wrapper__btn--whatsapp) {
        display: inline-block !important;
    }
}

/* Hide WhatsApp button on smaller devices */
@media (max-width: 1199px) {
    .main-menu-wrapper__btn--whatsapp {
        display: none !important;
    }
}

/* Show both buttons on large devices */
@media (min-width: 1200px) {
    .main-menu-wrapper__right {
        display: flex !important;
        align-items: center;
        gap: 15px;
        flex-wrap: nowrap;
    }
    
    .main-menu-wrapper__btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 15px;
        padding: 12px 25px;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Adjust header spacing for two buttons on large screens */
@media (min-width: 1200px) and (max-width: 1480px) {
    .main-menu-wrapper__btn {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .main-menu-wrapper__right {
        gap: 10px;
    }
}

/* Override any hiding rules for large devices */
@media (min-width: 1200px) {
    nav.main-menu .main-menu-wrapper .main-menu-wrapper__right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    nav.main-menu .main-menu-wrapper .main-menu-wrapper__right .main-menu-wrapper__btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    nav.main-menu .main-menu-wrapper .main-menu-wrapper__right .main-menu-wrapper__btn--whatsapp {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== Main Slider Responsive Fixes ===== */

/* Base slider fixes for all sizes */
.main-slider {
    position: relative;
    display: block;
    overflow: hidden;
}

.main-slider .swiper-slide {
    display: flex;
    align-items: center;
}

.main-slider .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.main-slider .row {
    width: 100%;
}

.main-slider__content {
    position: relative;
    display: block;
    z-index: 10;
    width: 100%;
}

.main-slider__content h2 {
    margin-bottom: 25px;
    display: block;
}

.main-slider__content .thm-btn {
    display: inline-block;
    margin: 10px 10px 10px 0;
    vertical-align: middle;
    position: relative;
    z-index: 100;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure buttons are always visible and not cut off */
.main-slider__content .thm-btn:last-child {
    margin-right: 0;
}

/* Fix for button container */
.main-slider__content > a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent slider animations from hiding buttons */
.main-slider .swiper-slide-active .main-slider__content .thm-btn {
    animation: fadeInUp 1s ease-in-out 0.5s both;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure buttons appear even without animation */
.main-slider__content .thm-btn {
    animation: fadeInUp 0.8s ease-in-out 0.3s both;
}

/* Slider content wrapper should have enough space */
.main-slider__content {
    min-height: 150px;
}

/* Prevent content from being cut off at bottom */
.main-slider .image-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1199px) {
    .main-slider .container {
        padding-top: 180px;
        padding-bottom: 180px;
    }

    .main-slider__content {
        padding: 20px;
    }

    .main-slider__content h2 {
        font-size: 48px !important;
        line-height: 56px !important;
        margin-bottom: 25px;
    }

    .main-slider__content .thm-btn {
        padding: 14px 30px;
        font-size: 15px;
        margin: 8px 8px 8px 0;
    }

    .main-slider {
        min-height: 550px;
    }
}

@media (max-width: 991px) {
    .main-slider .container {
        padding-top: 160px;
        padding-bottom: 160px;
    }

    .main-slider__content {
        padding: 20px 15px;
        max-width: 100%;
    }

    .main-slider__content h2 {
        font-size: 40px !important;
        line-height: 48px !important;
        margin-bottom: 25px;
    }

    .main-slider__content .thm-btn {
        padding: 13px 28px;
        font-size: 14px;
        margin: 8px 8px 8px 0;
        display: inline-block;
    }

    .main-slider {
        min-height: 500px;
    }

    /* Make sure col-xl-7 becomes full width */
    .main-slider .col-xl-7 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 767px) {
    .main-slider .container {
        padding-top: 140px;
        padding-bottom: 140px;
    }

    .main-slider__content {
        padding: 15px;
    }

    .main-slider__content h2 {
        font-size: 30px !important;
        line-height: 38px !important;
        margin-bottom: 20px;
    }

    .main-slider__content .thm-btn {
        padding: 12px 24px;
        font-size: 14px;
        margin: 8px 6px 8px 0;
        white-space: nowrap;
        display: inline-block;
    }

    .main-slider {
        min-height: 450px;
    }
}

@media (max-width: 575px) {
    .main-slider .container {
        padding-top: 120px;
        padding-bottom: 100px;
    }

    .main-slider__content {
        padding: 10px;
    }

    .main-slider__content h2 {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 20px;
    }

    .main-slider__content .thm-btn {
        padding: 11px 20px;
        font-size: 13px;
        display: inline-block;
        margin: 6px 6px 6px 0;
        white-space: nowrap;
    }

    .main-slider {
        min-height: 420px;
    }
}

@media (max-width: 400px) {
    .main-slider .container {
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .main-slider__content h2 {
        font-size: 20px !important;
        line-height: 28px !important;
        margin-bottom: 15px;
    }

    .main-slider__content .thm-btn {
        padding: 10px 18px;
        font-size: 12px;
        margin: 5px 5px 5px 0;
    }

    .main-slider {
        min-height: 380px;
    }
}

/* ===== Welcome Section Responsive Fixes ===== */
@media (max-width: 991px) {
    .welcome-one {
        padding: 60px 0;
    }

    .welcome-one__img-box {
        margin-bottom: 40px;
    }

    .welcome-one__img img,
    .welcome-one__right img {
        max-width: 100%;
        height: auto;
    }

    .section-title__title {
        font-size: 28px !important;
        line-height: 34px !important;
    }
}

@media (max-width: 767px) {
    .welcome-one {
        padding: 40px 0;
    }

    .welcome-one__text-2 {
        font-size: 15px;
        line-height: 24px;
    }

    .section-title__title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .section-title__tagline {
        font-size: 14px;
    }

    .welcome-one__btn-box .thm-btn {
        padding: 12px 30px;
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .section-title__title {
        font-size: 20px !important;
        line-height: 26px !important;
    }

    .welcome-one__btn-box .thm-btn {
        padding: 10px 25px;
        font-size: 13px;
    }
}

/* ===== About Section Responsive Fixes ===== */
@media (max-width: 991px) {
    .about-one {
        padding: 60px 0 !important;
    }

    .about-one__right {
        margin-top: 40px !important;
    }

    .about-one__points {
        display: flex !important;
        flex-direction: column !important;
    }

    .about-one__points li {
        width: 100%;
        margin-bottom: 15px;
    }

    .about-one__points-content li {
        width: 100%;
        margin-bottom: 10px;
    }

    .about-one__text {
        font-size: 15px;
        line-height: 24px;
    }
}

@media (max-width: 767px) {
    .about-one {
        padding: 40px 0 !important;
    }

    .about-one__points li {
        margin-bottom: 12px;
    }

    .about-one__text {
        font-size: 14px;
        line-height: 22px;
    }
}

/* ===== Services/Causes Section Responsive Fixes ===== */
@media (max-width: 991px) {
    .causes-one {
        padding: 60px 0;
    }

    .causes-one__single {
        margin: 0 auto 30px;
        max-width: 400px;
    }

    .causes-one__img img {
        width: 100%;
        height: auto;
    }

    .causes-one__title {
        font-size: 20px !important;
        line-height: 26px;
    }

    .causes-one__text {
        font-size: 14px;
        line-height: 22px;
    }

    .causes-one__goals .thm-btn {
        padding: 10px 20px;
        font-size: 13px;
        margin: 5px;
    }
}

@media (max-width: 767px) {
    .causes-one {
        padding: 40px 0;
    }

    .causes-one__single {
        max-width: 100%;
    }

    .causes-one__goals {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .causes-one__goals .thm-btn {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
}

@media (max-width: 575px) {
    .causes-one__title {
        font-size: 18px !important;
        line-height: 24px;
    }
}

/* ===== Testimonial Section Responsive Fixes ===== */
@media (max-width: 991px) {
    .testimonial-two {
        padding: 60px 0 !important;
    }

    .testimonial-two__single {
        padding: 30px 20px;
    }

    .testimonial-two__text {
        font-size: 15px;
        line-height: 24px;
    }

    .testimonial-two__client-name {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .testimonial-two {
        padding: 40px 0 !important;
    }

    .testimonial-two__single {
        padding: 25px 15px;
    }

    .testimonial-two__text {
        font-size: 14px;
        line-height: 22px;
    }
}

/* ===== Contact Section Responsive Fixes ===== */
@media (max-width: 991px) {
    .contact-page-1 {
        padding: 60px 0;
    }

    .contact-page__form-input-box input,
    .contact-page__form-input-box textarea {
        width: 100%;
        padding: 12px 15px;
        font-size: 14px;
    }

    .contact-page__btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }
}

@media (max-width: 767px) {
    .contact-page-1 {
        padding: 40px 0;
    }

    .contact-page__form-input-box {
        margin-bottom: 15px;
    }
}

/* ===== Map Section Responsive Fixes ===== */
@media (max-width: 991px) {
    .contact-page-google-map-1 {
        height: 400px !important;
    }

    .contact-page-google-map-1 iframe {
        width: 100%;
        height: 400px;
    }
}

@media (max-width: 767px) {
    .contact-page-google-map-1 {
        height: 300px !important;
    }

    .contact-page-google-map-1 iframe {
        height: 300px;
    }
}

/* ===== Global Responsive Utilities ===== */
@media (max-width: 991px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .col-xl-6,
    .col-xl-7,
    .col-xl-12,
    .col-lg-6,
    .col-md-6 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===== Button Responsive Fixes ===== */
@media (max-width: 767px) {
    .thm-btn {
        font-size: 14px !important;
        padding: 12px 25px !important;
        white-space: normal;
        line-height: 1.4;
    }
}

@media (max-width: 575px) {
    .thm-btn {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }
}

/* ===== Spacing Fixes ===== */
@media (max-width: 991px) {
    section {
        overflow-x: hidden;
    }

    .section-title {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .section-title {
        margin-bottom: 30px;
    }
}

/* ===== Fix for Overflow Issues ===== */
body {
    overflow-x: hidden;
}

.page-wrapper {
    overflow-x: hidden;
}

/* ===== Landscape Orientation Fixes ===== */
@media (max-width: 991px) and (orientation: landscape) {
    .main-slider {
        min-height: 380px !important;
    }

    .main-slider .container {
        padding-top: 100px !important;
        padding-bottom: 80px !important;
    }

    .main-slider__content h2 {
        font-size: 28px !important;
        line-height: 34px !important;
        margin-bottom: 15px !important;
    }

    .main-slider__content .thm-btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
        margin: 5px 5px 5px 0 !important;
    }

    section {
        padding: 40px 0 !important;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .main-slider {
        min-height: 340px !important;
    }

    .main-slider .container {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }

    .main-slider__content h2 {
        font-size: 22px !important;
        line-height: 28px !important;
        margin-bottom: 12px !important;
    }

    .main-slider__content .thm-btn {
        padding: 9px 16px !important;
        font-size: 12px !important;
        margin: 4px 4px 4px 0 !important;
    }
}

@media (max-width: 575px) and (orientation: landscape) {
    .main-slider {
        min-height: 320px !important;
    }

    .main-slider .container {
        padding-top: 70px !important;
        padding-bottom: 50px !important;
    }

    .main-slider__content h2 {
        font-size: 18px !important;
        line-height: 24px !important;
        margin-bottom: 10px !important;
    }

    .main-slider__content .thm-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
        margin: 4px 4px 4px 0 !important;
    }
}