

/* ===== Extracted from contact.html — inline style block 1 ===== */
/* =========================================================
           AR CABLES — PROFESSIONAL CONTACT PAGE
           ========================================================= */

        :root{
            --ar-orange:#ff5a1f;
            --ar-orange-2:#ff784a;
            --ar-navy:#091426;
            --ar-navy-2:#10213b;
            --ar-ink:#111827;
            --ar-text:#536174;
            --ar-muted:#718096;
            --ar-line:#e5eaf0;
            --ar-soft:#f6f8fb;
            --ar-white:#fff;
            --ar-green:#25d366;
            --ar-shadow:0 12px 35px rgba(15,23,42,.08);
            --ar-shadow-lg:0 25px 65px rgba(15,23,42,.14);
        }

        html{
            scroll-behavior:smooth;
            overflow-x:hidden;
        }

        body{
            margin:0;
            padding-top:76px !important;
            overflow-x:hidden;
            background:#f7f9fc;
            color:var(--ar-ink);
        }

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

        .header{
            position:fixed !important;
            top:0 !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:76px !important;
            min-height:76px !important;
            z-index:99999 !important;
            margin:0 !important;

            background:rgba(7,13,25,.96) !important;
            border-bottom:1px solid rgba(255,255,255,.08) !important;
            box-shadow:0 8px 28px rgba(0,0,0,.17) !important;

            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
        }

        .header .container{
            width:min(94%,1320px) !important;
            height:76px !important;
            min-height:76px !important;
            margin:auto !important;
            padding:0 !important;

            display:grid !important;
            grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) !important;
            align-items:center !important;
            gap:20px !important;
        }

        .header .logo{
            justify-self:start !important;
        }

        .header .logo img{
            width:62px !important;
            height:62px !important;
            max-width:none !important;
            display:block !important;
            object-fit:contain !important;
        }

        .header .navbar{
            justify-self:center !important;
            margin:0 !important;
        }

        .header .navbar ul{
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            gap:3px !important;
            margin:0 !important;
            padding:0 !important;
        }

        .header .navbar li{
            margin:0 !important;
            padding:0 !important;
        }

        .header .navbar a{
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            min-height:40px !important;
            padding:8px 13px !important;
            border-radius:10px !important;

            color:#e8edf5 !important;
            font-size:12px !important;
            font-weight:600 !important;

            transition:.22s ease !important;
        }

        .header .navbar a::after{
            display:none !important;
        }

        .header .navbar a:hover,
        .header .navbar a.active{
            color:#fff !important;
            background:rgba(255,90,31,.13) !important;
        }

        .header .quote-btn{
            justify-self:end !important;
            display:inline-flex !important;
            align-items:center !important;
            justify-content:center !important;

            width:auto !important;
            min-width:100px !important;
            height:44px !important;
            min-height:44px !important;

            margin:0 !important;
            padding:0 17px !important;

            border-radius:11px !important;
            background:linear-gradient(135deg,var(--ar-orange),var(--ar-orange-2)) !important;
            color:#fff !important;

            font-size:11px !important;
            font-weight:700 !important;
            white-space:nowrap !important;

            box-shadow:0 9px 23px rgba(255,90,31,.20) !important;
            transition:.22s ease !important;
        }

        .header .quote-btn:hover{
            transform:translateY(-2px) !important;
            box-shadow:0 14px 30px rgba(255,90,31,.30) !important;
        }

        .mobile-menu-btn{
            display:none !important;
        }

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

        .page-banner{
            position:relative;
            min-height:420px !important;
            display:flex !important;
            align-items:center !important;
            overflow:hidden !important;

            background:
                radial-gradient(circle at 82% 25%,rgba(255,90,31,.17),transparent 28%),
                linear-gradient(135deg,#07101f,#12243f) !important;

            color:#fff !important;
        }

        .page-banner::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(90deg,rgba(3,8,18,.38),transparent),
                radial-gradient(circle at 78% 78%,rgba(255,255,255,.04),transparent 28%);
            pointer-events:none;
        }

        .page-banner::after{
            content:"";
            position:absolute;
            width:380px;
            height:380px;
            right:-170px;
            top:-150px;
            border:1px solid rgba(255,255,255,.07);
            border-radius:50%;
            box-shadow:
                0 0 0 50px rgba(255,255,255,.022),
                0 0 0 100px rgba(255,255,255,.015);
        }

        .page-banner .container{
            position:relative;
            z-index:2;
            width:min(92%,1180px) !important;
        }

        .page-banner .sub-title{
            display:inline-flex !important;
            align-items:center !important;
            padding:8px 14px !important;

            border:1px solid rgba(255,255,255,.14) !important;
            border-radius:999px !important;
            background:rgba(255,255,255,.065) !important;

            color:#ff9875 !important;
            font-size:10px !important;
            font-weight:800 !important;
            letter-spacing:1.5px !important;
        }

        .page-banner h1{
            max-width:760px;
            margin:18px 0 16px !important;
            color:#fff !important;
            font-size:clamp(38px,5vw,62px) !important;
            line-height:1.08 !important;
            letter-spacing:-1.5px !important;
        }

        .page-banner p{
            max-width:670px;
            margin:0 !important;
            color:rgba(255,255,255,.78) !important;
            font-size:15px !important;
            line-height:1.85 !important;
        }

        /* =========================
           CONTACT SECTION
           ========================= */

        .contact-section{
            padding:95px 0 !important;
            background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%) !important;
        }

        .contact-section .container{
            width:min(92%,1180px) !important;
        }

        .contact-wrapper{
            display:grid !important;
            grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
            gap:28px !important;
            align-items:stretch !important;
        }

        /* =========================
           CONTACT INFO
           ========================= */

        .contact-info{
            padding:38px !important;
            border:1px solid var(--ar-line) !important;
            border-radius:22px !important;
            background:
                radial-gradient(circle at 90% 8%,rgba(255,90,31,.07),transparent 28%),
                #fff !important;
            box-shadow:var(--ar-shadow) !important;
        }

        .contact-info .section-subtitle{
            display:inline-flex !important;
            padding:7px 12px !important;
            border:1px solid rgba(255,90,31,.14) !important;
            border-radius:999px !important;
            background:rgba(255,90,31,.065) !important;
            color:var(--ar-orange) !important;
            font-size:9px !important;
            font-weight:800 !important;
            letter-spacing:1.4px !important;
        }

        .contact-info h2{
            margin:14px 0 11px !important;
            color:var(--ar-ink) !important;
            font-size:34px !important;
            line-height:1.15 !important;
            letter-spacing:-.7px !important;
        }

        .contact-info > p{
            margin:0 0 27px !important;
            color:var(--ar-muted) !important;
            font-size:12px !important;
            line-height:1.8 !important;
        }

        .info-box{
            display:flex !important;
            align-items:flex-start !important;
            gap:13px !important;

            padding:14px 0 !important;
            border-top:1px solid #edf0f4 !important;
        }

        .info-box:first-of-type{
            border-top:0 !important;
        }

        .info-icon{
            width:43px !important;
            height:43px !important;
            min-width:43px !important;
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;

            border-radius:12px !important;
            background:rgba(255,90,31,.09) !important;
            color:var(--ar-orange) !important;
            font-size:18px !important;
        }

        .info-box h4{
            margin:1px 0 4px !important;
            color:#172033 !important;
            font-size:12px !important;
        }

        .info-box p{
            margin:0 !important;
            color:#728094 !important;
            font-size:10px !important;
            line-height:1.6 !important;
        }

        /* =========================
           CONTACT FORM
           ========================= */

        .contact-form{
            padding:38px !important;
            border:1px solid var(--ar-line) !important;
            border-radius:22px !important;
            background:#fff !important;
            box-shadow:var(--ar-shadow-lg) !important;
        }

        .contact-form::before{
            content:"SEND US A MESSAGE";
            display:block;
            margin-bottom:21px;
            color:#a0a9b6;
            font-size:9px;
            font-weight:800;
            letter-spacing:1.5px;
        }

        .contact-form form{
            display:grid !important;
            grid-template-columns:1fr 1fr !important;
            gap:14px !important;
        }

        .contact-form .form-group{
            margin:0 !important;
        }

        .contact-form .form-group:nth-child(5){
            grid-column:1 / -1 !important;
        }

        .contact-form input,
        .contact-form textarea{
            width:100% !important;
            margin:0 !important;
            padding:14px 15px !important;

            border:1px solid #e1e6ed !important;
            border-radius:11px !important;
            outline:none !important;

            background:#fbfcfe !important;
            color:#172033 !important;

            font-family:inherit !important;
            font-size:11px !important;

            transition:border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
        }

        .contact-form input{
            height:48px !important;
        }

        .contact-form textarea{
            min-height:145px !important;
            resize:vertical !important;
        }

        .contact-form input::placeholder,
        .contact-form textarea::placeholder{
            color:#9aa5b4 !important;
        }

        .contact-form input:focus,
        .contact-form textarea:focus{
            border-color:rgba(255,90,31,.55) !important;
            background:#fff !important;
            box-shadow:0 0 0 4px rgba(255,90,31,.075) !important;
        }

        .contact-form .btn{
            grid-column:1 / -1 !important;
            width:100% !important;
            min-height:48px !important;

            display:inline-flex !important;
            align-items:center !important;
            justify-content:center !important;

            border:0 !important;
            border-radius:11px !important;
            background:linear-gradient(135deg,var(--ar-orange),var(--ar-orange-2)) !important;
            color:#fff !important;

            font-size:11px !important;
            font-weight:700 !important;
            cursor:pointer !important;

            box-shadow:0 10px 25px rgba(255,90,31,.18) !important;
            transition:.22s ease !important;
        }

        .contact-form .btn:hover{
            transform:translateY(-2px) !important;
            box-shadow:0 15px 30px rgba(255,90,31,.25) !important;
        }

        /* =========================
           MAP
           ========================= */

        .map-section{
            position:relative !important;
            padding:0 0 95px !important;
            background:#f7f9fc !important;
        }

        .map-section::before{
            content:"";
            display:block;
            width:min(92%,1180px);
            height:1px;
            margin:0 auto 28px;
            background:#e5eaf0;
        }

        .map-section iframe{
            display:block !important;
            width:min(92%,1180px) !important;
            height:430px !important;
            margin:0 auto !important;

            border:8px solid #fff !important;
            border-radius:20px !important;
            box-shadow:var(--ar-shadow-lg) !important;

            filter:saturate(.85) contrast(1.02);
        }

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

        .cta{
            position:relative !important;
            overflow:hidden !important;
            padding:80px 0 !important;

            background:
                radial-gradient(circle at 85% 20%,rgba(255,90,31,.16),transparent 28%),
                linear-gradient(135deg,#081323,#132541) !important;

            color:#fff !important;
            text-align:center !important;
        }

        .cta::before{
            content:"";
            position:absolute;
            width:320px;
            height:320px;
            left:-190px;
            bottom:-190px;
            border:1px solid rgba(255,255,255,.07);
            border-radius:50%;
        }

        .cta .container{
            position:relative;
            z-index:2;
        }

        .cta h2{
            margin:0 0 12px !important;
            color:#fff !important;
            font-size:clamp(29px,4vw,43px) !important;
            line-height:1.15 !important;
            letter-spacing:-.8px !important;
        }

        .cta p{
            max-width:680px;
            margin:0 auto 25px !important;
            color:#b9c6d6 !important;
            font-size:13px !important;
            line-height:1.8 !important;
        }

        .cta .btn{
            min-height:48px !important;
            display:inline-flex !important;
            align-items:center !important;
            justify-content:center !important;
            padding:0 24px !important;
            border-radius:11px !important;
            background:var(--ar-orange) !important;
            color:#fff !important;
            box-shadow:0 10px 25px rgba(255,90,31,.22) !important;
        }

        .cta .btn:hover{
            transform:translateY(-3px) !important;
            background:#ff6d38 !important;
        }

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

        .footer{
            padding:65px 0 0 !important;
            background:#07101f !important;
            border-top:1px solid rgba(255,255,255,.07) !important;
        }

        .footer-container{
            width:min(92%,1180px) !important;
            display:grid !important;
            grid-template-columns:1.3fr .8fr 1fr !important;
            gap:45px !important;
        }

        .footer-box h2{
            color:#fff !important;
        }

        .footer-box h2 span{
            color:#ff7650 !important;
        }

        .footer-box h3{
            color:#fff !important;
        }

        .footer-box p,
        .footer-box li a{
            color:#94a3b8 !important;
            font-size:12px !important;
            line-height:1.8 !important;
        }

        .footer-box li a:hover{
            color:#ff7650 !important;
        }

        .footer-bottom{
            margin-top:45px !important;
            border-top:1px solid rgba(255,255,255,.07) !important;
            color:#718096 !important;
        }

        /* =========================
           WHATSAPP
           ========================= */

        .whatsapp-float{
            position:fixed !important;
            right:22px !important;
            bottom:22px !important;
            z-index:99990 !important;

            width:58px !important;
            height:58px !important;
            padding:7px !important;

            display:flex !important;
            align-items:center !important;
            justify-content:center !important;

            border-radius:50% !important;
            background:var(--ar-green) !important;
            box-shadow:0 12px 30px rgba(37,211,102,.28) !important;
            transition:.25s ease !important;
        }

        .whatsapp-float img{
            width:100% !important;
            height:100% !important;
            object-fit:contain !important;
        }

        .whatsapp-float:hover{
            transform:translateY(-4px) scale(1.05) !important;
        }

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

        @media(max-width:760px){

            body{
                padding-top:68px !important;
            }

            .header{
                height:68px !important;
                min-height:68px !important;
            }

            .header .container{
                width:calc(100% - 14px) !important;
                height:68px !important;
                min-height:68px !important;

                grid-template-columns:minmax(0,1fr) 43px auto !important;
                gap:6px !important;
            }

            .header .logo img{
                width:56px !important;
                height:56px !important;
            }

            /* Three line mobile button */
            .mobile-menu-btn{
                display:flex !important;
                visibility:visible !important;
                opacity:1 !important;

                align-items:center !important;
                justify-content:center !important;
                flex-direction:column !important;
                gap:5px !important;

                width:43px !important;
                height:43px !important;
                min-width:43px !important;
                min-height:43px !important;

                margin:0 !important;
                padding:0 !important;

                border:1px solid rgba(255,255,255,.14) !important;
                border-radius:11px !important;
                background:rgba(255,255,255,.07) !important;

                cursor:pointer !important;
                z-index:100000 !important;
            }

            .mobile-menu-btn span{
                display:block !important;
                visibility:visible !important;
                opacity:1 !important;

                width:20px !important;
                height:2px !important;
                min-height:2px !important;
                max-height:2px !important;

                margin:0 !important;
                padding:0 !important;

                background:#fff !important;
                border-radius:999px !important;

                transition:.22s ease !important;
            }

            .mobile-menu-btn.is-open span:nth-child(1){
                transform:translateY(7px) rotate(45deg) !important;
            }

            .mobile-menu-btn.is-open span:nth-child(2){
                opacity:0 !important;
            }

            .mobile-menu-btn.is-open span:nth-child(3){
                transform:translateY(-7px) rotate(-45deg) !important;
            }

            .header .quote-btn{
                min-width:86px !important;
                width:auto !important;
                height:43px !important;
                min-height:43px !important;

                padding:0 11px !important;
                font-size:10px !important;
            }

            .header .navbar{
                position:absolute !important;
                top:calc(100% + 8px) !important;
                left:7px !important;
                right:7px !important;
                width:auto !important;

                display:block !important;
                padding:8px !important;
                margin:0 !important;

                border:1px solid rgba(255,255,255,.09) !important;
                border-radius:16px !important;
                background:rgba(7,13,25,.985) !important;
                box-shadow:0 22px 55px rgba(0,0,0,.38) !important;

                opacity:0 !important;
                visibility:hidden !important;
                pointer-events:none !important;
                transform:translateY(-8px) !important;

                transition:.22s ease !important;
            }

            .header .navbar.mobile-open{
                opacity:1 !important;
                visibility:visible !important;
                pointer-events:auto !important;
                transform:translateY(0) !important;
            }

            .header .navbar ul{
                display:grid !important;
                grid-template-columns:1fr !important;
                gap:2px !important;
            }

            .header .navbar a{
                width:100% !important;
                min-height:43px !important;
                justify-content:flex-start !important;
                padding:10px 13px !important;
                border-radius:10px !important;
            }

            /* Hero */
            .page-banner{
                min-height:390px !important;
                padding:65px 0 !important;
            }

            .page-banner h1{
                font-size:37px !important;
                line-height:1.1 !important;
            }

            .page-banner p{
                font-size:12.5px !important;
                line-height:1.75 !important;
            }

            /* Contact */
            .contact-section{
                padding:62px 0 !important;
            }

            .contact-wrapper{
                grid-template-columns:1fr !important;
                gap:14px !important;
            }

            .contact-info,
            .contact-form{
                padding:25px 19px !important;
                border-radius:17px !important;
            }

            .contact-info h2{
                font-size:29px !important;
            }

            .contact-info > p{
                font-size:11px !important;
            }

            .info-box{
                gap:10px !important;
                padding:12px 0 !important;
            }

            .info-icon{
                width:39px !important;
                height:39px !important;
                min-width:39px !important;
                border-radius:10px !important;
                font-size:16px !important;
            }

            .info-box h4{
                font-size:11px !important;
            }

            .info-box p{
                font-size:9px !important;
            }

            .contact-form form{
                grid-template-columns:1fr !important;
                gap:10px !important;
            }

            .contact-form .form-group:nth-child(5){
                grid-column:auto !important;
            }

            .contact-form input{
                height:46px !important;
            }

            .contact-form textarea{
                min-height:125px !important;
            }

            .contact-form .btn{
                grid-column:auto !important;
                min-height:46px !important;
            }

            /* Map */
            .map-section{
                padding-bottom:62px !important;
            }

            .map-section iframe{
                width:calc(100% - 28px) !important;
                height:330px !important;
                border-width:5px !important;
                border-radius:16px !important;
            }

            /* CTA */
            .cta{
                padding:62px 0 !important;
            }

            .cta h2{
                font-size:29px !important;
            }

            .cta p{
                font-size:11px !important;
            }

            .cta .btn{
                width:100% !important;
                max-width:250px !important;
            }

            /* Footer */
            .footer{
                padding-top:52px !important;
            }

            .footer-container{
                grid-template-columns:1fr !important;
                gap:28px !important;
            }

            .footer-bottom{
                margin-top:35px !important;
            }

            .whatsapp-float{
                width:52px !important;
                height:52px !important;
                right:14px !important;
                bottom:14px !important;
            }
        }

        @media(max-width:420px){

            body{
                padding-top:64px !important;
            }

            .header,
            .header .container{
                height:64px !important;
                min-height:64px !important;
            }

            .header .container{
                width:calc(100% - 10px) !important;
                grid-template-columns:minmax(0,1fr) 40px auto !important;
                gap:5px !important;
            }

            .header .logo img{
                width:52px !important;
                height:52px !important;
            }

            .mobile-menu-btn{
                width:40px !important;
                height:40px !important;
                min-width:40px !important;
                min-height:40px !important;
            }

            .mobile-menu-btn span{
                width:19px !important;
            }

            .header .quote-btn{
                min-width:79px !important;
                height:40px !important;
                min-height:40px !important;
                padding:0 9px !important;
                font-size:9px !important;
            }

            .page-banner{
                min-height:370px !important;
                padding:52px 0 !important;
            }

            .page-banner h1{
                font-size:31px !important;
            }

            .contact-section{
                padding:52px 0 !important;
            }

            .contact-info,
            .contact-form{
                padding:22px 15px !important;
            }

            .map-section iframe{
                height:280px !important;
            }
        }

