/* =========================================================
   HOUSE OF WOVNLY - GLOBAL STYLES
   Figma Reference: 1920px Desktop
========================================================= */

:root {
    --wovnly-primary: #8e5c55;
    --wovnly-primary-dark: #704640;
    --wovnly-bg: #f9f3ed;
    --wovnly-white: #ffffff;
    --wovnly-black: #000000;
    --wovnly-text: #222222;

    --font-playfair: "Playfair Display", serif;
    --font-poppins: "Poppins", sans-serif;
    --font-almarai: "Almarai", sans-serif;
    --font-quattrocento: "Quattrocento", serif;
    --font-passions: "Passions Conflict", cursive;
    --font-inter: "Inter", sans-serif;

    --container-width: 1680px;

    --transition: all 0.3s ease;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--wovnly-white);
    color: var(--wovnly-black);
    font-family: var(--font-poppins);
    font-weight: 400;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

button,
input,
textarea,
select {
    font-family: inherit;
}

button {
    border: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

/* =========================================================
   COMMON
========================================================= */

.wovnly-container {
    width: min(100% - 80px, var(--container-width));
    margin: 0 auto;
}

.wovnly-section {
    position: relative;
    width: 100%;
}

.wovnly-heading {
    margin: 0;
    color: var(--wovnly-primary);
    font-family: var(--font-playfair);
    font-style: italic;
    font-weight: 400;
}

.wovnly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--wovnly-primary);
    color: var(--wovnly-white);

    border-radius: 10px;

    font-family: var(--font-playfair);
    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition: var(--transition);
}

.container {
    max-width: var(--container-width);
    padding: 0 3%;
}

.wovnly-btn:hover {
    background: var(--wovnly-primary-dark);
    color: var(--wovnly-white);
}

/* =========================================================
   PRE HEADER
   Figma: 43px
========================================================= */

.wovnly-pre-header {
    width: 100%;
    height: 43px;

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

    background: var(--wovnly-primary);
    color: var(--wovnly-white);

    overflow: hidden;
}

.wovnly-pre-header-text {
    margin: 0;

    font-family: var(--font-almarai);
    font-size: 16px;
    font-weight: 400;
    line-height: 46px;

    white-space: nowrap;
}

/* =========================================================
   MAIN HEADER
   Figma: 122px
========================================================= */

.wovnly-header {
    width: 100%;
    height: 100px;

    background: var(--wovnly-white);

    position: relative;
    z-index: 1000;
}

.wovnly-header-inner {
    height: 100%;

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

/* Logo */

.wovnly-logo {
    width: 298px;
    height: 70px;

    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wovnly-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Navigation */

.wovnly-navigation {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
}

.wovnly-navigation ul {
    display: flex;
    align-items: center;
    gap: 42px;
}

.wovnly-navigation a {
    position: relative;

    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;

    color: var(--wovnly-black);

    white-space: nowrap;
}

.wovnly-navigation a:hover,
.wovnly-navigation a.active {
    color: var(--wovnly-primary);
}

.wovnly-navigation a.active {
    font-weight: 600;
}

/* Let's Connect */

.wovnly-header-btn {
    width: 150px;
    height: 45px;

    flex-shrink: 0;

    border-radius: 10px;

    font-family: var(--font-playfair);
    font-size: 19px;
    font-weight: 400;
    line-height: 36.061px;

    color: var(--wovnly-white);
    background: var(--wovnly-primary);

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

    white-space: nowrap;
}

.wovnly-header-btn:hover {
    background: var(--wovnly-primary-dark);
    color: var(--wovnly-white);
}

/* Mobile Menu Button */

.wovnly-mobile-toggle {
    display: none;

    width: 45px;
    height: 45px;

    background: transparent;
    cursor: pointer;
}

.wovnly-mobile-toggle span {
    display: block;

    width: 28px;
    height: 2px;

    margin: 6px auto;

    background: var(--wovnly-primary);
}


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

.wovnly-nav-dropdown {
    position: relative;
}


/* Dropdown arrow */

.wovnly-dropdown-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}


.wovnly-dropdown-link i {
    font-size: 12px;
    transition: transform .3s ease;
}


/* Dropdown */

.wovnly-dropdown-menu {

    position: absolute;

    top: calc(100% + 18px);

    left: 50%;

    min-width: 205px;

    padding: 12px 0;

    background: #fff;

    border: 1px solid rgba(153, 99, 93, .12);

    box-shadow:
        0 15px 40px rgba(50, 35, 30, .12);

    opacity: 0;

    visibility: hidden;

    transform:
        translate(-50%, 10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: 999;
}


/* Small top decoration */

.wovnly-dropdown-menu::before {

    content: "";

    position: absolute;

    top: -5px;

    left: 50%;

    width: 9px;

    height: 9px;

    background: #fff;

    border-left: 1px solid rgba(153, 99, 93, .12);

    border-top: 1px solid rgba(153, 99, 93, .12);

    transform: translateX(-50%) rotate(45deg);

}


/* Dropdown links */

.wovnly-dropdown-menu a {

    display: block;

    padding: 10px 20px;

    color: #332d2b;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 400;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color .25s ease,
        color .25s ease,
        padding-left .25s ease;

}


.wovnly-dropdown-menu a:hover {

    background: #f8f1eb;

    color: #99635d;

    padding-left: 25px;

}


/* Show dropdown */

.wovnly-nav-dropdown:hover
.wovnly-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);

}


.wovnly-nav-dropdown:hover
.wovnly-dropdown-link i {

    transform: rotate(180deg);

}

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

@media (max-width: 1600px) {

    .wovnly-navigation a {
        font-size: 18px;
    }

    .wovnly-navigation ul {
        gap: 30px;
    }

    .wovnly-logo {
        width: 250px;
    }

    .wovnly-container {
        width: min(100% - 60px, 1450px);
    }
}

@media (max-width: 1200px) {

    .wovnly-header {
        height: 100px;
    }

    .wovnly-logo {
        width: 220px;
        height: 90px;
    }

    .wovnly-navigation {
        margin-right: 20px;
    }

    .wovnly-navigation ul {
        gap: 20px;
    }

    .wovnly-navigation a {
        font-size: 17px;
    }

    .wovnly-header-btn {
        width: 150px;
        height: 46px;
        font-size: 22px;
    }
}

@media (max-width: 991px) {

    .wovnly-pre-header {
        height: 35px;
    }

    .wovnly-pre-header-text {
        font-size: 13px;
        line-height: 35px;
    }

    .wovnly-header {
        height: 80px;
    }

    .wovnly-logo {
        width: 175px;
        height: 75px;
    }

    .wovnly-navigation {
        display: none;
    }

    .wovnly-header-btn {
        display: none;
    }

    .wovnly-mobile-toggle {
        display: block;
    }
}

@media (max-width: 575px) {

    .wovnly-container {
        width: calc(100% - 30px);
    }

    .wovnly-pre-header-text {
        font-size: 10px;
    }

    .wovnly-header {
        height: 70px;
    }

    .wovnly-logo {
        width: 145px;
        height: 65px;
    }
}

/* =========================================================
   HERO SECTION
   Figma Frame: 1920 x 834
========================================================= */

.wovnly-hero {


    background: #000;
}


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



.wovnly-hero-image {
    width: 100%;
    height: auto;
}





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

.wovnly-hero-content {
    position: absolute;

    z-index: 3;

    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: 890px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


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

.wovnly-hero-title {
    margin: 0;

    color: #ffffff;

    font-family: var(--font-playfair);
    font-style: italic;
    font-weight: 400;

    text-align: center;

    line-height: 1;

    width: 100%;
}

.wovnly-hero-title span {
    display: block;
}

.wovnly-hero-title span:first-child {
    font-size: 50px;
    line-height: 104.901px;
}

.wovnly-hero-title span:last-child {
    font-size: 45px;
    line-height: 83.921px;
}


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

.wovnly-hero-btn {
    width: 277px;
    height: 52px;

    margin-top: 28px;

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

    background: var(--wovnly-primary);
    color: #ffffff;

    border-radius: 10px;

    font-family: var(--font-playfair);
    font-size: 22px;
    font-weight: 400;

    line-height: 36.061px;

    text-align: center;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.wovnly-hero-btn:hover {
    background: var(--wovnly-primary-dark);

    color: #ffffff;

    transform: translateY(-2px);
}


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

@media (max-width: 1600px) {

    .wovnly-hero-content {
        right: 8%;
        width: 760px;
    }

    .wovnly-hero-title span:first-child {
        font-size: 48px;
        line-height: 1.15;
    }

    .wovnly-hero-title span:last-child {
        font-size: 45px;
        line-height: 1.15;
    }

}


@media (max-width: 1200px) {

    .wovnly-hero {
        height: 700px;
    }

    .wovnly-hero-content {
        top: 400px;
        right: 6%;

        width: 650px;
    }

    .wovnly-hero-title span:first-child {
        font-size: 43px;
    }

    .wovnly-hero-title span:last-child {
        font-size: 40px;
    }

    .wovnly-hero-btn {
        width: 220px;
        height: 48px;

        font-size: 18px;
    }

}


@media (max-width: 991px) {

    .wovnly-hero {
        height: 600px;
    }

    .wovnly-hero-content {
        top: auto;
        right: 30px;
        bottom: 70px;

        width: 80%;
    }

    .wovnly-hero-title span:first-child {
        font-size: 48px;
        line-height: 1.15;
    }

    .wovnly-hero-title span:last-child {
        font-size: 38px;
        line-height: 1.15;
    }

    .wovnly-hero-btn {
        width: 200px;
        height: 46px;

        margin-top: 22px;

        font-size: 22px;
    }

}


@media (max-width: 767px) {

    .wovnly-hero {
        height: 560px;
    }

    .wovnly-hero-image {
        object-position: 58% center;
    }

    .wovnly-hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.05) 20%,
                rgba(0, 0, 0, 0.25) 45%,
                rgba(0, 0, 0, 0.82) 100%);
    }

    .wovnly-hero-content {
        right: 20px;
        bottom: 55px;

        width: calc(100% - 40px);

        align-items: center;
    }

    .wovnly-hero-title {
        text-align: center;
    }

    .wovnly-hero-title span:first-child {
        font-size: 37px;
        line-height: 1.15;
    }

    .wovnly-hero-title span:last-child {
        font-size: 30px;
        line-height: 1.15;
    }

    .wovnly-hero-btn {
        width: 180px;
        height: 44px;

        font-size: 20px;
    }

}


@media (max-width: 575px) {

    .wovnly-hero {
        height: 500px;
    }

    .wovnly-hero-image {
        object-position: 60% center;
    }

    .wovnly-hero-content {
        bottom: 40px;
    }

    .wovnly-hero-title span:first-child {
        font-size: 30px;
    }

    .wovnly-hero-title span:last-child {
        font-size: 24px;
    }

    .wovnly-hero-btn {
        width: 165px;
        height: 42px;

        margin-top: 18px;

        font-size: 18px;
    }

}

/* =========================================================
   BENEFITS / MARQUEE STRIP
   Figma:
   Top    : 999px
   Height : 70px
========================================================= */

.wovnly-benefits {
    position: relative;

    width: 100%;
    height: 70px;

    background: #ffffff;

    overflow: hidden;

    display: flex;
    align-items: center;

    z-index: 10;
}


/* =========================================================
   TRACK
========================================================= */

.wovnly-benefits-track {
    display: flex;
    width: max-content;

    animation: wovnlyBenefitsScroll 35s linear infinite;

    will-change: transform;
}


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

.wovnly-benefits-group {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


/* =========================================================
   ITEM
========================================================= */

.wovnly-benefit-item {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    margin-right: 34px;

    color: #000000;

    font-family: var(--font-poppins);
    font-size: 18px;
    font-weight: 300;

    line-height: normal;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| First item in Figma has the dark brown emphasis
|--------------------------------------------------------------------------
*/

.wovnly-benefit-item:first-child {
    color: #2f0c08;
}


/* =========================================================
   STAR
========================================================= */

.wovnly-benefit-star {
    display: inline-flex;

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

    margin-right: 10px;

    color: var(--wovnly-primary);

    font-size: 11px;
    line-height: 1;
}


/* =========================================================
   MARQUEE ANIMATION
========================================================= */

@keyframes wovnlyBenefitsScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   HOVER PAUSE
========================================================= */

.wovnly-benefits:hover .wovnly-benefits-track {
    animation-play-state: paused;
}


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

@media (max-width: 1200px) {

    .wovnly-benefits-item {
        font-size: 18px;
    }

    .wovnly-benefit-item {
        margin-right: 28px;
    }

}


@media (max-width: 991px) {

    .wovnly-benefits {
        height: 55px;
    }

    .wovnly-benefit-item {
        font-size: 16px;
        margin-right: 24px;
    }

    .wovnly-benefit-star {
        font-size: 9px;
        margin-right: 7px;
    }

}


@media (max-width: 575px) {

    .wovnly-benefits {
        height: 48px;
    }

    .wovnly-benefit-item {
        font-size: 13px;
        margin-right: 20px;
    }

}

/* =========================================================
   ABOUT SECTION
   "A Journey Beyond The Fabric"

   Figma:
   Section background begins around Y: 1086px
   Section height: approximately 982px
========================================================= */

.wovnly-about {
    position: relative;

    width: 100%;
    height: 900px;

    background: var(--wovnly-bg);

    overflow: hidden;
}


/* =========================================================
   ABOUT INNER
========================================================= */

.wovnly-about-inner {
    position: relative;

    width: 100%;
    height: 100%;

    max-width: 1920px;

    margin: 0 auto;
}


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

.wovnly-about-content {
    position: absolute;

    left: 121px;
    top: 50%;

    transform: translateY(-50%);

    width: 687px;

    z-index: 5;
}


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

.wovnly-about-title {
    margin: 0 0 20px 0;

    color: var(--wovnly-primary);

    font-family: var(--font-playfair);
    font-style: italic;
    font-weight: 400;

    font-size: 45px;
    line-height: 1.05;

    width: 454px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.wovnly-about-description {
    width: 687px;
}

.wovnly-about-description p {
    margin: 0 0 15px 0;

    color: #000000;

    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 400;

    line-height: 25.43px;
}

.wovnly-about-description p:nth-child(2) {
    width: 100%;
}

.wovnly-about-description p:nth-child(3) {
    width: 100%;
}


/* =========================================================
   KNOW MORE BUTTON
========================================================= */

.wovnly-about-btn {
    width: 182px;
    height: 45px;

    margin-top: 0;

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

    border-radius: 10px;

    background: var(--wovnly-primary);
    color: var(--wovnly-white);

    font-family: var(--font-playfair);
    font-size: 19px;
    font-weight: 400;

    line-height: 36.061px;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.wovnly-about-btn:hover {
    background: var(--wovnly-primary-dark);
    color: var(--wovnly-white);

    transform: translateY(-2px);
}


/* =========================================================
   ABOUT IMAGE
   Figma:
   X      = 912
   Y      = 1203
   Width  = 886
   Height = 749
========================================================= */

.wovnly-about-image-wrap {
    position: absolute;

    left: 912px;
    top: 50%;

    transform: translateY(-50%);

    width: 786px;
    height: 749px;

    overflow: hidden;

    border-radius: 20px;

    /* background: #ffffff; */

    z-index: 2;
}


.wovnly-about-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.wovnly-about-image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    /* background:
        linear-gradient(
            270deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.55) 18%,
            rgba(255, 255, 255, 0) 50%
        ); */
}


/* =========================================================
   DECORATIVE FLOWERS
========================================================= */

.wovnly-about-flower {
    position: absolute;

    pointer-events: none;

    z-index: 1;
}

.wovnly-about-flower img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Left flower
|--------------------------------------------------------------------------
*/

.wovnly-about-flower-left {
    left: -111px;
    top: -13px;

    width: 353px;
    height: 429px;

    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Bottom/right flower
|--------------------------------------------------------------------------
*/

.wovnly-about-flower-bottom {
    left: 580px;
    bottom: -5px;

    width: 418px;
    height: 400px;

    opacity: 1;
}


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

@media (max-width: 1600px) {

    .wovnly-about-content {
        left: 7%;
        width: 600px;
    }

    .wovnly-about-description {
        width: 600px;
    }

    .wovnly-about-description p {
        font-size: 17px;
        line-height: 28px;
    }

    .wovnly-about-image-wrap {
        left: 52%;
        width: 45%;
        height: 600px;
    }

}


@media (max-width: 1200px) {

    .wovnly-about {
        height: auto;
        min-height: 900px;
    }

    .wovnly-about-inner {
        padding: 80px 6%;
    }

    .wovnly-about-content {
        position: relative;

        top: auto;
        left: auto;

        width: 48%;
    }

    .wovnly-about-title {
        font-size: 46px;
    }

    .wovnly-about-description,
    .wovnly-about-description p,
    .wovnly-about-description p:nth-child(2),
    .wovnly-about-description p:nth-child(3) {
        width: 100%;
    }

    .wovnly-about-image-wrap {
        top: 80px;
        left: 52%;

        width: 43%;
        height: 650px;
    }

}


@media (max-width: 991px) {

    .wovnly-about {
        height: auto;
        min-height: auto;
    }

    .wovnly-about-inner {
        padding: 70px 30px 80px;
    }

    .wovnly-about-content {
        width: 100%;
    }

    .wovnly-about-title {
        width: 100%;

        font-size: 44px;

        margin-bottom: 35px;
    }

    .wovnly-about-description {
        width: 100%;
    }

    .wovnly-about-description p,
    .wovnly-about-description p:nth-child(2),
    .wovnly-about-description p:nth-child(3) {
        width: 100%;

        font-size: 17px;
        line-height: 28px;
    }

    .wovnly-about-image-wrap {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        height: 550px;

        margin-top: 50px;
    }

    .wovnly-about-flower-bottom {
        display: none;
    }

}


@media (max-width: 575px) {

    .wovnly-about-inner {
        padding: 55px 20px 60px;
    }

    .wovnly-about-title {
        font-size: 36px;
    }

    .wovnly-about-description p,
    .wovnly-about-description p:nth-child(2),
    .wovnly-about-description p:nth-child(3) {
        font-size: 14px;
        line-height: 23px;
    }

    .wovnly-about-btn {
        width: 150px;
        height: 46px;

        font-size: 22px;
    }

    .wovnly-about-image-wrap {
        height: 400px;

        border-radius: 15px;
    }

}

/* =========================================================
   SHOP BY COLLECTION
   Figma section begins around Y: 2068px
========================================================= */

.wovnly-collections {
    position: relative;

    width: 100%;
    height: 826px;

    background: #ffffff;

    overflow: hidden;
}


.wovnly-collections-inner {
    position: relative;

    width: 100%;
    height: 100%;

    max-width: 1920px;

    margin: 0 auto;
}


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

.wovnly-collections-heading {
    position: absolute;

    top: 70px;
    left: 50%;

    transform: translateX(-50%);

    width: 762px;

    text-align: center;
}


.wovnly-collections-heading h2 {
    margin: 0 0 16px;

    color: var(--wovnly-primary);

    font-family: var(--font-playfair);
    font-size: 50px;
    font-style: italic;
    font-weight: 400;

    line-height: normal;
}


.wovnly-collections-heading p {
    margin: 0;

    color: #000000;

    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 400;

    line-height: normal;
}


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

.wovnly-collection-grid {
    position: absolute;

    top: 257px;
    left: 0;

    width: 100%;
    height: 500px;
}


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

.wovnly-collection-card {
    position: absolute;

    width: 331.476px;
    height: 415.695px;

    display: block;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 4.319px 4.319px rgba(0, 0, 0, 0.25);

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

    z-index: 2;
}


.wovnly-collection-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);

    transition: all 0.4s;
}


/* =========================================================
   IMAGE
========================================================= */

.wovnly-collection-image {
    width: 100%;
    height: 356.31px;

    overflow: hidden;
}


.wovnly-collection-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.wovnly-collection-card:hover .wovnly-collection-image img {
    transform: scale(1.04);
}


/* =========================================================
   NAME
========================================================= */

.wovnly-collection-name {
    height: 59.385px;

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

    color: var(--wovnly-primary);

    font-family: var(--font-poppins);
    font-size: 23.754px;
    font-weight: 500;

    line-height: normal;

    text-align: center;
}


/* =========================================================
   FIGMA CARD POSITIONS
========================================================= */

/*
|--------------------------------------------------------------------------
| Bedding
| X = 79px
| Y = 2383px
|--------------------------------------------------------------------------
*/

.wovnly-card-bedding {
    left: 79px;
    top: 58px;
}


/*
|--------------------------------------------------------------------------
| Pillows
| X = 429.91px
| Y = 2336.88px
|--------------------------------------------------------------------------
*/

.wovnly-card-pillows {
    left: 429.91px;
    top: 11.88px;
}


/*
|--------------------------------------------------------------------------
| Cushions
| X = 780.82px
| Y = 2383.31px
|--------------------------------------------------------------------------
*/

.wovnly-card-offset {
    left: 780.82px;
    top: 58px;
}


/*
|--------------------------------------------------------------------------
| Bath
| X = 1131.73px
| Y = 2325px
|--------------------------------------------------------------------------
*/

.wovnly-card-bath {
    left: 1131.73px;
    top: 0;
}


/*
|--------------------------------------------------------------------------
| Duvet
| X = 1483.72px
| Y = 2383.31px
|--------------------------------------------------------------------------
*/

.wovnly-card-duvet {
    left: 1483.72px;
    top: 58px;
}

/* =========================================================
   PRODUCT SECTION — BELIEF STATEMENT
========================================================= */

.wovnly-product-belief {
    position: absolute;

    top: -20px;
    right: 70px;

    width: 500px;

    z-index: 20;

    pointer-events: none;
}


/* diagonal line */

.wovnly-product-belief__line {
    position: absolute;

    top: -0;
    left: 310px;

    width: 1px;
    height: 53px;

    background: #8E5C55;

    transform: rotate(15deg);

    transform-origin: top center;
}


/* handwritten text */

.wovnly-product-belief__text {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 70px;

    color: #8E5C55;

    font-family: "Passions Conflict", cursive;

    font-size: 45px;

    font-weight: 400;

    line-height: 25px;

    text-align: center;

}


/* second line */

.wovnly-product-belief__text span:last-child {

    margin-left: 85px;

}


.roadmap {
    position: relative;
    height: 273em;
    padding: 5em 0;
}

.roadmap__card {
    position: relative;
    width: 100%;
    /* height: 25.25em; */
    margin-top: 5em;
    background: #F9F3ED;
    padding: 50px 0;
    /* box-shadow: 0 20px 0 0 #3b3b3b; */
}

.roadmap__card.sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: -450px;
    z-index: 3;
    margin-top: 0em;
    margin-bottom: 0em;
}

.roadmap__card.sticky.step-1 {
    /* bottom: 3.5em; */
    z-index: 10;
    /* margin-bottom: 3.33em; */
}

.roadmap__card.sticky.step-2 {
    /* bottom: 9.17em; */
    z-index: 8;
    /* margin-bottom: 3.33em; */
}

.roadmap__card.sticky.step-3 {
    /* bottom: 4.17em; */
    z-index: 6;
    /* margin-bottom: 3.33em; */
}

.roadmap__card.sticky.step-4 {
    /* bottom: 4.17em; */
    z-index: 4;
    /* margin-bottom: 3.33em; */
}

.roadmap__card.sticky.step-5 {
    /* bottom: 4.17em; */
    z-index: 2;
    /* margin-bottom: 3.33em; */
}

.roadmap__card.sticky.step-6 {
    /* top: 4.17px; */
    /* bottom: 4.17em; */
    z-index: 1;
    /* margin-bottom: 3.33em; */
}

.card-content {
    position: static;

    height: 90em;
    margin-bottom: 0em;
    padding: 1.2em 2em;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.card-content {
    height: 100%;
}

.roadmap__card .card-content h3 {
    font-size: 50px;
    line-height: 50px;
}


.roadmap__title {
    position: relative;
    top: 0em;
    /* height: 200vh; */
    padding-top: 0em;
    padding-right: 0em;
    padding-left: 0em;
}

.roadmap__card-line {
    width: 0.05em;
    height: 15.17em;

    margin: auto;
}

.roadmap .service_video {
    border-radius: 50px;
}

/* SECTION */
.msc-recent-products {
    background: #fafafa;
}

.msc-section-tag {
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}

/* Card */
.msc-product-card {
    /* background: #ffffff; */
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
}

.msc-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}

/* Media */
.msc-product-media img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

/* Info */
.msc-product-info {
    padding: 20px;
    text-align: center;
}

.msc-product-info h5 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--wovnly-primary);
    font-family: var(--font-playfair);
    font-style: italic;
}

.msc-product-info span {
    font-size: 13px;
    color: #000;
    display: block;
    margin-bottom: 14px;
}

.btn-primary {
    background-color: var(--wovnly-primary);
    border-color: var(--wovnly-primary);
    font-family: var(--font-playfair);
    font-style: italic;
    letter-spacing: 1px;
}

.btn-primary:hover {
    background-color: var(--wovnly-primary-dark);
    border-color: var(--wovnly-primary-dark);
}

.wovnly-product-heading h2 {
    font-size: 45px;
    color: var(--wovnly-primary);
    font-family: var(--font-playfair);
    font-style: italic;
}

/* Enquiry */
.msc-enquiry-link {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--msc-accent);
    text-decoration: none;
}

.msc-enquiry-link:hover {
    text-decoration: underline;
}

.msc-product-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* =========================================================
   HOUSE OF WOVNLY CARES
========================================================= */

.wovnly-cares-section {
    position: relative;

    width: 100%;

    padding: 70px 0 65px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.wovnly-cares-wrapper {

    position: relative;

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        35px 560px minmax(0, 1fr);

    column-gap: 38px;

    align-items: start;
}


/* =========================================================
   VERTICAL TEXT
========================================================= */

.wovnly-cares-vertical-text {

    align-self: self-start;
    top: 60px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 17px;

    font-style: italic;

    font-weight: 400;

    line-height: 1;

    white-space: nowrap;

    letter-spacing: 0.2px;
    position: relative;
    left: 35px;
}


/* =========================================================
   IMAGE
========================================================= */

.wovnly-cares-image {

    width: 100%;

    height: auto;

    overflow: hidden;

    border-radius: 58px;

    background: #eee;
}


.wovnly-cares-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


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

.wovnly-cares-content {

    width: 100%;

    padding-top: 17px;
}


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

.wovnly-cares-content h2 {

    margin: 0 0 8px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 34px;

    font-style: italic;

    font-weight: 400;

    line-height: 1.15;
}


/* =========================================================
   INTRO
========================================================= */

.wovnly-cares-intro {

    max-width: 510px;

    margin: 0 0 24px;

    color: #111111;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.45;
}


/* =========================================================
   CARE ITEM
========================================================= */

.wovnly-care-item {

    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom: 16px;
}


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

.wovnly-care-icon {

    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    margin-right: 13px;

    border-radius: 50%;

    background: #99635d;
}


/* =========================================================
   CARE TEXT
========================================================= */

.wovnly-care-text {

    min-width: 0;

    padding-top: 1px;
}


/* =========================================================
   CARE TITLE
========================================================= */

.wovnly-care-text h3 {

    margin: 0 0 1px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 30px;
}


/* =========================================================
   CARE DESCRIPTION
========================================================= */

.wovnly-care-text p {

    margin: 0;

    color: #111111;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.35;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .wovnly-cares-wrapper {

        max-width: 940px;

        grid-template-columns:
            30px 430px minmax(0, 1fr);

        column-gap: 30px;
    }


    .wovnly-cares-image {

        width: 430px;

        height: 500px;
    }


    .wovnly-cares-content h2 {

        font-size: 31px;
    }

}


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

@media (max-width: 991px) {

    .wovnly-cares-section {

        padding: 60px 0;
    }


    .wovnly-cares-wrapper {

        max-width: 720px;

        grid-template-columns:
            25px 330px minmax(0, 1fr);

        column-gap: 25px;
    }


    .wovnly-cares-image {

        width: 330px;

        height: 450px;

        border-radius: 45px;
    }


    .wovnly-cares-content {

        padding-top: 5px;
    }


    .wovnly-cares-content h2 {

        font-size: 27px;
    }


    .wovnly-cares-intro {

        margin-bottom: 18px;

        font-size: 11px;
    }


    .wovnly-care-item {

        margin-bottom: 13px;
    }


    .wovnly-care-icon {

        flex-basis: 34px;

        width: 34px;

        height: 34px;

        margin-right: 10px;
    }


    .wovnly-care-text h3 {

        font-size: 13px;
    }


    .wovnly-care-text p {

        font-size: 9px;
    }


    .wovnly-cares-vertical-text {

        font-size: 14px;
    }

}


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

@media (max-width: 767px) {

    .wovnly-cares-section {

        padding: 50px 20px;
    }


    .wovnly-cares-wrapper {

        max-width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    /* Hide vertical text on mobile */

    .wovnly-cares-vertical-text {

        display: none;
    }


    /* Image */

    .wovnly-cares-image {

        width: 100%;

        max-width: 500px;

        height: 430px;

        margin-bottom: 35px;

        border-radius: 42px;
    }


    /* Content */

    .wovnly-cares-content {

        width: 100%;

        max-width: 500px;

        padding: 0;
    }


    .wovnly-cares-content h2 {

        font-size: 30px;

        text-align: center;
    }


    .wovnly-cares-intro {

        max-width: 100%;

        margin: 10px 0 25px;

        font-size: 12px;

        text-align: center;

        line-height: 1.5;
    }


    .wovnly-care-item {

        margin-bottom: 18px;
    }


    .wovnly-care-icon {

        flex: 0 0 38px;

        width: 38px;

        height: 38px;

        margin-right: 12px;
    }


    .wovnly-care-text h3 {

        font-size: 14px;
    }


    .wovnly-care-text p {

        font-size: 10px;

        line-height: 1.4;
    }

}


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

@media (max-width: 480px) {

    .wovnly-cares-section {

        padding: 40px 16px;
    }


    .wovnly-cares-image {

        height: 360px;

        border-radius: 35px;

        margin-bottom: 30px;
    }


    .wovnly-cares-content h2 {

        font-size: 27px;
    }


    .wovnly-care-icon {

        flex-basis: 35px;

        width: 35px;

        height: 35px;
    }


    .wovnly-care-text h3 {

        font-size: 13px;
    }


    .wovnly-care-text p {

        font-size: 9px;
    }

}


/* =========================================================
   OUR CERTIFICATIONS
========================================================= */

.wovnly-certifications-section {

    position: relative;

    width: 100%;

    padding: 48px 0 65px;

    background: #ffffff;

    overflow: hidden;
}


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

.wovnly-certifications-heading {

    width: 100%;

    text-align: center;
}


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

.wovnly-certifications-heading h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 32px;

    font-style: italic;

    font-weight: 400;

    line-height: 1.2;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.wovnly-certifications-heading p {

    margin: 8px auto 0;

    max-width: 760px;

    color: #111111;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.45;

}


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

.wovnly-certifications-logos {

    width: 100%;

    max-width: 930px;

    margin: 31px auto 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;
}


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

.wovnly-certification-logo {

    flex: 1;

    min-width: 0;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.wovnly-certification-logo img {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 65px;

    object-fit: contain;
}


/* =========================================================
   INDIVIDUAL LOGO SIZE CONTROL
========================================================= */

/*
|--------------------------------------------------------------------------
| Sedex
|--------------------------------------------------------------------------
*/

.wovnly-certification-logo:nth-child(1) img {

    max-width: 155px;

}


/*
|--------------------------------------------------------------------------
| OEKO-TEX
|--------------------------------------------------------------------------
*/

.wovnly-certification-logo:nth-child(2) img {

    max-width: 75px;

}


/*
|--------------------------------------------------------------------------
| TEXPROCIL
|--------------------------------------------------------------------------
*/

.wovnly-certification-logo:nth-child(3) img {

    max-width: 155px;

}


/*
|--------------------------------------------------------------------------
| BCI
|--------------------------------------------------------------------------
*/

.wovnly-certification-logo:nth-child(4) img {

    max-width: 150px;

}


/*
|--------------------------------------------------------------------------
| BSCI
|--------------------------------------------------------------------------
*/

.wovnly-certification-logo:nth-child(5) img {

    max-width: 90px;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .wovnly-certifications-logos {

        max-width: 850px;

        gap: 30px;
    }


    .wovnly-certification-logo:nth-child(1) img {

        max-width: 140px;

    }


    .wovnly-certification-logo:nth-child(3) img {

        max-width: 140px;

    }


    .wovnly-certification-logo:nth-child(4) img {

        max-width: 135px;

    }

}


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

@media (max-width: 991px) {

    .wovnly-certifications-section {

        padding: 45px 25px 55px;

    }


    .wovnly-certifications-heading h2 {

        font-size: 29px;

    }


    .wovnly-certifications-heading p {

        font-size: 12px;

        max-width: 650px;

    }


    .wovnly-certifications-logos {

        max-width: 700px;

        gap: 20px;

        margin-top: 28px;

    }


    .wovnly-certification-logo {

        height: 65px;

    }


    .wovnly-certification-logo img {

        max-height: 55px;

    }

}


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

@media (max-width: 767px) {

    .wovnly-certifications-section {

        padding: 40px 20px 45px;

    }


    .wovnly-certifications-heading h2 {

        font-size: 27px;

    }


    .wovnly-certifications-heading p {

        margin-top: 9px;

        font-size: 11px;

        line-height: 1.5;

    }


    .desktop-break {

        display: none;

    }


    .wovnly-certifications-logos {

        margin-top: 30px;

        display: grid;

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

        gap: 25px 20px;

    }


    .wovnly-certification-logo {

        height: 65px;

    }


    .wovnly-certification-logo img {

        max-height: 55px;

    }


    /*
    |--------------------------------------------------------------------------
    | Center the fifth logo
    |--------------------------------------------------------------------------
    */

    .wovnly-certification-logo:last-child {

        grid-column: 1 / -1;

    }

}


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

@media (max-width: 480px) {

    .wovnly-certifications-section {

        padding: 35px 15px 40px;

    }


    .wovnly-certifications-heading h2 {

        font-size: 25px;

    }


    .wovnly-certifications-heading p {

        font-size: 10px;

    }


    .wovnly-certifications-logos {

        gap: 20px 12px;

    }


    .wovnly-certification-logo {

        height: 58px;

    }


    .wovnly-certification-logo img {

        max-width: 115px !important;

        max-height: 50px;

    }

}


/* =========================================================
   HOUSE OF WOVNLY FOOTER
========================================================= */

.wovnly-footer {

    width: 100%;

    margin: 0;

    padding: 0;

    background: #f8f1eb;

    color: #111;

}


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

.wovnly-footer-main {

    width: 100%;

    padding: 55px 0 48px;

    background: #f8f1eb;

}


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

.wovnly-footer-grid {

    display: grid;

    grid-template-columns:
        2.2fr 1fr 1fr 1.5fr;

    column-gap: 55px;

    align-items: start;

}


/* =========================================================
   COMPANY
========================================================= */

.wovnly-footer-company {

    max-width: 350px;

}


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

.wovnly-footer-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

}


.wovnly-footer-logo img {

    display: block;

    width: auto;

    max-width: 190px;

    height: auto;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.wovnly-footer-description {

    margin: 12px 0 15px;

    color: #111;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.55;

}


/* =========================================================
   SOCIAL
========================================================= */

.wovnly-footer-social {

    display: flex;

    align-items: center;

    gap: 4px;

}


.wovnly-footer-social a {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff;

    font-size: 12px;

    text-decoration: none;

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

}


.wovnly-footer-social a:nth-child(1) {

    background:
        linear-gradient(135deg,
            #feda75,
            #d62976,
            #4f5bd5);

}


.wovnly-footer-social a:nth-child(2) {

    background: #1877f2;

}


.wovnly-footer-social a:nth-child(3) {

    background: #0a66c2;

}


.wovnly-footer-social a:nth-child(4) {

    background: #1da1f2;

}


.wovnly-footer-social a:hover {

    color: #fff;

    opacity: .85;

    transform: translateY(-2px);

}


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

.wovnly-footer-column {

    min-width: 0;

}


.wovnly-footer-column h3 {

    margin: 0 0 13px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 25px;

    font-style: italic;

    font-weight: 400;

    line-height: 1.2;

}


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

.wovnly-footer-column ul {

    margin: 0;

    padding: 0 0 0 14px;

    list-style: none;

}


.wovnly-footer-column li {

    position: relative;

    margin-bottom: 8px;

    padding-left: 0;

}


.wovnly-footer-column li::before {

    content: "•";

    position: absolute;

    left: -12px;

    top: -2px;

    color: #111;

    font-size: 20px;

}


.wovnly-footer-column li a {

    color: #111;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.4;

    text-decoration: none;

    transition: color .2s ease;

}


.wovnly-footer-column li a:hover {

    color: #99635d;

}


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

.wovnly-footer-contact {

    padding-left: 5px;

}


.wovnly-footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-bottom: 10px;

    color: #111;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.45;

    text-decoration: none;

}


a.wovnly-footer-contact-item:hover {

    color: #111;

}


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

.wovnly-footer-contact-icon {

    flex: 0 0 19px;

    width: 19px;

    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #99635d;

    color: #fff;

    font-size: 9px;

    margin-top: 1px;

}


/* =========================================================
   BOTTOM BAR
========================================================= */

.wovnly-footer-bottom {

    width: 100%;

    background: #99635d;

}


.wovnly-footer-bottom-inner {

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================================================
   COPYRIGHT
========================================================= */

.wovnly-footer-bottom p {

    margin: 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1;

}


/* =========================================================
   POLICIES
========================================================= */

.wovnly-footer-policies {

    display: flex;

    align-items: center;

    gap: 22px;

}


.wovnly-footer-policies a {

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 400;

    text-decoration: underline;

    text-underline-offset: 2px;

}


.wovnly-footer-policies a:hover {

    color: #fff;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .wovnly-footer-grid {

        column-gap: 35px;

    }


    .wovnly-footer-company {

        max-width: 270px;

    }


    .wovnly-footer-column h3 {

        font-size: 23px;

    }

}


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

@media (max-width: 991px) {

    .wovnly-footer-main {

        padding: 45px 0 40px;

    }


    .wovnly-footer-grid {

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

        row-gap: 35px;

    }


    .wovnly-footer-company {

        max-width: 310px;

    }


    .wovnly-footer-contact {

        grid-column: 1 / -1;

    }


    .wovnly-footer-bottom-inner {

        padding: 8px 0;

        flex-direction: column;

        justify-content: center;

        gap: 8px;

        text-align: center;

    }

}


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

@media (max-width: 767px) {

    .wovnly-footer-main {

        padding: 40px 20px 35px;

    }


    .wovnly-footer-grid {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 35px 25px;

    }


    .wovnly-footer-company {

        grid-column: 1 / -1;

        max-width: 100%;

        text-align: center;

    }


    .wovnly-footer-logo {

        justify-content: center;

    }


    .wovnly-footer-logo img {

        max-width: 175px;

    }


    .wovnly-footer-description {

        max-width: 450px;

        margin-left: auto;

        margin-right: auto;

        font-size: 11px;

    }


    .wovnly-footer-social {

        justify-content: center;

    }


    .wovnly-footer-column h3 {

        font-size: 22px;

    }


    .wovnly-footer-column li a {

        font-size: 11px;

    }


    .wovnly-footer-contact {

        grid-column: 1 / -1;

        padding-left: 0;

    }


    .wovnly-footer-contact h3 {

        text-align: center;

    }


    .wovnly-footer-contact-item {

        justify-content: center;

        font-size: 11px;

    }


    .wovnly-footer-bottom-inner {

        padding: 12px 15px;

    }


    .wovnly-footer-bottom p {

        font-size: 15px;

        line-height: 1.3;

    }


    .wovnly-footer-policies {

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px 15px;

    }


    .wovnly-footer-policies a {

        font-size: 9px;

    }

}


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

@media (max-width: 480px) {

    .wovnly-footer-grid {

        grid-template-columns: 1fr;

    }


    .wovnly-footer-company,
    .wovnly-footer-contact {

        grid-column: auto;

    }


    .wovnly-footer-column {

        text-align: center;

    }


    .wovnly-footer-column ul {

        display: inline-block;

        text-align: left;

    }


    .wovnly-footer-contact h3 {

        text-align: center;

    }

}


/* =========================================================
   ABOUT US PAGE
========================================================= */


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

.wovnly-about-hero {

    position: relative;

    width: 100%;

    min-height: 450px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #5b3733;
}


/* Background */

.wovnly-about-hero__background {

    position: absolute;

    inset: 0;

    z-index: 1;
}


.wovnly-about-hero__background img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* Overlay */

.wovnly-about-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(90deg,
            rgba(48, 29, 27, .72) 0%,
            rgba(48, 29, 27, .48) 42%,
            rgba(48, 29, 27, .10) 100%);

}


/* Content */

.wovnly-about-hero .container {

    position: relative;

    z-index: 3;
}


.wovnly-about-hero__content {

    width: 600px;

    max-width: 70%;

    padding: 100px 0;
}


.wovnly-about-hero__eyebrow {

    display: block;

    margin-bottom: 20px;

    color: #f8eee7;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;

}


.wovnly-about-hero h1 {

    margin: 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.2;

}


.wovnly-about-hero p {

    max-width: 520px;

    margin: 25px 0 0;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;

}


/* Vertical label */

.wovnly-about-hero__vertical {

    position: absolute;

    right: 35px;

    bottom: 50px;

    z-index: 4;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

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

    font-family: "Playfair Display", serif;

    font-size: 15px;

    font-style: italic;

    letter-spacing: 1px;
}

/* =========================================================
   WHO WE ARE
========================================================= */

.wovnly-about-intro {

    position: relative;

    padding: 100px 0;

    background: #fff;

    overflow: hidden;
}


.wovnly-about-intro__wrapper {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 85px;
}


/* Image */

.wovnly-about-intro__image {

    position: relative;

    width: 100%;

    height: 580px;

    overflow: hidden;

    border-radius: 0 90px 0 90px;
}


.wovnly-about-intro__image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* Content */

.wovnly-about-intro__content {

    padding-right: 35px;
}


.wovnly-section-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 2.5px;

}


.wovnly-about-intro__content h2 {

    margin: 0 0 22px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.08;
}


.wovnly-about-intro__content>p {

    max-width: 570px;

    margin: 0 0 15px;

    color: #24201f;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


/* Highlights */

.wovnly-about-intro__highlights {

    margin-top: 32px;

    border-top: 1px solid #dfd3cc;
}


.wovnly-about-highlight {

    display: flex;

    gap: 18px;

    padding: 17px 0;

    border-bottom: 1px solid #dfd3cc;
}


.wovnly-about-highlight__number {

    flex: 0 0 auto;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 17px;

    font-style: italic;
}


.wovnly-about-highlight h3 {

    margin: 0 0 3px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 17px;

    font-weight: 500;
}


.wovnly-about-highlight p {

    margin: 0;

    color: #333;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   FOUNDER VIDEO
========================================================= */

.wovnly-founder-section {

    position: relative;

    padding: 105px 0 115px;

    background: #f8f1eb;

    overflow: hidden;
}


/* Decorative circle */

.wovnly-founder-section__decor {

    position: absolute;

    top: -180px;

    right: -180px;

    width: 450px;

    height: 450px;

    border: 1px solid rgba(153, 99, 93, .25);

    border-radius: 50%;
}


.wovnly-founder-heading {

    width: 700px;

    max-width: 100%;

    margin: 0 auto 48px;

    text-align: center;
}


.wovnly-founder-heading h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.05;
}


.wovnly-founder-heading p {

    max-width: 560px;

    margin: 18px auto 0;

    color: #292322;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


/* Video */

.wovnly-founder-video {

    position: relative;

    width: 100%;

    max-width: 1180px;

    height: 650px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 60px;

    background: #2e211f;

    box-shadow:
        0 25px 60px rgba(61, 39, 35, .12);
}


.wovnly-founder-video__media {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* Caption */

.wovnly-founder-video__caption {

    position: absolute;

    left: 35px;

    bottom: 30px;

    z-index: 3;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color: #fff;

    pointer-events: none;
}


.wovnly-founder-video__caption span:first-child {

    font-family: "Playfair Display", serif;

    font-size: 21px;

    font-style: italic;
}


.wovnly-founder-video__caption span:last-child {

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

@media (max-width: 991px) {

    .wovnly-about-hero {

        min-height: 570px;

    }


    .wovnly-about-hero__content {

        width: 520px;

    }


    .wovnly-about-intro {

        padding: 75px 0;

    }


    .wovnly-about-intro__wrapper {

        gap: 45px;

    }


    .wovnly-about-intro__image {

        height: 500px;

        border-radius: 0 65px 0 65px;

    }


    .wovnly-about-intro__content {

        padding-right: 0;

    }


    .wovnly-about-intro__content h2 {

        font-size: 39px;

    }


    .wovnly-founder-section {

        padding: 80px 0 90px;

    }


    .wovnly-founder-video {

        height: 500px;

        border-radius: 45px;

    }

}


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

@media (max-width: 767px) {

    .wovnly-about-hero {

        min-height: 600px;

    }


    .wovnly-about-hero__content {

        width: 100%;

        max-width: 100%;

        padding: 80px 20px;

    }


    .wovnly-about-hero__content h1 {

        font-size: 45px;

    }


    .wovnly-about-hero__content p {

        font-size: 12px;

    }


    .wovnly-about-hero__vertical {

        display: none;

    }


    /* Who We Are */

    .wovnly-about-intro {

        padding: 60px 20px;

    }


    .wovnly-about-intro__wrapper {

        display: flex;

        flex-direction: column;

        gap: 40px;

    }


    .wovnly-about-intro__image {

        width: 100%;

        height: 420px;

        border-radius: 0 45px 0 45px;

    }


    .wovnly-about-intro__content {

        width: 100%;

    }


    .wovnly-about-intro__content h2 {

        font-size: 38px;

    }


    .wovnly-about-intro__content>p {

        font-size: 12px;

    }


    /* Founder */

    .wovnly-founder-section {

        padding: 65px 20px 70px;

    }


    .wovnly-founder-heading {

        margin-bottom: 32px;

    }


    .wovnly-founder-heading h2 {

        font-size: 39px;

    }


    .wovnly-founder-heading p {

        font-size: 11px;

    }


    .wovnly-founder-video {

        height: 400px;

        border-radius: 30px;

    }


    .wovnly-founder-video__caption {

        left: 22px;

        bottom: 20px;

    }

}


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

@media (max-width: 480px) {

    .wovnly-about-hero {

        min-height: 560px;

    }


    .wovnly-about-hero__content h1 {

        font-size: 40px;

    }


    .wovnly-about-intro__image {

        height: 350px;

        border-radius: 0 35px 0 35px;

    }


    .wovnly-about-intro__content h2 {

        font-size: 34px;

    }


    .wovnly-founder-video {

        height: 300px;

        border-radius: 24px;

    }

}

/* =========================================================
   WHAT WE STAND FOR
========================================================= */

.wovnly-values-section {

    position: relative;

    width: 100%;

    padding: 115px 0 120px;

    background: #fff;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.wovnly-values-wrapper {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 100px;

    align-items: start;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.wovnly-values-intro {

    position: sticky;

    top: 100px;

}


.wovnly-values-intro h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(22px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.04;

}


.wovnly-values-intro>p {

    /* max-width: 390px; */

    margin: 25px 0 0;

    color: #302b2a;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;

}


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

.wovnly-values-script {

    margin-top: 65px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 27px;

    font-style: italic;

    line-height: 1.35;

}


/* =========================================================
   VALUES LIST
========================================================= */

.wovnly-values-list {

    width: 100%;

    border-top: 1px solid #d9ccc5;

}


/* =========================================================
   VALUE ITEM
========================================================= */

.wovnly-value-item {

    display: grid;

    grid-template-columns: 55px minmax(0, 1fr);

    gap: 25px;

    padding: 15px 0 15px;

    border-bottom: 1px solid #d9ccc5;

    transition:
        padding-left .35s ease,
        background-color .35s ease;

}


.wovnly-value-item:hover {

    padding-left: 12px;

}


/* =========================================================
   NUMBER
========================================================= */

.wovnly-value-number {

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 19px;

    font-style: italic;

    line-height: 1.3;

}


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

.wovnly-value-content h3 {

    margin: 0 0 8px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.3;

}


.wovnly-value-content p {

    max-width: 560px;

    margin: 0;

    color: #292524;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.wovnly-values-section::before {

    content: "";

    position: absolute;

    left: -230px;

    bottom: -260px;

    width: 500px;

    height: 500px;

    border: 1px solid rgba(153, 99, 93, .18);

    border-radius: 50%;

    pointer-events: none;

}


.wovnly-values-section::after {

    content: "";

    position: absolute;

    left: -150px;

    bottom: -180px;

    width: 340px;

    height: 340px;

    border: 1px solid rgba(153, 99, 93, .12);

    border-radius: 50%;

    pointer-events: none;

}


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

@media (max-width: 991px) {

    .wovnly-values-section {

        padding: 85px 0 90px;

    }


    .wovnly-values-wrapper {

        gap: 55px;

    }


    .wovnly-values-intro h2 {

        font-size: 42px;

    }


    .wovnly-values-script {

        margin-top: 45px;

        font-size: 22px;

    }


    .wovnly-value-item {

        grid-template-columns: 40px minmax(0, 1fr);

        gap: 15px;

        padding: 24px 0;

    }


    .wovnly-value-content h3 {

        font-size: 16px;

    }


    .wovnly-value-content p {

        font-size: 11px;

    }

}


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

@media (max-width: 767px) {

    .wovnly-values-section {

        padding: 65px 20px 70px;

    }


    .wovnly-values-wrapper {

        display: block;

    }


    .wovnly-values-intro {

        position: static;

        margin-bottom: 45px;

    }


    .wovnly-values-intro h2 {

        font-size: 40px;

    }


    .wovnly-values-intro>p {

        max-width: 100%;

        margin-top: 18px;

        font-size: 12px;

    }


    .wovnly-values-script {

        margin-top: 30px;

        font-size: 22px;

    }


    .wovnly-value-item:hover {

        padding-left: 0;

    }


    .wovnly-value-item {

        grid-template-columns: 38px minmax(0, 1fr);

        gap: 12px;

        padding: 22px 0;

    }


    .wovnly-value-number {

        font-size: 16px;

    }


    .wovnly-value-content h3 {

        font-size: 15px;

    }


    .wovnly-value-content p {

        font-size: 10px;

        line-height: 1.55;

    }

}


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

@media (max-width: 480px) {

    .wovnly-values-intro h2 {

        font-size: 34px;

    }


    .wovnly-values-script {

        font-size: 20px;

    }

}

/* =========================================================
   ABOUT US — CLOSING BRAND STATEMENT
========================================================= */

.wovnly-about-closing {

    position: relative;

    width: 100%;

    min-height: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 0;

    background: #5b3733;

    overflow: hidden;

}


/* =========================================================
   DECORATIVE OUTER CIRCLE
========================================================= */

.wovnly-about-closing::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    left: -250px;

    top: -230px;

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

    border-radius: 50%;

    pointer-events: none;

}


.wovnly-about-closing::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    right: -120px;

    bottom: -170px;

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

    border-radius: 50%;

    pointer-events: none;

}


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

.wovnly-about-closing__line {

    position: absolute;

    top: 55px;

    left: 50%;

    width: 1px;

    height: 70px;

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

    transform: rotate(18deg);

    transform-origin: top center;

}


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

.wovnly-about-closing__content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 820px;

    margin: 0 auto;

    text-align: center;

}


/* =========================================================
   EYEBROW
========================================================= */

.wovnly-about-closing__eyebrow {

    display: inline-block;

    margin-bottom: 22px;

    color: #ead8d2;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 3px;

}


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

.wovnly-about-closing h2 {

    margin: 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.05;

}


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

.wovnly-about-closing__script {

    margin-top: 18px;

    color: #e5b9b1;

    font-family: "Playfair Display", serif;

    font-size: clamp(24px, 3vw, 30px);

    font-style: italic;

    font-weight: 400;

    line-height: 1.35;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.wovnly-about-closing__content>p {

    max-width: 600px;

    margin: 25px auto 0;

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

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;

}


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

.wovnly-about-closing__button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 32px;

    padding: 12px 22px 12px 24px;

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

    border-radius: 50px;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 400;

    text-decoration: none;

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.wovnly-about-closing__button span {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: #99635d;

    font-size: 13px;

    transition:
        transform .3s ease;

}


.wovnly-about-closing__button:hover {

    background: #fff;

    border-color: #fff;

    color: #99635d;

}


.wovnly-about-closing__button:hover span {

    transform: translateX(3px);

}


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

@media (max-width: 991px) {

    .wovnly-about-closing {

        min-height: 480px;

        padding: 80px 25px;

    }


    .wovnly-about-closing h2 {

        font-size: 50px;

    }


    .wovnly-about-closing__script {

        font-size: 29px;

    }

}


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

@media (max-width: 767px) {

    .wovnly-about-closing {

        min-height: 500px;

        padding: 75px 20px;

    }


    .wovnly-about-closing__line {

        top: 40px;

        height: 55px;

    }


    .wovnly-about-closing__eyebrow {

        margin-bottom: 17px;

        font-size: 9px;

        letter-spacing: 2px;

    }


    .wovnly-about-closing h2 {

        font-size: 40px;

        line-height: 1.08;

    }


    .wovnly-about-closing__script {

        margin-top: 15px;

        font-size: 24px;

    }


    .wovnly-about-closing__content>p {

        margin-top: 20px;

        font-size: 10px;

        line-height: 1.65;

    }


    .wovnly-about-closing__button {

        margin-top: 26px;

        padding: 11px 19px 11px 21px;

    }

}


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

@media (max-width: 480px) {

    .wovnly-about-closing {

        min-height: 460px;

        padding: 65px 18px;

    }


    .wovnly-about-closing h2 {

        font-size: 34px;

    }


    .wovnly-about-closing__script {

        font-size: 21px;

    }


    .wovnly-about-closing__content>p {

        font-size: 9px;

    }

}

/* =========================================================
   OUR STORY HERO
========================================================= */

.wovnly-story-hero {

    position: relative;

    width: 100%;

    min-height: 450px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #5b3733;
}


.wovnly-story-hero__image {

    position: absolute;

    inset: 0;

    z-index: 1;
}


.wovnly-story-hero__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


.wovnly-story-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(54,34,31,.75),
            rgba(54,34,31,.35) 55%,
            rgba(54,34,31,.05)
        );
}


.wovnly-story-hero .container {

    position: relative;

    z-index: 3;
}


.wovnly-story-hero__content {

    max-width: 620px;

    padding: 100px 0;
}


.wovnly-story-eyebrow {

    display: inline-block;

    margin-bottom: 17px;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;
}

.wovnly-story-journey .wovnly-story-eyebrow{
    color: var(--wovnly-primary);
}
.wovnly-story-responsibility .wovnly-story-eyebrow{
    color: var(--wovnly-primary);
}


.wovnly-story-hero__eyebrow {

    color: #f4e7e1;
}


.wovnly-story-hero h1 {

    margin: 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.2;
}


.wovnly-story-hero p {

    max-width: 530px;

    margin: 25px 0 0;

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

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


.wovnly-story-hero__side-text {

    position: absolute;

    right: 35px;

    bottom: 55px;

    z-index: 4;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

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

    font-family: "Playfair Display", serif;

    font-size: 15px;

    font-style: italic;
}

/* =========================================================
   WHERE IT ALL BEGAN
========================================================= */

.wovnly-story-beginning {

    padding: 110px 0;

    background: #fff;

}


.wovnly-story-beginning__grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 90px;

    /* align-items: center; */
}


.wovnly-story-beginning__image {

    width: 100%;

    height: 560px;

    overflow: hidden;

    border-radius: 90px 0 90px 0;
}


.wovnly-story-beginning__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.wovnly-story-beginning__content h2 {

    margin: 0 0 22px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 46px);

    font-weight: 400;

    line-height: 1.2;
}


.wovnly-story-beginning__content > p {

    /* max-width: 560px; */

    margin: 0 0 15px;

    color: #292524;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


.wovnly-story-quote {

    position: relative;

    margin-top: 32px;

    padding: 20px 25px 20px 50px;

    border-left: 2px solid #99635d;

    background: #f8f1eb;
}


.wovnly-story-quote__mark {

    position: absolute;

    left: 17px;

    top: 11px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 40px;

    line-height: 1;
}


.wovnly-story-quote p {

    margin: 0;

    color: #5b3733;

    font-family: "Playfair Display", serif;

    font-size: 18px;

    font-style: italic;

    line-height: 1.45;
}

/* =========================================================
   OUR JOURNEY
========================================================= */

.wovnly-story-journey {

    padding: 105px 0 120px;

    background: #f8f1eb;

}


.wovnly-story-journey__heading {

    max-width: 700px;

    margin: 0 auto 65px;

    text-align: center;
}


.wovnly-story-journey__heading h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

}


.wovnly-story-journey__heading p {

    max-width: 570px;

    margin: 16px auto 0;

    color: #302a28;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


.wovnly-story-timeline {

    max-width: 950px;

    margin: 0 auto;
}


.wovnly-story-timeline__item {

    position: relative;

    display: grid;

    grid-template-columns:
        70px
        1px
        minmax(0, 1fr);

    gap: 28px;

    min-height: 145px;
}


.wovnly-story-timeline__number {

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 23px;

    font-style: italic;

    text-align: right;
}


.wovnly-story-timeline__line {

    position: relative;

    width: 1px;

    min-height: 100%;

    background: #cbb8b0;
}


.wovnly-story-timeline__line::before {

    content: "";

    position: absolute;

    top: 4px;

    left: 50%;

    width: 9px;

    height: 9px;

    border: 1px solid #99635d;

    border-radius: 50%;

    background: #f8f1eb;

    transform: translateX(-50%);
}


.wovnly-story-timeline__content {

    padding: 0 0 40px;
}


.wovnly-story-timeline__content h3 {

    margin: 0 0 8px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 25px;

    font-style: italic;

    font-weight: 400;
}


.wovnly-story-timeline__content p {

    /* max-width: 520px; */

    margin: 0;

    color: #332e2c;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.65;
}

/* =========================================================
   FACTORY VIDEO
========================================================= */

.wovnly-factory-section {

    position: relative;

    padding: 115px 0 125px;

    background: #5b3733;

    overflow: hidden;
}


.wovnly-factory-section__background {

    position: absolute;

    width: 700px;

    height: 700px;

    right: -350px;

    top: -300px;

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

    border-radius: 50%;
}


.wovnly-factory-heading {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;
}


.wovnly-factory-heading .wovnly-story-eyebrow {

    color: #e6c7c0;
}


.wovnly-factory-heading h2 {

    margin: 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.2;
}


.wovnly-factory-heading p {

    max-width: 570px;

    margin: 20px auto 0;

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

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


/* Video */

.wovnly-factory-video {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1250px;

    height: 650px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 65px;

    background: #241817;

    box-shadow:
        0 30px 70px rgba(30,15,13,.25);
}


.wovnly-factory-video__media {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.wovnly-factory-video__label {

    position: absolute;

    left: 35px;

    bottom: 30px;

    z-index: 3;

    display: flex;

    flex-direction: column;

    gap: 4px;

    color: #fff;

    pointer-events: none;
}


.wovnly-factory-video__label span {

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    letter-spacing: 2px;
}


.wovnly-factory-video__label strong {

    font-family: "Playfair Display", serif;

    font-size: 24px;

    font-style: italic;

    font-weight: 400;
}

/* =========================================================
   PROCESS
========================================================= */

.wovnly-process-section {

    padding: 110px 0 120px;

    background: #fff;
}


.wovnly-process-heading {

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.wovnly-process-heading h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.2;
}


.wovnly-process-heading p {

    max-width: 550px;

    margin: 17px auto 0;

    color: #332d2b;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


.wovnly-process-grid {

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

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

    border-top: 1px solid #d9ccc5;

    border-bottom: 1px solid #d9ccc5;
}


.wovnly-process-item {

    position: relative;

    min-height: 260px;

    padding: 25px 22px;

    border-right: 1px solid #d9ccc5;

}


.wovnly-process-item:last-child {

    border-right: 0;

}


.wovnly-process-item > span {

    display: block;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 16px;

    font-style: italic;
}


.wovnly-process-icon {

    width: 48px;

    height: 48px;

    margin: 32px 0 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #99635d;

    color: #fff;

    font-size: 14px;
}


.wovnly-process-item h3 {

    margin: 0 0 8px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-size: 20px;

    font-style: italic;

    font-weight: 400;

}


.wovnly-process-item p {

    margin: 0;

    color: #302c2a;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    line-height: 1.6;
}

/* =========================================================
   RESPONSIBILITY
========================================================= */

.wovnly-story-responsibility {

    padding: 100px 0;

    background: #f8f1eb;

}


.wovnly-story-responsibility__wrapper {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 80px;
}


.wovnly-story-responsibility__content h2 {

    margin: 0 0 22px;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.2;
}


.wovnly-story-responsibility__content > p {

    max-width: 530px;

    margin: 0 0 14px;

    color: #302b29;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


.wovnly-story-responsibility__image {

    height: 470px;

    overflow: hidden;

    border-radius: 0 80px 0 80px;
}


.wovnly-story-responsibility__image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* Button */

.wovnly-story-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    padding: 12px 12px 12px 22px;

    border-radius: 50px;

    background: #99635d;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    text-decoration: none;
}


.wovnly-story-button span {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: #99635d;

    font-size: 9px;
}


.wovnly-story-button:hover {

    color: #fff;

}

/* =========================================================
   STORY CLOSING
========================================================= */

.wovnly-story-closing {

    position: relative;

    min-height: 510px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 20px;

    background: #fff;

    overflow: hidden;
}


.wovnly-story-closing::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    left: -250px;

    bottom: -290px;

    border: 1px solid rgba(153,99,93,.18);

    border-radius: 50%;
}


.wovnly-story-closing::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: -130px;

    top: -170px;

    border: 1px solid rgba(153,99,93,.14);

    border-radius: 50%;
}


.wovnly-story-closing__content {

    position: relative;

    z-index: 2;

    text-align: center;
}


.wovnly-story-closing__content > span {

    display: block;

    margin-bottom: 18px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;
}


.wovnly-story-closing h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: clamp(32px, 3vw, 44px);

    font-weight: 400;

    line-height: .98;
}


.wovnly-story-closing__script {

    margin-top: 20px;

    color: #5b3733;

    font-family: "Playfair Display", serif;

    font-size: 29px;

    font-style: italic;
}


.wovnly-story-closing__button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding: 13px 22px;

    border: 1px solid #99635d;

    border-radius: 50px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    text-decoration: none;

    transition: all .3s ease;
}


.wovnly-story-closing__button i {

    transition: transform .3s ease;
}


.wovnly-story-closing__button:hover {

    background: #99635d;

    color: #fff;
}


.wovnly-story-closing__button:hover i {

    transform: translateX(3px);

}

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

@media (max-width: 991px) {

    .wovnly-story-hero {

        min-height: 570px;

    }


    .wovnly-story-beginning {

        padding: 80px 0;

    }


    .wovnly-story-beginning__grid {

        gap: 45px;

    }


    .wovnly-story-beginning__image {

        height: 480px;

        border-radius: 65px 0 65px 0;

    }


    .wovnly-story-journey {

        padding: 80px 0 90px;

    }


    .wovnly-factory-section {

        padding: 85px 0 95px;

    }


    .wovnly-factory-video {

        height: 500px;

        border-radius: 45px;

    }


    .wovnly-process-section {

        padding: 80px 0 90px;

    }


    .wovnly-process-grid {

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

    }


    .wovnly-process-item:nth-child(3) {

        border-right: 0;

    }


    .wovnly-process-item:nth-child(4),
    .wovnly-process-item:nth-child(5) {

        border-top: 1px solid #d9ccc5;

    }


    .wovnly-story-responsibility {

        padding: 80px 0;

    }


    .wovnly-story-responsibility__wrapper {

        gap: 45px;

    }

}


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

@media (max-width: 767px) {

    .wovnly-story-hero {

        min-height: 580px;

    }


    .wovnly-story-hero__content {

        padding: 80px 20px;

    }


    .wovnly-story-hero h1 {

        font-size: 46px;

    }


    .wovnly-story-hero p {

        font-size: 11px;

    }


    .wovnly-story-hero__side-text {

        display: none;

    }


    /* Beginning */

    .wovnly-story-beginning {

        padding: 60px 20px;

    }


    .wovnly-story-beginning__grid {

        display: flex;

        flex-direction: column;

        gap: 40px;

    }


    .wovnly-story-beginning__image {

        width: 100%;

        height: 380px;

        border-radius: 45px 0 45px 0;

    }


    .wovnly-story-beginning__content h2 {

        font-size: 39px;

    }


    .wovnly-story-beginning__content > p {

        font-size: 11px;

    }


    /* Timeline */

    .wovnly-story-journey {

        padding: 65px 20px 75px;

    }


    .wovnly-story-journey__heading {

        margin-bottom: 45px;

    }


    .wovnly-story-journey__heading h2 {

        font-size: 39px;

    }


    .wovnly-story-timeline__item {

        grid-template-columns:
            42px
            1px
            minmax(0, 1fr);

        gap: 15px;

        min-height: 125px;

    }


    .wovnly-story-timeline__number {

        font-size: 17px;

    }


    .wovnly-story-timeline__content h3 {

        font-size: 21px;

    }


    .wovnly-story-timeline__content p {

        font-size: 10px;

    }


    /* Factory */

    .wovnly-factory-section {

        padding: 65px 20px 75px;

    }


    .wovnly-factory-heading h2 {

        font-size: 40px;

    }


    .wovnly-factory-heading p {

        font-size: 10px;

    }


    .wovnly-factory-video {

        height: 370px;

        border-radius: 30px;

    }


    /* Process */

    .wovnly-process-section {

        padding: 65px 20px 75px;

    }


    .wovnly-process-heading h2 {

        font-size: 39px;

    }


    .wovnly-process-grid {

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

    }


    .wovnly-process-item {

        min-height: 230px;

    }


    .wovnly-process-item:nth-child(2) {

        border-right: 0;

    }


    .wovnly-process-item:nth-child(3) {

        border-right: 1px solid #d9ccc5;

        border-top: 1px solid #d9ccc5;

    }


    .wovnly-process-item:nth-child(4) {

        border-top: 1px solid #d9ccc5;

    }


    .wovnly-process-item:nth-child(5) {

        grid-column: 1 / -1;

        border-top: 1px solid #d9ccc5;

        border-right: 0;

    }


    /* Responsibility */

    .wovnly-story-responsibility {

        padding: 65px 20px;

    }


    .wovnly-story-responsibility__wrapper {

        display: flex;

        flex-direction: column;

        gap: 35px;

    }


    .wovnly-story-responsibility__content h2 {

        font-size: 39px;

    }


    .wovnly-story-responsibility__image {

        width: 100%;

        height: 360px;

        border-radius: 0 45px 0 45px;

    }


    /* Closing */

    .wovnly-story-closing {

        min-height: 450px;

        padding: 70px 20px;

    }


    .wovnly-story-closing h2 {

        font-size: 48px;

    }


    .wovnly-story-closing__script {

        font-size: 22px;

    }

}


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

@media (max-width: 480px) {

    .wovnly-story-hero h1 {

        font-size: 40px;

    }


    .wovnly-story-beginning__image {

        height: 330px;

    }


    .wovnly-story-beginning__content h2 {

        font-size: 34px;

    }


    .wovnly-factory-video {

        height: 290px;

        border-radius: 22px;

    }


    .wovnly-process-grid {

        grid-template-columns: 1fr;

    }


    .wovnly-process-item,
    .wovnly-process-item:nth-child(3),
    .wovnly-process-item:nth-child(4),
    .wovnly-process-item:nth-child(5) {

        grid-column: auto;

        min-height: 200px;

        border-right: 0;

        border-top: 1px solid #d9ccc5;

    }


    .wovnly-process-item:first-child {

        border-top: 0;

    }


    .wovnly-story-responsibility__image {

        height: 300px;

    }


    .wovnly-story-closing h2 {

        font-size: 41px;

    }


    .wovnly-story-closing__script {

        font-size: 19px;

    }

}

.category-collection{
    padding: 50px 0;
    background-color: #f8f1eb;
}

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

.wovnly-category-statement {

    position: relative;

    width: 100%;

    padding: 115px 0;

    overflow: hidden;

    background: #5b3733;

}


.wovnly-category-statement-content {

    position: relative;

    z-index: 3;

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}


.wovnly-category-statement-content > span {

    display: block;

    margin-bottom: 20px;

    color: #ead8d2;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;

}


.wovnly-category-statement-content h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: 44px;

    font-weight: 400;

    line-height: 1.03;

}


.wovnly-category-statement-content p {

    margin: 22px auto 0;

    color: rgba(255,255,255,0.78);

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;

}



/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.wovnly-category-statement-circle {

    position: absolute;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50%;

    pointer-events: none;

}


.wovnly-category-statement-circle.circle-one {

    width: 520px;

    height: 520px;

    left: -270px;

    top: -260px;

}


.wovnly-category-statement-circle.circle-two {

    width: 360px;

    height: 360px;

    right: -160px;

    bottom: -190px;

}



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

@media (max-width: 1199px) {

    .wovnly-category-hero-grid {

        gap: 55px;

    }


    .wovnly-category-hero-content h1 {

        font-size: 65px;

    }


    .wovnly-category-hero-image {

        height: 430px;

    }


    .wovnly-category-intro-content h2 {

        font-size: 55px;

    }


    .wovnly-category-statement-content h2 {

        font-size: 58px;

    }

}



@media (max-width: 991px) {

    .wovnly-category-hero {

        padding: 30px 0 75px;

    }


    .wovnly-category-hero-grid {

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .wovnly-category-hero-content {

        padding-left: 0;

    }


    .wovnly-category-hero-content h1 {

        font-size: 55px;

    }


    .wovnly-category-hero-image {

        height: 390px;

        border-radius: 70px 0 70px 0;

    }


    .wovnly-category-intro {

        padding: 80px 0;

    }


    .wovnly-category-intro-content h2 {

        font-size: 50px;

    }


    .wovnly-category-products {

        padding: 80px 0 90px;

    }


    .wovnly-product-grid {

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

        gap: 45px 22px;

    }


    .wovnly-category-statement {

        padding: 90px 0;

    }


    .wovnly-category-statement-content h2 {

        font-size: 52px;

    }

}



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

@media (max-width: 767px) {

    .wovnly-category-hero {

        padding: 25px 20px 60px;

    }


    .wovnly-category-breadcrumb {

        margin-bottom: 28px;

    }


    .wovnly-category-hero-grid {

        display: flex;

        flex-direction: column;

        gap: 35px;

    }


    .wovnly-category-hero-content {

        width: 100%;

        padding: 0;

    }


    .wovnly-category-eyebrow {

        margin-bottom: 13px;

        font-size: 8px;

        letter-spacing: 2.5px;

    }


    .wovnly-category-hero-content h1 {

        font-size: 46px;

    }


    .wovnly-category-hero-content p {

        max-width: 100%;

        margin-top: 18px;

        font-size: 11px;

        line-height: 1.7;

    }


    .wovnly-category-hero-image {

        width: 100%;

        height: 350px;

        border-radius: 50px 0 50px 0;

    }



    /* Intro */

    .wovnly-category-intro {

        padding: 70px 20px 60px;

    }


    .wovnly-category-intro-content h2 {

        font-size: 42px;

        line-height: 1.07;

    }


    .wovnly-category-intro-content p {

        font-size: 10px;

        line-height: 1.7;

    }



    /* Products */

    .wovnly-category-products {

        padding: 65px 20px 75px;

    }


    .wovnly-category-products-heading {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-bottom: 32px;

    }


    .wovnly-category-products-heading h2 {

        font-size: 37px;

    }


    .wovnly-product-count {

        margin: 0;

        font-size: 9px;

    }


    .wovnly-product-grid {

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

        column-gap: 13px;

        row-gap: 32px;

    }


    .wovnly-product-image {

        border-radius: 38px 0 38px 0;

    }


    .wovnly-product-info {

        display: block;

        padding-top: 12px;

    }


    .wovnly-product-category {

        margin-bottom: 4px;

        font-size: 7px;

        letter-spacing: 1.2px;

    }


    .wovnly-product-info h3 a {

        font-size: 15px;

    }


    .wovnly-product-price {

        display: block;

        margin-top: 5px;

        font-size: 10px;

    }



    /* Statement */

    .wovnly-category-statement {

        padding: 80px 20px;

    }


    .wovnly-category-statement-content h2 {

        font-size: 43px;

    }


    .wovnly-category-statement-content p {

        font-size: 10px;

    }


    .wovnly-category-statement-circle.circle-one {

        width: 380px;

        height: 380px;

        left: -210px;

        top: -190px;

    }


    .wovnly-category-statement-circle.circle-two {

        width: 260px;

        height: 260px;

        right: -130px;

        bottom: -140px;

    }

}



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

@media (max-width: 480px) {

    .wovnly-category-hero {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-category-hero-content h1 {

        font-size: 40px;

    }


    .wovnly-category-hero-image {

        height: 300px;

    }


    .wovnly-category-intro {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-category-intro-content h2 {

        font-size: 36px;

    }


    .wovnly-category-products {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-category-products-heading h2 {

        font-size: 34px;

    }


    .wovnly-product-grid {

        column-gap: 10px;

        row-gap: 27px;

    }


    .wovnly-product-image {

        border-radius: 30px 0 30px 0;

    }


    .wovnly-product-info h3 a {

        font-size: 13px;

    }


    .wovnly-product-category {

        font-size: 6px;

    }


    .wovnly-product-price {

        font-size: 9px;

    }


    .wovnly-category-statement {

        padding: 70px 15px;

    }


    .wovnly-category-statement-content h2 {

        font-size: 36px;

    }

}

/* =========================================================
   HOUSE OF WOVNLY
   CONTACT PAGE
========================================================= */


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

.wovnly-contact-hero {

    width: 100%;

    padding: 35px 0 105px;

    background: #f8f1eb;

}


.wovnly-contact-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 75px;

}


.wovnly-contact-breadcrumb a {

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    text-decoration: none;

}


.wovnly-contact-breadcrumb span {

    color: #817570;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

}


.wovnly-contact-breadcrumb span:last-child {

    color: #332c29;

}


.wovnly-contact-hero-content {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}


.wovnly-contact-eyebrow {

    display: block;

    margin-bottom: 18px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;

    line-height: 1.4;

    text-transform: uppercase;

}


.wovnly-contact-hero-content h1 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 44px;

    font-weight: 400;

    line-height: 1.03;

}


.wovnly-contact-hero-content p {

    max-width: 600px;

    margin: 25px auto 0;

    color: #4d4643;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.8;

}



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

.wovnly-contact-main {

    padding: 110px 0 120px;

    background: #ffffff;

}


.wovnly-contact-grid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 100px;

    align-items: start;

}


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

.wovnly-contact-info {

    padding-top: 10px;

}


.wovnly-contact-info h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 44px;

    font-weight: 400;

    line-height: 1.05;

}


.wovnly-contact-intro {

    max-width: 430px;

    margin: 25px 0 45px;

    color: #514a47;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.8;

}


/* Contact Detail */

.wovnly-contact-detail {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-bottom: 27px;

}


.wovnly-contact-detail-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d8c8c1;

    border-radius: 50%;

    color: #99635d;

    font-size: 12px;

}


.wovnly-contact-detail span {

    display: block;

    margin-bottom: 5px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 1.5px;

}


.wovnly-contact-detail a {

    color: #302b29;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    text-decoration: none;

}


.wovnly-contact-detail p {

    margin: 0;

    color: #302b29;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.6;

}


/* Social */

.wovnly-contact-social {

    margin-top: 45px;

    padding-top: 25px;

    border-top: 1px solid #ddd2cc;

}


.wovnly-contact-social > span {

    display: block;

    margin-bottom: 15px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    letter-spacing: 1.5px;

}


.wovnly-contact-social div {

    display: flex;

    align-items: center;

    gap: 9px;

}


.wovnly-contact-social a {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d8c8c1;

    border-radius: 50%;

    color: #99635d;

    font-size: 13px;

    text-decoration: none;

    transition: all .3s ease;

}


.wovnly-contact-social a:hover {

    background: #99635d;

    border-color: #99635d;

    color: #ffffff;

}



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

.wovnly-contact-form-wrapper {

    padding: 45px;

    background: #f8f1eb;

}


.wovnly-contact-form-heading {

    margin-bottom: 35px;

}


.wovnly-contact-form-heading > span {

    display: block;

    margin-bottom: 10px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 2px;

}


.wovnly-contact-form-heading h3 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 44px;

    font-weight: 400;

    line-height: 1.08;

}



/* Form Row */

.wovnly-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


/* Form Group */

.wovnly-form-group {

    margin-bottom: 23px;

}


.wovnly-form-group label {

    display: block;

    margin-bottom: 8px;

    color: #423a37;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 500;

}


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

    width: 100%;

    padding: 12px 0;

    border: 0;

    border-bottom: 1px solid #cdbdb5;

    outline: none;

    border-radius: 0;

    background: transparent;

    color: #302b29;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    transition: border-color .3s ease;

}


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

    color: #9a8e89;

}


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

    border-bottom-color: #99635d;

}


.wovnly-form-group textarea {

    min-height: 100px;

    resize: vertical;

}


/* Submit */

.wovnly-contact-submit {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 7px 8px 7px 21px;

    border: 0;

    border-radius: 50px;

    background: #99635d;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    cursor: pointer;

}


.wovnly-contact-submit span {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #99635d;

    font-size: 14px;

}



/* =========================================================
   LOCATION
========================================================= */

.wovnly-contact-location {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: #5b3733;

}


.wovnly-contact-location-circle {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -320px;

    top: -300px;

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

    border-radius: 50%;

}


.wovnly-contact-location-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 80px;

    align-items: center;

}


.wovnly-contact-location-image {

    height: 500px;

    overflow: hidden;

    border-radius: 90px 0 90px 0;

}


.wovnly-contact-location-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.wovnly-contact-location-content .wovnly-contact-eyebrow {

    color: #e6c9c2;

}


.wovnly-contact-location-content h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 44px;

    font-weight: 400;

    line-height: 1.05;

}


.wovnly-contact-location-content > p {

    max-width: 480px;

    margin: 25px 0;

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

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.8;

}


.wovnly-location-address {

    margin-top: 30px;

    padding-top: 20px;

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

}


.wovnly-location-address span {

    display: block;

    margin-bottom: 7px;

    color: #e5c4bd;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    letter-spacing: 1.5px;

}


.wovnly-location-address p {

    margin: 0;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.6;

}


.wovnly-location-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    text-decoration: none;

}


.wovnly-location-link i {

    transition: transform .3s ease;

}


.wovnly-location-link:hover {

    color: #ffffff;

}


.wovnly-location-link:hover i {

    transform: translateX(4px);

}



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

.wovnly-contact-cta {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: #ffffff;

}


.wovnly-contact-cta-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.wovnly-contact-cta-content > span {

    display: block;

    margin-bottom: 18px;

    color: #99635d;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    letter-spacing: 3px;

}


.wovnly-contact-cta-content h2 {

    margin: 0;

    color: #99635d;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 44px;

    font-weight: 400;

    line-height: 1.03;

}


.wovnly-contact-cta-content p {

    margin: 20px 0 0;

    color: #554c49;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

}


.wovnly-contact-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 30px;

    padding: 8px 8px 8px 22px;

    border-radius: 50px;

    background: #99635d;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    text-decoration: none;

}


.wovnly-contact-cta-button span {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #99635d;

    font-size: 14px;

}


/* Decorative circles */

.wovnly-contact-cta-circle {

    position: absolute;

    border: 1px solid rgba(153,99,93,.15);

    border-radius: 50%;

}


.wovnly-contact-cta-circle.circle-one {

    width: 500px;

    height: 500px;

    left: -260px;

    bottom: -280px;

}


.wovnly-contact-cta-circle.circle-two {

    width: 300px;

    height: 300px;

    right: -150px;

    top: -170px;

}



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

@media (max-width: 991px) {

    .wovnly-contact-hero {

        padding-bottom: 80px;

    }


    .wovnly-contact-breadcrumb {

        margin-bottom: 55px;

    }


    .wovnly-contact-hero-content h1 {

        font-size: 60px;

    }


    .wovnly-contact-main {

        padding: 80px 0 90px;

    }


    .wovnly-contact-grid {

        gap: 55px;

    }


    .wovnly-contact-info h2 {

        font-size: 45px;

    }


    .wovnly-contact-form-wrapper {

        padding: 35px;

    }


    .wovnly-contact-location {

        padding: 85px 0;

    }


    .wovnly-contact-location-grid {

        gap: 45px;

    }


    .wovnly-contact-location-image {

        height: 430px;

    }


    .wovnly-contact-location-content h2 {

        font-size: 45px;

    }


    .wovnly-contact-cta {

        padding: 90px 0;

    }


    .wovnly-contact-cta-content h2 {

        font-size: 55px;

    }

}



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

@media (max-width: 767px) {

    .wovnly-contact-hero {

        padding: 25px 20px 65px;

    }


    .wovnly-contact-breadcrumb {

        margin-bottom: 50px;

    }


    .wovnly-contact-hero-content h1 {

        font-size: 43px;

    }


    .wovnly-contact-hero-content p {

        font-size: 11px;

        line-height: 1.7;

    }


    .wovnly-contact-main {

        padding: 65px 20px 75px;

    }


    .wovnly-contact-grid {

        display: flex;

        flex-direction: column;

        gap: 55px;

    }


    .wovnly-contact-info h2 {

        font-size: 40px;

    }


    .wovnly-contact-intro {

        margin-bottom: 35px;

        font-size: 10px;

    }


    .wovnly-contact-detail {

        margin-bottom: 22px;

    }


    .wovnly-contact-detail a,
    .wovnly-contact-detail p {

        font-size: 11px;

    }


    .wovnly-contact-form-wrapper {

        padding: 30px 22px;

    }


    .wovnly-contact-form-heading h3 {

        font-size: 32px;

    }


    .wovnly-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .wovnly-contact-location {

        padding: 65px 20px 75px;

    }


    .wovnly-contact-location-grid {

        display: flex;

        flex-direction: column;

        gap: 40px;

    }


    .wovnly-contact-location-image {

        width: 100%;

        height: 330px;

        border-radius: 50px 0 50px 0;

    }


    .wovnly-contact-location-content h2 {

        font-size: 40px;

    }


    .wovnly-contact-location-content > p {

        font-size: 10px;

    }


    .wovnly-contact-cta {

        padding: 75px 20px;

    }


    .wovnly-contact-cta-content h2 {

        font-size: 43px;

    }


    .wovnly-contact-cta-content p {

        font-size: 10px;

    }

}



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

@media (max-width: 480px) {

    .wovnly-contact-hero {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-contact-hero-content h1 {

        font-size: 38px;

    }


    .wovnly-contact-main {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-contact-info h2 {

        font-size: 35px;

    }


    .wovnly-contact-form-wrapper {

        padding: 25px 18px;

    }


    .wovnly-contact-location {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-contact-location-image {

        height: 290px;

    }


    .wovnly-contact-location-content h2 {

        font-size: 35px;

    }


    .wovnly-contact-cta {

        padding-left: 15px;

        padding-right: 15px;

    }


    .wovnly-contact-cta-content h2 {

        font-size: 36px;

    }

}