:root {
            --n: #071b3b;
            --b: #0d315e;
            --g: #c99b42;
            --g2: #e7c77d;
            --iv: #fbfaf7;
            --p: #f3f0e8;
            --t: #14233d;
            --m: #667085;
            --l: #e7e2d8
        }

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

        body {
            font-family: Manrope, Arial, sans-serif;
            color: var(--t);
            background: var(--iv);
            overflow-x: hidden
        }

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

        @keyframes load {
            to {
                transform: translateX(200%)
            }
        }

        .pre {
            position: fixed;
            inset: 0;
            background: var(--n);
            z-index: 9999;
            display: grid;
            place-items: center;
            color: #fff
        }

        .pre div {
            text-align: center
        }

        .pre strong {
            font: 600 46px 'Playfair Display';
            letter-spacing: 5px
        }

        .bar {
            height: 38px;
            background: #04152f;
            color: #dbe3ef;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            letter-spacing: 2px
        }

        .bar b {
            color: var(--g2);
            margin: 0 8px
        }

        header {
            position: fixed;
            top: 38px;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 15px 4.5vw;
            transition: .4s
        }

        header.sc {
            top: 0;
            background: #071b3bee;
            backdrop-filter: blur(16px);
            box-shadow: 0 10px 35px #0002
        }

        .nav {
            max-width: 1440px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .brand {
            display: flex;
            gap: 12px;
            align-items: center;
            color: #fff
        }

        .mark {
            width: 48px;
            height: 48px;
            border: 1px solid #e7c77d99;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font: 700 21px Georgia;
            position: relative
        }

        .mark:after {
            content: '';
            position: absolute;
            width: 35px;
            height: 2px;
            background: var(--g);
            transform: rotate(-25deg)
        }

        .bn {
            font: 700 20px 'Playfair Display';
            letter-spacing: 1.5px
        }

        .bs {
            font-size: 8px;
            letter-spacing: 3px;
            color: var(--g2)
        }

        nav {
            display: flex;
            gap: 25px;
            align-items: center;
            color: #fff;
            font-size: 12px;
            font-weight: 600
        }

        nav a {
            opacity: .8
        }

        nav a:hover {
            opacity: 1;
            color: var(--g2)
        }

        .navcta {
            padding: 11px 17px;
            border: 1px solid #e7c77d99;
            border-radius: 99px;
            opacity: 1 !important
        }

        .hamb {
            display: none;
            background: none;
            border: 0;
            color: #fff;
            font-size: 25px
        }

        .hero {
            min-height: 100vh;
            padding: 145px 4.5vw 70px;
            background: radial-gradient(circle at 75% 42%, #1d4a7b, #0c2c55 32%, #071b3b 72%);
            color: #fff;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center
        }

        .hero:before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: .4;
            background: linear-gradient(#fff1 1px, transparent 1px), linear-gradient(90deg, #fff1 1px, transparent 1px);
            background-size: 48px 48px
        }

        .hero:after {
            content: '';
            position: absolute;
            width: 700px;
            height: 700px;
            right: -250px;
            top: 5%;
            border-radius: 50%;
            background: #e7c77d12;
            filter: blur(10px)
        }

        .hi {
            width: min(1440px, 100%);
            margin: auto;
            display: grid;
            grid-template-columns: 1.03fr .97fr;
            gap: 50px;
            align-items: center;
            position: relative;
            z-index: 2
        }

        .ey {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--g2)
        }

        h1 {
            font: 600 clamp(55px, 7.5vw, 108px)/.9 'Playfair Display';
            letter-spacing: -4px;
            margin-top: 18px
        }

        h1 em {
            font-style: normal;
            color: #d9b15d
        }

        .desc {
            font-size: 17px;
            line-height: 1.85;
            color: #d1dbea;
            max-width: 650px;
            margin: 30px 0
        }

        .buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 15px 22px;
            border-radius: 99px;
            font-size: 13px;
            font-weight: 800
        }

        .primary {
            background: linear-gradient(135deg, #e5c16c, #aa7927);
            color: #081a37;
            box-shadow: 0 16px 45px #c89a4233
        }

        .outline {
            border: 1px solid #fff4;
            color: #fff
        }

        .art {
            height: 620px;
            position: relative;
            perspective: 1400px
        }

        .ring {
            position: absolute;
            border: 1px solid #e7c77d4d;
            border-radius: 50%;
            width: 530px;
            height: 530px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotateX(65deg) rotateZ(-15deg)
        }

        .ring.r2 {
            width: 390px;
            height: 390px;
            border-color: #fff2
        }

        .cloth {
            position: absolute;
            width: 255px;
            height: 370px;
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid #fff3;
            box-shadow: 28px 40px 90px #0007
        }

        .cloth:before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(90deg, #fff2 0 2px, transparent 2px 7px)
        }

        .cloth:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(140deg, #fff3, transparent 35%, #0003)
        }

        .a {
            background: linear-gradient(145deg, #f1eee6, #8b8375);
            left: 20%;
            top: 18%;
            transform: rotateY(-18deg) rotateZ(-7deg)
        }

        .bb {
            background: linear-gradient(145deg, #234b77, #061b39);
            left: 45%;
            top: 29%;
            transform: rotateY(20deg) rotateZ(8deg)
        }

        .tag {
            position: absolute;
            z-index: 2;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: #051630c7;
            padding: 12px;
            border-radius: 11px;
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase
        }

        .thread {
            position: absolute;
            width: 105px;
            height: 190px;
            right: 8%;
            bottom: 8%;
            border-radius: 48% 48% 15% 15%;
            background: repeating-linear-gradient(90deg, #0a2b58 0 5px, #1b4b7b 5px 9px);
            box-shadow: 20px 30px 60px #0006;
            transform: rotate(-8deg)
        }

        .thread:before,
        .thread:after {
            content: '';
            position: absolute;
            left: 7px;
            right: 7px;
            height: 27px;
            border-radius: 50%;
            background: #c99b40
        }

        .thread:before {
            top: -7px
        }

        .thread:after {
            bottom: -7px
        }

        .marq {
            background: #fff;
            border-block: 1px solid var(--l);
            overflow: hidden;
            white-space: nowrap
        }

        .track {
            display: inline-flex;
            gap: 42px;
            padding: 18px 0;
            animation: mq 28s linear infinite;
            color: #30415b;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 3px
        }

        .track i {
            color: var(--g);
            font-style: normal
        }

        @keyframes mq {
            to {
                transform: translateX(-50%)
            }
        }

        .sec {
            padding: 130px 4.5vw
        }

        .con {
            max-width: 1440px;
            margin: auto
        }

        .head {
            max-width: 850px;
            margin-bottom: 58px
        }

        .head h2 {
            font: 600 clamp(40px, 5vw, 72px)/1.04 'Playfair Display';
            margin-top: 13px;
            letter-spacing: -2px
        }

        .head p {
            color: var(--m);
            line-height: 1.85;
            margin-top: 18px;
            max-width: 720px
        }

        .intro {
            background: var(--iv)
        }

        .ig {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 85px;
            align-items: center
        }

        .photo {
            height: 590px;
            border-radius: 28px;
            background: url('https://images.unsplash.com/photo-1601924994987-69e26d50dc26?auto=format&fit=crop&w=1300&q=85') center/cover;
            position: relative;
            box-shadow: 0 30px 80px #071b3b29
        }

        .photo:after {
            content: '';
            position: absolute;
            inset: 18px;
            border: 1px solid #fff9;
            border-radius: 20px
        }

        .badge {
            position: absolute;
            z-index: 2;
            bottom: 25px;
            left: 25px;
            background: #071b3be8;
            padding: 20px 24px;
            border-radius: 16px;
            color: #fff
        }

        .badge b {
            font: 600 27px 'Playfair Display';
            color: var(--g2)
        }

        .badge span {
            display: block;
            font-size: 10px;
            letter-spacing: 2px;
            margin-top: 4px
        }

        .introcopy h3 {
            font: 500 34px 'Playfair Display';
            margin-bottom: 18px
        }

        .introcopy>p {
            color: var(--m);
            line-height: 1.9
        }

        .checks {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-top: 28px
        }

        .check {
            padding: 17px;
            background: #fff;
            border: 1px solid var(--l);
            border-radius: 13px;
            font-size: 12px;
            font-weight: 700
        }

        .check span {
            color: var(--g);
            margin-right: 7px
        }

        .nums {
            background: #fff;
            border-block: 1px solid var(--l)
        }

        .ng {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }

        .num {
            text-align: center;
            padding: 45px 20px;
            border-right: 1px solid var(--l)
        }

        .num:last-child {
            border: 0
        }

        .num strong {
            display: block;
            font: 600 45px 'Playfair Display';
            color: var(--n)
        }

        .num small {
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--m)
        }

        .collection {
            background: var(--p)
        }

        .gallery {
            display: grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            grid-template-rows: 310px 310px;
            gap: 18px
        }

        .tile {
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            background-size: cover;
            background-position: center;
            box-shadow: 0 18px 50px #071b3b1a
        }

        .tile:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 35%, #05142bdd)
        }

        .tile:nth-child(1) {
            grid-row: span 2;
            background-image: url('./image/banner.jpg')
        }

        .tile:nth-child(2) {
            background-image: url('./image/designer-textile.jpg')
        }

        .tile:nth-child(3) {
            background-image: url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1000&q=85')
        }

        .tile:nth-child(4) {
            background-image: url('./image/Export-Quality.jpg')
        }

        .tile:nth-child(5) {
            background-image: url('./image/Wholesale-fabric.jpg')
        }

        .tt {
            position: absolute;
            z-index: 2;
            left: 22px;
            bottom: 20px;
            color: #fff
        }

        .tt small {
            font-size: 9px;
            letter-spacing: 2px;
            color: var(--g2);
            text-transform: uppercase
        }

        .tt h3 {
            font: 500 27px 'Playfair Display';
            margin-top: 5px
        }

        .services {
            background: #fff
        }

        .sg {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

        .service {
            min-height: 285px;
            padding: 32px;
            border: 1px solid var(--l);
            border-radius: 22px;
            background: linear-gradient(145deg, #fff, #f8f5ee);
            transition: .4s;
            position: relative;
            overflow: hidden
        }

        .service:hover {
            transform: translateY(-9px);
            box-shadow: 0 25px 55px #071b3b1a
        }

        .sn {
            font: 600 16px 'Playfair Display';
            color: var(--g)
        }

        .service h3 {
            font: 500 29px 'Playfair Display';
            margin: 28px 0 12px
        }

        .service p {
            color: var(--m);
            font-size: 13px;
            line-height: 1.8
        }

        .feature {
            background: var(--n);
            color: #fff
        }

        .fg {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 80px;
            align-items: center
        }

        .fphoto {
            height: 560px;
            border-radius: 28px;
            background: url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?auto=format&fit=crop&w=1300&q=85') center/cover
        }

        .feature .head p {
            color: #c1cbd9
        }

        .points {
            display: grid;
            gap: 15px
        }

        .point {
            display: flex;
            gap: 16px;
            padding: 20px 0;
            border-bottom: 1px solid #fff2
        }

        .point b {
            font: 500 20px 'Playfair Display';
            color: var(--g2)
        }

        .point p {
            font-size: 13px;
            line-height: 1.7;
            color: #bcc7d7;
            margin-top: 4px
        }

        .process {
            background: var(--iv)
        }

        .pg {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-block: 1px solid var(--l)
        }

        .step {
            padding: 36px 25px;
            min-height: 245px;
            border-right: 1px solid var(--l)
        }

        .step:last-child {
            border: 0
        }

        .step strong {
            font: 600 38px 'Playfair Display';
            color: var(--g)
        }

        .step h3 {
            font: 500 25px 'Playfair Display';
            margin: 22px 0 10px
        }

        .step p {
            font-size: 13px;
            color: var(--m);
            line-height: 1.75
        }

        .promise {
            background: #fff
        }

        .qg {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .quote {
            padding: 35px;
            border: 1px solid var(--l);
            border-radius: 22px;
            background: var(--iv)
        }

        .stars {
            color: var(--g);
            letter-spacing: 3px
        }

        .quote p {
            font: 500 18px/1.7 'Playfair Display';
            margin: 22px 0;
            color: #22324c
        }

        .quote small {
            font-size: 10px;
            letter-spacing: 1px;
            color: var(--m)
        }

        .ctaSec {
            padding: 110px 4.5vw;
            text-align: center;
            background: linear-gradient(135deg, #f4eee0, #fff)
        }

        .ctaSec .head {
            margin: 0 auto 28px
        }

        .contact {
            background: #061a3a;
            color: #fff
        }

        .cg {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 70px
        }

        .contact .head p {
            color: #bac6d6
        }

        .details {
            display: grid;
            gap: 15px;
            margin-top: 30px
        }

        .ci {
            display: flex;
            gap: 15px;
            align-items: flex-start
        }

        .ico {
            width: 44px;
            height: 44px;
            border: 1px solid #e7c77d66;
            border-radius: 12px;
            display: grid;
            place-items: center;
            color: var(--g2);
            flex: none
        }

        .ci small {
            display: block;
            color: #9facbf;
            font-size: 10px;
            letter-spacing: 1px;
            margin-bottom: 5px
        }

        .ci a,
        .ci span {
            font-size: 14px;
            line-height: 1.7
        }

        .ccard {
            min-height: 450px;
            border-radius: 28px;
            padding: 45px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            position: relative;
            overflow: hidden;
            background: url('https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?auto=format&fit=crop&w=1200&q=85') center/cover
        }

        .ccard:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 15%, #030f23f0)
        }

        .ccard>* {
            position: relative;
            z-index: 2
        }

        .ccard h3 {
            font: 500 44px/1.05 'Playfair Display'
        }

        .ccard p {
            margin-top: 12px;
            color: var(--g2)
        }

        footer {
            background: #04152f;
            color: #9eabbf;
            padding: 28px 4.5vw;
            font-size: 11px
        }

        .foot {
            max-width: 1440px;
            margin: auto;
            display: flex;
            justify-content: space-between
        }

        .gold {
            color: var(--g2)
        }

        .rv {
            opacity: 0;
            transform: translateY(45px)
        }

        @media(max-width:950px) {
            nav {
                display: none
            }

            .hamb {
                display: block
            }

            .hi,
            .ig,
            .fg,
            .cg {
                grid-template-columns: 1fr
            }

            .hero-art {
                height: 500px
            }

            .ng {
                grid-template-columns: 1fr 1fr
            }

            .num:nth-child(2) {
                border-right: 0
            }

            .gallery {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 300px 300px
            }

            .tile:nth-child(1) {
                grid-row: auto
            }

            .sg,
            .qg {
                grid-template-columns: 1fr 1fr
            }

            .pg {
                grid-template-columns: 1fr 1fr
            }

            .step {
                border-bottom: 1px solid var(--l)
            }

            .step:nth-child(2) {
                border-right: 0
            }
        }

        @media(max-width:600px) {
            .bar {
                font-size: 8px;
                letter-spacing: 1px
            }

            .brand-name {
                font-size: 17px
            }

            .bs {
                font-size: 7px
            }

            .hero h1 {
                font-size: 54px;
                letter-spacing: -2px
            }

            .desc {
                font-size: 15px
            }

            .hero-art {
                height: 390px
            }

            .cloth {
                width: 190px;
                height: 275px
            }

            .a {
                left: 7%
            }

            .bb {
                left: 38%
            }

            .ring {
                width: 350px;
                height: 350px
            }

            .ring.r2 {
                width: 270px;
                height: 270px
            }

            .thread {
                width: 75px;
                height: 140px;
                right: 0
            }

            .sec {
                padding: 90px 5vw
            }

            .photo,
            .fphoto {
                height: 430px
            }

            .checks,
            .sg,
            .qg,
            .pg,
            .gallery {
                grid-template-columns: 1fr
            }

            .gallery {
                grid-template-rows: 300px 240px 240px 240px
            }

            .tile:nth-child(1) {
                grid-row: auto
            }

            .ng {
                grid-template-columns: 1fr 1fr
            }

            .num {
                padding: 32px 10px
            }

            .num strong {
                font-size: 35px
            }

            .step {
                border-right: 0 !important
            }

            .ccard {
                min-height: 360px;
                padding: 30px
            }

            .ccard h3 {
                font-size: 36px
            }

            .foot {
                flex-direction: column;
                text-align: center;
                gap: 8px
            }
        }