/* 1. FONT FACE */
@font-face {
    font-family: 'Helvetica';
    src: url('./font/Helveticaltstd-roman.woff2') format('woff2'),
         url('./font/Helveticaltstd-roman.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica-Bold';
    src:url('./font/Helveticaltstd-bold.woff2') format('woff2'),
        url('./font/Helveticaltstd-bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica-Light';
    src: url('./font/Helveticaltstd-light.woff2') format('woff2'),
         url('./font/Helveticaltstd-light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

/* 2. ROOT DESIGN SYSTEM */
:root {
    /* COLORS */
    --primary: #2475EC;
    --secondary: #C301B1;
    --accent: #4FB6FF;
    --dark: #030A24;
    --light: #FFFFFF;
    --grey: #f4f6fa;
    --light-pink:#C301B11A;
    --f4-white:#f4f4f4;
    --ash:#7e7e7e;
    --dark-blue:#230C60;
    --light-blue:#4FB6FF80;
    --v-green:#16b739;
    --black:#000000;
    --icon-bg:#C301B180;

    /* BOOTSTRAP SYNC */
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-dark: var(--dark);

    /* FONTS */
    --font-base: 'Helvetica', sans-serif;
    --font-bold: 'Helvetica-Bold', sans-serif;
    --font-light: 'Helvetica-Light', sans-serif;

    /* SPACING */

    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 60px;

    /* RADIUS */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 50px;

    /* font-size */

    --fs-xs:12px;
    --fs-sm:14px;
    --fs-md:16px;
    --fs-l:18px;
    --fs-lg:20px;
    --fs-xl:24px;

    /* body font */
   --body-font: clamp(16px, 1.4vw, 20px);

   --fs-th:clamp(14px, 1.2vw, 16px);
}

/* font-family class */

.helvetica-default {
    font-family: var(--font-base);
}

.helvetica-light {
    font-family: var(--font-light);
}

.helvetica-bold {
    font-family: var(--font-bold);
}

/* Headings */
.fs-h1 {
    font-size: clamp(32px, 5vw, 64px);
}

.fs-h2 {
    font-size: clamp(28px, 4vw, 48px);
}

.fs-h3 {
    font-size: clamp(24px, 3vw, 36px);
}

.fs-h4 {
    font-size: clamp(20px, 2.5vw, 28px);
}

/* Body */
.fs-lg {
    font-size: clamp(18px, 2vw, 22px);
}
.fs-l {
    font-size: clamp(14px, 1.5vw, 18px);
}

.fs-md {
    font-size: 16px;
}

.fs-sm {
    font-size: 14px;
}

.fs-xs {
    font-size: 12px;
}

/*  3. RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-base);
    font-size: var(--body-font);
    color: var(--dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*  5. COLORS */
.txt-blue {
    color: var(--primary);
}

.txt-pink {
    color: var(--secondary)!important;
}

.txt-accent {
    color: var(--accent);
}

.txt-white {
    color: var(--light)!important;
}

.txt-dark {
    color: var(--dark);
}
.txt-dark-blue{
    color: var(--dark-blue);
}

.bg-brand-blue {
    background: var(--primary);
}

.bg-brand-pink {
    background: var(--secondary);
}

.bg-brand-accent {
    background: var(--accent);
}

.bg-brand-dark {
    background: var(--dark);
}

.bg-brand-light {
    background: var(--light);
}
.bg-brand-gery{
    background-color: var(--grey);
}
.bg-brand-light-pink{
    background-color: var(--light-pink);
}
.bg-brand-light-blue{
    background-color: var(--light-blue);
}

/*  6. BUTTON (BOOTSTRAP SAFE)*/
.max-w{
    max-width: 920px;
    margin: 0 auto;
}
.btn-brand {
    background: var(--primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: 12px 30px;
    font-family: var(--font-bold);
    color: #fff;
    display: inline-block;
    text-decoration: none;
}
.btn-brand:hover {
    background: var(--accent);
    color: var(--light);
    transform: translateX(4px);
}
.btn-brand-pink {
    background: var(--secondary);
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 30px;
    font-family: var(--font-bold);
    color: var(--light);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}
.btn-brand-pink:hover {
   background-color: var(--secondary);
   color: var(--light);
   transform: translateY(-1px) scale(1.03);
   box-shadow: 0 10px 25px rgba(195, 1, 177, 0.3);
}
.btn-brand-demo {
  background: transparent;
  border: 2px solid var(--secondary);
  border-radius: var(--radius-md);
  padding: 12px 30px;
  font-family: var(--font-bold);
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-brand-demo:hover {
  color: var(--light);
}
.btn-brand-demo span {
  display: inline-block;
  transition: transform 0.4s ease;
}
.btn-brand-demo:hover span {
  transform: translateX(5px);
}
/*  7. SPACING UTILITIES */
.mt-sm {
    margin-top: var(--space-sm);
}
.mt-md {
    margin-top: var(--space-md);
}
.mt-lg {
    margin-top: var(--space-lg);
}
.mb-sm {
    margin-bottom: var(--space-sm);
}
.mb-md {
    margin-bottom: var(--space-md);
}
.mb-lg {
    margin-bottom: var(--space-lg);
}
.pt-lg {
    padding-top: var(--space-lg);
}
.pb-lg {
    padding-bottom: var(--space-lg);
}
/*  LAYOUT */
.section {
    padding: var(--space-xl) 0;
}
.container-custom {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

/* BackGrounds */
.bg-s{
    background: linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.05) );
}
.bg-gradient1{
    background:
  linear-gradient(to right, rgba(58,160,230,.08) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(58,160,230,.08) 1px, transparent 1px),
  linear-gradient(135deg,#fdfbff 0%, #f6f9ff 100%);
  background-size: 120px 120px, 120px 120px, cover;
}
.bg-gradient2{
    background:
  linear-gradient(to right, rgba(134, 166, 237, 0.08) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(219, 116, 228, 0.08) 1px, transparent 1px),
  linear-gradient(135deg,#eec6ff 0%, #cfe8ff 100%);
  background-size: 120px 120px, 120px 120px, cover;
}
.bg-gradient3{
    background:
  linear-gradient(to right, rgba(58,160,230,.08) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(58,160,230,.08) 1px, transparent 1px),
  linear-gradient(135deg,#fdfbff 0%, #f6f9ff 100%);
  background-size: 120px 120px, 120px 120px, cover;
}
.bg-gradient4{
    background:
  linear-gradient(to right, rgba(58,160,230,.08) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(58,160,230,.08) 1px, transparent 1px),
  linear-gradient(135deg,#fdfbff 0%, #f6f9ff 100%);
  background-size: 120px 120px, 120px 120px, cover;
}

/*  UTILITIES (SAFE)*/
.u-text-center {
    text-align: center;
}
.u-flex {
    display: flex;
}

.u-align-center {
    align-items: center;
}

.u-justify-center {
    justify-content: center;
}

.u-relative {
    position: relative;
}

.u-absolute {
    position: absolute;
}

.u-pointer {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}
.site-page-content{
    width: 100%;
}

@media (max-width: 768px) {
    .section {
        padding: var(--space-lg) 0;
    }

    .btn-brand {
        width: 100%;
        text-align: center;
    }
}