.w-800 {
    width: 433px !important;
}

.h-323 {
    height: 323px !important;
}

.h-483 {
    height: 263px !important;
}

.text-98 {
    font-size: 98px;
}

/* Mobile responsive styles for UGC section */
@media (max-width: 768px) {
    .ugc-mobile-optimized {
        min-height: 600px;
        padding: 2rem 1rem;
    }
    
    .ugc-mobile-text {
        font-size: 0.875rem;
        line-height: 1.5;
        letter-spacing: 0.025em;
    }
    
    .ugc-mobile-heading {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .ugc-mobile-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* Testimonials scrolling styles */
.scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

/* Smooth scrolling for testimonials */
#testimonial-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Mobile testimonials optimization */
@media (max-width: 768px) {
    #testimonial-container {
        gap:2px;
        padding: 5px;
    }
    
    #testimonial-container > div {
        min-width: 280px;
        max-width: 320px;
    }
}

/* Testimonial box content management */
#testimonial-container > div {
    display: flex;
    flex-direction: column;
}

#testimonial-container > div > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#testimonial-container > div > div:first-child > p {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    #testimonial-container > div > div:first-child > p {
        -webkit-line-clamp: 6;
    }
}


   #extra_class {
    columns: 2;
    column-gap: 24px; /* adjust spacing between columns */
    width: 100%;
  }

  /* Match Tailwind's md breakpoint (768px): 2 columns */
  @media (max-width: 900px) {
    #extra_class {
      columns: 1;
       width: 100%;
       max-width: 650px;
       margin: 0 auto;
    }
  }

   @media (max-width: 800px) {
    #extra_class {
       max-width: 650px; 
    }
  }

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Thin-BETA.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ThinItalic-BETA.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ExtraLight-BETA.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ExtraLightItalic-BETA.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Light-BETA.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-LightItalic-BETA.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}


/* ===== Playfair Display ===== */

/* Thin (100) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

/* Extra Light (200) - if you have it */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}

/* Light (300) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

/* Regular (400) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

/* Medium (500) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

/* SemiBold (600) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}

/* Bold (700) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold (800) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

/* Black (900) */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/Playfair_Display/PlayfairDisplay-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}


/* make Inter the default everywhere */
* { font-family: "Inter", sans-serif !important; }



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */
.font-playfair { font-family: 'italic', serif; }  

.font-pf {
  font-family: "Playfair Display", serif;
}