@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Momo+Signature&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Momo+Signature&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --darkBlue: #031733;
    --lightBlue: #2c4fb8;
    --companyGradient: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
    --mainColor: rgb(233, 233, 248);
    --secondColor: #a8f9ff;
    --thirdColor: #9cbedd;
    --thirdColorHover: #b7cfe6;
    --accentColor: #1b98ff;
    --backgroundColor: #f2f6fa;
    --accent: #0077ff;
    --accent-lt: #00c6ff;
}

* {
    padding: 0;
    margin: 0;
    font-family: "Instrument Sans", sans-serif;
    scroll-behavior: smooth;
}

/* ─────────────────────────────
   NAVIGATION — DESKTOP
───────────────────────────── */
.nav-template {
    width: 100vw;
    padding: 12px 24px;
    box-sizing: border-box;
    height: fit-content;
    max-height: 132px;
    background: linear-gradient(to right, var(--darkBlue), var(--lightBlue));
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 999;
}

.nav-template img {
    max-width: 128px;
}

.nav-template ul {
    display: flex;
    gap: 24px;
    text-decoration: none;
    list-style-type: none;
    align-items: center;
}

.nav-template ul > a {
    text-decoration: none;
    font-size: 2rem;
    padding: 12px;
    background: var(--companyGradient);
    background-clip: text;
    color: white;
    transition: color .1s ease-in-out;
}

.nav-template ul > a:hover {
    color: transparent;
}

.nav-template > a > button {
    font-size: 2rem;
    background-image: radial-gradient(100% 100% at 100% 0, var(--accent-lt) 40%, var(--accent) 90%);
    background-size: 200% 200%;
    padding: 16px 24px;
    color: white;
    box-sizing: border-box;
    cursor: pointer;
    border: none;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
    border-radius: 8px;
    transform: translateY(0px);
    transition: all .15s ease-in-out;
}

.nav-template > a > button:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-4px);
    background-position: 15% 0;
}

/* ─────────────────────────────
   DROPDOWN MENUS
───────────────────────────── */
.nav-dropdown {
    position: relative;
    list-style: none;
}

.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 2rem;
    padding: 12px;
    background: var(--companyGradient);
    background-clip: text;
    color: white;
    transition: color .1s ease-in-out;
    cursor: pointer;
}

.nav-dropdown > a:hover {
    color: transparent;
}

.nav-dropdown > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid rgba(255,255,255,0.6);
    border-bottom: 1.5px solid rgba(255,255,255,0.6);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-dropdown.open > a::after {
    transform: rotate(-135deg) translateY(-2px);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--darkBlue);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
    min-width: 180px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    z-index: 1000;
}

.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 12px 20px;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent;
    background-clip: unset;
    -webkit-background-clip: unset;
}

.nav-dropdown-menu a:last-child {
    border-bottom: none;
}

.nav-dropdown-menu a:hover {
    background: rgba(255,255,255,0.07);
    color: white;
}

/* ─────────────────────────────
   HAMBURGER BUTTON
───────────────────────────── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px;
    cursor: pointer;
    z-index: 1000;
    flex-shrink: 0;
}

.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────
   MOBILE QUOTE LINK
───────────────────────────── */
.nav-mobile-quote {
    display: none;
}

/* ─────────────────────────────
   NAVIGATION — MOBILE
───────────────────────────── */
@media (max-width: 1300px) {

    .nav-template {
        max-height: none;
        flex-wrap: wrap;
    }

    /* Hide desktop quote button */
    .nav-template > a.nav-desktop-quote {
        display: none;
    }

    /* Show hamburger */
    .nav-hamburger {
        display: flex;
    }

    /* Hide nav links by default */
    .nav-template > div {
        display: none;
        width: 100%;
        order: 3;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding: 8px 0 20px;
    }

    .nav-template > div.open {
        display: block;
    }

    .nav-template ul {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    .nav-template ul > a {
        display: block;
        font-size: 1.1rem;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        color: white;
        background: none;
        background-clip: unset;
        -webkit-background-clip: unset;
    }

    /* ── Mobile dropdowns ── */
    .nav-dropdown {
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .nav-dropdown > a {
        font-size: 1.1rem;
        padding: 14px 20px;
        color: white;
        background: none;
        background-clip: unset;
        -webkit-background-clip: unset;
        justify-content: space-between;
    }

    .nav-dropdown > a::after {
        border-color: rgba(255,255,255,0.5);
        transform: rotate(45deg);
        margin-top: -2px;
    }

    .nav-dropdown.open > a::after {
        transform: rotate(-135deg);
        margin-top: 4px;
    }

    .nav-dropdown-menu {
        display: none;
        position: static;
        transform: none;
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.05);
        box-shadow: none;
        background: rgba(0,0,0,0.2);
        min-width: unset;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-menu a {
        padding: 11px 20px 11px 36px;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        color: rgba(255,255,255,0.6);
    }

    .nav-dropdown-menu a:hover {
        background: rgba(255,255,255,0.05);
        color: white;
    }

    /* Show mobile quote button */
    .nav-mobile-quote {
        display: block;
        padding: 16px 20px 0;
        text-decoration: none;
    }

    .nav-mobile-quote button {
        width: 100%;
        font-size: 1rem;
        padding: 14px;
        background: radial-gradient(100% 100% at 55% 0, #fff 0, #5adaff 10%, #5468ff 60%);
        background-size: 200% 200%;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
        transition: all .15s ease-in-out;
    }

    .nav-mobile-quote button:hover {
        box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
        transform: translateY(-2px);
        background-position: 15% 0;
    }
}

/*--------
--FOOTER--
--------*/

.footer {
    width: 100%;
    background: #081226;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    color: #c4d0ff;
    padding: 30px 0px;
    position: relative;
    box-sizing: border-box;
}

.footer section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: fit-content;
    padding: 30px 0px;
    min-width: 24.5%;
    position: relative;
    box-sizing: border-box;
}

.footerWrappers:is(h1, h2, h3, h4, h5, p) {
    width: fit-content;
}

.footerLeft {
    align-items: center;
}

.footerLeftWrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.socialLinks {
    display: flex;
    gap: 30px;
    width: 100%;
    justify-content: left;
}

.socialLinks a {
    text-decoration: none;
    color: #c4d0ff;
    
}

.socialLinks h5 {
    font-weight: lighter;
}

.socialLinks img{
    filter: invert(100);
    width: 40px;
}

.socialLinks div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cr {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer2Wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.serviceAreaInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footerContact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.serviceRadius {
    width: 90vw;
    height: 90vw;
    max-width: 480px;
    max-height: 480px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.serviceRadius img {
    width: 115%;
    height: 115%;
    position: absolute;
    object-fit: cover;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 255, 0.05);
    border: 2px solid blue;
    border-radius: 50%;

}

.footer4Wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 360px;
}

.newsForm {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 20px;
    height: fit-content;
    position: relative;
}

.newsForm label {
    font-size: 1.5rem;

}

.newsForm input {
    font-size: 1.25rem;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.05);
    outline: none;
    border: 3px solid #8297aa;
    border-radius: 5px;
    color: white;
    transition: all .2s ease;
}

.newsForm input:hover {
    border: 3px solid #a9c9e6;
}

.newsForm input:focus {
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid #a9c9e6;
}

.newsForm button {
    font-size: 1.5rem;
    padding: 10px 20px;
    width: fit-content;
    border: 3px solid #c4d0ff;
    background: none;
    border-radius: 10px;
    color: #c4d0ff;
}

.comingSoon {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.comingSoon p {
    width: fit-content;
    rotate: -10deg;
    font-size: 2.5rem;
    font-weight: bolder;
    color: white;
}

.topButtonLink {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 10px;
    right: 20px;
    box-sizing: border-box;
    text-decoration: none;
}

.topButton {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 25px;
    height: 25px;
    padding: 5px;
    background: none;
    border: 2px solid #c4d0ff;
    border-radius: 50%;
    transition: all .2s ease;
    overflow: hidden;
    box-sizing: content-box;
}

.topButton:hover {
    width: 85px;
    height: 25px;
    border-radius: 10px;
}

.topButton img {
    width: 1.5rem;
    scale: 70%;
    transition: all .2s ease-in;
}

.topButton:hover img {
    scale: 100%;
}

.topButton p {
    font-size: 1.5rem;
    color: #c4d0ff;
    height: fit-content;
    width: fit-content;
}