/* ============style.css=========== */

/* ================= RESPONSIVE DESIGN ================= */

/* ---------- TABLET (1024px) ---------- */

@media (max-width: 1024px) {

    /* Header */
    .nav-links {
        gap: 20px;
    }

    /* Hero */
    .outline-text {
        font-size: 42px;
    }

    .hero-content h1 strong {
        font-size: 38px;
    }

    /* Services Section */
    .container {
        flex-direction: column;
    }

    .left,
    .right {
        width: 100%;
    }

    /* Services Slider */
    .slide {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Company Tabs */
    .tab-content {
        flex-direction: column;
        text-align: center;
    }

    .company-left,
    .company-right {
        width: 100%;
    }

    .company-right {
        text-align: center;
    }

    /* Testimonials */
    .testimonial-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ---------- MOBILE (768px) ---------- */

@media (max-width: 768px) {

    /* Header Mobile Menu */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 5%;
        background: #ffffff;
        width: 200px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    /* Hero */
    .hero {
        height: 80vh;
    }

    .outline-text {
        font-size: 32px;
        -webkit-text-stroke: 1px #222;
    }

    .hero-content h1 strong {
        font-size: 28px;
    }

    .btn-outline {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* Services Section */
    .left h2 {
        font-size: 32px;
    }

    .features {
        flex-direction: column;
        gap: 20px;
    }

    .bottom {
        flex-direction: column;
    }

    /* Services Slider */
    .slide {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 40px 25px;
    }

    /* Company Section */
    .company-tabs {
        flex-direction: column;
        gap: 15px;
    }

    .tab-btn {
        width: 100%;
    }

    /* Testimonials */
    .testimonial-container {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    /* Home Contact */
    .home-contact-container {
        flex-direction: column;
    }

}

/*==========about.css==========*/

/* =====================================================
   ABOUT PAGE RESPONSIVE
===================================================== */


/* ================== TABLET ================== */
@media (max-width: 1024px) {

    /* Containers stack */
    .about-container,
    .story-container,
    .mv-row,
    .philosophy-wrapper {
        flex-direction: column;
        gap: 60px;
        text-align: center;
    }

    .mv-row.reverse {
        flex-direction: column;
    }

    .about-text,
    .about-image,
    .story-left,
    .story-right,
    .mv-text,
    .mv-image,
    .philosophy-text,
    .philosophy-card {
        width: 100%;
    }

    /* Grids */
    .approach-grid,
    .why-elegant-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Reduce hero */
    .about-hero {
        padding: 180px 20px 140px;
    }

    .about-hero h1 {
        font-size: 42px;
    }

    .about-hero p {
        font-size: 18px;
    }

}


/* ================== MOBILE ================== */
@media (max-width: 768px) {

    /* Hero */
    .about-hero {
        padding: 140px 20px 120px;
    }

    .about-hero h1 {
        font-size: 32px;
    }

    .about-hero p {
        font-size: 16px;
    }

    /* Section spacing */
    .about-section,
    .mv-section,
    .approach-section,
    .why-elegant,
    .tech-section {
        padding: 80px 20px;
    }

    /* Headings */
    .about-text h2,
    .story-left h2,
    .approach-header h2,
    .why-elegant-header h2,
    .tech-container h2 {
        font-size: 26px;
    }

    /* Paragraph */
    .about-text p,
    .story-right p {
        font-size: 15px;
    }

    /* Story image */
    .story-image-box {
        height: 220px;
    }

    /* Stat card fix */
    .stat-card {
        position: relative;
        bottom: 0;
        left: 0;
        margin-top: 20px;
    }

    /* Cards */
    .approach-card,
    .why-elegant-card,
    .mv-text {
        padding: 30px;
    }

    /* Technology tags */
    .tech-list span {
        padding: 10px 18px;
        font-size: 14px;
    }

}


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

    .about-hero h1 {
        font-size: 26px;
    }

    .about-text h2,
    .story-left h2 {
        font-size: 22px;
    }

    .story-highlight {
        font-size: 18px;
    }

    .story-quote {
        padding: 20px;
    }

    .story-quote p {
        font-size: 16px;
    }

    .approach-card,
    .why-elegant-card {
        padding: 25px;
    }

    .card-number {
        font-size: 28px;
    }

}

/*===========services.css===========*/

/* =====================================================
   SERVICES PAGE RESPONSIVE
===================================================== */


/* ===========================================
   GLOBAL MOBILE FIX
=========================================== */

@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
    }

    .service-container {
        width: 92%;
    }

    /* ===========================================
       HERO
    =========================================== */

    .service-hero {
        padding: 120px 20px 80px;
        text-align: center;
    }

    .service-hero h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .service-hero p {
        font-size: 15px;
    }

    /* ===========================================
       SERVICE INTRO (PHILOSOPHY)
    =========================================== */

    .service-intro {
        padding: 70px 20px;
    }

    .philosophy-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .section-tag {
        font-size: 18px;
        letter-spacing: 1px;
        text-align: center;
    }

    .philosophy-text h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .philosophy-text p {
        font-size: 14px;
    }

    .philosophy-points {
        grid-template-columns: 1fr;
        font-size: 14px;
    }

    .card-box {
        padding: 30px 20px;
        border-radius: 20px;
    }

    /* ===========================================
       SERVICE BLOCKS (BUSINESS + PROFESSIONALS)
    =========================================== */

    .service-detailed {
        padding: 70px 20px;
    }

    .service-detailed h2 {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .service-block {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 60px;
        text-align: left;
    }

    .service-block.reverse {
        flex-direction: column;
    }

    .service-text h3 {
        font-size: 20px;
    }

    .service-text p {
        font-size: 14px;
        line-height: 1.7;
    }

    .ideal {
        font-size: 13px;
    }

    .service-image img {
        width: 100%;
        height: auto;
        border-radius: 18px;
    }

    /* ===========================================
       BENEFITS SECTION
    =========================================== */

    .service-benefits {
        padding: 70px 20px;
    }

    .benefits-header h2 {
        font-size: 24px;
    }

    .benefits-header p {
        font-size: 14px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .benefit-card {
        padding: 30px 20px;
    }

    .benefit-card h3 {
        font-size: 18px;
    }

    .benefit-card p {
        font-size: 14px;
    }

    /* ===========================================
       PROCESS SECTION
    =========================================== */

    .service-process {
        padding: 70px 20px;
    }

    .process-header h2 {
        font-size: 24px;
    }

    .process-header p {
        font-size: 14px;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .process-card {
        padding: 30px 20px;
    }

    .step-number {
        font-size: 40px;
    }

    .process-card h3 {
        font-size: 18px;
    }

    .process-card p {
        font-size: 14px;
    }

    /* ===========================================
       CTA SECTION
    =========================================== */

    .service-cta {
        padding: 80px 20px;
    }

    .service-cta h2 {
        font-size: 24px;
    }

    .cta-btn {
        padding: 14px 35px;
        font-size: 14px;
    }

    /* ===========================================
       FOOTER
    =========================================== */

    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
    }

    .footer-bottom {
        margin-top: 40px;
    }

}



/*===========contact.css===========*/
/* =====================================================
   CONTACT PAGE RESPONSIVE
===================================================== */


/* ================= TABLET ================= */
@media (max-width: 1024px) {

    /* HERO */
    .contact-hero {
        height: 70vh;
    }

    .contact-hero-content h1 {
        font-size: 40px;
    }

    .contact-hero-content p {
        font-size: 18px;
    }

    /* CONTACT SECTION STACK */
    .contact-container {
        flex-direction: column;
        gap: 50px;
    }

    .contact-form-box,
    .contact-info-box {
        width: 100%;
    }

}


/* ================= MOBILE ================= */
@media (max-width: 768px) {

    /* HERO */
    .contact-hero {
        height: 60vh;
    }

    .contact-hero-content h1 {
        font-size: 30px;
    }

    .contact-hero-content p {
        font-size: 16px;
    }

    /* SECTION SPACING */
    .contact-section {
        padding: 80px 20px;
    }

    /* FORM */
    .contact-form-box {
        padding: 30px;
    }

    .contact-form-box h2 {
        font-size: 22px;
    }

    .contact-form-box input,
    .contact-form-box textarea {
        padding: 14px;
        font-size: 13px;
    }

    .contact-form-box button {
        padding: 14px;
    }

    /* INFO CARDS */
    .info-card {
        padding: 20px;
    }

    .info-card h4 {
        font-size: 16px;
    }

    .info-card p {
        font-size: 13px;
    }

    /* MAP */
    .map-box {
        height: 200px;
    }

}


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

    .contact-hero-content h1 {
        font-size: 24px;
    }

    .contact-hero-content p {
        font-size: 14px;
    }

    .contact-form-box {
        padding: 20px;
    }

    .info-card {
        padding: 18px;
    }

}

/* ================= MOBILE ================= */
/* HIDE DESKTOP MENU ON MOBILE */
/* ===== MOBILE MENU FIX ===== */

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: linear-gradient(135deg, #0e1625, #162c46);
    padding: 40px 25px;
    transition: right 0.4s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    right: 0;
}

.mobile-links {
    list-style: none;
    margin-top: 40px;
}

.mobile-links li {
    margin-bottom: 20px;
}

.mobile-links a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}

.mobile-phone-btn {
    margin-top: auto;
    padding: 14px;
    text-align: center;
    background: #1ea7d7;
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.mobile-menu-header i {
    font-size: 22px;
    cursor: pointer;
}

/* HIDE DESKTOP MENU ON MOBILE */
@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }

    .menu-toggle {
        display: block;
        cursor: pointer;
    }
}

/* HIDE TOGGLE ON DESKTOP */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}

/* ================= MOBILE HEADER ================= */

@media (max-width: 768px) {

    .nav-container {
        justify-content: space-between;
    }

    /* Hide desktop menu */
    .desktop-menu {
        display: none;
    }

    /* Hide phone button in header */
    .phone-btn {
        display: none;
    }

    /* Show toggle */
    .menu-toggle {
        display: block;
    }

}

/* ================= TESTIMONIAL MOBILE FIX ================= */

/* ================= TESTIMONIAL MOBILE FIX ================= */

@media (max-width: 768px) {

    .testimonial-section {
        padding: 50px 15px !important;
    }

    .testimonial-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        width: 100% !important;
    }

    .testimonial-card {
        width: 100% !important;
        padding: 60px 20px 30px !important;
        box-sizing: border-box;
    }

    .testimonial-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        overflow-wrap: break-word;
    }

    .testimonial-user {
        gap: 10px !important;
    }

    .quote-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 22px !important;
        top: -30px !important;
    }

    html, body {
        overflow-x: hidden !important;
    }
}


/* ================= MOBILE SPACING FIX ================= */
/* =====================================================
/* =====================================================
   RESPONSIVE CSS – TESTIMONIAL SECTION (FINAL CLEAN)
   ===================================================== */


/* ================= LARGE TABLET (1024px) ================= */

@media (max-width: 1024px) {

    .testimonial-section {
        padding: 110px 20px;
    }

    .testimonial-header h2 {
        font-size: 36px;
    }

    .testimonial-track {
        gap: 35px;
    }

    .testimonial-card {
        min-width: 320px;
        max-width: 320px;
        padding: 50px 30px;
    }
}


/* ================= TABLET (768px) ================= */

@media (max-width: 768px) {

    /* Section spacing */
    .testimonial-section {
        padding: 70px 15px !important;
    }

    .testimonial-header h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    /* IMPORTANT: Stop animation on mobile */
    .testimonial-track {
        animation: none !important;
        transform: none !important;
        width: 100% !important;

        display: flex;
        gap: 20px;

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        padding-bottom: 10px;
    }

    /* Hide scrollbar */
    .testimonial-track::-webkit-scrollbar {
        display: none;
    }

    /* Proper card size */
    .testimonial-card {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;

        padding: 30px 20px;

        transform: none !important;
        opacity: 1 !important;
    }

    /* Fix text wrapping */
    .testimonial-card p {
        white-space: normal;
        word-break: break-word;
        font-size: 15px;
        line-height: 1.6;
    }

    /* Smaller user image */
    .user img {
        width: 50px;
        height: 50px;
    }

    /* Smaller quote */
    .quote-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    /* Remove fade overlay on mobile */
    .fade-left,
    .fade-right {
        display: none !important;
    }
}


/* ================= SMALL MOBILE (480px) ================= */

@media (max-width: 480px) {

    .testimonial-section {
        padding: 60px 12px !important;
    }

    .testimonial-header h2 {
        font-size: 22px;
    }

    .testimonial-card {
        flex: 0 0 92%;
        max-width: 92%;
        padding: 25px 18px;
    }

    .testimonial-card p {
        font-size: 14px;
    }

    .user img {
        width: 45px;
        height: 45px;
    }

    .quote-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {

    .testimonial-slider {
        margin-top: 40px !important;   /* reduce from 100px */
    }

}



/* ================= FORCE REMOVE GAP ================= */

@media (max-width: 768px) {

    /* Remove bottom padding of slider section */
    .services-wrapper,
    .services,
    .slider-section {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    /* Remove top padding of next section */
    .company-section,
    .discover-section,
    .about-section {
        padding-top: 20px !important;
        margin-top: 0 !important;
    }

}

@media (max-width: 768px) {

    /* Make blue box relative */
    .blue-box {
        position: relative;
        padding: 25px 20px !important;
        border-radius: 18px;
    }

    /* Fix the + circle button */
    .blue-box .plus {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        
        width: 45px;
        height: 45px;
        border-radius: 50%;
        
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 20px;
    }
    .blue-box .plus {
    left: auto !important;
}

}



@media (max-width: 768px) {

    .services,
    .services-section,
    .services-wrapper {
        padding-top: 40px !important;
        margin-top: 0 !important;
    }

    .services-header {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

}

@media (max-width: 768px) {

    /* Make footer single column */
    .footer-container {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* Center each column */
    .footer-col {
        text-align: center;
    }

    /* Center social icons */
    .footer-social {
        justify-content: center;
    }

    /* Center contact list items */
    .contact-info li,
    .contact-info-footer li {
        justify-content: center;
    }

}

@media (max-width: 768px) {

    /* Override ALL large section spacing */
    section {
        padding: 40px 20px !important;
        margin: 0 !important;
    }

}

@media (max-width: 768px) {

    /* Stack rows vertically */
    .mv-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding: 20px 0 !important;
        margin: 0 !important;
    }

    /* Remove reverse layout spacing */
    .mv-row.reverse {
        flex-direction: column !important;
    }

    /* Remove large section spacing */
    .mv-section {
        padding: 40px 20px !important;
    }

    .mv-container {
        padding: 0 !important;
    }

    /* Reduce space between image and text */
    .mv-image {
        margin: 0 !important;
    }

    .mv-text {
        margin: 0 !important;
    }

}

@media (max-width: 768px) {

    /* Remove huge flex gap */
    .service-block {
        gap: 20px !important;
        margin-bottom: 25px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Remove big section padding */
    .service-detailed,
    .service-detailed.alt {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Reduce spacing between sections */
    .service-detailed + .service-detailed {
        margin-top: 0 !important;
    }

}

/* ================= MOBILE HERO STANDARD SIZE ================= */

@media (max-width: 768px) {

    .hero,
    .service-hero,
    .contact-hero,
    .about-hero {
        height: 40vh !important;
        min-height: 350px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero h1,
    .service-hero h1,
    .contact-hero h1,
    .about-hero h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .hero p,
    .service-hero p,
    .contact-hero p,
    .about-hero p {
        font-size: 15px !important;
    }

}



/* testinomal  RESPONSIVE */

@media (max-width: 768px) {
    .testimonial-card {
        min-width: 85%;
    }
}