﻿/* ===== GENERAL SECTION STYLING ===== */
section {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem; /* Mobile-first padding */
    width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
    .section-content {
        padding: 4rem 1.5rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .section-content {
        padding: 5rem 2rem;
    }
}

/* Small mobile optimization */
@media (max-width: 480px) {
    .section-content {
        padding: 2rem 0.75rem;
    }
}

/* ===== SCROLLABLE SECTIONS ===== */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

    .scroll-container::-webkit-scrollbar {
        display: none;
    }

/* Hide scrollbar for Firefox */
.scroll-container {
    scrollbar-width: none;
}

.section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    background-color: #f8f9fa;
}

/* Mobile optimization for scroll sections */
@media (max-width: 768px) {
    .scroll-container {
        scroll-snap-type: none; /* Less restrictive on mobile */
        height: 100vh;
    }

    .section {
        height: auto;
        min-height: 100vh;
        scroll-snap-align: none;
    }
}

/* ===== DOT NAVIGATION ===== */
.dots {
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1b2438;
    border: 2px solid #1b2438;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dot.active {
        background: #fff;
        transform: scale(1.3);
    }

/* Mobile dot navigation */
@media (max-width: 768px) {
    .dots {
        right: 0.75rem;
        gap: 0.5rem;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-width: 1px;
    }

        .dot.active {
            transform: scale(1.2);
        }
}

/* Hide dots on very small screens */
@media (max-width: 480px) {
    .dots {
        display: none;
    }
}

/* ===== FOOTER STYLES ===== */
.hcg-footer {
    background-color: #1b2438;
    color: #fff;
    padding: 3rem 1rem 2rem;
    font-family: "Poppins", sans-serif;
    width: 100%;
}

/* Footer container */
.footer-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* LEFT SECTION */
.footer-left {
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

.brand-text h2 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.tagline {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.5;
}

/* SOCIAL ICONS */
.social-icons {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

    .social-icons a {
        color: #ffffff !important; /* Force white color */
        font-size: 1.5rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        text-decoration: none !important; /* Remove underline */
    }

        .social-icons a:hover {
            color: #ff5d00 !important; /* Your orange color on hover */
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            text-decoration: none !important;
        }

/* COPYRIGHT */
.footer-copy {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.5;
}

    .footer-copy p {
        margin: 0;
    }

/* RIGHT SECTION */
.footer-right {
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
}

    .footer-right p {
        margin: 0.5rem 0;
    }

/* Tablet Styles */
@media (min-width: 768px) {
    .hcg-footer {
        padding: 3rem 1.5rem 2rem;
    }

    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
    }

    .footer-left {
        text-align: left;
        flex: 1;
        min-width: 300px;
    }

    .footer-brand {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .footer-logo {
        max-width: 350px;
    }

    .social-icons {
        justify-content: flex-start;
        gap: 1rem;
    }

    .footer-right {
        text-align: right;
        min-width: 250px;
    }

    .brand-text h2 {
        font-size: 1.5rem;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .hcg-footer {
        padding: 4rem 2rem 2.5rem;
    }

    .footer-logo {
        max-width: 400px;
    }
}

/* Small Mobile Optimizations */
@media (max-width: 480px) {
    .hcg-footer {
        padding: 2.5rem 0.75rem 1.5rem;
    }

    .footer-logo {
        max-width: 280px;
    }

    .brand-text h2 {
        font-size: 1.25rem;
    }

    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .tagline,
    .footer-copy,
    .footer-right {
        font-size: 0.8rem;
    }
}

/* Safe Area Support for Notched Devices */
@supports(padding: max(0px)) {
    .hcg-footer {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .section-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Print Styles */
@media print {
    .dots,
    .scroll-container {
        display: none !important;
    }

    .section {
        height: auto !important;
        page-break-inside: avoid;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .scroll-container {
        scroll-behavior: auto;
    }

    .dot,
    .social-icons a {
        transition: none;
    }

        .social-icons a:hover {
            transform: none;
        }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .dot {
        border-color: #000;
    }

        .dot.active {
            background: #000;
        }

    .social-icons a {
        background: rgba(0, 0, 0, 0.8);
    }
}
/* Mobile testimonial dot navigation */
@media (max-width: 768px) {
    .testimonial-dots {
        right: 0.75rem;
        gap: 0.5rem;
    }

    .testimonial-dot {
        width: 10px;
        height: 10px;
        border-width: 1px;
    }

        .testimonial-dot.active {
            transform: scale(1.2);
        }
}

/* Hide testimonial dots on very small screens */
@media (max-width: 480px) {
    .testimonial-dots {
        display: none;
    }

    .testimonial-nav-btn {
        width: 40px;
        height: 40px;
    }

    .carousel-control-prev {
        left: 5px;
    }

    .carousel-control-next {
        right: 5px;
    }
}
