:root {
    --base-color: #f7d2ca;
    --medium-gray: #727272;
    --dark-gray: #2d2c2b;
    --nero-gray: #1e1d1d;
    --light-red: #c8b2ab;
    --alt-font: 'Space Grotesk', sans-serif;
    --primary-font: 'Inter', sans-serif;
    --yellow:#ffea23;
    --white:#fff;
    --bs-white-rgb:255,255,255;
    --extra-medium-gray: #e4e4e4;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'grace';
    src: url('./fonts/grace.woff2');
    font-style: normal;
    display: swap;
}

@font-face {
    font-family: 'inter';
    src: url('./fonts/inter.woff2');
    font-style: normal;
    display: swap;
}
html{
    scroll-behavior: smooth;
}
body{
    color: var(--medium-gray);
    font-family: 'inter',sans-serif;
    font-size: 17px;
    line-height: 30px;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
}
.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
.bor-r {
    border-right: 1px solid;
}
.border-color-extra-medium-gray {
    border-color: var(--extra-medium-gray) !important;
}
.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-start {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-end {
    border-right: 1px solid;
}


.h1, h1 {
    font-size: 4rem;
    line-height: 4rem;
}
.d-f{
    display: flex;
}
.di-f{
    display: inline-flex;
}
.col-1>* {
    flex: 0 0 auto;
    width: 100%;
}
.col-6 {
    width: 50%;
}
.col-6, .col-7 {
    flex: 0 0 auto;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
.top-120px {
    top: 120px;
}
.position-sticky {
    position: sticky!important;
}
.p-0{
    padding: 0!important;
}
.p-15 {
    padding: 15% !important;
}
.p-65p {
    padding: 65px !important;
}
.h-100 {
    height: 100%!important;
}
.jc-sb{
    justify-content: space-between;
}
.jc-fs{
    justify-content: flex-start;
}
.ai-c{
    align-items: center;
}
.flex-column{
    flex-direction: column !important;
}
.ai-fe{
    align-items: flex-end;
}
.po-abs{
    position: absolute;
}
h1{
    font-family: 'grace', sans-serif;
}
h2{
    font-family: 'grace', sans-serif;
    font-size: 2.5rem ;
}
h4{
    font-size: 2.05rem;
}
.t-0{
    top:0;
}
.w-60{
    width: 60% !important;
}
.w-80{
    width: 80%;
}
.w-85 {
    width: 85%!important;
}
.w-90{
    width: 90% !important;
}
.w-100{
    width: 100%;
}
.w-360p {
    width: 360px !important;
}
.plr-15p{
    padding-right: 15px;
    padding-left: 15px;
}
.alt-font{
    font-family: 'grace', sans-serif;
}
.btn {
    border: 2px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    width: auto;
    font-family: var(--alt-font);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.btn-box-shadow {
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    -webkit-transition: all .3s cubic-bezier(.2,0,.3,1);
    transition: all .3s cubic-bezier(.2,0,.3,1);
}
.pe-5 {
    padding-right: 5%;
}
.pe-15p {
    padding-right: 15px !important;
}
.pe-40p{
    padding-right: 40px
}
.text-base-color{
    color: var(--base-color);
}
.mt-20p{
    margin-top: 20px;
}
.mt-30p{
    margin-top: 30px;
}
.mt-60p{
    margin-top: 60px;
}
.mt-20{
    margin-top: 20%;
}
.ps-15p {
    padding-left: 15px !important;
}
.ps-40p{
    padding-left: 40px;
}
.pe-40p{
    padding-right: 40px;
}
.ps-60{
    padding-left: 60px !important;
}
.text-decoration-line-bottom {
    border-bottom: 1px solid;
}
.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-radius-100px{
    border-radius: 100px;
}
.ls--3p{
    letter-spacing: -3px !important;
}
.ls--4p {
    letter-spacing: -4px;
}
.ls--6p {
    letter-spacing: -6px;
}
.rounded-circle{
    height: 250px;
    width: 250px;
    background-color: var(--dark-gray);
    border-radius: 50%;
}
.grid {
    list-style: none;
    padding: 0;
    margin: 0;
}
.grid-item{
    padding: 10px;
}
ul li {
    list-style: none;
}
.t-w{
    color: white;
}
.d-block{
    display: block;
}
.fs-12p{
    font-size: 12px;
}
.fs-14p{
    font-size: 14px;
}
.fs-15p{
    font-size: 15px;
}
.fs-16p{
    font-size: 16px;
}
.fs-18p{
    font-size: 18px;
}
.fs-20p{
    font-size: 20px;
}
.fs-30p{
    font-size: 1.5rem;
    line-height: 2.8rem;
}
.fs-40p{
    font-size: 40px;
    
}
.fs-110{
    font-size: 110px;
}
.fs-140{
    font-size: 5rem;
    line-height: 5.625rem;
}
a, a:hover {
    text-decoration: none;
}
.alt-f{
    font-family: "grace", sans-serif;
}
.pos-rel{
    position: relative !important;
}
footer{
    padding-top: 50px;
}
footer p{
    margin-bottom: 25px;
}
footer ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
.footer-navbar li:first-child a {
    padding-left: 0;
}

.footer-navbar li {
    margin-bottom: 0;
}
footer .nav-link {
    color: var(--medium-gray);
    padding: .5rem .8rem;
}
.aspect-16\/9 {
    aspect-ratio: 16 / 9;
}
.rounded-md {
    border-radius: 0.42125rem;
}

.footer-navbar li, .quantity, .shop-size li {
    display: inline-block;
}
.nav-link {
    display: block;
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.footer-navbar li:last-child a, footer .footer-navbar .nav-item:last-child a {
    padding-right: 0;
}
.border-color-extra-medium-gray {
    border-color: var(--extra-medium-gray) !important;
}
.divider-style-03 {
    border-top: 1px solid;
    width: 100%;
}
.pt-5{
    padding-top: 5%;
}
.last-paragraph-no-margin p:last-of-type {
    margin-bottom: 0;
}
.lh-normal {
    line-height: normal;
}
.mt-0{
    margin-top: 0;
}
.mb-0{
    margin-bottom: 0px !important;
}

.mb-5p{
    margin-bottom: 5px;
}
.mb-15{
    margin-bottom: 15%;
}
.mb-20p{
    margin-bottom: 20px;
}
.mb-30p{
    margin-bottom: 30px;
}
.mb-3{
    margin-bottom: 3%;
}
.mb-50p{
    margin-bottom: 50px;
}
.mb-70p {
    margin-bottom: 70px!important;
}
.mb-40p{
    margin-bottom: 40px;
}
.mb-4 {
    margin-bottom: 4%!important;
}
.mr-15p{
    margin-right: 15px;
}
.e-icon{
    width: 34px;
    height: 34px;
}
.s-icon{
    display: flex;
    width: 34px;
    height: 34px;
}
.s-icons42{
    display: flex;
    width: 42px;
    height: 42px;
}
.me-0 {
    margin-right: 0 !important;
}
.me-20p {
    margin-right: 20px !important;
}
.me-15p {
    margin-right: 15px !important;
}
.ms-0{
    margin-left: 0;
}
.me-0{
    margin-right: 0;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.di-b{
    display: inline-block;
}
.jc-c{
    justify-content: center;
}
.op-8{
    opacity: 0.8;
}
.text-dark-gray{
    color: var(--dark-gray);
}
.image-mask{
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.cover-background {
    background-size: cover;
    background-position: center center !important;
    position: relative;
    background-repeat: no-repeat !important;
    overflow: hidden;
}
.zi-9{
    z-index: 9;
}

.pb-15p{
    padding-bottom: 15px !important;
}
.pb-20p{
    padding-bottom: 20px !important;
}
.pb-30p{
    padding-bottom: 30px;
}
.pb-40p{
    padding-bottom: 40px;
}
.w-60{
    width: 60px;
}
.w-70{
    width: 70%;
}
.h-100{
    height: 100%;
}
.h-40p{
    height: 40px;
}
.h-45p{
    height: 45px;
}
.h-60p{
    height: 60px;
}
.t-c{
    text-align: center;
}
.pt-5p{
    padding-top: 5px;
}
.pt-15p{
    padding-top: 15px;
}
.pt-30p{
    padding-top: 30px;
}

.pt-40p{
    padding-top: 40px;
}
.pt-50p{
    padding-top: 50px;
}
.r-60p{
    right: 60px;
}
.h-120p{
    height: 120px;
}
.b-0{
    bottom: 0;
}
.l-0{
    left: 0;
}
.z-index-9 {
    z-index: 9;
}
.w-2p{
    width: 2px;
}
.h-450px{
    height: 450px;
}
.f-chd{
    flex: 1;
}
.r-3p{
    right: 3px;
}
.hl{
    background-color: var(--dark-gray);
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
}
.fw-500{
    font-weight: 500;
}
.fw-700{
    font-weight: 700;
}
.ls-1p{
    letter-spacing: 1px;
}
.ls-05p {
    letter-spacing: .5px !important;
}
.navbar{
    background-color: #ffffff !important;
    position: absolute;
    left: 0;
    z-index: 99;
    transition: .3s;
    width: 100%;
    top: 0;
}
.navbar-toggler-line:nth-child(1){
    top:0;
    width: 14px;
}
.navbar-toggler-line:nth-child(2), .navbar-toggler-line:nth-child(3) {
    top: 6px;
}
.navbar-toggler-line:nth-child(4) {
    top: 12px;
    width: 14px;
}
.nav-brand{
    white-space: nowrap;
    text-decoration: none;
    margin-right: 0;
    vertical-align: middle;
    padding: 30px 0;
    display: inline-block;
    font-size: 0;
}

.nav-brand img {
    max-height: 39px;
    vertical-align: middle;
}

header .navbar {
    left: 0;
    z-index: 99;
    transition: .3s;
}
header .navbar [class*=col-] {
    padding: 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.header-icon {
    display: flex;
    align-items: center;
}
.btn.btn-large {
    font-size: 14px;
    padding: 18px 34px;
}
.btn.btn-transparent-white-light {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: var(--white);
}
header .header-button .btn {
    text-transform: inherit;
    font-weight: 600;
    letter-spacing: 0;
}
.ms-25p {
    margin-left: 25px !important;
}
.grid.grid-3col li {
    width: 33.33%;
}
.navbar-toggler {
    font-size: 24px;
    width: 22px;
    height: 14px;
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    border: none;
    vertical-align: middle;
    border-radius: 0;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: transparent;
    z-index: 12;
}
.grid .grid-sizer {
    padding: 0!important;
    margin: 0!important;
}
.categories-btn {
    padding: 4px 12px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: .3s;
    transition: .3s;
    margin-left: 5px;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
}
.overflow-hidden {
    overflow: hidden!important;
}
.bg-base-color{
    background-color: var(--base-color);
}
.navbar-toggler-line {
    height: 2px;
    width: 22px;
    content: "";
    display: block;
    border-radius: 0;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--dark-gray);
    line-height: 1;
    color: var(--bs-navbar-color);
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s;
    transition: .25s;
}


.con-mg{
    display: none !important;
}




.navbar-toggler.active {
    position: absolute;
    right: 30px;
    top: 35px;
    margin: 0;
    
}
.navbar-toggler.active .navbar-toggler-line {
    background-color: #fff;
}
.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}



.navbar-toggler.active .navbar-toggler-line:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.navbar-toggler.active .navbar-toggler-line:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.navbar-toggler.active .navbar-toggler-line:nth-child(1), .navbar-toggler.active .navbar-toggler-line:nth-child(4) {
    top: 7px;
    width: 0%;
}
/**section 1*/
.bg-sliding-line {
    background-image: linear-gradient(135deg, transparent 45%, #d1b9b2 45%, #d1b9b2 55%, transparent 0);
    background-size: 5px 5px;
    background-color: var(--base-color);
    padding: 50px 30px;
}

.fs-5{ 
    font-size: 4rem;
}
.fm-a{
    font-family: 'grace', sans-serif;
}
.ls--1p{
    letter-spacing: -1px
}
.ls--2p{
    letter-spacing: -2px
}
.td-n{
    text-decoration: none;
}
.pb-0{
    padding-bottom: 0 !important;
}
.d-none{
    display: none !important;
}
section, section.big-section, section.extra-big-section {
    padding-top: 50px;
    padding-bottom: 50px;
}
.bg-nero-gray{
    background-color: var(--nero-gray);
}
.bg-yellow{
    background-color: var(--yellow);
}
.fw-600{
    font-weight: 600;
}
.lh-32p{
    line-height: 32px;
}
.lh-28p{
    line-height: 28px;
}
.lh-30p{
    line-height: 28px;
}
.lh-375{
    line-height: 3.75rem;
}
.lh-205{
    line-height: 2.7rem;
}
.lh-175{
    line-height: 1.75rem;
}
.wrd span{
    clip-path: inset(0 0 0 0);
    height: 100px;
    z-index: -1;
    float: left;
    width: 100%;
    transition: clip-path 1s;
    transition-timing-function: cubic-bezier(.4,.6,.4,1);
    position: absolute;
    left: 0;
    bottom: 0;
}
span img {
    position: absolute;
    left: 0;
    bottom: 0;
    transition: none;
    height: 100px;
    width: auto;
}
img{
    max-width:100%;
    height: auto;
}

.fs-35{
    font-size: 3.5rem;
}
.r-cir{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: var(--dark-gray);
    position: relative;
    overflow: none;
}
.wins{
    transform: rotate(180deg);
    writing-mode: vertical-lr;
}
.swiper-container {
    width: 100%;
  }
 
  .h-450{
    height: 450px;
  }
  .container-fluid{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
 }
 .container-fluid {
    padding-left: 65px;
    padding-right: 65px;
}
 .container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
 }
 .text-start {
    text-align: left !important;
}
.ofr-c{
    flex-direction: column;
}
 .md-p-5 {
    padding: 5%!important;
}
.separator-line-1px {
    height: 1px;
}
.deco{
    width: 100%;
    max-width: 764px;
    margin: auto;
}
.bg-extra-medium-gray {
    background-color: var(--extra-medium-gray);
}
.nav-menu {
    align-self: stretch;
}
.navbar-nav .nav-item, .navbar-nav .nav-item a {
    display: flex;
    align-self: stretch;
    align-items: center;
}
  @media screen and (min-width:576px) {
    .col-2>* {
        flex: 0 0 auto;
        width: 50%;
     }
     .fr-r{
        flex-direction: row;
     }
     .sm-h-auto{
        height: auto;
     }
     .container{
        width: 100%;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
     }
     .sm-ps-30p{
        padding-left: 30px;
     } 
     .sm-pe-30p{
        padding-right: 30px;
     } 
     .sm-pt-50p{
        padding-top: 50px;
     } 
     .sm-pb-50p{
        padding-bottom: 50px;
     }
     
  }
  @media screen and (min-width:1199px) {
  
    .lg-w-100{
        width: 100% !important;
    }
    .lg-ps-40p {
        padding-left: 40px!important;
    }
    .lg-pe-40p {
        padding-right: 40px!important;
    }
    .lg-pt-30p {
        padding-top: 30px!important;
    }
    
    
  }

@media screen and (max-width: 1600px) {
    .fs-140 {
        font-size: 8.125rem;
        line-height: 6.873rem;
    }
} 
    
.nav-link{
    font-family: 'grace';
    font-weight: 600;
    font-size: 19px;
}
.nav-link {
    font-size: 16px;
    line-height: 20px;
    padding: 10px 20px;
    font-weight: 500;
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s;
    color: var(--white);
}

  @media screen and (max-width:1199px) {
    .navbar>.container-fluid {
        padding-left: 35px;
        padding-right: 35px;
    }
    .navbar-nav .nav-link {
        padding: 10px 15px;
    }
    .fancy-text-style-3 {
        transform: rotate(0) !important;
    }
    .lg-w-100 {
        width: 100% !important;
    }
    
    .lg-p-10 {
        padding: 10%!important;
    }
  
        .lg-w-100 {
            width: 100% !important;
        }
  }
  .order-1 {
    order: 1 !important;
}
  
  .order-2 {
    order: 2!important;
}
@media screen and (min-width:768px) {
    .fr-c{
        flex-direction: row !important;
    }
    .md-ai-c{
        align-items: center !important;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .offset-md-1 {
        margin-left: 8.33333333%;
    }
    .order-md-1 {
        order: 1!important;
    }
    .d-md-block {
        display: block !important;
    }
    .container{
        width: 100%;
        max-width: 720px;
    }
    .col-md-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .text-md-start {
        text-align: left !important;
    }
    .md-h2-fs{
        font-size: 3.438rem;
        line-height: 3.438rem;
    }
    .text-md-center{
        text-align: center;
    }
  }
  @media screen and (min-width:992px) {
    .navbar{
        position: absolute;
        width: 100%;
        background-color: transparent !important;
    }
    .nav-menu {
        display: flex !important;
        flex-basis: auto;
    }
    .nav-menu a{
        color: #271f1f;
        font-size: 18px;
    }
    .navbar-nav {
        flex-direction: row;
    }
    .r-col-lg-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .d-lg-flex {
        display: flex !important
;
    }
    .r-col-lg-5>* {
        flex: 0 0 auto;
        width: 20%;
    }
    .navbar-toggler{
        display: none;
    }
    .d-lg-block {
        display: block !important;
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .container{
        max-width: 960px;
    }
    .fs-140 {
        font-size: 6.875rem;
    }
    .lh-95 {
        line-height: 4.75rem;
    }
  }

@media screen and (min-width:1200px) {
   .container {
        max-width: 1140px;
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .offset-xl-1 {
        margin-left: 8.33333333%;
    }
}

.navbar-nav{
    display: flex;
}

@media screen and (max-width:991px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgb(45, 44, 43);
        transition: top 0.3s ease-in-out;
        z-index: 11;
        display: none;
    }
    .navbar-toggler {
        display: flex;
        align-self: center;
    }
    .navbar-nav{
        flex-direction: column;
        justify-content: center;
    }
    
    .nav-menu.active {
        top:0 ;
        display: flex;
        justify-content: center;
        height: 100vh;
    }
    .nav-menu li {
        margin: 15px 0;
    }
    
    .nav-menu a {
        text-decoration: none;
        color: #fff;
        font-size: 34px;
        font-weight: bold;
        font-family: 'grace', sans-serif;
    }
    .navbar-expand-lg>.container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
    .navbar-expand-lg {
        padding-left: 15px;
        padding-right: 15px;
    }
    .md-mb-0{
        margin-bottom: 0;
    }
    .md-mb-50p{
        margin-bottom: 50px;
    }
    .md-p-5 {
        padding: 5%!important;
    }
    .md-p-40p {
        padding: 40px !important;
    }
    .md-mb-40px {
        margin-bottom: 40px !important;
    }
    section {
        padding-top: 75px;
        padding-bottom: 75px;
    }
    html {
        font-size: 14px;

    }
    .md-mb-40p {
        margin-bottom: 40px !important;
    }
    .afr-c{
        flex-direction: column;
      }
  }


  @media screen and (max-width:1600px) {
    section{
        padding-top: 90px;
        padding-bottom: 90px;
    }
    section.big-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
  }
  .btn.btn-transparent-dark-gray {
    background-color: transparent;
    border-color: var(--dark-gray);
    color: var(--dark-gray);
}
.border-color-transparent-dark-very-light {
    border-color: rgba(35, 35, 35, 0.15) !important;
}
.pe-13 {
    padding-right: 13% !important;
}
.ps-13 {
    padding-left: 13% !important;
}
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
  @media screen and (max-width:767px) {
    section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .sm-pe-0, .sm-px-0 {
        padding-right: 0 !important;
    }
    .sm-ps-0, .sm-px-0 {
        padding-left: 0 !important;
    }
    .sm-mb-0{
        margin-bottom: 0;
    }
    .footer-navbar li .nav-link {
        padding-left: .8rem;
        padding-right: .8rem;
    }
    html {
        font-size: 12px;
    }
    .btn.btn-large {
        font-size: 13px !important;
    }
    .btn.btn-large, .btn.btn-rounded.btn-extra-large {
        padding: 16px 36px;
    }
    .sm-border-end {
        border-right: 1px solid;
    }
    .sm-border-bottom {
        border-bottom: 1px solid;
    }
    .sm-mb-15 {
        margin-bottom: 15%!important;
    }
    .sm-ps-30p{
        padding-left: 30px !important;
    } 
    .sm-pe-30p{
        padding-right: 30px !important;
    }  
    .sm-pt-50p{
        padding-top: 50px !important;
    } 
    .sm-pb-50p{
        padding-bottom: 50px !important;
    }
    .sm-h-450p {
        height: 450px !important;
    }
    .sm-w-60p{
        width: 60px;
    }
    .sm-fs-18p{
        font-size: 18px;
     }
    .sm-w-90 {
        width: 90% !important;
    }
    .fs-140 {
        font-size: 5rem;
    }
    .lh-95 {
        line-height: 3.75rem;
    }
  }
  
  .ms-auto {
    margin-left: auto !important;
}
  .fs-13{
    font-size: 13px;
  }
  .fs-19 {
    font-size: 19px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  }
  .fr-c{
    flex-direction: column;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    display: block;
}

.marquee-slide {
    -webkit-transition-timing-function: linear!important;
    transition-timing-function: linear!important;
    position: relative;
}

.text-outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: var(--white);
}
.text-outline-color-extra-medium-gray {
    -webkit-text-stroke-color: var(--extra-medium-gray);
}
.text-outline, .text-outline-width-1px {
    -webkit-text-stroke-width: 1px;
}
.feature-box.feature-box-left-icon, .feature-box.feature-box-left-icon-middle {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
}
.feature-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 1;
}
.feature-box.feature-box-left-icon .feature-box-content, .feature-box.feature-box-left-icon-middle .feature-box-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.btn.btn-dark-gray {
    background-color: var(--dark-gray);
    color: var(--white);
}
.btn.btn-large {
    padding: 16px 36px;
}
.w-75{
    width: 75%;
}
.border-color-dark-gray {
    border-color: var(--dark-gray) !important;
}

.pr-or{
    order: 1;
}
.co-or{
    order: 2;
}
/**
Animation /

/* Highlight style for the brand name */
.highlight-brand-name {
    font-weight: 600; /* Makes the text bolder */
    color: #2d2c2b;   /* Uses your existing dark gray color */
    opacity: 1;       /* Ensures full opacity, overriding parent's op-8 if needed */
}

/* Initial state for animated elements to prevent FOUC (Flash Of Unstyled Content) */
.animate-fade-in-up,
.animate-fade-in,
.animate-fade-in-right {
    opacity: 0; /* Start hidden */
}

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation Utility Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

/* Animation Delay Utility Classes */
.animate-delay-1 {
    animation-delay: 0.2s;
}
.animate-delay-2 {
    animation-delay: 0.4s;
}
.animate-delay-3 {
    animation-delay: 0.6s;
}
/* Add more delay classes if needed, e.g., .animate-delay-4 for 0.8s */

/* Scroll-triggered animation styles */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Start slightly lower */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
}

/* Journal Card Styles */
.journal-card {
    position: relative; /* Context for absolutely positioned image */
    transition: background-color 0.4s ease-in-out;
}

.journal-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the card area */
    z-index: 0; /* Places the image behind the content */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.4s ease-in-out;
}

.journal-card-content {
    position: relative; /* To sit on top of the image */
    z-index: 1; /* Ensures content is above the image */
    height: 100%; /* Take full height of the card */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes category to top, author/title group to bottom */
}

.journal-card:hover .journal-card-img {
    opacity: 1; /* Show image on hover */
}

.journal-card:hover {
    background-color: transparent !important; /* Make card background transparent on hover */
}

/* Swiper text slide adjustments for single line animation */
.swiper-width-auto .swiper-slide {
    width: auto !important; /* Allow slide to fit its content */
    background-color: transparent !important; /* Ensure no background color interferes */
}
.swiper-width-auto .swiper-slide .fs-140 {
    white-space: nowrap; /* Prevent text from wrapping */
}


/* Add these styles to your style.css file */

/* Discover More Button Hover Effect */
.discover-more-container a {
    transition: color 0.3s ease, transform 0.3s ease;
}

.discover-more-container:hover a {
    color: var(--base-color); /* Or any color you prefer */
    transform: translateY(-3px);
}

.discover-more-container .r-cir {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.discover-more-container:hover .r-cir {
    background-color: var(--base-color); /* Match link hover or choose another */
    transform: translateY(-3px);
}


/* 20+ Circle Animation and Glow */
.experience-circle {
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    animation: pulse-glow 2.5s infinite alternate ease-in-out; /* Subtle pulsing animation */
}

.experience-circle-container:hover .experience-circle {
    background-color: var(--base-color); /* Change background on hover */
    box-shadow: 0 0 15px 5px var(--base-color), /* Inner glow */
                0 0 30px 10px rgba(247, 210, 202, 0.7); /* Outer glow, using base-color with alpha */
    animation-play-state: paused; /* Pause pulsing on hover to emphasize the static glow */
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 8px 2px var(--dark-gray),
                    0 0 15px 5px rgba(45, 44, 43, 0.5);
    }
    100% {
        box-shadow: 0 0 12px 4px var(--dark-gray),
                    0 0 25px 8px rgba(45, 44, 43, 0.7);
    }
}

/* Ensure the sliding line background on the circle is less prominent or removed if it clashes */
.bg-sliding-line-dark-gray {
    background-image: linear-gradient(135deg, transparent 45%, var(--nero-gray) 45%, var(--nero-gray) 55%, transparent 0) !important;
    /* Or consider removing this background-image for the circle if the glow is preferred */
}