/* =========================================================
   SOFTCOM STUDIO
   Main Website Stylesheet
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
    --bg:#f7f8fa;
    --white:#fff;
    --text:#101828;
    --muted:#667085;
    --line:#e4e7ec;
    --blue:#175cd3;
    --dark:#0b1220;
}


/* =========================================================
   RESET / BASE
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.55;
}

a{
    text-decoration:none;
    color:inherit;
}

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

.container{
    width:min(1120px,92%);
    margin:auto;
}


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

header{
    position:sticky;
    top:0;
    z-index:10;

    background:#fffffff2;

    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--line);
}

.nav{
    height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;

    font-weight:800;
    font-size:20px;
}

.logo{
    width:44px;
    height:44px;

    border:1px dashed #98a2b3;
    border-radius:12px;

    display:grid;
    place-items:center;

    color:#98a2b3;
    font-size:11px;
    text-align:center;
}

.logo span{
    display:block;
    line-height:1.1;
}

nav{
    display:flex;
    gap:26px;

    font-size:14px;
    font-weight:650;

    color:#475467;
}

nav a:hover{
    color:var(--blue);
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 19px;

    border-radius:13px;

    font-weight:750;

    border:1px solid var(--line);
}

.primary{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
}

.dark{
    background:var(--dark);
    color:#fff;
    border-color:var(--dark);
}


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

.hero{
    padding:90px 0 75px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f7f8fa
        );
}

.grid{
    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:55px;

    align-items:center;
}

.tag{
    display:inline-flex;

    padding:7px 11px;

    border:1px solid var(--line);
    border-radius:999px;

    background:#fff;

    color:#475467;

    font-size:13px;
    font-weight:700;
}

h1{
    font-size:clamp(43px,6vw,70px);

    line-height:1.02;

    letter-spacing:-.045em;

    margin:18px 0;
}

.hero p{
    font-size:18px;

    color:var(--muted);

    max-width:650px;
}

.actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:28px;
}


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

.hero-card{
    background:var(--dark);

    color:#fff;

    border-radius:30px;

    padding:30px;

    min-height:390px;

    display:flex;
    flex-direction:column;

    justify-content:space-between;
}

.hero-card small{
    color:#b7c0d1;
}

.hero-card h2{
    font-size:34px;

    line-height:1.1;
}

.mini-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.mini-grid div{
    padding:14px;

    border:1px solid #ffffff1f;

    border-radius:15px;

    background:#ffffff0d;

    font-size:14px;
}


/* =========================================================
   SECTIONS
========================================================= */

section{
    padding:78px 0;
}

.head{
    max-width:680px;

    margin-bottom:35px;
}

.head h2{
    font-size:38px;

    letter-spacing:-.03em;

    margin:8px 0;
}

.head p{
    color:var(--muted);
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.cards{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.card{
    background:var(--white);

    border:1px solid var(--line);

    border-radius:22px;

    padding:25px;
}

.icon{
    width:46px;
    height:46px;

    border-radius:14px;

    background:#eef4ff;

    color:var(--blue);

    display:grid;
    place-items:center;

    font-weight:900;

    margin-bottom:18px;
}

.card h3{
    margin:0 0 7px;
}

.card p{
    margin:0;

    color:var(--muted);

    font-size:14px;
}


/* =========================================================
   WHY SECTION
========================================================= */

.band{
    background:#fff;

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.why{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

.darkbox{
    background:var(--dark);

    color:#fff;

    border-radius:28px;

    padding:35px;
}

.darkbox h2{
    font-size:38px;

    line-height:1.1;
}

.points{
    display:grid;

    gap:12px;
}

.point{
    background:#fff;

    border:1px solid var(--line);

    border-radius:18px;

    padding:18px;
}

.point strong{
    display:block;
}

.point span{
    color:var(--muted);

    font-size:14px;
}


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

.contact{
    background:var(--dark);

    color:#fff;

    border-radius:30px;

    padding:45px;

    display:grid;

    grid-template-columns:1fr auto;

    gap:25px;

    align-items:center;
}

.contact p{
    color:#b7c0d1;
}

.contact h2{
    margin:12px 0;
}

.contact .light{
    background:#fff;
    color:var(--text);
}


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

.site-footer{
    background:var(--dark);

    color:#b7c0d1;

    padding:55px 0 25px;
}

.site-footer .footer-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;
}

.site-footer .footer-contact{
    min-width:0;
}

.site-footer .footer-contact h3{
    margin:0 0 24px;

    color:#fff;

    font-size:19px;

    line-height:1.3;
}


/* =========================================================
   FOOTER CONTACT ROW
========================================================= */

.site-footer .footer-row{
    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:13px;

    color:#b7c0d1;

    line-height:1.55;
}

.site-footer .footer-row > div{
    min-width:0;
}


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

.site-footer .footer-icon{
    width:18px;
    height:18px;

    min-width:18px;
    max-width:18px;

    margin-top:2px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    color:#98a2b3;

    line-height:0;
}

.site-footer .footer-icon svg{
    display:block !important;

    width:18px !important;
    height:18px !important;

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

    max-width:18px !important;
    max-height:18px !important;

    fill:none !important;

    stroke:currentColor !important;

    overflow:visible;
}


/* =========================================================
   COLORED ICONS
========================================================= */

/* Address / Location */
.site-footer
.footer-contact > .footer-row:first-of-type
.footer-icon{
    color:#ef4444;
}


/* Phone */
.site-footer
.footer-row:has(a[href^="tel:"])
.footer-icon{
    color:#3b82f6;
}


/* WhatsApp */
.site-footer
.footer-whatsapp
.footer-icon{
    color:#25D366;
}


/* Email */
.site-footer
.footer-row:has(a[href^="mailto:"])
.footer-icon{
    color:#f97316;
}


/* Website */
.site-footer
.footer-row:has(a[href="https://softcom.mv/"])
.footer-icon{
    color:#60a5fa;
}


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

.site-footer a{
    color:#b7c0d1;

    text-decoration:none;
}

.site-footer a:hover{
    color:#fff;
}

.site-footer .contact-note{
    color:#98a2b3;

    font-size:12px;
}


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

.site-footer .footer-whatsapp{
    margin-top:-7px;

    margin-bottom:15px;
}

.site-footer .footer-whatsapp .footer-icon{
    color:#25D366;
}

.site-footer .footer-whatsapp a{
    color:#b7c0d1;

    font-size:13px;

    font-weight:600;
}

.site-footer .footer-whatsapp a:hover{
    color:#fff;
}


/* =========================================================
   FOOTER ACTION BUTTONS
========================================================= */

.site-footer .location-actions{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-top:24px;
}

.site-footer .footer-button{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:auto;

    min-height:38px;

    padding:8px 12px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:8px;

    background:rgba(255,255,255,.06);

    color:#fff !important;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    line-height:1.2;

    text-decoration:none;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.site-footer .footer-button:hover{
    background:rgba(255,255,255,.12);

    border-color:rgba(255,255,255,.28);

    transform:translateY(-1px);
}


/* =========================================================
   BUTTON ICONS
========================================================= */

.site-footer .button-icon{
    width:16px;
    height:16px;

    min-width:16px;
    max-width:16px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-right:7px;

    line-height:0;
}

.site-footer .button-icon svg{
    display:block !important;

    width:16px !important;
    height:16px !important;

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

    max-width:16px !important;
    max-height:16px !important;

    fill:none !important;

    stroke:currentColor !important;

    overflow:visible;
}


/* Copy */
.site-footer .copy-contact .button-icon{
    color:#a78bfa;
}


/* Google Maps */
.site-footer
.footer-button[href*="maps.app.goo.gl"]
.button-icon{
    color:#ef4444;
}


/* =========================================================
   COPY MESSAGE
========================================================= */

.site-footer .copy-message{
    display:block;

    min-height:18px;

    width:100%;

    margin-top:1px;

    color:#98a2b3;

    font-size:12px;
}


/* =========================================================
   COMPANY REGISTRATION
========================================================= */

.site-footer .company-registration{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:38px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.12);

    color:#98a2b3;

    font-size:12px;
}

.site-footer .company-registration strong{
    color:#b7c0d1;

    font-weight:650;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer .copyright{
    margin-top:18px;

    color:#98a2b3;

    font-size:12px;

    line-height:1.5;
}


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

@media(max-width:700px){

    .site-footer{
        padding:45px 0 22px;
    }

    .site-footer .footer-grid{
        grid-template-columns:1fr;

        gap:40px;
    }

    .site-footer .location-actions{
        width:100%;

        align-items:flex-start;
    }

    .site-footer .footer-button{
        width:auto;
    }

}


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

@media(max-width:420px){

    .site-footer .footer-contact h3{
        font-size:18px;
    }

    .site-footer .footer-row{
        font-size:14px;
    }

    .site-footer .contact-note{
        font-size:11px;
    }

    .site-footer .footer-button{
        font-size:12px;

        padding:8px 10px;
    }

}


/* =========================================================
   GENERAL RESPONSIVE
========================================================= */

@media(max-width:800px){

    nav{
        display:none;
    }

    .grid,
    .why{
        grid-template-columns:1fr;
    }

    .cards{
        grid-template-columns:1fr 1fr;
    }

    .contact{
        grid-template-columns:1fr;

        padding:30px;
    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media(max-width:520px){

    .cards{
        grid-template-columns:1fr;
    }

    h1{
        font-size:46px;
    }

    .contact{
        padding:25px;
    }

}


/* =========================================================
   SOFTCOM FOOTER - ICON COLORS
   Reliable CSS-only version
========================================================= */

/* Make sure SVG can accept the color */
.site-footer .footer-icon svg,
.site-footer .button-icon svg {
    stroke: currentColor !important;
}


/* ---------------------------------------------------------
   SOFTCOM TECHNOLOGIES
   Footer rows:
   1 = Address
   2 = Phone
   3 = WhatsApp
   4 = Phone
   5 = WhatsApp
   6 = Email
   7 = Website
--------------------------------------------------------- */

/* Address */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(1)
.footer-icon {
    color: #ef4444 !important;
}


/* Phone 1 */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(2)
.footer-icon {
    color: #3b82f6 !important;
}


/* WhatsApp 1 */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(3)
.footer-icon {
    color: #25D366 !important;
}


/* Phone 2 */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(4)
.footer-icon {
    color: #3b82f6 !important;
}


/* WhatsApp 2 */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(5)
.footer-icon {
    color: #25D366 !important;
}


/* Email */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(6)
.footer-icon {
    color: #f97316 !important;
}


/* Website */
.site-footer .footer-contact:first-child
.footer-row:nth-of-type(7)
.footer-icon {
    color: #60a5fa !important;
}


/* ---------------------------------------------------------
   SOFTCOM STUDIO
--------------------------------------------------------- */

/* Address */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(1)
.footer-icon {
    color: #ef4444 !important;
}


/* Phone 1 */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(2)
.footer-icon {
    color: #3b82f6 !important;
}


/* WhatsApp 1 */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(3)
.footer-icon {
    color: #25D366 !important;
}


/* Phone 2 */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(4)
.footer-icon {
    color: #3b82f6 !important;
}


/* WhatsApp 2 */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(5)
.footer-icon {
    color: #25D366 !important;
}


/* Phone 3 */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(6)
.footer-icon {
    color: #3b82f6 !important;
}


/* WhatsApp 3 */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(7)
.footer-icon {
    color: #25D366 !important;
}


/* Email */
.site-footer .footer-contact:nth-child(2)
.footer-row:nth-of-type(8)
.footer-icon {
    color: #f97316 !important;
}


/* ---------------------------------------------------------
   COPY BUTTON
--------------------------------------------------------- */

.site-footer .copy-contact .button-icon {
    color: #a78bfa !important;
}

.site-footer .copy-contact .button-icon svg {
    stroke: currentColor !important;
}


/* ---------------------------------------------------------
   GOOGLE MAPS
--------------------------------------------------------- */

.site-footer .footer-button[href*="maps.app.goo.gl"]
.button-icon {
    color: #ef4444 !important;
}

.site-footer .footer-button[href*="maps.app.goo.gl"]
.button-icon svg {
    stroke: currentColor !important;
}