/* =====================================================
   SHAMIM TEJARAT EXIR
   PREMIUM HOMEPAGE CSS
===================================================== */

:root {

    --black: #101913;
    --dark: #17231c;
    --dark-2: #213127;

    --green: #617665;
    --green-light: #dce5dd;

    --cream: #f5f6f3;
    --white: #ffffff;

    --text: #243229;
    --muted: #707c74;

    --border: rgba(24, 43, 32, .10);

    --ease: cubic-bezier(.2, .8, .2, 1);

}


/* =====================================================
   GLOBAL
===================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cream);
}

body.is-loading {
    overflow: hidden;
}


/* =====================================================
   REVEAL ANIMATION
===================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);

}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


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

.home-hero {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #fff;

    background: #15231b;

}


/* BACKGROUND */

.hero-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.hero-image {

    position: absolute;

    inset: -5%;

    background-image:
        url("assets/images/hero.jpg");

    background-size: cover;

    background-position: center;

    transform:
        scale(1.06);

    will-change: transform;

}


/* DARK OVERLAY */

.hero-gradient {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(9,18,13,.96) 0%,
            rgba(9,18,13,.78) 43%,
            rgba(9,18,13,.30) 100%
        ),

        linear-gradient(
            0deg,
            rgba(9,18,13,.70),
            transparent 45%
        );

}


/* GRID */

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:

        linear-gradient(
            rgba(255,255,255,.20) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.20) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

}


/* HERO CONTENT */

.hero-inner {

    position: relative;

    z-index: 3;

    width: 100%;

    padding-top: 100px;
    padding-bottom: 100px;

}


.hero-topline {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 70px;

    opacity: .65;

}


.hero-topline span {

    width: 45px;

    height: 1px;

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

}


.hero-topline small {

    font-size: 9px;

    letter-spacing: 3px;

}


/* HERO MAIN */

.hero-main {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

}


.hero-copy {

    max-width: 820px;

}


.hero-eyebrow {

    display: inline-block;

    margin-bottom: 25px;

    padding-right: 15px;

    border-right:
        2px solid #aab8ad;

    font-size: 13px;

    color:
        rgba(255,255,255,.72);

}


.hero-title {

    margin: 0;

    font-size:
        clamp(46px, 6.2vw, 88px);

    font-weight: 700;

    line-height: 1.22;

    letter-spacing:
        -2px;

}


.hero-title span {

    display: block;

    color:
        #b8c6bb;

}


.hero-title small {

    display: block;

    margin-top: 15px;

    font-size:
        .38em;

    font-weight: 400;

    color:
        rgba(255,255,255,.68);

    letter-spacing:
        0;

}


.hero-description {

    max-width: 650px;

    margin:
        35px 0 0;

    color:
        rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 2.2;

}


/* ACTIONS */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 38px;

}


.premium-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    min-width: 190px;

    padding: 15px 20px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform .35s var(--ease),
        box-shadow .35s ease,
        background .35s ease;

}


.premium-btn b {

    font-size: 18px;

    font-weight: 400;

    transition:
        transform .35s ease;

}


.premium-btn:hover {

    transform:
        translateY(-4px);

}


.premium-btn:hover b {

    transform:
        translateX(-5px);

}


.premium-btn-light {

    background:
        #fff;

    color:
        var(--dark);

}


.premium-btn-light:hover {

    box-shadow:
        0 18px 45px rgba(0,0,0,.20);

}


.premium-btn-dark {

    background:
        var(--dark);

    color:
        #fff;

}


.hero-text-link {

    color:
        rgba(255,255,255,.75);

    text-decoration: none;

    font-size: 12px;

    transition:
        color .3s ease;

}


.hero-text-link span {

    margin-right: 7px;

}


.hero-text-link:hover {

    color:
        #fff;

}


/* SIDE */

.hero-side {

    display: flex;

    align-items: flex-end;

    gap: 20px;

    margin-bottom: 15px;

}


.hero-side-line {

    width: 1px;

    height: 170px;

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

}


.hero-side-content {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.hero-side-content span {

    margin-bottom: 10px;

    font-size: 8px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.45);

}


.hero-side-content strong {

    font-size: 10px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.70);

}


/* SCROLL */

.hero-scroll-indicator {

    position: absolute;

    bottom: 35px;

    left: 50%;

    z-index: 5;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 13px;

}


.hero-scroll-indicator span {

    font-size: 8px;

    letter-spacing: 2px;

    opacity: .45;

}


.scroll-line {

    width: 50px;

    height: 1px;

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

    overflow: hidden;

}


.scroll-line i {

    display: block;

    width: 18px;

    height: 1px;

    background:
        #fff;

    animation:
        scrollLine 2s infinite;

}


@keyframes scrollLine {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(32px);
    }

    100% {
        transform: translateX(0);
    }

}


/* HERO NUMBER */

.hero-number {

    position: absolute;

    right: 35px;

    bottom: 35px;

    z-index: 5;

    font-size: 9px;

    letter-spacing: 2px;

    opacity: .35;

}


/* =====================================================
   STATEMENT
===================================================== */

.statement-section {

    padding:
        150px 0 120px;

    background:
        #f5f6f3;

}


.statement-grid {

    display: grid;

    grid-template-columns:
        180px 1fr;

    gap: 70px;

}


.statement-label {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.statement-label span {

    font-size: 12px;

    color:
        #809087;

}


.statement-label small {

    font-size: 8px;

    letter-spacing: 2px;

    color:
        #9ba69f;

}


.statement-content {

    max-width: 880px;

}


.statement-content h2 {

    margin:
        15px 0 25px;

    font-size:
        clamp(34px, 4.3vw, 60px);

    line-height: 1.5;

    color:
        var(--dark);

}


.statement-content h2 span {

    display: block;

    color:
        var(--green);

}


.statement-lead {

    max-width: 750px;

    margin: 0;

    color:
        #69756e;

    font-size: 15px;

    line-height: 2.3;

}


.minimal-link {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 38px;

    color:
        var(--dark);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

}


.minimal-link b {

    font-size: 19px;

    transition:
        transform .3s ease;

}


.minimal-link:hover b {

    transform:
        translateX(-6px);

}


/* VALUES */

.value-strip {

    display: grid;

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

    margin-top: 110px;

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

}


.value-item {

    padding:
        35px 35px 15px;

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

}


.value-item:last-child {

    border-left: 0;

}


.value-item span {

    display: block;

    margin-bottom: 25px;

    font-size: 9px;

    color:
        #9aa59e;

}


.value-item strong {

    display: block;

    margin-bottom: 10px;

    font-size: 18px;

    color:
        var(--dark);

}


.value-item p {

    max-width: 250px;

    margin: 0;

    color:
        #7a857e;

    font-size: 12px;

    line-height: 2;

}


/* =====================================================
   BUSINESS AREAS
===================================================== */

.areas-section {

    position: relative;

    padding:
        140px 0;

    overflow: hidden;

    background:
        var(--dark);

    color:
        #fff;

}


.areas-orb {

    position: absolute;

    width: 650px;
    height: 650px;

    right: -350px;
    top: -200px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 90px rgba(255,255,255,.012),
        0 0 0 180px rgba(255,255,255,.008);

}


.areas-heading {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 80px;

}


.light-label {

    color:
        rgba(255,255,255,.45);

}


.areas-heading h2 {

    margin:
        15px 0 0;

    font-size:
        clamp(42px, 5vw, 70px);

    line-height: 1.3;

}


.areas-heading h2 span {

    color:
        #aebdb0;

}


.areas-heading p {

    max-width: 500px;

    margin: 0;

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 2.2;

}


/* AREA ROW */

.areas-list {

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

}


.area-row {

    position: relative;

    display: grid;

    grid-template-columns:
        80px 1.4fr 1fr 60px;

    gap: 35px;

    align-items: center;

    padding:
        34px 0;

    border-bottom:
        1px solid rgba(255,255,255,.10);

    color: #fff;

    text-decoration: none;

    transition:
        padding .45s var(--ease),
        background .45s ease;

}


.area-row::before {

    content: "";

    position: absolute;

    inset:
        0 -30px;

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

    opacity: 0;

    transform:
        scaleY(.6);

    transition:
        opacity .4s ease,
        transform .4s var(--ease);

}


.area-row:hover::before {

    opacity: 1;

    transform:
        scaleY(1);

}


.area-number,
.area-title,
.area-row p,
.area-arrow {

    position: relative;

    z-index: 2;

}


.area-number {

    color:
        rgba(255,255,255,.30);

    font-size: 10px;

    letter-spacing: 1px;

}


.area-title h3 {

    margin: 0 0 7px;

    font-size: 22px;

    font-weight: 500;

}


.area-title span {

    font-size: 8px;

    letter-spacing: 1.8px;

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

}


.area-row p {

    margin: 0;

    color:
        rgba(255,255,255,.45);

    font-size: 12px;

    line-height: 1.9;

}


.area-arrow {

    width: 43px;
    height: 43px;

    display: flex;

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

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

    border-radius: 50%;

    font-size: 17px;

    transition:
        transform .35s ease,
        background .35s ease;

}


.area-row:hover .area-arrow {

    transform:
        rotate(45deg);

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

}


/* =====================================================
   NUMBERS
===================================================== */

.numbers-section {

    padding:
        130px 0;

    background:
        #f5f6f3;

}


.numbers-heading {

    max-width: 700px;

    margin-bottom: 70px;

}


.numbers-heading h2 {

    margin:
        15px 0 0;

    font-size:
        clamp(35px,4vw,55px);

    color:
        var(--dark);

}


.numbers-heading h2 span {

    color:
        var(--green);

}


.numbers-grid {

    display: grid;

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

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

}


.number-box {

    padding:
        45px 35px;

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

}


.number-box:last-child {

    border-left: 0;

}


.number-box .counter {

    display: block;

    font-size:
        clamp(55px,7vw,90px);

    font-weight: 600;

    line-height: 1;

    color:
        var(--dark);

    letter-spacing:
        -3px;

}


.number-box small {

    display: block;

    margin-top: 15px;

    color:
        #89938d;

    font-size: 8px;

    letter-spacing: 2px;

}


.number-box p {

    max-width: 220px;

    margin:
        15px 0 0;

    color:
        #727d76;

    font-size: 12px;

    line-height: 2;

}


/* =====================================================
   PRODUCT TEASER
===================================================== */

.product-teaser {

    padding:
        120px 0;

    background:
        #e8ede8;

    overflow: hidden;

}


.product-teaser-inner {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 80px;

}


.product-teaser-copy {

    max-width: 650px;

}


.product-teaser-copy h2 {

    margin:
        15px 0 20px;

    font-size:
        clamp(35px,4vw,58px);

    line-height: 1.45;

    color:
        var(--dark);

}


.product-teaser-copy h2 span {

    display: block;

    color:
        var(--green);

}


.product-teaser-copy p {

    max-width: 580px;

    margin-bottom: 35px;

    color:
        #68746c;

    font-size: 14px;

    line-height: 2.2;

}


/* VISUAL */

.product-teaser-visual {

    position: relative;

    height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.visual-ring {

    position: absolute;

    border:
        1px solid rgba(51,74,58,.12);

    border-radius: 50%;

}


.ring-one {

    width: 330px;
    height: 330px;

}


.ring-two {

    width: 470px;
    height: 470px;

}


.visual-card {

    position: relative;

    z-index: 2;

    width: 240px;
    height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 35px;

    background:
        var(--dark);

    color:
        #fff;

    box-shadow:
        0 35px 70px rgba(24,39,29,.20);

    transform:
        rotate(-4deg);

}


.visual-card span {

    font-size: 8px;

    letter-spacing: 3px;

    color:
        rgba(255,255,255,.45);

}


.visual-card strong {

    margin:
        20px 0 5px;

    font-size:
        95px;

    line-height: 1;

    font-weight: 500;

}


.visual-card small {

    font-size: 9px;

    letter-spacing: 2px;

    color:
        #aebdaf;

}


/* =====================================================
   FINAL CTA
===================================================== */

.final-cta {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--black);

    color:
        #fff;

}


.final-cta-bg {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 75% 50%,
            rgba(100,125,107,.18),
            transparent 35%
        );

}


.final-cta::after {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -180px;

    top: 50%;

    transform:
        translateY(-50%);

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

    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(255,255,255,.012),
        0 0 0 160px rgba(255,255,255,.008);

}


.final-cta-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

}


.final-cta .section-label {

    color:
        rgba(255,255,255,.42);

}


.final-cta h2 {

    margin:
        20px 0;

    font-size:
        clamp(48px,6vw,85px);

    line-height: 1.25;

}


.final-cta h2 span {

    display: block;

    color:
        #aebdaf;

}


.final-cta p {

    max-width: 560px;

    margin-bottom: 35px;

    color:
        rgba(255,255,255,.52);

    font-size: 14px;

    line-height: 2.2;

}


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

@media (max-width: 1000px) {

    .hero-side {

        display: none;

    }


    .statement-grid {

        grid-template-columns:
            100px 1fr;

        gap: 35px;

    }


    .areas-heading {

        grid-template-columns:
            1fr;

        gap: 30px;

    }


    .area-row {

        grid-template-columns:
            60px 1fr 50px;

    }


    .area-row p {

        display: none;

    }

}


@media (max-width: 700px) {

    .hero-inner {

        padding-top: 80px;

    }


    .hero-topline {

        margin-bottom: 45px;

    }


    .hero-title {

        letter-spacing:
            -1px;

    }


    .hero-description {

        font-size: 13px;

    }


    .hero-actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 20px;

    }


    .hero-scroll-indicator {

        display: none;

    }


    .hero-number {

        right: 20px;
        bottom: 20px;

    }


    .statement-section {

        padding:
            90px 0;

    }


    .statement-grid {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .statement-content h2 {

        font-size:
            34px;

    }


    .value-strip {

        grid-template-columns:
            1fr;

        margin-top: 70px;

    }


    .value-item {

        padding:
            25px 0;

        border-left: 0;

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

    }


    .value-item:last-child {

        border-bottom: 0;

    }


    .areas-section {

        padding:
            90px 0;

    }


    .areas-heading {

        margin-bottom: 50px;

    }


    .areas-heading h2 {

        font-size:
            45px;

    }


    .area-row {

        grid-template-columns:
            40px 1fr 42px;

        gap: 15px;

        padding:
            27px 0;

    }


    .area-title h3 {

        font-size:
            17px;

    }


    .area-title span {

        font-size:
            7px;

    }


    .numbers-section {

        padding:
            90px 0;

    }


    .numbers-grid {

        grid-template-columns:
            1fr;

    }


    .number-box {

        padding:
            35px 0;

        border-left: 0;

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

    }


    .number-box:last-child {

        border-bottom: 0;

    }


    .product-teaser {

        padding:
            90px 0;

    }


    .product-teaser-inner {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .product-teaser-visual {

        height: 380px;

    }


    .ring-two {

        width: 350px;
        height: 350px;

    }


    .ring-one {

        width: 260px;
        height: 260px;

    }


    .final-cta {

        min-height: 560px;

    }


    .final-cta h2 {

        font-size:
            48px;

    }

}


@media (max-width: 420px) {

    .hero-title {

        font-size:
            42px;

    }


    .hero-title small {

        font-size:
            .43em;

    }


    .premium-btn {

        width: 100%;

    }


    .hero-actions {

        width: 100%;

    }


    .statement-content h2 {

        font-size:
            31px;

    }


    .product-teaser-copy h2 {

        font-size:
            34px;

    }


    .final-cta h2 {

        font-size:
            42px;

    }

}