/* ============================================================
   GREEN VISION OVERSEAS
   ULTRA PREMIUM CORPORATE WEBSITE
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --green: #00875a;
    --green-dark: #005f42;
    --green-light: #16a675;

    --blue: #1476c9;
    --blue-dark: #07569a;

    --gold: #f5bd3f;
    --gold-dark: #d99a12;

    --navy: #10243d;
    --navy2: #172f4d;

    --white: #ffffff;
    --bg: #f5f9fc;

    --text: #263645;
    --muted: #718096;

    --radius: 18px;

    --shadow:
        0 12px 35px rgba(16,36,61,.10);

    --shadow-hover:
        0 20px 50px rgba(16,36,61,.18);
}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        'Poppins',
        'Hind Siliguri',
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,135,90,.07),
            transparent 30%
        ),

        radial-gradient(
            circle at 100% 20%,
            rgba(20,118,201,.07),
            transparent 30%
        ),

        var(--bg);

    color: var(--text);

    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    transition: all .3s ease;
}

.container {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}


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

.coll-1 {

    width: 100%;
    min-height: 112px;

    display: flex;
    align-items: center;

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

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid rgba(16,36,61,.07);

    box-shadow:
        0 8px 30px rgba(16,36,61,.08);

    position: relative;

    z-index: 1000;
}


/* animated top line */

.coll-1::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--blue),
            var(--gold),
            var(--green)
        );

    background-size:
        300% 100%;

    animation:
        headerLine 6s linear infinite;
}

@keyframes headerLine {

    0% {
        background-position: 0%;
    }

    100% {
        background-position: 300%;
    }
}


/* ============================================================
   LOGO
   ============================================================ */

.coll-2 {

    width: 31%;
    height: 112px;

    display: flex;
    align-items: center;
}

.coll-2-1 {

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;

    text-decoration: none;

    color: var(--navy);
}

.coll-2-2 {

    width: 50%;
    height: 100%;

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

.coll-2-3 {

    width: 130px;
    height: 98px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 7px 12px rgba(0,0,0,.10)
        );

    transition:
        transform .5s ease;
}

.coll-2-1:hover .coll-2-3 {

    transform:
        scale(1.07)
        rotate(-2deg);
}

.coll-2-4 {

    width: 100%;

    color: var(--green);

    font-size:
        clamp(18px, 2vw, 26px);

    font-weight: 800;

    line-height: 1.12;

    font-style: italic;

    letter-spacing: .4px;

    text-shadow:
        0 2px 5px rgba(0,135,90,.12);
}


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

.coll-3 {

    width: 69%;

    min-height: 112px;

    padding:
        12px 25px;

    display: flex;

    flex-wrap: wrap;

    align-content: center;
}


/* ============================================================
   NOTICE
   ============================================================ */

.coll-3-0 {

    width: 80%;

    height: 38px;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.typewriter {

    display: inline-block;

    overflow: hidden;

    white-space: nowrap;

    border-right:
        3px solid var(--green);

    font-family:
        'Hind Siliguri',
        sans-serif;

    font-size:
        clamp(12px,1.4vw,18px);

    color: #253746;

    font-weight: 600;

    animation:
        typing 8s steps(50) infinite alternate,
        blink .8s infinite;
}


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

.coll-3-1 {

    width: 20%;
    height: 38px;

    display: flex;

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

    margin-bottom: 8px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #e9a91b
        );

    box-shadow:
        0 7px 20px rgba(245,189,63,.30);

    overflow: hidden;

    position: relative;

    transition: .35s ease;
}

.coll-3-1::before {

    content: "";

    position: absolute;

    width: 50px;
    height: 200%;

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

    transform:
        rotate(25deg)
        translateX(-100px);

    transition: .6s;
}

.coll-3-1:hover::before {

    transform:
        rotate(25deg)
        translateX(130px);
}

.coll-3-1:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px rgba(245,189,63,.40);
}

.alint {

    width: 100%;
    height: 100%;

    display: flex;

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

    text-decoration: none;

    color: #152235;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    position: relative;

    z-index: 2;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.coll-3-2 {

    width: 100%;
    height: 40px;

    display: flex;

    background:
        linear-gradient(
            90deg,
            var(--green-dark),
            var(--green),
            var(--blue)
        );

    border-radius: 9px;

    overflow: hidden;

    box-shadow:
        0 7px 20px rgba(0,95,66,.22);
}

.coll-3-3 {

    flex: 1;

    display: flex;

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

    position: relative;

    color: white;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    border-right:
        1px solid rgba(255,255,255,.15);

    overflow: hidden;
}

.coll-3-3:last-child {
    border-right: none;
}

.coll-3-3::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 0;
    height: 3px;

    transform:
        translateX(-50%);

    background:
        var(--gold);

    transition:
        .35s ease;
}

.coll-3-3:hover {

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

    color: white;
}

.coll-3-3:hover::after {

    width: 70%;
}


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

.slider {

    width: 100%;
    height: 460px;

    padding: 12px;

    display: flex;

    gap: 12px;

    background:
        linear-gradient(
            135deg,
            #e8f2f8,
            #dceaf4
        );

    position: relative;
}


/* LEFT */

.left-slider {

    width: 30%;
    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.up-slider,
.down-slider {

    width: 100%;
    height: 50%;

    overflow: hidden;

    position: relative;

    border-radius:
        var(--radius);

    box-shadow:
        0 10px 30px rgba(0,0,0,.16);
}

.up-slider::after,
.down-slider::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.30),
            transparent 60%
        );

    pointer-events: none;
}

.up-slider img,
.down-slider img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease;
}

.up-slider:hover img,
.down-slider:hover img {

    transform:
        scale(1.08);
}


/* RIGHT */

.slider-container {

    width: 70%;
    height: 100%;

    overflow: hidden;

    position: relative;

    border-radius:
        var(--radius);

    box-shadow:
        0 12px 40px rgba(0,0,0,.18);
}

.right-slider {

    width: 100%;
    height: 100%;
}

.right-slider img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.slick-list,
.slick-track {

    height: 100%;
}

.slick-slide {

    height: 460px;
}

.slick-slide > div {

    height: 100%;
}


/* ============================================================
   TYPEWRITER
   ============================================================ */

@keyframes typing {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink {

    50% {
        border-color: transparent;
    }
}


/* ============================================================
   FIELDSET
   ============================================================ */

fieldset {

    border: none;

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    position: relative;

    overflow: hidden;

    transition:
        box-shadow .35s ease;
}

fieldset:hover {

    box-shadow:
        var(--shadow-hover);
}

fieldset::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--blue),
            var(--gold)
        );
}

legend {

    background:
        linear-gradient(
            135deg,
            var(--green-dark),
            var(--green),
            var(--blue)
        );

    color: white;

    font-size: 15px;

    font-weight: 700;

    padding:
        9px 27px;

    border-radius: 8px;

    box-shadow:
        0 6px 18px rgba(0,95,66,.22);
}


/* ============================================================
   COUNTRY
   ============================================================ */

.row {

    width: 96%;

    margin:
        38px auto 0;

    padding:
        24px;
}

.row-card {

    width: 100%;

    display: grid;

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

    gap: 17px;

    padding:
        28px 4px 5px;
}

.card {

    min-height: 54px;

    border-radius: 11px;

    overflow: hidden;

    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-light)
        );

    box-shadow:
        0 7px 20px rgba(0,135,90,.16);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:
        translateX(-100%);

    transition:
        .6s ease;
}

.card:hover::before {

    transform:
        translateX(100%);
}

.card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,95,66,.25);

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #e8a619
        );
}

.card a {

    min-height: 54px;

    display: flex;

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

    position: relative;

    z-index: 2;

    padding: 8px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;
}

.card:hover a {

    color: #14213d;
}


/* ============================================================
   MISSION & VISION
   ============================================================ */

.row-3 {

    width: 96%;

    margin:
        38px auto 0;

    padding:
        24px;

    display: flex;

    gap: 24px;
}


/* LOGO PANEL */

.pro-box {

    width: 27%;

    min-height: 440px;

    border-radius:
        var(--radius);

    position: relative;

    overflow: hidden;

    display: flex;

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

    background:
        linear-gradient(
            145deg,
            #e6f7f0,
            #e7f2fb
        );
}

.pro-box::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(0,135,90,.08);

    top: -130px;
    right: -100px;
}

.pro-box::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(20,118,201,.08);

    bottom: -120px;
    left: -90px;
}

.coll-img {

    width: 75%;

    max-width: 270px;

    height: auto;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 15px 20px rgba(0,0,0,.12)
        );

    transition:
        transform .5s ease;
}

.pro-box:hover .coll-img {

    transform:
        scale(1.08);
}


/* TEXT PANEL */

.pro-box-1 {

    width: 73%;

    min-height: 440px;

    padding:
        28px 38px;

    border-radius:
        var(--radius);

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

    border-left:
        5px solid var(--green);

    box-shadow:
        inset 0 0 30px rgba(0,0,0,.015);

    font-size: 16px;

    line-height: 1.85;

    text-align: justify;
}

.pro-box-1 p {

    margin-bottom:
        15px;
}

.pro-box-1 b {

    color:
        var(--green-dark);
}

h3 {

    display: inline-block;

    position: relative;

    color:
        var(--green);

    font-size:
        25px;

    font-style: italic;

    margin:
        7px 0 10px;
}

h3::after {

    content: "";

    position: absolute;

    bottom: -3px;
    left: 0;

    width: 60px;
    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--blue)
        );
}


/* ============================================================
   WORKER GALLERY
   ============================================================ */

.row-work {

    width: 96%;

    margin:
        38px auto 0;

    padding:
        24px;
}

.worker-box {

    width: 100%;

    display: grid;

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

    gap: 20px;

    padding:
        28px 4px 5px;
}

.worker {

    width: 100%;

    height: 235px;

    position: relative;

    overflow: hidden;

    border-radius:
        var(--radius);

    background:
        #eaf1f5;

    box-shadow:
        0 8px 25px rgba(0,0,0,.13);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.worker::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.45),
            transparent 55%
        );

    opacity: 0;

    transition: .4s;

    pointer-events: none;
}

.worker::after {

    content: "VIEW";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-30%);

    z-index: 4;

    padding:
        7px 18px;

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

    border-radius: 30px;

    color: white;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    opacity: 0;

    transition: .4s;

    pointer-events: none;
}

.worker:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);
}

.worker:hover::before {

    opacity: 1;
}

.worker:hover::after {

    opacity: 1;

    transform:
        translate(-50%,-50%);
}

.worker img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    cursor: pointer;

    transition:
        transform .7s ease,
        filter .4s ease;
}

.worker:hover img {

    transform:
        scale(1.10);

    filter:
        brightness(.85);
}


/* ============================================================
   MODAL
   ============================================================ */

.modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 99999;

    background:
        rgba(5,14,25,.94);

    backdrop-filter:
        blur(10px);

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

    padding: 30px;
}

.modal-content {

    max-width: 90%;

    max-height: 86vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius:
        14px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.60);

    animation:
        modalZoom .35s ease;
}

@keyframes modalZoom {

    from {
        opacity: 0;
        transform: scale(.75);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.close {

    position: fixed;

    top: 20px;
    right: 30px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

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

    color: white;

    font-size: 38px;

    cursor: pointer;

    transition: .35s;
}

.close:hover {

    background:
        var(--gold);

    color:
        #111;

    transform:
        rotate(90deg)
        scale(1.1);
}


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

.address {

    width: 100%;

    min-height: 310px;

    margin-top:
        50px;

    padding:
        60px 7% 45px;

    display: flex;

    gap: 40px;

    position: relative;

    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0c1b2c,
            #102d47,
            #063c35
        );
}


/* top line */

.address::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--gold),
            var(--blue)
        );
}


/* decorative circles */

.address::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        rgba(0,135,90,.10);

    right: -180px;
    bottom: -220px;
}

.left-add,
.mid-add,
.right-add {

    flex: 1;

    position: relative;

    z-index: 2;

    padding:
        5px 20px;

    font-size:
        13px;
}

.add-head {

    min-height: 34px;

    display: flex;

    align-items: center;

    color:
        #dce8f2;

    font-weight:
        500;
}

.left-add .add-head:first-child,
.right-add .add-head:first-child {

    color:
        var(--gold);

    font-size:
        20px;

    font-weight:
        800;

    margin-bottom:
        10px;
}

.link {

    color:
        #dce8f2;

    text-decoration:
        none;
}

.link:hover {

    color:
        var(--gold);

    padding-left:
        7px;
}


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

@media (max-width:1100px) {

    .coll-2 {
        width: 35%;
    }

    .coll-3 {
        width: 65%;
    }

    .row-card {
        grid-template-columns:
            repeat(3,1fr);
    }

    .worker-box {
        grid-template-columns:
            repeat(3,1fr);
    }

    .pro-box {
        width: 30%;
    }

    .pro-box-1 {
        width: 70%;
    }
}


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

@media (max-width:700px) {

    body {
        overflow-x: hidden;
    }

    /* HEADER */

    .coll-1 {

        display: block;

        min-height: 0;

        padding:
            10px 8px 12px;
    }

    .coll-2 {

        width: 100%;

        height: 82px;
    }

    .coll-2-1 {

        justify-content:
            center;
    }

    .coll-2-2 {

        width: 42%;
    }

    .coll-2-3 {

        width: 88px;

        height: 70px;
    }

    .coll-2-4 {

        font-size:
            16px;

        line-height:
            1.08;
    }

    /* HEADER RIGHT */

    .coll-3 {

        width: 100%;

        min-height: 0;

        padding:
            5px 0 0;
    }

    .coll-3-0 {

        width: 100%;

        height: 32px;

        margin-bottom:
            5px;
    }

    .typewriter {

        font-size:
            10px;
    }

    .coll-3-1 {

        width: 100%;

        height:
            38px;

        margin-bottom:
            7px;
    }

    .coll-3-2 {

        height: auto;

        display: grid;

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

        border-radius:
            8px;
    }

    .coll-3-3 {

        min-height:
            40px;

        font-size:
            11px;
    }


    /* HERO */

    .slider {

        height: auto;

        display: block;

        padding:
            6px;
    }

    .left-slider {

        width: 100%;

        height:
            160px;

        flex-direction:
            row;

        gap:
            6px;

        margin-bottom:
            6px;
    }

    .up-slider,
    .down-slider {

        width: 50%;

        height: 100%;

        border-radius:
            10px;
    }

    .slider-container {

        width: 100%;

        height:
            215px;

        border-radius:
            10px;
    }

    .slick-slide {

        height:
            215px;
    }


    /* SECTIONS */

    .row,
    .row-3,
    .row-work {

        width:
            94%;

        padding:
            14px;

        margin-top:
            25px;
    }

    legend {

        font-size:
            12px;

        padding:
            8px 14px;
    }


    /* COUNTRY */

    .row-card {

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

        gap:
            9px;

        padding:
            18px 2px 3px;
    }

    .card,
    .card a {

        min-height:
            45px;
    }

    .card a {

        font-size:
            11px;
    }


    /* MISSION */

    .row-3 {

        display:
            block;
    }

    .pro-box {

        width:
            100%;

        min-height:
            210px;

        margin-bottom:
            12px;
    }

    .coll-img {

        width:
            170px;

        height:
            145px;
    }

    .pro-box-1 {

        width:
            100%;

        min-height:
            auto;

        padding:
            18px;

        font-size:
            13px;

        line-height:
            1.75;

        text-align:
            left;

        border-left:
            3px solid var(--green);
    }

    h3 {

        font-size:
            21px;
    }


    /* WORKERS */

    .worker-box {

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

        gap:
            10px;

        padding:
            18px 2px 3px;
    }

    .worker {

        height:
            155px;

        border-radius:
            10px;
    }

    .worker::after {

        display:
            none;
    }


    /* MODAL */

    .modal {

        padding:
            10px;
    }

    .modal-content {

        max-width:
            96%;

        max-height:
            80vh;
    }

    .close {

        width:
            40px;

        height:
            40px;

        top:
            10px;

        right:
            12px;

        font-size:
            30px;
    }


    /* FOOTER */

    .address {

        display:
            block;

        min-height:
            auto;

        padding:
            45px 20px 25px;

        margin-top:
            30px;
    }

    .left-add,
    .mid-add,
    .right-add {

        width:
            100%;

        padding:
            10px 3px;

        margin-bottom:
            25px;
    }

    .add-head {

        min-height:
            30px;

        font-size:
            12px;
    }

    .left-add .add-head:first-child,
    .right-add .add-head:first-child {

        font-size:
            18px;
    }
}


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

@media (max-width:420px) {

    .coll-2-3 {

        width:
            78px;

        height:
            64px;
    }

    .coll-2-4 {

        font-size:
            14px;
    }

    .typewriter {

        font-size:
            9px;
    }

    .slider-container {

        height:
            190px;
    }

    .slick-slide {

        height:
            190px;
    }

    .left-slider {

        height:
            135px;
    }

    .worker {

        height:
            135px;
    }

    .pro-box-1 {

        font-size:
            12px;
    }

    .card a {

        font-size:
            10px;
    }
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {

    width:
        8px;
}

::-webkit-scrollbar-track {

    background:
        #edf2f5;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            var(--green),
            var(--blue)
        );

    border-radius:
        20px;
}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--green-dark);
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {

    background:
        var(--green);

    color:
        white;
}