@import url(base.css);

/* ===================
   OFFER BAR
=================== */

.offer_bar{ background:var(--primary-800); padding:10px 0;}
.offer_bar p{ text-align:center; color: var(--primary-50); font-size:13px; font-weight:600; letter-spacing: 2px;  text-transform:uppercase;}

/* ===================
   HEADER
=================== */

.site_header{ background:#fff; border-bottom:1px solid var(--border); position:sticky;  top:0; z-index:100; box-shadow: 0 24px 36px -20px rgba(0,0,0,0.0784);}
.header_wrapper{ padding: 5px 0; display:flex; align-items:center; justify-content:space-between;}

/* LOGO */
.logo img { max-width: 170px;}

/* NAV */

.main_nav ul{ display:flex; align-items:center; gap:4rem;}
.main_nav a{ font-size:1.3rem; font-weight:500; letter-spacing:.08rem; transition:.3s;}
.main_nav a:hover{ color:var(--primary-800);}

/* ICONS */
.header_icons{ display:flex; gap:20px;}

/* ===================
   HERO
=================== */

.hero_section{ padding:2rem 0 6rem; overflow:hidden; aspect-ratio: 2.8/1;}
.hero_slider{ overflow:visible; height: 100%; }
.hero_slider .swiper-slide{  transform:scale(.88); transition:all .5s ease;}
.hero_slider .swiper-slide-active{ opacity:1; transform:scale(1);}
.hero_card{ overflow:hidden; border-radius:10px; background:#fff; height: 100%;}
.hero_card img{ width:100%; object-fit:cover; height: 100%;}


.hero_section .swiper-pagination{ position:relative !important; margin-top:4rem;}
.hero_section .swiper-pagination{ display:flex; align-items:center; justify-content:center; gap:2px;}

.hero_section .swiper-pagination-bullet{ width:12px; height:12px; background:#d4d4d4; opacity:1; border-radius:30% 0 30% 0; transform:rotate(13deg); transition: background .3s ease, transform .3s ease;}
.hero_section .swiper-pagination-bullet-active{ background:var(--secondary-700); transform:rotate(90deg) scale(1.15); border: none;}
/* ===================
   RESPONSIVE
=================== */

@media(max-width:1200px){
    .main_nav ul{ gap:2.5rem; }
}

@media(max-width:991px){
    .header_wrapper{ height:7rem;}
    .main_nav{ display:none; }
}

@media(max-width:767px){
    .hero_section{
        padding:15px 0 4rem;
    }
    .header_icons{
        gap:15px;
    }

}


/* CATEGORY GRID--------------------------------- */
/* categories */
.ms_categories{ overflow:hidden;}
.ms_categories .container { max-width: 95%; }
.ms_category_grid{ display:grid; grid-template-columns:repeat(6,minmax(140px, 1fr)); gap:3rem; padding-bottom: 3rem;}

/* Card Design + Initial Position */
.ms_category_card {background: var(--light-brown-color); aspect-ratio: 1/1; box-shadow: 2px 2px 5px 0px rgba(221,197,197,.25); border-radius: 20px; padding: 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; text-decoration:none; overflow:hidden; transition: transform 1500ms cubic-bezier(0.4,0,0.2,1), border-color .35s ease, box-shadow .35s ease; will-change:transform; border: solid 1px var(--primary-100);}

.ms_category_card .ms_category_image { width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center;}
.ms_category_card .ms_category_image img { aspect-ratio: 1/1; object-fit: cover; transition:transform .95s ease;}


/* Start Split */
.ms_category_card:nth-child(odd){ transform:translateX(calc(100% + 25px));}
.ms_category_card:nth-child(even){ transform:translateX(calc(-100% - 25px));}

/* Animate To Center */
.ms_categories[data-inview="true"] .ms_category_card{ transform:translateX(0);}

/* Hover */
.ms_category_card:hover .ms_category_image img { transform:scale(1.05); transition:transform .95s ease;}

/* Title */
.ms_category_card h3{  margin:0; font-size:15px; font-weight:400; color:#1F1F1F; line-height:1.4;}

/* Responsive */
@media(max-width:1199px){
    .ms_category_grid{ grid-template-columns:repeat(4,1fr);}
}

@media(max-width:767px){
    .ms_category_grid{ grid-template-columns:repeat(2,1fr); gap:15px; }
    .ms_category_card{ min-height:120px; padding:20px 10px; }
    .ms_category_card .material-symbols-outlined{ font-size:34px;}
}


/* MS COLLECION---------- */
.ms_collection { background: #edf2f0 url(../images/svgviewer-output.svg) no-repeat center top; background-size: cover; position: relative}

.ms_collection .ms_collection_wrap { display: flex; gap: 2rem; flex-wrap: wrap; position: relative; z-index: 2;}
.ms_collection .ms_collection_wrap svg { max-width: 350px;}
.ms_collection .ms_collection_title { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 2;}

.ms_collection .container { width: min(100% - 4rem,135rem);}

/* Base wrap adjustment to ensure nice grid layout alignment */
.ms_collection .ms_collection_wrap { 
  display: flex; 
  gap: 2rem; 
  flex-wrap: wrap; 
  position: relative; 
  z-index: 2;
}

/* Card basic block definition */
.svg_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  width: 100%;
  cursor: pointer;
}

.ms_collection .ms_collection_wrap svg { 
  width: 100%;
  height: auto;
}

.ms_collection .ms_collection_title { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  flex-grow: 2;
  min-width: 300px;
}

/* --- SVG TRANSFORMS SETUP --- */
.svg_card .mask_path,
.svg_card .product_img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: 50% 50%;
}

.svg_card svg:has(#blob-mask) .mask_path {
  transform-origin: 0px 0px; /* Special handle adjustment for translated vector paths */
}

/* --- INTERACTIVE LABELS STYLING --- */
.card_info {
  text-align: center;
  margin-top: 12px;
  width: 100%;
  
  /* Initial hidden state setup */
  opacity: 0;
  transform: translateY(10px); /* Pushed slightly downwards */
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.product_name {
  font-size: 20px;
  color: #2b2b2b;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.product_price {
  font-size: 16px;
  color: var(--secondary-700); /* Clean luxury studio accent shade */
  font-weight: 600;
  margin: 0;
}

/* --- MASTER HOVER BEHAVIOURS --- */
.svg_card:hover .mask_path {
  transform: scale(1.03); /* Mask outline gently expands */
}

.svg_card:hover .product_img {
  transform: scale(1.08); /* Luxury zoom inside frame viewport */
}

.svg_card:hover .card_info {
  opacity: 1;              /* Text fades into clean view */
  transform: translateY(0); /* Text glides smooth up to original spot */
}


/* Section Container setup */
/* Background Wave Container */
.svg-wave-container {
  position: absolute;
  bottom: 0;   /* Pin waves gently to the bottom of the section */
  left: 0;
  width: 100%;
  height: 40%; /* Controls how high up the waves reach behind your cards */
  z-index: 1;
  pointer-events: none;
}

.svg-wave-container svg {
  width: 100%;
  height: 100%;
}

/* Core Wave Animation Settings */
.wave-line {
  transform-origin: center bottom;
}

/* Wave 1: Slow, gentle background layer */
.wave-back {
  animation: waveDriftSlow 24s ease-in-out infinite alternate;
}

/* Wave 2: Mid-speed accent layer */
.wave-mid {
  animation: waveDriftMid 18s ease-in-out infinite alternate;
}

/* Wave 3: Faster foreground layer */
.wave-front {
  animation: waveDriftFast 14s ease-in-out infinite alternate;
}

/* Ensure your furniture cards hover elegantly on top */
.mintas-content-grid {
  position: relative;
  z-index: 2;
}

/* Keyframes for Organic, Liquid-like Motion */
@keyframes waveDriftSlow {
  0% {
    transform: translateX(-4%) scaleX(1);
  }
  100% {
    transform: translateX(4%) scaleX(1.05);
  }
}

@keyframes waveDriftMid {
  0% {
    transform: translateX(3%) scaleX(1.03);
  }
  100% {
    transform: translateX(-3%) scaleX(0.97);
  }
}

@keyframes waveDriftFast {
  0% {
    transform: translateX(-6%) translateY(5px);
  }
  100% {
    transform: translateX(6%) translateY(-5px);
  }
}


/* MS CATEGORY LARGE */

.ms_subcategory .ms_subcategory_wrap{ display:flex; gap: 8px;}
.ms_subcategory .ms_subcategory_left{ flex:1;}
.ms_subcategory .ms_subcategory_center{ flex:1.65; display:flex; flex-direction:column; gap: 8px;}
.ms_subcategory .ms_subcategory_right{ flex:1.25; display:flex; flex-direction:column; gap: 8px;}
.ms_subcategory .ms_subcategory_bottom{ display:grid; grid-template-columns:repeat(2,1fr); gap: 8px;}

/* Cards */

.ms_subcategory .ms_subcategory_card{ position:relative; display:block; overflow:hidden; border-radius:1.2rem; text-decoration:none;}
.ms_subcategory .ms_subcategory_card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,.61,.36,1);}

/* Image Ratios */
.ms_subcategory .ms_subcategory_left img{ aspect-ratio:0.60;}
.ms_subcategory .ms_subcategory_top img{ aspect-ratio:2 /1;}
.ms_subcategory .ms_subcategory_bottom img{ aspect-ratio:1;}
.ms_subcategory .ms_subcategory_right img{ aspect-ratio:2/1.3;}

/* Overlay */

.ms_subcategory .ms_subcategory_overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px;background:linear-gradient( to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, transparent 100% ); opacity:0; transition:.45s ease;}

/* Content */

.ms_subcategory .ms_subcategory_overlay h3{ font-size:clamp(16px, 20px, 22px); line-height:1.1;  margin:0; font-weight: 500; margin-bottom: 10px; color:var(--white); font-family:var(--font-heading); transform:translateY(2rem); opacity:0; transition:.45s ease;}
.ms_subcategory .ms_subcategory_explore{ width:max-content; padding: 8px 16px; border-radius:5rem; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); color:var(--white); font-size:1.4rem; font-weight:600; transform:translateY(2rem); opacity:0; transition:.55s ease;}

/* Hover */

.ms_subcategory .ms_subcategory_card:hover img{ transform:scale(1.08);}
.ms_subcategory .ms_subcategory_card:hover .ms_subcategory_overlay{ opacity:1;}

.ms_subcategory .ms_subcategory_card:hover span,
.ms_subcategory .ms_subcategory_card:hover h3,
.ms_subcategory .ms_subcategory_card:hover .ms_subcategory_explore{ opacity:1; transform:translateY(0);}

/* Responsive */

@media (max-width:991px){
    .ms_subcategory .ms_subcategory_wrap{ flex-direction:column; }

    .ms_subcategory .ms_subcategory_left,
    .ms_subcategory .ms_subcategory_center,
    .ms_subcategory .ms_subcategory_right{ flex:none; width:100%; }

    .ms_subcategory .ms_subcategory_bottom{grid-template-columns:1fr;}

}



/* PRODUCT LISTING------------------------- */

.ms_product_card {}
.ms_product_card .ms_product_image { background-color: #f7f7f7; aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; position: relative;}
.ms_product_card .ms_product_image img { width: 100%; height: 100%; object-fit: cover; }
.ms_product_card .ms_product_image img.hover { position: absolute; bottom: 0; right: 0; top: 0; overflow: hidden; width: 0; height: 100%;-webkit-transition: 0.5s ease; transition: 0.5s ease; background: #fff; z-index: 1;}
.ms_product_card .ms_product_image .ms_btn_secondary { position: absolute; bottom: 10px; right: 10px; z-index: 2; transform: translateY(10px); opacity: 0; }
.ms_product_card .ms_product_content { margin-top: 15px;}
.ms_product_card:hover img.hover { width: 100%; }
.ms_product_card:hover .ms_btn_secondary { opacity: 1; transform: translateY(0px); opacity: 1;}
.ms_product_card .wishicon { position: absolute; top: 10px; right: 10px; z-index: 2; cursor: pointer;}
.ms_product_card .wishicon:hover svg path {fill: var(--primary-400); stroke: var(--primary-400);}
.ms_product_card .ms_product_title { font-size: clamp(16px, 1.8, 2.1rem); margin-bottom: 10px;}
.ms_product_card .old-price { text-decoration: line-through; opacity: 0.7; display: inline-block; margin-left: 10px;}

/* SOFA COLLECTION */
.bg-light-green {background-color: #6c77351c;}
.sofa_collection { display: flex; align-items: baseline; justify-content: end; gap: 10px; }
.sofa_collection img { border-radius: 10px;}



/* image splitter */
.ms_splitter{ padding:8rem 0; background:var(--secondary-900);}
.ms_splitter .section_title{ color:var(--border);}
.ms_splitter .section_intro{ color:var(--border); opacity:.8; max-width:45rem; margin:auto; line-height:2.6rem;}

/* Main Wrapper */
.ms_splitter_inner{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:60rem; border-radius:2rem;}

/* Content Box */
.ms_splitter_content{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); z-index:5; width:min(90%,60rem);  text-align:center; padding:3rem 3.5rem; background:rgba(254,250,245,.88);
backdrop-filter:blur(10px); border-radius:1.6rem; box-shadow: 0 1rem 4rem rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.25); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}

.ms_splitter_content span{ display:block; margin-bottom:1.2rem; font-size:1.3rem; font-weight:600; letter-spacing:.25rem; text-transform:uppercase; color:var(--secondary-700);}
.ms_splitter_content h2{ margin-bottom:1.8rem; font-size:clamp(3.5rem,4rem,5rem); line-height:1.1; color:var(--text-dark); font-family:var(--font-heading);}
.ms_splitter_content p{ margin-bottom:3rem; font-size:1.6rem; line-height:1.8; color:var(--text-light);}

/* Images */

.ms_splitter_left,
.ms_splitter_right{ width:48%; overflow:hidden; transition:transform .9s cubic-bezier(.22,.61,.36,1); position: relative; z-index: 6;}

/* Default gap */
.ms_splitter_left{ transform:translateX(-4%);}

.ms_splitter_right{transform:translateX(4%);}

.ms_splitter_left img,
.ms_splitter_right img{
    width:100%;
    height:60rem;

    display:block;
    object-fit:cover;

    transition:transform 1s ease;
}

/* Curved edges facing center */

.ms_splitter_left img{
    border-radius:0 4rem 4rem 0;
}

.ms_splitter_right img{
    border-radius:4rem 0 0 4rem;
}

/* Hover Effect */

.ms_splitter_inner:hover .ms_splitter_left{
    transform:translateX(-18%);
}

.ms_splitter_inner:hover .ms_splitter_right{
    transform:translateX(18%);
}

.ms_splitter_inner:hover .ms_splitter_content{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    z-index: 7;
}

.ms_splitter_inner:hover img{
    transform:scale(1.05);
}

/* Responsive */

@media (max-width:991px){

    .ms_splitter_inner{
        min-height:auto;
        flex-direction:column;
        gap:2rem;
    }

    .ms_splitter_left,
    .ms_splitter_right{
        width:100%;
        transform:none !important;
    }

    .ms_splitter_left img,
    .ms_splitter_right img{
        height:auto;
        aspect-ratio:1.4;
        border-radius:1.6rem;
    }

    .ms_splitter_content{
        position:relative;
        left:auto;
        top:auto;

        width:100%;
        max-width:none;

        transform:none;
        opacity:1;

        order:-1;
    }

    .ms_splitter_inner:hover .ms_splitter_content{
        transform:none;
    }
}



/* INSTA SECTION ---------------------------------------------------*/
.instagram-wrapper { position: relative; z-index: 1;}
.ms_instagram{
    background: var(--light-brown-color);
}

.ms_instagram_grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
}

.ms_insta_card{
    position:relative;
    overflow:hidden;
    border-radius:1.2rem;
    display:block;
}

.ms_insta_card img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    display:block;

    transition:1s cubic-bezier(.22,.61,.36,1);
}

/* Overlay */

.ms_insta_overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.45);

    opacity:0;

    transition:.4s ease;
}

/* Stats */

.ms_insta_stats{
    display:flex;
    gap:3rem;

    transform:translateY(2rem);
    opacity:0;

    transition:.5s ease;
}

.ms_insta_item{
    display:flex;
    align-items:center;
    gap:.8rem;

    color:#fff;
    font-size:1.7rem;
    font-weight:600;
}

.ms_insta_item .material-symbols-outlined{
    font-size:2.6rem;
}

/* Hover */

.ms_insta_card:hover img{
    transform:scale(1.1);
}

.ms_insta_card:hover .ms_insta_overlay{
    opacity:1;
}

.ms_insta_card:hover .ms_insta_stats{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */

@media(max-width:991px){

    .ms_instagram_grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:575px){

    .ms_instagram_grid{
        grid-template-columns:1fr;
    }
}


/* TESTIMONIAL---------------------------------------------------------------------- */
.ms_testimonial{
    padding:10rem 0;
    background: #edf1ee;
    position: relative;
    padding-top: 0;
}

.ms_testimonial .container { margin-right: 0; width: 100%; max-width: 1600px;}

.ms_wave_top{
    display:block;
    width:100%;
    height:14rem;
    margin-bottom:-1px;
}

.top-svg-corner {
    width: 100%;
    margin-bottom: -20px;
}
.ms_testimonial_wrap{
    display: flex;
    gap:5rem;
    align-items:center;
}

.ms_testimonial_tag{
    display:block;

    margin-bottom:1.5rem;

    font-size:1.3rem;
    letter-spacing:.2rem;
    text-transform:uppercase;

    color:var(--secondary-700);
}

.ms_testimonial_title{
    font-size:5rem;
    line-height:1.1;
    margin-bottom:2rem;

    color:var(--text-dark);
    font-family:var(--font-heading);
}

.ms_testimonial_text{
    font-size:1.6rem;
    line-height:1.8;
    color:var(--text-light);
}

.ms_testimonial_nav{
    display:flex;
    gap:1rem;
    margin-top:4rem;
}

.ms_testimonial_nav button{
    width:5rem;
    height:5rem;

    border:none;
    cursor:pointer;

    border-radius:50%;

    background:var(--white);

    transition:.3s;
}

.ms_testimonial_nav button:hover{
    background:var(--secondary-700);
    color:#fff;
}

/* Card */

.ms_testimonial_card{
    background:#fff;
    border-radius:2rem;
    padding:4rem;
    height:100%;
}

.ms_testimonial_quote{
    font-size:7rem;
    line-height:1;

    color:var(--primary-200);

    margin-bottom:2rem;
}

.ms_testimonial_card p{
    font-size:1.7rem;
    line-height:1.9;

    color:var(--text-dark);

    margin-bottom:4rem;
}

.ms_testimonial_user{
    display:flex;
    align-items:center;
    gap:1.5rem;
}

.ms_testimonial_user img{
    width:6rem;
    height:6rem;
    border-radius:50%;
    object-fit:cover;
}

.ms_testimonial_user h4{
    font-size:1.8rem;
    margin-bottom:.5rem;
}

.ms_testimonial_user span{
    font-size:1.4rem;
    color:var(--text-light);
}

.ms_testimonial_slider{
    width:100%;
    overflow:hidden;
    min-width:0;
}

.ms_testimonial_slider .swiper-slide{
    height:auto;
}

.ms_testimonial_card{
    height:100%;
}



/* MS EXCLUSIVE -------------------------------------------------------- */

.ms_exclusive{
    padding:7rem 0;
    background: #f7f7f7;
}

.ms_exclusive_heading{
    text-align:center;
    margin-bottom:6rem;
}


.ms_exclusive_wrap{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:5rem;
}

.ms_exclusive_side{
    display:flex;
    flex-direction:column;
    gap:10rem;
}

.ms_exclusive_thumb {
    min-width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6rem;
    align-self: auto;
    overflow: hidden;
    max-width: 60px;
}

.ms_exclusive_thumb img { width: 100%; height: 100%;}

.ms_exclusive_item{
    cursor:pointer;
    padding: 10px 15px;
    border-left:.4rem solid transparent;
    transition:.4s ease;
    display: flex;
    gap: 10px;
    align-items: center;
}

.ms_exclusive_item h3{
    font-size: clamp(16px, 1.8rem, 2.3rem);
    color:var(--secondary-800);
    letter-spacing: 1px;
    text-transform:uppercase;
    margin-bottom:5px;
}

.ms_exclusive_item p{
    font-size: 16px;
    color:var(--text-light);
}

.ms_exclusive_item.active{
    background:#fff;
    border-left:.4rem solid var(--primary-500);
    box-shadow:0 1rem 3rem rgba(0,0,0,.08);
    padding-left: 20px;
}

.ms_circle{
    width:min(60rem, 70vw);
    aspect-ratio:1;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    padding: 10px;
    border:.2rem solid var(--secondary-400);
}

.ms_circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
    border-radius: 50%;
}

.ms_circle.change img{
    transform:scale(1.12);
}

.ms_explore_btn{
    position:absolute;
    left:50%;
    bottom:4rem;
    transform:translateX(-50%);
    padding:1.6rem 4rem;
    border-radius:5rem;
    background:rgba(255,255,255,.9);
    font-size:1.8rem;
    font-weight:600;
    color:var(--secondary-800);
    transition: all 0.2s ease-in;
}
.ms_explore_btn:hover {
    bottom: 5rem;
    background-color: #fff;
}

.ms_exclusive_item:hover{
    transform:translateX(10px);
}

.ms_circle.change img{
    transform:scale(1.2);
    filter:blur(5px);
    opacity:.5;
}

.ms_exclusive_item{
    position:relative;
}

.ms_exclusive_item::before{
    content:'';
    position:absolute;
    left:0;
    top:0;

    width:.4rem;
    height:0;

    background:var(--primary-500);
    transition:.4s;
}

.ms_exclusive_item.active::before{
    height:100%;
}

@media(max-width:991px){
    .ms_exclusive_wrap{
        grid-template-columns:1fr;
    }
    .ms_exclusive_side{
        gap:2rem;
    }
    .ms_circle{
        width:50rem;
        margin:auto;
    }
}

@media(max-width:575px){
    .ms_circle{
        width:100%;
        max-width:35rem;
    }
    .ms_exclusive_heading h2{
        font-size:3.5rem;
    }
    .ms_exclusive_item h3{
        font-size:2.2rem;
    }
}


/* MS FEATURED COLLECTION------------------ */

.ms_featured_collection{
    padding:8rem 0 14rem;
}

.ms_featured_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4rem;
}

.ms_featured_card{
    position:relative;
    display:block;
    text-decoration:none;
    padding-bottom:8rem;
}

.ms_featured_image{
    overflow:hidden;
    border-radius:1.6rem;
}

.ms_featured_image img{
    width:100%;
    aspect-ratio:0.95;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

.ms_featured_info{
    position:absolute;
    left:50%;
    bottom:0;

    transform:translateX(-50%);

    width:min(24rem,85%);
    background:#fff;

    border-radius:2rem;

    padding:6rem 2rem 2.5rem;

    text-align:center;

    box-shadow:
    0 1rem 3rem rgba(0,0,0,.08);

    transition:.4s ease;
}

.ms_product_thumb{
    position:absolute;
    top:-4rem;
    left:50%;

    transform:translateX(-50%);

    width:8rem;
    height:8rem;

    border-radius:1.6rem;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
    0 .8rem 2rem rgba(0,0,0,.08);
}

.ms_product_thumb img{
    width:6rem;
    height:6rem;
    object-fit:contain;
}

.ms_featured_info h3{
    font-size:2.2rem;
    color:var(--text-dark);
    margin-bottom:.8rem;
    font-family:var(--font-heading);
}

.ms_featured_info p{
    font-size:1.4rem;
    color:var(--text-light);
}

.ms_featured_card:hover .ms_featured_image img{
    transform:scale(1.08);
}

.ms_featured_card:hover .ms_featured_info{
    transform:
    translateX(-50%)
    translateY(-1rem);
}

.ms_featured_card.active .ms_featured_info{
    background:var(--secondary-900);
}

.ms_featured_card.active h3,
.ms_featured_card.active p{
    color:#fff;
}

.ms_featured_card.active .ms_product_thumb{
    border:2px solid var(--secondary-500);
}

/* Responsive */

@media(max-width:991px){

    .ms_featured_grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:767px){

    .ms_featured_grid{
        grid-template-columns:1fr;
        gap:8rem;
    }

}

.ms-large-section { background-color: #f7f7f7;}
.ms-large-warpper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 4rem; margin-top: 11rem;}
.ms-large-warpper .ms-large-image { aspect-ratio: 1.13; position: relative; overflow: hidden; border-radius: 20px; }
.ms-large-warpper .ms-large-image .title { 
    position: absolute;
    top: 40px;
    left: -100%;
    background: linear-gradient(45deg, #ffffff, #ffffff70);
    font-size: 2rem;
    padding: 10px 20px;
    backdrop-filter: blur(15px);
    border-radius: 0 20px 20px 0;
    transition: all 0.8s ease;
    z-index: 3;
}
.ms-large-warpper .ms-large-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: all 0.5s ease-in;}
.ms-large-warpper .ms-large-image:hover img { transform: scale(1.2);}
.ms-large-warpper .ms-large-image:hover .title { left: 0;}
.ms-large-warpper .ms-large-image-thumb { aspect-ratio: 1.62; background-color: #f7f7f7; border-radius: 20px; position: absolute; bottom: -15px; max-width: 45%; right: -17px; border: solid 14px #fff; display: flex; align-items: center; justify-content: center;}
.ms-large-warpper .ms-large-image-thumb img { width: 75%;}



/* FOOTER------------------------------------------ */
/*==============================
    FOOTER
==============================*/

.ms_footer{background: var(--secondary-900); color: var(--white); margin-top: 7rem;}

/*==============================
    MAIN
==============================*/

.ms_footer_main{ padding:7rem 0;}
.ms_footer_logo{ text-align:center; max-width:52rem; margin:0 auto 6rem;}
.ms_footer_logo img{ height:6rem; width:auto; margin:0 auto 20px;}
.ms_footer_logo p{ color:rgba(255,255,255,.75); line-height:1.8; font-size: 16px;}
.ms_footer_grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4rem;}
.ms_footer_column h4{ color:var(--white); font-size:20px; margin-bottom:20px; font-family:var(--font-heading);}
.ms_footer_column ul{ list-style:none;}
.ms_footer_column li{ margin-bottom:14px;}
.ms_footer_column a{ color:rgba(255,255,255,.72); text-decoration:none; font-size: 15px; transition:.3s; position:relative;}
.ms_footer_column a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--secondary-300); transition:.35s;}
.ms_footer_column a:hover{ color:var(--secondary-200);}
.ms_footer_column a:hover::after{ width:100%;}

/*==============================
    CONTACT
==============================*/

.ms_contact_list li{ display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.75); font-size: 15px; line-height:1.7;}
.ms_contact_list .material-symbols-outlined{ font-size:20px; color:var(--secondary-300);}

/*==============================
    BOTTOM
==============================*/

.ms_footer_bottom{ padding:2.5rem 0; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:2rem;}
.ms_footer_bottom p{color:rgba(255,255,255,.6); font-size:1.4rem;}
.ms_footer_social{ display:flex; gap:1.2rem;}
.ms_footer_social a{ width:4.6rem; height:4.6rem; border-radius:50%; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--white);
 text-decoration:none; transition:.35s ease;}

.ms_footer_social a:hover{ background:var(--secondary-500); border-color:var(--secondary-500); transform:translateY(-4px);}
.ms_footer_social i{ font-size: 18px;}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:991px){
    .ms_footer_grid{ grid-template-columns:repeat(2,1fr); }
    .ms_footer_bottom{flex-direction:column; text-align:center;}
}

@media(max-width:767px){
    .ms_newsletter_form{flex-direction:column; }
    .ms_newsletter_form button{ width:100%; min-width:100%; }
    .ms_footer_grid{ grid-template-columns:1fr; gap:3rem; text-align:center; }
    .ms_contact_list li{ justify-content:center;}

}