/* =====================================================
   TEXTILE IMPEX
   PROFESSIONAL ANIMATED WEBSITE
   BRAND COLORS
   ===================================================== */

:root {

    --cream: #f8e097;
    --brown: #70411f;
    --orange: #f1942f;
    --peach: #f2ad61;
    --red: #b94923;

    --white: #fffdf8;
    --dark: #2d2118;
    --muted: #765f4c;

    --shadow:
        0 20px 55px rgba(112, 65, 31, 0.15);

}


/* RESET */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    background: var(--white);

    color: var(--dark);

    line-height: 1.7;

    overflow-x: hidden;

}


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


ul {
    list-style: none;
}


.container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.topbar {

    background: var(--brown);

    color: white;

    padding: 8px 0;

    font-size: 13px;

}


.topbar-content {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    flex-wrap: wrap;

}


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

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255, 253, 248, .93);

    backdrop-filter: blur(15px);

    border-bottom:
        1px solid rgba(112, 65, 31, .12);

}


.nav-container {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--brown);

    font-weight: 900;

    letter-spacing: .5px;

}


.logo-icon {

    width: 47px;

    height: 47px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--orange)
        );

    box-shadow:
        0 10px 25px
        rgba(185, 73, 35, .25);

}


.logo small {

    display: block;

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--muted);

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 24px;

}


.nav-links a {

    color: var(--brown);

    font-weight: 750;

    position: relative;

    padding: 7px 0;

}


.nav-links a:not(.btn)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    border-radius: 10px;

    background: var(--orange);

    transition: .3s;

}


.nav-links a:hover::after {

    width: 100%;

}


.menu-btn {

    display: none;

    border: none;

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: var(--cream);

    color: var(--brown);

    font-size: 22px;

    cursor: pointer;

}


/* =====================================================
   BUTTONS
   ===================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 21px;

    border-radius: 13px;

    border: 2px solid transparent;

    font-weight: 850;

    cursor: pointer;

    transition:
        transform .3s,
        box-shadow .3s,
        background .3s;

}


.btn-primary {

    color: white !important;

    background: var(--red);

    box-shadow:
        0 12px 28px
        rgba(185, 73, 35, .25);

}


.btn-primary:hover {

    transform:
        translateY(-4px);

    background:
        var(--brown);

    box-shadow:
        0 18px 35px
        rgba(112, 65, 31, .25);

}


.btn-outline {

    border-color: var(--brown);

    color: var(--brown);

}


.btn-outline:hover {

    color: white;

    background: var(--brown);

    transform:
        translateY(-4px);

}


.btn-light {

    background: white;

    color: var(--brown);

}


.btn-light:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.15);

}


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

.hero {

    min-height: 680px;

    display: grid;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(241,148,47,.35),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #fffdf8,
            var(--cream)
        );

}


.hero-grid {

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 65px;

    align-items: center;

    position: relative;

    z-index: 2;

}


.hero h1 {

    color: var(--brown);

    font-size:
        clamp(2.8rem, 6vw, 5.5rem);

    line-height: 1;

    letter-spacing: -3px;

}


.hero h1 span {

    display: block;

    color: var(--red);

}


.hero-text {

    color: var(--muted);

    font-size: 1.12rem;

    max-width: 700px;

    margin:
        22px 0 30px;

}


.badge {

    display: inline-block;

    padding: 7px 14px;

    border-radius: 50px;

    background:
        rgba(112,65,31,.09);

    color: var(--brown);

    font-weight: 850;

    margin-bottom: 17px;

}


.hero-buttons {

    display: flex;

    gap: 13px;

    flex-wrap: wrap;

}


.hero-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.decoration-one {

    width: 430px;

    height: 430px;

    right: -180px;

    top: -140px;

    background:
        rgba(241,148,47,.28);

    animation:
        floating 8s ease-in-out infinite;

}


.decoration-two {

    width: 330px;

    height: 330px;

    left: -180px;

    bottom: -150px;

    background:
        rgba(185,73,35,.18);

    animation:
        floating 10s ease-in-out infinite reverse;

}


/* =====================================================
   HERO FABRIC ANIMATION
   ===================================================== */

.hero-card {

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

    border:
        1px solid rgba(112,65,31,.15);

    padding: 25px;

    border-radius: 30px;

    box-shadow: var(--shadow);

    transform: rotate(2deg);

    animation:
        cardEntrance 1s ease both;

}


.fabric-animation {

    height: 370px;

    border-radius: 23px;

    position: relative;

    overflow: hidden;

    background:

        repeating-linear-gradient(
            45deg,
            var(--red) 0 13px,
            var(--orange) 13px 26px,
            var(--cream) 26px 39px,
            var(--brown) 39px 52px
        );

}


.fabric-animation::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.22) 0 3px,
            transparent 3px 10px
        );

    animation:
        fabricMove 5s linear infinite;

}


.hero-card-content {

    padding-top: 17px;

}


.hero-card-content h3 {

    color: var(--brown);

}


.hero-card-content p {

    color: var(--muted);

}


/* =====================================================
   STATS
   ===================================================== */

.stats {

    display: grid;

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

    gap: 13px;

    margin-top: 28px;

}


.stat-box {

    background: white;

    padding: 17px;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 8px 25px
        rgba(112,65,31,.1);

}


.stat-box strong {

    display: block;

    color: var(--red);

    font-size: 1.5rem;

}


/* =====================================================
   SECTIONS
   ===================================================== */

.section {

    padding:
        95px 0;

}


.section-light {

    background:
        linear-gradient(
            180deg,
            #fff8e9,
            #fffdf8
        );

}


.section-heading {

    max-width: 760px;

    margin-bottom: 45px;

}


.section-heading h2 {

    font-size:
        clamp(2rem,4vw,3.25rem);

    color: var(--brown);

    line-height: 1.1;

    margin-bottom: 14px;

}


.section-heading p {

    color: var(--muted);

    font-size: 1.08rem;

}


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

.card-grid {

    display: grid;

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

    gap: 22px;

}


.two-column {

    display: grid;

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

    gap: 40px;

    align-items: center;

}


/* =====================================================
   CARDS
   ===================================================== */

.info-card {

    background: white;

    border:
        1px solid rgba(112,65,31,.1);

    padding: 30px;

    border-radius: 23px;

    box-shadow:
        0 12px 38px
        rgba(112,65,31,.08);

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

}


.info-card:hover {

    transform:
        translateY(-10px)
        scale(1.01);

    box-shadow:
        var(--shadow);

}


.info-card h3 {

    color: var(--brown);

    margin-bottom: 8px;

}


.info-card p {

    color: var(--muted);

}


.icon,
.number-icon {

    width: 55px;

    height: 55px;

    border-radius: 16px;

    display: grid;

    place-items: center;

    background: var(--cream);

    color: var(--brown);

    font-weight: 900;

    margin-bottom: 18px;

}


/* =====================================================
   FABRIC LARGE
   ===================================================== */

.fabric-large {

    height: 430px;

    border-radius: 25px;

    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow);

}


.fabric-pattern {

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            45deg,
            var(--red) 0 15px,
            var(--orange) 15px 30px,
            var(--peach) 30px 45px,
            var(--cream) 45px 60px,
            var(--brown) 60px 75px
        );

    animation:
        fabricMove 8s linear infinite;

}


.fabric-label {

    position: absolute;

    left: 30px;

    bottom: 30px;

    padding: 12px 18px;

    border-radius: 12px;

    color: white;

    background:
        rgba(112,65,31,.8);

    font-weight: 900;

    letter-spacing: 4px;

}


/* =====================================================
   CHECK LIST
   ===================================================== */

.check-list {

    display: grid;

    gap: 12px;

    margin:
        18px 0 25px;

}


.check-list li {

    color: var(--dark);

}


.check-list li::before {

    content: "✓";

    display: inline-grid;

    place-items: center;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    margin-right: 9px;

    background: var(--cream);

    color: var(--brown);

    font-weight: 900;

}


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

.page-hero {

    padding:
        110px 0 90px;

    background:

        linear-gradient(
            135deg,
            var(--cream),
            #fffdf8
        );

    position: relative;

    overflow: hidden;

}


.page-hero::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    right: -100px;

    top: -100px;

    background:
        rgba(241,148,47,.2);

    animation:
        floating 7s ease-in-out infinite;

}


.page-hero h1 {

    font-size:
        clamp(2.7rem,5vw,4.7rem);

    line-height: 1;

    color: var(--brown);

    position: relative;

    z-index: 2;

}


.page-hero p {

    max-width: 750px;

    color: var(--muted);

    font-size: 1.15rem;

    margin-top: 20px;

    position: relative;

    z-index: 2;

}


.breadcrumb {

    color: var(--muted);

    font-weight: 750;

    display: block;

    margin-bottom: 13px;

}


/* =====================================================
   PRODUCTS
   ===================================================== */

.product-grid {

    display: grid;

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

    gap: 23px;

}


.product-card {

    overflow: hidden;

    background: white;

    border-radius: 23px;

    border:
        1px solid rgba(112,65,31,.1);

    box-shadow:
        0 12px 38px
        rgba(112,65,31,.08);

    transition: .4s;

}


.product-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow);

}


.product-image {

    height: 215px;

    display: grid;

    place-items: center;

    color: white;

    font-size: 2.4rem;

    font-weight: 900;

    letter-spacing: 2px;

}


.fabric-one {

    background:
        linear-gradient(
            135deg,
            var(--brown),
            var(--red)
        );

}


.fabric-two {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--peach)
        );

}


.fabric-three {

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--brown)
        );

}


.product-content {

    padding: 25px;

}


.product-content p {

    color: var(--muted);

}


/* =====================================================
   SERVICES
   ===================================================== */

.service-grid {

    display: grid;

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

    gap: 22px;

}


.number-icon {

    background:
        var(--red);

    color: white;

}


/* =====================================================
   TEAM
   ===================================================== */

.team-grid {

    display: grid;

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

    gap: 25px;

}


.team-card {

    background: white;

    border-radius: 25px;

    overflow: hidden;

    border:
        1px solid rgba(112,65,31,.12);

    box-shadow:
        0 15px 40px
        rgba(112,65,31,.09);

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

}


.team-card:hover {

    transform:
        translateY(-12px);

    box-shadow:
        var(--shadow);

}


.team-avatar {

    height: 245px;

    display: grid;

    place-items: center;

    color: white;

    font-size: 4rem;

    font-weight: 900;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--brown),
            var(--red),
            var(--orange)
        );

}


.team-avatar::before {

    content: "";

    position: absolute;

    inset: 20px;

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

    border-radius: 20px;

    animation:
        avatarPulse 3s ease-in-out infinite;

}


.team-avatar-two {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--peach),
            var(--brown)
        );

}


.team-avatar-three {

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--brown),
            var(--orange)
        );

}


.team-content {

    padding: 27px;

}


.team-role {

    color: var(--red);

    font-size: .8rem;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.team-content h3 {

    color: var(--brown);

    font-size: 1.4rem;

    margin:
        5px 0 8px;

}


.team-content p {

    color: var(--muted);

}


.team-actions {

    display: flex;

    gap: 8px;

    margin-top: 18px;

}


.small-btn {

    padding:
        9px 13px;

    border-radius: 10px;

    background: var(--cream);

    color: var(--brown);

    font-weight: 800;

    transition: .3s;

}


.small-btn:hover {

    background: var(--red);

    color: white;

    transform:
        translateY(-3px);

}


.team-highlight {

    margin-top: 20px;

    padding: 10px;

    border-radius: 10px;

    background:
        #f8e09755;

    color: var(--brown);

    text-align: center;

    font-size: .8rem;

    font-weight: 900;

    letter-spacing: 1px;

}


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

.contact-list {

    display: grid;

    gap: 20px;

    margin-top: 30px;

}


.contact-item {

    display: flex;

    gap: 15px;

    align-items: flex-start;

}


.contact-item .icon {

    flex:
        0 0 50px;

    margin: 0;

}


.contact-item h3 {

    color: var(--brown);

}


.contact-item p {

    color: var(--muted);

}


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

.quote-form-card {

    background: white;

    padding: 32px;

    border-radius: 24px;

    box-shadow: var(--shadow);

    border:
        1px solid rgba(112,65,31,.1);

}


.form-group {

    display: grid;

    gap: 7px;

    margin-bottom: 17px;

}


.form-group label {

    color: var(--brown);

    font-weight: 800;

}


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

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    border:
        1px solid
        rgba(112,65,31,.22);

    background: #fffdf9;

    outline: none;

    font: inherit;

    transition: .25s;

}


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

    border-color: var(--orange);

    box-shadow:
        0 0 0 4px
        rgba(241,148,47,.13);

}


.form-group textarea {

    min-height: 150px;

    resize: vertical;

}


.process-list {

    display: grid;

    gap: 25px;

    margin-top: 25px;

}


.process-list li {

    padding-left: 20px;

    border-left:
        4px solid
        var(--orange);

}


.process-list strong {

    color: var(--brown);

    display: block;

    margin-bottom: 5px;

}


.process-list p {

    color: var(--muted);

}


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

.cta-section {

    padding:
        90px 0;

    text-align: center;

    color: white;

    background:

        linear-gradient(
            135deg,
            var(--brown),
            var(--red)
        );

    position: relative;

    overflow: hidden;

}


.cta-section::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    right: -120px;

    top: -180px;

    background:
        rgba(241,148,47,.3);

    animation:
        floating 8s ease-in-out infinite;

}


.cta-section h2 {

    color: white;

}


.cta-section p {

    max-width: 650px;

    margin:
        15px auto 25px;

    color: #f8e097;

}


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

.footer {

    background:
        var(--brown);

    color:
        var(--cream);

    padding:
        55px 0 20px;

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    gap: 40px;

}


.footer h3 {

    color: white;

    margin-bottom: 15px;

}


.footer p,
.footer a {

    color:
        #ead8b9;

}


.footer a:hover {

    color: white;

}


.footer ul {

    display: grid;

    gap: 8px;

}


.contact-footer li {

    color:
        #ead8b9;

}


.footer-bottom {

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

    margin-top: 35px;

    padding-top: 18px;

    font-size: .9rem;

}


/* =====================================================
   ANIMATIONS
   ===================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}


.delay-1 {

    transition-delay:
        .12s;

}


.delay-2 {

    transition-delay:
        .24s;

}


@keyframes floating {

    0%,100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(25px)
            rotate(10deg);

    }

}


@keyframes cardEntrance {

    from {

        opacity: 0;

        transform:
            translateY(50px)
            rotate(8deg);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            rotate(2deg);

    }

}


@keyframes fabricMove {

    from {

        background-position:
            0 0;

    }

    to {

        background-position:
            100px 100px;

    }

}


@keyframes avatarPulse {

    0%,100% {

        transform:
            scale(1);

        opacity: 1;

    }

    50% {

        transform:
            scale(.95);

        opacity: .55;

    }

}


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

@media(max-width: 900px) {

    .menu-btn {

        display: block;

    }


    .nav-links {

        display: none;

        position: absolute;

        left: 0;

        right: 0;

        top: 78px;

        background:
            var(--white);

        padding:
            20px 4%;

        flex-direction:
            column;

        align-items:
            flex-start;

        box-shadow:
            0 18px 30px
            rgba(0,0,0,.08);

    }


    .nav-links.open {

        display: flex;

    }


    .hero-grid,
    .two-column {

        grid-template-columns:
            1fr;

    }


    .card-grid,
    .product-grid,
    .service-grid,
    .team-grid {

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

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media(max-width:600px) {

    .topbar-content {

        justify-content:
            center;

        text-align:
            center;

    }


    .hero {

        min-height:
            auto;

        padding:
            80px 0;

    }


    .hero h1 {

        letter-spacing:
            -2px;

    }


    .card-grid,
    .product-grid,
    .service-grid,
    .team-grid,
    .stats,
    .footer-grid {

        grid-template-columns:
            1fr;

    }


    .section {

        padding:
            70px 0;

    }


    .fabric-animation {

        height:
            280px;

    }


    .fabric-large {

        height:
            300px;

    }

}