/* ===== Extracted from about.html — inline style block 1 ===== */
/* =========================================================
   AR CABLES — ABOUT PAGE PROFESSIONAL + MOBILE POLISH
   ========================================================= */

.about{
    position:relative;
    padding:105px 0 !important;
    background:
        radial-gradient(circle at 8% 18%,rgba(255,90,31,.055),transparent 26%),
        linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
    overflow:hidden;
}

.about::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-130px;
    top:60px;
    border-radius:50%;
    background:rgba(255,90,31,.045);
    pointer-events:none;
}

.about .container{
    position:relative;
    z-index:2;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important;
    align-items:center !important;
    gap:70px !important;
}

.about-image{
    position:relative;
    min-height:470px;
    border-radius:24px;
    overflow:hidden;
    background:#eef2f6;
    box-shadow:0 25px 65px rgba(15,23,42,.13);
}

.about-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(255,90,31,.08),transparent 55%);
    pointer-events:none;
}

.about-image img{
    width:100%;
    height:100%;
    min-height:470px;
    display:block;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.75,.2,1);
}

.about-image:hover img{
    transform:scale(1.035);
}

.about-content{
    max-width:650px;
}

.about-content .sub-title{
    display:inline-flex;
    padding:7px 13px;
    border:1px solid rgba(255,90,31,.16);
    border-radius:999px;
    background:rgba(255,90,31,.07);
    color:#f0541b;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.4px;
}

.about-content h2{
    margin:16px 0 18px !important;
    color:#101827 !important;
    font-size:clamp(32px,4vw,48px) !important;
    line-height:1.12 !important;
    letter-spacing:-1.1px;
}

.about-content > p{
    margin:0 0 13px !important;
    color:#58677a !important;
    font-size:14px !important;
    line-height:1.9 !important;
}

.about-highlights{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    margin:25px 0;
}

.about-highlight{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    border:1px solid #e7ebf1;
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 22px rgba(15,23,42,.045);
}

.about-highlight-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:rgba(255,90,31,.10);
    color:#f0541b;
    font-size:13px;
    font-weight:900;
}

.about-highlight strong{
    display:block;
    color:#172033;
    font-size:11px;
    line-height:1.4;
}

.about-highlight small{
    display:block;
    margin-top:3px;
    color:#7b8798;
    font-size:9px;
    line-height:1.55;
}

.about-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:7px;
}

.about-actions .btn{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
}

.about-actions .btn-outline{
    color:#172033 !important;
    border:1px solid #dce2e9 !important;
    background:#fff !important;
}

.about-actions .btn-outline:hover{
    color:#fff !important;
    border-color:#ff5a1f !important;
    background:#ff5a1f !important;
}

/* Mission / Vision */
.mission{
    padding:85px 0 !important;
    background:#f7f9fc !important;
}

.mission .container{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:20px !important;
}

.mission-box{
    position:relative;
    padding:34px !important;
    border:1px solid #e5eaf0 !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 10px 30px rgba(15,23,42,.06) !important;
    overflow:hidden;
}

.mission-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,#ff5a1f,#ff8a62);
}

.mission-box h2{
    margin:0 0 11px !important;
    color:#101827 !important;
    font-size:24px !important;
}

.mission-box p{
    margin:0 !important;
    color:#657386 !important;
    font-size:13px !important;
    line-height:1.85 !important;
}

/* Mobile nav */
@media(max-width:760px){

    .header{
        position:sticky !important;
        top:0 !important;
        z-index:99999 !important;
    }

    .header .container{
        height:68px !important;
        min-height:68px !important;
        width:calc(100% - 14px) !important;
        grid-template-columns:minmax(0,1fr) auto auto !important;
        gap:6px !important;
    }

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

    .mobile-menu-btn{
        display:flex !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;
        padding:0 !important;
        margin:0 !important;
        border:1px solid rgba(255,255,255,.12) !important;
        border-radius:11px !important;
        background:rgba(255,255,255,.065) !important;
        cursor:pointer;
    }

    .mobile-menu-btn span{
        display:block !important;
        width:19px !important;
        height:2px !important;
        margin:0 !important;
        border-radius:99px !important;
        background:#fff !important;
        transition:transform .22s ease,opacity .22s ease !important;
    }

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

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

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

    .header .quote-btn{
        min-width:86px !important;
        width:auto !important;
        height:43px !important;
        min-height:43px !important;
        padding:0 12px !important;
        font-size:10px !important;
        white-space:nowrap !important;
    }

    .header .navbar{
        position:absolute !important;
        top:calc(100% + 8px) !important;
        left:7px !important;
        right:7px !important;
        width:auto !important;
        padding:8px !important;
        border-radius:16px !important;
        background:rgba(7,13,25,.985) !important;
        border:1px solid rgba(255,255,255,.09) !important;
        box-shadow:0 22px 55px rgba(0,0,0,.34) !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;
    }

    /* About mobile */
    .about{
        padding:65px 0 !important;
    }

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

    .about-image{
        min-height:280px !important;
        height:280px !important;
        border-radius:19px !important;
    }

    .about-image img{
        min-height:280px !important;
        height:280px !important;
    }

    .about-content h2{
        font-size:32px !important;
        letter-spacing:-.7px !important;
    }

    .about-content > p{
        font-size:12.5px !important;
        line-height:1.8 !important;
    }

    .about-highlights{
        grid-template-columns:1fr !important;
        gap:8px !important;
        margin:20px 0 !important;
    }

    .about-highlight{
        padding:12px !important;
    }

    .about-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    .about-actions .btn{
        width:100% !important;
        min-height:44px !important;
        padding:0 10px !important;
        font-size:10px !important;
    }

    /* Mission mobile */
    .mission{
        padding:62px 0 !important;
    }

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

    .mission-box{
        padding:25px 21px !important;
        border-radius:17px !important;
    }

    .mission-box h2{
        font-size:21px !important;
    }

    .mission-box p{
        font-size:12px !important;
        line-height:1.8 !important;
    }
}

@media(max-width:420px){

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

    .header .container{
        width:calc(100% - 10px) !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;
    }

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

    .about{
        padding:52px 0 !important;
    }

    .about-image{
        height:240px !important;
        min-height:240px !important;
    }

    .about-image img{
        height:240px !important;
        min-height:240px !important;
    }

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

    .about-actions{
        grid-template-columns:1fr !important;
    }
}


/* ===== Extracted from about.html — inline style block 2 ===== */
/* =========================================================
   AR CABLES ABOUT — FINAL HEADER / MOBILE FIX
   ========================================================= */

/* Fixed header: always remains visible while scrolling */
body{
    padding-top:76px !important;
}

.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:2147483000 !important;
    margin:0 !important;
}

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

/* Desktop hamburger hidden */
.mobile-menu-btn{
    display:none !important;
}

/* Mobile */
@media (max-width:760px){

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

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

    .header .container{
        height:68px !important;
        min-height:68px !important;
        width:calc(100% - 14px) !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 43px auto !important;
        align-items:center !important;
        gap:6px !important;
        padding:0 !important;
    }

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

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

    /* THE THREE LINES */
    .header .mobile-menu-btn{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;

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

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

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

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

        color:#fff !important;
        cursor:pointer !important;
        z-index:2147483001 !important;
    }

    .header .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:#ffffff !important;
        border-radius:999px !important;

        transform:none !important;
        transition:transform .22s ease, opacity .22s ease !important;
    }

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

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

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

    /* Get Quote stays on the same row */
    .header .quote-btn{
        justify-self:end !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

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

        margin:0 !important;
        padding:0 12px !important;
        white-space:nowrap !important;

        border-radius:11px !important;
        font-size:10px !important;
    }

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

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

        background:rgba(7,13,25,.985) !important;
        border:1px solid rgba(255,255,255,.10) !important;
        border-radius:16px !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:opacity .2s ease, transform .2s ease, visibility .2s ease !important;
        z-index:2147482999 !important;
    }

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

    .header .navbar li{
        width:100% !important;
        margin:0 !important;
    }

    .header .navbar a{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        width:100% !important;
        min-height:43px !important;
        padding:10px 13px !important;
        border-radius:10px !important;
        font-size:12px !important;
    }

    /* About section mobile */
    .about{
        padding:62px 0 !important;
    }

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

    .about-image{
        width:100% !important;
        height:280px !important;
        min-height:280px !important;
        border-radius:19px !important;
    }

    .about-image img{
        width:100% !important;
        height:280px !important;
        min-height:280px !important;
        object-fit:cover !important;
    }

    .about-content h2{
        font-size:31px !important;
        line-height:1.15 !important;
    }

    .about-highlights{
        grid-template-columns:1fr !important;
    }

    .about-actions .btn{
        width:100% !important;
        min-height:44px !important;
        padding:0 9px !important;
        font-size:10px !important;
    }

    .mission{
        padding:60px 0 !important;
    }
}

@media (max-width:420px){

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

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

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

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

    .about-image,
    .about-image img{
        height:240px !important;
        min-height:240px !important;
    }
}