/* =========================================================
   S.V. ELECTRICALS
   CONTACT PAGE
   SKY BLUE + WHITE GRADIENT DESIGN
========================================================= */


/* =========================================================
   ROOT COLORS
========================================================= */

:root {

    --sv-blue-dark: #063B73;

    --sv-blue: #0756A3;

    --sv-blue-main: #0874C9;

    --sv-blue-light: #168FE8;

    --sv-sky: #35BDF6;

    --sv-sky-light: #8DE3FF;

    --sv-pale-blue: #EAF8FF;

    --sv-white: #FFFFFF;

    --sv-text: #173B5F;

    --sv-muted: #5E7388;

    --sv-border: #0874C9;

    --sv-shadow:
        0 20px 50px
        rgba(7, 86, 163, 0.13);

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--sv-text);

    background:
        #ffffff;

}


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

.sv-contact-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        50px 30px 90px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(
                53,
                189,
                246,
                0.18
            ),
            transparent 32%
        ),

        radial-gradient(
            circle at 95% 85%,
            rgba(
                22,
                143,
                232,
                0.12
            ),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fdff 30%,
            #e9f8ff 65%,
            #ffffff 100%
        );

}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.sv-contact-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.35;

    background-image:

        radial-gradient(
            circle,
            rgba(
                8,
                116,
                201,
                0.08
            ) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

}


/* =========================================================
   LIGHT GLOW
========================================================= */

.sv-contact-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -180px;

    top: -180px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(
                53,
                189,
                246,
                0.16
            ),
            transparent 70%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.sv-contact-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.sv-contact-heading {

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 95px;

    margin-bottom: 28px;

}


.sv-heading-column {

    position: relative;

}


.sv-section-label {

    display: block;

    margin-bottom: 5px;

    color:
        var(--sv-blue-main);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.sv-contact-heading h1 {

    margin: 0;

    color:
        var(--sv-blue-dark);

    font-size:
        clamp(
            36px,
            3.2vw,
            32px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.sv-heading-line {

    display: block;

    width: 105px;

    height: 7px;

    margin-top: 18px;

    border-radius: 50px;

    background:

        linear-gradient(
            90deg,
            #0756A3 0%,
            #168FE8 45%,
            #55D8FF 100%
        );

    box-shadow:
        0 5px 15px
        rgba(
            8,
            116,
            201,
            0.22
        );

}


/* =========================================================
   MAIN GRID
========================================================= */

.sv-contact-grid {

    display: grid;

    grid-template-columns:
        minmax(430px, 0.9fr)
        minmax(550px, 1.35fr);

    gap: 95px;

    align-items: stretch;

}


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

.sv-contact-info {

    display: flex;

    flex-direction: column;

    gap: 28px;

}


/* =========================================================
   CONTACT CARD
========================================================= */

.sv-contact-card {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 120px;

    padding:
        10px 20px;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border:
        2px solid
        var(--sv-blue-dark);

    border-radius: 20px;

    box-shadow:
        var(--sv-shadow);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}


/* =========================================================
   CARD TOP GRADIENT
========================================================= */

.sv-contact-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 7px;

    background:

        linear-gradient(
            90deg,
            #0756A3,
            #168FE8,
            #55D8FF
        );

}


/* =========================================================
   CARD HOVER
========================================================= */

.sv-contact-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--sv-blue-main);

    box-shadow:

        0 28px 60px
        rgba(
            7,
            86,
            163,
            0.18
        );

}


/* =========================================================
   ICON
========================================================= */

.sv-contact-icon {

    flex:
        0 0 74px;

    width: 74px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 40px;

    border-radius: 20%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edfaff
        );

    border:
        2px solid
        var(--sv-sky);

    box-shadow:

        0 18px 35px
        rgba(
            7,
            86,
            163,
            0.15
        );

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.sv-contact-card:hover
.sv-contact-icon {

    transform:
        scale(1.08)
        rotate(-4deg);

    box-shadow:

        0 20px 38px
        rgba(
            7,
            86,
            163,
            0.22
        );

}


/* =========================================================
   ICON SVG
========================================================= */

.sv-contact-icon svg {

    width: 34px;

    height: 34px;

    fill:
        var(--sv-blue-main);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.sv-contact-card-content {

    min-width: 0;

}


.sv-contact-card-content h3 {

    margin:
        0 0 10px;

    color:
        var(--sv-blue-dark);

    font-size: 20px;

    line-height: 1.1;

    font-weight: 750;

}


.sv-contact-card-content p {

    margin: 0;

    color:#000;

    font-size: 16px;

    line-height: 1.6;

    word-break: break-word;

}


/* =========================================================
   CORNER DESIGN
========================================================= */

.sv-card-corner {

    position: absolute;

    right: -1px;

    bottom: -1px;

    width: 80px;

    height: 80px;

    border-right:
        7px solid
        var(--sv-sky);

    border-bottom:
        7px solid
        var(--sv-sky);

    border-radius:
        0 0 17px 0;

}


/* =========================================================
   ADDRESS CARD
========================================================= */

.sv-address-card {

    align-items:
        flex-start;

    padding-top:
        38px;

    padding-bottom:
        38px;

}


.sv-address-card
.sv-contact-icon {

    margin-top:
        3px;

}


.sv-address-card
.sv-contact-card-content p {

    max-width:
        400px;

}


/* =========================================================
   FORM WRAPPER
========================================================= */

.sv-contact-form-wrapper {

    position: relative;

    padding:
        10px 25px 10px;

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.98
            ),
            rgba(
                249,
                253,
                255,
                0.96
            )
        );

    border:
        2px solid
        var(--sv-blue-dark);

    border-radius:
        20px;

    box-shadow:
        var(--sv-shadow);

}


/* =========================================================
   FORM TOP BAR
========================================================= */

.sv-contact-form-wrapper::before {

    content: "";

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    height: 8px;

    background:

        linear-gradient(
            90deg,
            #0756A3,
            #168FE8,
            #55D8FF
        );

    border-radius:
        20px 20px 0 0;

}


/* =========================================================
   FORM GROUP
========================================================= */

.sv-form-group {

    position: relative;

    margin-bottom:
        20px;

}


.sv-form-group label {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(
        0,
        0,
        0,
        0
    );

    white-space: nowrap;

    border: 0;

}


/* =========================================================
   INPUTS
========================================================= */

.sv-form-group input,
.sv-form-group textarea {

    display: block;

    width: 100%;

    box-sizing: border-box;

    outline: none;

    color:
        var(--sv-blue-dark);

    background:
        #ffffff;

    border:
        1px solid
        #CADCE9;

    border-radius:
        13px;

    font-family:
        inherit;

    font-size:
        18px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.sv-form-group input {

    height:
        55px;

    padding:
        0 28px;

}


.sv-form-group textarea {

    min-height:
        145px;

    padding:
        22px 28px;

    resize:
        vertical;

    line-height:
        1.5;

}


.sv-form-group input::placeholder,
.sv-form-group textarea::placeholder {

    color:
        #7B8791;

    opacity:
        1;

}


/* =========================================================
   INPUT FOCUS
========================================================= */

.sv-form-group input:focus,
.sv-form-group textarea:focus {

    border-color:
        var(--sv-blue-main);

    background:
        #ffffff;

    box-shadow:

        0 0 0 4px
        rgba(
            53,
            189,
            246,
            0.15
        );

}


/* =========================================================
   SUBMIT
========================================================= */

.sv-form-submit {

    margin-top:
        5px;

}


.sv-submit-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-width:
        250px;

    height:
        64px;

    padding:
        0 30px;

    border:
        none;

    border-radius:
        12px;

    cursor:
        pointer;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #063B73 0%,
            #0756A3 45%,
            #168FE8 100%
        );

    font-family:
        inherit;

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        0.3px;

    box-shadow:

        0 13px 28px
        rgba(
            7,
            86,
            163,
            0.22
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.sv-submit-btn svg {

    width:
        25px;

    height:
        25px;

    fill:
        #9DEBFF;

    transition:
        transform 0.3s ease;

}


.sv-submit-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 18px 38px
        rgba(
            7,
            86,
            163,
            0.30
        );

}


.sv-submit-btn:hover svg {

    transform:
        translateX(5px);

}


.sv-submit-btn:disabled {

    cursor:
        not-allowed;

    opacity:
        0.75;

    transform:
        none;

}


/* =========================================================
   FORM MESSAGE
========================================================= */

.sv-form-message {

    margin-bottom:
        24px;

    padding:
        16px 20px;

    border-radius:
        10px;

    font-size:
        15px;

    font-weight:
        600;

}


.sv-success-message {

    color:
        #176B37;

    background:
        #EAF8EF;

    border:
        1px solid
        #A9DFBB;

}


.sv-error-message {

    color:
        #9D2222;

    background:
        #FFF0F0;

    border:
        1px solid
        #EFB1B1;

}


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

.sv-whatsapp-btn {

    position:
        fixed;

    z-index:
        999;

    right:
        18px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    text-decoration:
        none;

    background:
        #ffffff;

    border:
        9px solid
        #07901A;

    box-shadow:

        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transition:
        transform 0.3s ease;

}


.sv-whatsapp-btn svg {

    width:
        34px;

    height:
        34px;

    fill:
        #07901A;

}


.sv-whatsapp-btn:hover {

    transform:
        translateY(-50%)
        scale(1.08);

}


/* =========================================================
   BACK TO TOP
========================================================= */

.sv-back-top {

    position:
        fixed;

    z-index:
        998;

    right:
        70px;

    bottom:
        30px;

    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        50%;

    cursor:
        pointer;

    background:

        linear-gradient(
            135deg,
            #063B73,
            #168FE8
        );

    box-shadow:

        0 15px 30px
        rgba(
            0,
            0,
            0,
            0.18
        );

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(20px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

}


.sv-back-top.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.sv-back-top svg {

    width:
        28px;

    height:
        28px;

    fill:
        #ffffff;

}


.sv-back-top:hover {

    background:
        #35BDF6;

}


.sv-back-top:hover svg {

    fill:
        #063B73;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sv-contact-section {

        padding:
            45px 22px 80px;

    }


    .sv-contact-heading {

        gap:
            45px;

    }


    .sv-contact-grid {

        gap:
            45px;

        grid-template-columns:
            minmax(350px, 0.9fr)
            minmax(450px, 1.1fr);

    }


    .sv-contact-form-wrapper {

        padding:
            35px 35px 40px;

    }


    .sv-contact-card {

        padding:
            28px 25px;

    }


    .sv-contact-icon {

        margin-right:
            25px;

    }


    .sv-contact-card-content h3 {

        font-size:
            25px;

    }


    .sv-contact-card-content p {

        font-size:
            16px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .sv-contact-heading {

        grid-template-columns:
            1fr;

        gap:
            30px;

        margin-bottom:
            30px;

    }


    .sv-contact-heading
    .sv-heading-column:nth-child(2) {

        display:
            none;

    }


    .sv-contact-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .sv-contact-form-wrapper {

        order:
            1;

    }


    .sv-contact-info {

        order:
            2;

    }


    .sv-contact-heading h1 {

        font-size:
            44px;

    }

}


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

@media (max-width: 600px) {

    .sv-contact-section {

        padding:
            35px 15px 90px;

    }


    .sv-contact-heading {

        margin-bottom:
            25px;

    }


    .sv-contact-heading h1 {

        font-size:
            36px;

        letter-spacing:
            -0.8px;

    }


    .sv-heading-line {

        width:
            85px;

        height:
            6px;

        margin-top:
            15px;

    }


    .sv-contact-grid {

        gap:
            25px;

    }


    .sv-contact-form-wrapper {

        padding:
            30px 18px 30px;

        border-radius:
            16px;

    }


    .sv-form-group {

        margin-bottom:
            17px;

    }


    .sv-form-group input {

        height:
            65px;

        padding:
            0 18px;

        font-size:
            16px;

        border-radius:
            10px;

    }


    .sv-form-group textarea {

        min-height:
            125px;

        padding:
            18px;

        font-size:
            16px;

        border-radius:
            10px;

    }


    .sv-submit-btn {

        width:
            100%;

        min-width:
            0;

        height:
            58px;

    }


    .sv-contact-info {

        gap:
            18px;

    }


    .sv-contact-card {

        min-height:
            145px;

        padding:
            28px 20px;

        border-radius:
            15px;

    }


    .sv-contact-icon {

        flex:
            0 0 57px;

        width:
            57px;

        height:
            57px;

        margin-right:
            18px;

    }


    .sv-contact-icon svg {

        width:
            26px;

        height:
            26px;

    }


    .sv-contact-card-content h3 {

        font-size:
            21px;

        margin-bottom:
            6px;

    }


    .sv-contact-card-content p {

        font-size:
            14px;

        line-height:
            1.5;

    }


    .sv-address-card {

        padding:
            28px 20px;

    }


    .sv-card-corner {

        width:
            55px;

        height:
            55px;

        border-width:
            5px;

    }


    .sv-whatsapp-btn {

        width:
            62px;

        height:
            62px;

        right:
            12px;

        border-width:
            7px;

    }


    .sv-whatsapp-btn svg {

        width:
            27px;

        height:
            27px;

    }


    .sv-back-top {

        right:
            15px;

        bottom:
            20px;

        width:
            54px;

        height:
            54px;

    }


    .sv-back-top svg {

        width:
            23px;

        height:
            23px;

    }

}


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

@media (max-width: 380px) {

    .sv-contact-heading h1 {

        font-size:
            31px;

    }


    .sv-contact-card {

        padding:
            24px 15px;

    }


    .sv-contact-icon {

        margin-right:
            13px;

    }


    .sv-contact-card-content h3 {

        font-size:
            19px;

    }


    .sv-contact-card-content p {

        font-size:
            13px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    .sv-contact-card,
    .sv-contact-icon,
    .sv-submit-btn,
    .sv-whatsapp-btn,
    .sv-back-top {

        transition:
            none !important;

    }

}



/* subbanner section starts here  */
/* =========================================================
   S.V. ELECTRICALS
   COMMON SUB BANNER
   SKY BLUE + WHITE THEME
========================================================= */


/* =========================================================
   SUB BANNER
========================================================= */

.sv-subbanner {

    position: relative;

    width: 100%;

    min-height: 350px;

    display: flex;

    align-items: center;

    z-index:99;

    justify-content: center;

    overflow: hidden;

    background-image:
        url("assests/subbanner.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}


/* =========================================================
   DARK / BLUE OVERLAY
========================================================= */

.sv-subbanner-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    /* background:

        linear-gradient(
            90deg,

            rgba(
                3,
                43,
                82,
                0.88
            ) 0%,

            rgba(
                5,
                82,
                150,
                0.72
            ) 45%,

            rgba(
                17,
                145,
                220,
                0.55
            ) 100%
        ); */

}


/* =========================================================
   LIGHT BLUE GLOW
========================================================= */

.sv-subbanner::before {

    content: "";

    position: absolute;

    z-index: 2;

    width: 500px;

    height: 500px;

    right: -180px;

    top: -250px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

            rgba(
                141,
                227,
                255,
                0.28
            ),

            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   SECOND LIGHT EFFECT
========================================================= */

.sv-subbanner::after {

    content: "";

    position: absolute;

    z-index: 2;

    width: 350px;

    height: 350px;

    left: -180px;

    bottom: -200px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

            rgba(
                53,
                189,
                246,
                0.30
            ),

            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   CONTENT
========================================================= */

.sv-subbanner-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1500px;

    padding:

        70px 30px;

    text-align: center;

}


/* =========================================================
   PAGE TITLE
========================================================= */

.sv-subbanner-content h1 {

    margin: 0;

    color: #000;

    font-size:

        clamp(
            42px,
            5vw,
            40px
        );

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.2px;
/* 
    text-shadow:

        0 5px 20px
        rgba(
            0,
            0,
            0,
            0.20
        ); */

}


/* =========================================================
   TITLE UNDERLINE
========================================================= */

.sv-subbanner-content h1::after {

    content: "";

    display: block;

    width: 115px;

    height: 5px;

    margin:

        10px auto 0;

    border-radius: 50px;

    background:

        #000;

    box-shadow:

        0 5px 15px
        rgba(
            0,
            0,
            0,
            0.15
        );

}


/* =========================================================
   BREADCRUMB
========================================================= */

.sv-breadcrumb {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top: 22px;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.5;

}


/* =========================================================
   HOME LINK
========================================================= */

.sv-breadcrumb a {

    color: #000;

    text-decoration: none;

    font-weight: 600;

    transition:

        color 0.25s ease;

}


.sv-breadcrumb a:hover {

    color: #000;

}


/* =========================================================
   ARROW
========================================================= */

.sv-breadcrumb span {

    color: #000;

    font-size: 20px;

    line-height: 1;

    font-weight: 400;

}


/* =========================================================
   CURRENT PAGE
========================================================= */

.sv-breadcrumb strong {

    color: #000;

    font-weight: 700;

}


/* =========================================================
   OPTIONAL DECORATIVE LINE
========================================================= */

.sv-breadcrumb::before {

    content: "";

    width: 25px;

    height: 2px;

    /* background: #35BDF6; */

    opacity: 0.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .sv-subbanner {

        min-height: 300px;

    }


    .sv-subbanner-content {

        padding:

            60px 25px;

    }


    .sv-subbanner-content h1 {

        font-size: 52px;

    }

}


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

@media (max-width: 768px) {

    .sv-subbanner {

        min-height: 260px;

        background-position:
            center center;

    }


    .sv-subbanner-content {

        padding:

            50px 20px;

    }


    .sv-subbanner-content h1 {

        font-size: 42px;

        letter-spacing: -0.8px;

    }


    .sv-subbanner-content h1::after {

        width: 75px;

        height: 4px;

        margin-top: 14px;

    }


    .sv-breadcrumb {

        margin-top: 17px;

        gap: 10px;

        font-size: 14px;

    }


    .sv-breadcrumb span {

        font-size: 20px;

    }


    .sv-breadcrumb::before {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .sv-subbanner {

        min-height: 220px;

    }


    .sv-subbanner-content {

        padding:

            42px 15px;

    }


    .sv-subbanner-content h1 {

        font-size: 34px;

    }


    .sv-breadcrumb {

        margin-top: 15px;

        font-size: 13px;

    }


    .sv-subbanner::before {

        width: 300px;

        height: 300px;

    }


    .sv-subbanner::after {

        width: 250px;

        height: 250px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .sv-subbanner {

        min-height: 200px;

    }


    .sv-subbanner-content h1 {

        font-size: 30px;

    }


    .sv-breadcrumb {

        font-size: 12px;

    }

}
/* subbanneer section ends here  */


/* map section starts here */
/* =========================================================
   GOOGLE MAP SECTION
========================================================= */

.sv-map-section {

    width: 100%;

    padding: 0 30px 80px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4fcff 50%,
            #e8f8ff 100%
        );

}


.sv-map-container {

    position: relative;

    width: 100%;

    max-width: 1500px;

    height: 360px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    border: 2px solid #0756A3;

    box-shadow:
        0 20px 50px
        rgba(
            7,
            86,
            163,
            0.15
        );

}


.sv-map-container iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

}


/* =========================================================
   MAP TOP LINE
========================================================= */

.sv-map-container::before {

    content: "";

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 6px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #063B73,
            #168FE8,
            #35BDF6
        );

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .sv-map-section {

        padding:
            0 20px 60px;

    }


    .sv-map-container {

        height: 400px;

        border-radius: 16px;

    }

}


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

@media (max-width: 480px) {

    .sv-map-section {

        padding:
            0 15px 50px;

    }


    .sv-map-container {

        height: 350px;

        border-radius: 13px;

    }

}
/* map section ends here */