@import url('https://cdn.jsdelivr.net/npm/geist-font@1.0.0/fonts/geist.css');

:root {
  
  --font-geist: 'Geist', sans-serif;
  
  --fw-regular: 400;
  --fw-semibold: 600;

  --lh-title: 1.2;
  --lh-desc: 1.6;
  --lh-btn: 1.0;
  --orange-color: #FF621B;
  --dark-btn: #002156;
  
  --space-base: clamp(12px, 1.25vw, 24px);
  --img-size-responsive: clamp(80px, 5.625vw, 120px);
  --img-width-large: clamp(280px, 27.9vw, 714px);
  --deco-element-size: clamp(120px, 21.2vw, 600px);
  --deco-2-size: clamp(200px, 42.27vw, 1100px);
  --logo-responsive-size: clamp(134px, 13.05vw, 134px);
    
    
  --space-sm: calc(var(--space-base) * 0.5); 
  --space-lg: calc(var(--space-base) * 2);   
  --margin-spacious: clamp(64px, 12.5vw, 240px);

  
  
  

  
  
  --fs-hero-title: clamp(3.2rem, calc(2rem + 2.2vw), 8rem);

  
  
  --fs-hero-desc: clamp(1.4rem, calc(1.2rem + 0.32vw), 2rem);

  
  
  --fs-section-name: clamp(1.4rem, calc(1.2rem + 0.32vw), 1.8rem);

  
  
  --fs-headline-section: clamp(3.2rem, calc(1.8rem + 1.25vw), 5rem);

  
  
  --fs-section-desc: clamp(1.4rem, calc(1.2rem + 0.32vw), 1.8rem);

  
  
  --fs-special: clamp(1.4rem, calc(1rem + 0.35vw), 2.2rem);

  
  --fs-card-title: clamp(1.6rem, calc(1.4rem + 0.32vw), 2rem);

  
  --fs-btn: clamp(1.4rem, calc(1.2rem + 0.32vw), 1.8rem);
  --font-card-title: clamp(14px, 1.1vw, 20px);
}




body {
  font-family: var(--font-geist);
  
  font-size: 1.6rem; 
  line-height: var(--lh-desc);
}


.text-hero-title {
  font-size: var(--fs-hero-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.text-hero-desc {
  font-size: var(--fs-hero-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-regular);
}


.text-section-name {
  font-size: var(--fs-section-name);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-section-headline {
  font-size: var(--fs-headline-section);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.text-section-desc {
  font-size: var(--fs-section-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw);
 }



body {
  font-family: var(--font-geist) !important;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}




.text-hero-title {
  font-size: var(--fs-hero-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.text-hero-desc {
  font-size: var(--fs-hero-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-regular);
}


.text-section-name {
  font-size: var(--fs-section-name);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em; 
}

.text-section-headline {
  font-size: var(--fs-headline-section);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.text-section-desc {
  font-size: var(--fs-section-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-regular);
}


.text-highlight {
  font-size: var(--fs-special);
  line-height: var(--lh-desc);
  font-weight: var(--fw-semibold); 
}

.text-card-title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}


.btn-responsive {
  font-family: var(--font-geist); 
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-semibold);
  background-color: var(--orange-color);
  color: white;
  border-radius: 8px;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 0.8em 0.8em 1.2em; 
  gap: 0.5em; 
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-responsive:hover {
  background-color: #552109;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  scale: 0.95;
}

.font-orange {
  color: var(--orange-color) !important;
}

.font-yellow {
  color: #FB0 !important;
}

.font-white {
  color: white !important;
}

.font-dark {
  color: #1f1f1f !important;
}


.m-responsive {
    margin-top: var(--margin-spacious);
    margin-bottom: var(--margin-spacious);
}


.mt-responsive {
    margin-top: var(--margin-spacious);
}


.mb-responsive {
    margin-bottom: var(--margin-spacious);
}


.img-responsive-icon {
    width: var(--img-size-responsive);
    height: var(--img-size-responsive); 
    
    
    min-width: var(--img-size-responsive); 
    max-width: 100%; 
    
    
    object-fit: contain; 
    object-position: center;
    aspect-ratio: 1 / 1; 
}


.card-title-responsive {
    font-size: var(--font-card-title);
    font-weight: 700; 
    line-height: normal; 
    
    
    letter-spacing: -0.01em; 
    
    
    
    
    
}


.img-responsive-357 {
    width: var(--img-width-large);
    
    
    height: auto; 
    
    
    max-width: 100%; 
    
    
    object-fit: cover; 
    display: block; 
}


.pemanis-responsive {
    
    width: 100%; 
    
    
    max-width: var(--deco-element-size);
    
    
    height: auto; 
    
    
    display: block; 
}

.pemanis-2-responsive {
    
    width: 100%; 
    
    
    max-width: var(--deco-2-size);
    
    
    height: auto; 
    
    
    display: block; 
}


.nav-link-responsive {
    
    font-size: 16px; 
    line-height: 1.5; 
    font-weight: 500;
}


@media (min-width: 1024px) {
    .nav-link-responsive {
        
        font-size: clamp(14px, 0.85vw, 14px);

        
        line-height: 1.2;

        
        font-weight: 500; 

        
        white-space: nowrap;
    }
}

html[class*="x-offcanvas_prevent-scroll"], html[class*="x-offcanvas_prevent-scroll"] > body {
  overflow: clip !important;
}