:root {
  /* Colors */
  --s-primary: #0057b8;
  --s-secondary: #f0f0f0;
  --s-accent: #ff5722;
  --s-danger: #dc3545;
  --s-warning: #ffc107;
  --s-success: #17ff17;
  --s-muted: #6c757d;
  --s-text: #333;
  --s-white: #ffffff;
  --s-black: #000000;
  --s-gray: #808080;
  --s-dark: #212529;
  --s-red: #ff0000;
  --s-blue: #00c5ff;
  --s-pink: #ff22ff;
  --s-purple: #800080;
  --s-yellow: #ffff00;
  --s-orange: #ffa500;
  --s-cyan: #00ffff;
  --s-silver: #c0c0c0;
  --s-gold: #ffd700;
  --s-maroon: #800000;
  --s-violet: #ee82ee;
  --s-indigo: #4b0082;
  --s-teal: #008080;
  --s-brown: #a52a2a;
  --s-sand: #f5f5dc;
  --s-salmon: #fa8072;
  --s-jungle: #1a3c34;
  --s-sky: #a8dcf8;

  /* Font Family */
  --s-font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  
  /* Font Weight */
  --s-thin: 100;
  --s-light: 300;
  --s-regular: 400;
  --s-medium: 500;
  --s-semibold: 600;
  --s-bold: 700;
  --s-extrabold: 800;
  --s-xxbold: 900;

/* Units */
  --s-space: 0;          /* 0px */
  --s-space-1: 0.0625rem;     /* 1px */
  --s-space-2: 0.125rem;      /* 2px */
  --s-space-3: 0.1875rem;     /* 3px */
  --s-space-4: 0.25rem;       /* 4px */
  --s-space-5: 0.3125rem;     /* 5px */
  --s-space-6: 0.375rem;      /* 6px */
  --s-space-7: 0.4375rem;     /* 7px */
  --s-space-8: 0.5rem;        /* 8px */
  --s-space-9: 0.5625rem;     /* 9px */
  --s-space-10: 0.625rem;     /* 10px */
  --s-space-11: 0.6875rem;    /* 11px */
  --s-space-12: 0.75rem;      /* 12px */
  --s-space-13: 0.8125rem;    /* 13px */
  --s-space-14: 0.875rem;     /* 14px */
  --s-space-15: 0.9375rem;    /* 15px */
  --s-space-16: 1rem;         /* 16px */
  --s-space-17: 1.0625rem;    /* 17px */
  --s-space-18: 1.125rem;     /* 18px */
  --s-space-19: 1.1875rem;    /* 19px */
  --s-space-20: 1.25rem;      /* 20px */
  --s-space-21: 1.3125rem;    /* 21px */
  --s-space-22: 1.375rem;     /* 22px */
  --s-space-23: 1.4375rem;    /* 23px */
  --s-space-24: 1.5rem;       /* 24px */
  --s-space-25: 1.5625rem;    /* 25px */
  --s-space-26: 1.625rem;     /* 26px */
  --s-space-27: 1.6875rem;    /* 27px */
  --s-space-28: 1.75rem;      /* 28px */
  --s-space-29: 1.8125rem;    /* 29px */
  --s-space-30: 1.875rem;     /* 30px */
  --s-space-31: 1.9375rem;    /* 31px */
  --s-space-32: 2rem;         /* 32px */
  --s-space-33: 2.0625rem;    /* 33px */
  --s-space-34: 2.125rem;     /* 34px */
  --s-space-35: 2.1875rem;    /* 35px */
  --s-space-36: 2.25rem;      /* 36px */
  --s-space-37: 2.3125rem;    /* 37px */
  --s-space-38: 2.375rem;     /* 38px */
  --s-space-39: 2.4375rem;    /* 39px */
  --s-space-40: 2.5rem;       /* 40px */
  --s-space-41: 2.5625rem;    /* 41px */
  --s-space-42: 2.625rem;     /* 42px */
  --s-space-43: 2.6875rem;    /* 43px */
  --s-space-44: 2.75rem;      /* 44px */
  --s-space-45: 2.8125rem;    /* 45px */
  --s-space-46: 2.875rem;     /* 46px */
  --s-space-47: 2.9375rem;    /* 47px */
  --s-space-48: 3rem;         /* 48px */
  --s-space-49: 3.0625rem;    /* 49px */
  --s-space-50: 3.125rem;     /* 50px */
  --s-space-51: 3.1875rem;    /* 51px */
  --s-space-52: 3.25rem;      /* 52px */
  --s-space-53: 3.3125rem;    /* 53px */
  --s-space-54: 3.375rem;     /* 54px */
  --s-space-55: 3.4375rem;    /* 55px */
  --s-space-56: 3.5rem;       /* 56px */
  --s-space-57: 3.5625rem;    /* 57px */
  --s-space-58: 3.625rem;     /* 58px */
  --s-space-59: 3.6875rem;    /* 59px */
  --s-space-60: 3.75rem;      /* 60px */
  --s-space-61: 3.8125rem;    /* 61px */
  --s-space-62: 3.875rem;     /* 62px */
  --s-space-63: 3.9375rem;    /* 63px */
  --s-space-64: 4rem;         /* 64px */
  --s-space-65: 4.0625rem;    /* 65px */
  --s-space-66: 4.125rem;     /* 66px */
  --s-space-67: 4.1875rem;    /* 67px */
  --s-space-68: 4.25rem;      /* 68px */
  --s-space-69: 4.3125rem;    /* 69px */
  --s-space-70: 4.375rem;     /* 70px */
  --s-circle: 50%;

  /* Shadows */
  --s-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --s-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --s-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --s-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --s-shadow-xlg: 0 20px 25px rgba(0, 0, 0, 0.2);
  --s-shadow-xxlg: 0 30px 40px rgba(0, 0, 0, 0.25);
  --s-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);


  /* Animation */
  --transition-default: 0.5s ease;
  --transition-smooth: 0.8s ease;
  --transition-fast: 0.3s ease;

  /* Positioning */
  --s-fixed: fixed;
  --s-stick: sticky;
  --s-absolute: absolute;
  --s-relative: relative;
  --s-static: static;

  /* Alignment */
  --s-start: start;
  --s-end: end;
  --s-center: center;
  --s-left: left;
  --s-right: right;
  --s-justify: justify;
  
  /* Display */
  --s-grid: grid;
  --s-none: none;
  --s-block: block;
  --s-inline: inline;
  --s-both: inline-block;
  
  /* text decoration */
  --s-underline: underline;
  --s-through: line-through;
  --s-overline: overline;
  
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--s-font-family);
  background: var(--s-secondary);
  color: var(--s-black);
  line-height: 1.4;
  font-size: var(--s-space-16);
  }
  
a {
  text-decoration: var(--s-none);
  color: var(--s-black);
}
p {
  color: var(--s-black);
}
  
/* Containers */
.s-container {
  display: var(--s-grid);
  grid-template-columns: 1fr;
  width: 100%;
  height: calc(100% - 100px);
  margin-top: 2px;
  margin-bottom: 50px;
}
  
.s-container-item {
  display: var(--s-grid);
  grid-template-rows: auto;
  width: 100%;
  height: 100%;
  padding: var(--s-space-8);
}

/* Topbar container */
  .s-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 50px;
  padding: 0.8rem 1.5rem;
  box-shadow: var(--s-shadow-md);
  background-color: var(--s-sand);
  color: var(--s-black);

  display: flex;
  justify-content: center;   /* center the logo */
  align-items: center;
}

.s-logo {
  font-size: 1.2rem;
  font-weight: var(--s-xxbold);
}

/* card */
.s-card {
  width: 100%;
  height: auto;
  box-shadow: var(--s-shadow-md);
  transition: var(--s-transition);
  border-radius: var(--s-space-5);
  background: var(--s-white);
  margin-bottom: var(--s-space-6);
}

/* Text Align */
.s-center { text-align: var(--s-center); }
.s-left { text-align: var(--s-left); }
.s-right { text-align: var(--s-right); }
.s-justify { text-align: var(--s-justify); }


/* font size*/
.s-text-xs  { font-size: var(--s-space-12); }
.s-text-sm  { font-size: var(--s-space-14); }
.s-text-md  { font-size: var(--s-space-16); }
.s-text-lg  { font-size: var(--s-space-18); }
.s-text-xlg  { font-size: var(--s-space-24); }
.s-text-xxlg { font-size: var(--s-space-28); }

/* flex text and icon*/
.s-flex {
  display: flex;
}

/* Borders */
.s-border-bottom {
  border-bottom: var(--s-space-1) solid var(--s-silver);
}
.s-border-top {
  border-top: var(--s-space-1) solid var(--s-silver);
}
.s-border {
  border: var(--s-space-1) solid var(--s-silver);
}

/* Margins */
.s-margin { margin: var(--s-space-6); }
.s-margin-bottom { margin-bottom: var(--s-space-40); }
.s-margin-top { margin-top: var(--s-space-20); }

/* Padding */
.s-padding-xs { padding: var(--s-space-3); }
.s-padding { padding: var(--s-space-8); }
.s-padding-lg { padding: var(--s-space-20); }
.s-padding-top { padding-top: var(--s-space-8); }
.s-padding-bottom { padding-bottom: var(--s-space-8); }
.s-padding-left { padding-left: var(--s-space-6); }
.s-padding-right { padding-right: var(--s-space-6); }

/* Round corners */
.s-round { border-radius: var(--s-space-5); }
.s-round-lg { border-radius: var(--s-space-42); }

/* Perfect circle with equal width/height */
.s-circle {
  border-radius: var(--s-circle);
}

/* Font Weight */
.s-thin { font-weight: var(--s-thin); }
.s-light { font-weight: var(--s-light); }
.s-regular { font-weight: var(--s-regular); }
.s-medium { font-weight: var(--s-medium); }
.s-semi { font-weight: var(--s-semibold); }
.s-bold { font-weight: var(--s-bold); }
.s-extra { font-weight: var(--s-extrabold); }
.s-coal { font-weight: var(--s-xxbold); }

/* Button */
.s-button {
  border: var(--s-none);
  width: 100%;
  background: var(--s-blue);
  color: var(--s-white);
  font-weight: var(--s-bold);
  font-size: var(--s-space-18);
  cursor: pointer;
  transition: var(--s-transition);
}
.s-btn {
  border: var(--s-none);
  width: 50%;
  background: var(--s-blue);
  color: var(--s-white);
  font-weight: var(--s-bold);
  font-size: var(--s-space-18);
  cursor: pointer;
  transition: var(--s-transition-smooth);
}
.s-button:hover, .s-btn:hover {
  background: var(--s-gray);
  color: white;
}

/* Input styles */
.input-group {
      position: var(--s-relative);
      margin-top: var(--s-space-20);
    }

.input-label {
    position: var(--s-absolute);
    top: -8px;
    left: var(--s-space-8);
    background: var(--s-secondary);
    padding: var(--s-space) var(--s-space-5);
    font-size: var(--s-space-14);
    color: var(--s-muted);
}

.s-input {
    display: var(--s-grid);
    grid-template-columns: 1fr;
    align-items: var(--s-left);
    border: var(--s-space-1) solid var(--s-silver);
    border-radius: var(--s-space-5);
    overflow: hidden;
    padding: var(--s-space-8) var(--s-space-10);
    background: var(--s-white);
    transition: border-color var(--s-transition);
    }
.s-input:hover {
    border: var(--s-space-2) solid var(--s-pink);
  }

  .s-input:focus-within {
    border-color: var(--s-pink);
  }
  
  .phone-input {
    display: var(--s-grid);
    grid-template-columns: auto 1fr;
    align-items: var(--s-left);
    border: var(--s-space-1) solid var(--s-silver);
    border-radius: var(--s-space-5);
    overflow: hidden;
    padding: var(--s-space-8) var(--s-space-10);
    background: var(--s-white);
    transition: border-color var(--s-transition);
    }
.phone-input:hover {
    border: var(--s-space-2) solid var(--s-pink);
  }

  .phone-input:focus-within {
    border-color: var(--s-pink);
  }

  .country-code {
      font-size: var(--s-space-18);
      color: var(--s-muted);
      margin-right: var(--s-space-8);
      white-space: nowrap;
      font-weight: var(--s-semibold);
    }
    
    .amount-input {
    display: var(--s-grid);
    grid-template-columns: auto 1fr;
    align-items: var(--s-left);
    border: var(--s-space-1) solid var(--s-silver);
    border-radius: var(--s-space-5);
    overflow: hidden;
    padding: var(--s-space-8) var(--s-space-10);
    background: var(--s-white);
    transition: border-color var(--s-transition);
    }
.amount-input:hover {
    border: var(--s-space-2) solid var(--s-pink);
  }

  .amount-input:focus-within {
    border-color: var(--s-pink);
  }

  .currency {
      font-size: var(--s-space-18);
      color: var(--s-muted);
      margin-right: var(--s-space-8);
      white-space: nowrap;
      font-weight: var(--s-semibold);
    }
    .s-uppercase {
  text-transform: uppercase;
}

    input[type="tel"] {
      border: var(--s-none);
      outline: var(--s-none);
      font-size: var(--s-space-18);
      width: 100%;
      background: transparent;
    }

    input[type="tel"]::placeholder {
      color: var(--s-gray);
    }
    
    input[type="number"] {
      border: var(--s-none);
      outline: var(--s-none);
      font-size: var(--s-space-18);
      width: 100%;
      background: transparent;
    }

    input[type="number"]::placeholder {
      color: var(--s-gray);
    }
    
    input[type="text"] {
      border: var(--s-none);
      outline: var(--s-none);
      font-size: var(--s-space-18);
      width: 100%;
      background: transparent;
    }

    input[type="text"]::placeholder {
      color: var(--s-gray);
    }
    input[type="email"] {
      border: var(--s-none);
      outline: var(--s-none);
      font-size: var(--s-space-16);
      width: 100%;
      background: transparent;
    }

    input[type="email"]::placeholder {
      color: var(--s-gray);
    }
    input[type="password"] {
      border: var(--s-none);
      outline: var(--s-none);
      font-size: var(--s-space-16);
      width: 100%;
      background: transparent;
    }
    
    textarea {
      border: var(--s-none);
      outline: var(--s-none);
      font-size: var(--s-space-16);
      width: 100%;
      background: transparent;
    }

    textarea::placeholder {
      color: var(--s-gray);
    }
    
  .google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: white;
  border: 2px solid green;
}
  .google span {
    font-weight: bold;
    font-size: 1rem;
    color: var(--s-pink);
  }
  .s-g {
    width: 26px;
    height: 26px;
  }
    
  /* info */
.s-info {
  display: var(--s-grid);
  grid-template-columns: auto 1fr;
  align-items: start;
  margin: var(--s-space-20) var(--s-space);
  padding: var(--s-space-10) var(--s-space-12);
  gap: 0;
}
.s-icon {
  font-size: 2rem;
}
.s-text-info {
  margin-left: -30px;
}
    
/* MODALS */
.s-modal {
  position: var(--s-fixed);
  inset: var(--s-space);
  z-index: 1010;
  display: var(--s-grid);
  grid-template-columns: 1fr;
  width: 100%;
  height: 60%;
  background: var(--s-white);
  border: var(--s-none);
  border-radius: var(--s-space);
  box-shadow: var(--s-shadow-lg);
}

.s-modal-item {
  display: var(--s-grid);
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
}

.s-modal-head {
  display: var(--s-grid);
  position: sticky;
  top: 0;
  grid-template-columns: 1fr auto;
  align-items: var(--s-center);
  padding: var(--s-space-16);
  background: var(--s-violet);
  border-bottom: var(--s-space-2) solid var(--s-silver);
  z-index: 1;
}

.s-modal-title {
  font-size: var(--s-space-18);
  font-weight: var(--s-bold);
}

.s-modal-back {
  display: var(--s-grid);
  background: var(--s-none);
  border: var(--s-none);
  font-size: var(--s-space-16);
  color: var(--s-black);
  font-weight: var(--s-bold);
  cursor: pointer;
}

.s-modal-body {
  overflow-y: auto;
  padding: var(--s-space-12);
  height: 100%;
}

.s-tip {
  display: var(--s-grid);
  grid-template-columns: 1fr auto;
}

  /* TABLES */
.s-table {
  width: 100%;
  border-collapse: collapse;
}

.s-table th, .s-table td {
  padding: var(--s-space-2);
  border: var(--s-space-1) solid var(--s-silver);
  }

  .s-table th {
  background: var(--s-secondary);
  }
  
  /* Show/Hide */
  .s-show {
    display: var(--s-block);
  }
  .s-hide {
    display: var(--s-none);
  }
  
.s-move {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  

  /* RESPONSIVE TYPOGRAPHY */
h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.3;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.4;
}

h4 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.5;
}

h5 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

h6 {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.6;
}

/* Privacy Policy */
.privacy {
  width: 100%;
  padding: var(--s-space-10);
}
.privacy h3 {
  color: var(--s-success);
  font-weight: var(--s-bold);
  font-size: var(--s-space-26);
  text-decoration: var(--s-underline);
}
.privacy h4 {
  color: var(--s-pink);
}

/* Bottombar Styles */
.s-bottombar {
  position: var(--s-fixed);
  bottom: var(--s-space);
  left: var(--s-space);
  right: var(--s-space);
  box-shadow: var(--s-shadow-md);
  transition: var(--s-transition);
  width: 100%;
  height: var(--s-space-50);
  z-index: 1000;
}

.s-bottombar-container {
  display: var(--s-grid);
  grid-template-columns: repeat(5, auto);
  justify-items: var(--s-center);
  max-width: 100%;
  padding: var(--s-space-6);
  }

  .s-bottombar-container i {
  font-size: var(--s-space-28);
}

.s-bottombar-items {
  display: var(--s-grid);
  grid-template-rows: 1fr 1fr;
  justify-items: var(--s-center);
  font-weight: var(--s-semibold);
  font-size: var(--s-space-12);
  cursor: pointer;
}

.s-bottombar-items i {
  color: var(--s-primary);
  }
  
  /* footer Styles */
.s-footer {
  background-color: var(--s-jungle);
  padding: var(--s-space-10);
  font-size: var(--s-space-12);
  font-weight: var(--s-bold);
  text-align: var(--s-center);
}

.s-footer p {
  color: var(--s-white);
}

.s-border-under {
  border-bottom: 4px solid var(--s-cyan);
}

  /* Colors */
/* text Colors */
.s-primary { color: var(--s-primary); }
.s-secondary { color: var(--s-secondary); }
.s-mute { color: var(--s-muted); }
.s-danger { color: var(--s-danger); }
.s-warning { color: var(--s-warning); }
.s-red { color: var(--s-red); }
.s-blue { color: var(--s-blue); }
.s-green { color: var(--s-success); }
.s-purple { color: var(--s-purple); }
.s-gray { color: var(--s-gray); }
.s-black { color: var(--s-black); }
.s-white { color: var(--s-white); }
.s-pink {color: var(--s-pink); }
.s-yellow { color: var(--s-yellow); }
.s-orange { color: var(--s-orange); }
.s-cyan { color: var(--s-cyan); }
.s-silver { color: var(--s-silver); }
.s-gold { color: var(--s-gold);}
.s-maroon { color: var(--s-maroon); }
.s-violet { color: var(--s-violet); }
.s-indigo { color: var(--s-indigo); }
.s-teal { color: var(--s-teal); }
.s-brown { color: var(--s-brown); }
.s-sand { color: var(--s-sand); }
.s-salmon { color: var(--s-salmon); }
.s-accent { color: var(--s-accent); }

/* background-color*/
.s-bg-danger { background-color: var(--s-danger); }
.s-bg-warning { background-color: var(--s-warning); }
.s-bg-accent { background-color: var(--s-accent); }
.s-bg-mute { background-color: var(--s-muted); }
.s-bg-secondary { background-color: var(--s-secondary); }
.s-bg-primary { background-color: var(--s-primary); }
.s-bg-red { background-color: var(--s-red); }
.s-bg-blue { background-color: var(--s-blue); }
.s-bg-sky { background-color: var(--s-sky); }
.s-bg-green { background-color: var(--s-success); }
.s-bg-purple { background-color: var(--s-purple); }
.s-bg-gray { background-color: var(--s-gray); }
.s-bg-black { background-color: var(--s-black); }
.s-bg-white { background-color: var(--s-white); }
.s-bg-pink { background-color: var(--s-pink); }
.s-bg-yellow { background-color: var(--s-yellow); }
.s-bg-orange { background-color: var(--s-orange); }
.s-bg-cyan { background-color: var(--s-cyan); }
.s-bg-silver { background-color: var(--s-silver); }
.s-bg-gold { background-color: var(--s-gold); }
.s-bg-maroon { background-color: var(--s-maroon); }
.s-bg-violet { background-color: var(--s-violet); }
.s-bg-indigo { background-color: var(--s-indigo); }
.s-bg-teal { background-color: var(--s-teal); }
.s-bg-brown { background-color: var(--s-brown); }
.s-bg-sand { background-color: var(--s-sand); }
.s-bg-salmon { background-color: var(--s-salmon); }

/* Border Colors*/
.s-border-danger { border-color: var(--s-danger); }
.s-border-warning { border-color: var(--s-warning); }
.s-border-accent { border-color: var(--s-accent); }
.s-border-mute { border-color: var(--s-muted); }
.s-border-secondary { border-color: var(--s-secondary); }
.s-border-primary { border-color: var(--s-primary); }
.s-border-red { border-color: var(--s-red); }
.s-border-blue { border-color: var(--s-blue); }
.s-border-sky { border-color: var(--s-sky); }
.s-border-green { border-color: var(--s-success); }
.s-border-purple { border-color: var(--s-purple); }
.s-border-gray { border-color: var(--s-gray); }
.s-border-black { border-color: var(--s-black); }
.s-border-white { border-color: var(--s-white); }
.s-border-pink { border-color: var(--s-pink); }
.s-border-yellow { border-color: var(--s-yellow); }
.s-border-orange { border-color: var(--s-orange); }
.s-border-cyan { border-color: var(--s-cyan); }
.s-border-silver { border-color: var(--s-silver); }
.s-border-gold { border-color: var(--s-gold); }
.s-border-maroon { border-color: var(--s-maroon); }
.s-border-violet { border-color: var(--s-violet); }
.s-border-indigo { border-color: var(--s-indigo); }
.s-border-teal { border-color: var(--s-teal); }
.s-border-brown { border-color: var(--s-brown); }
.s-border-sand { border-color: var(--s-sand); }
.s-border-salmon { border-color: var(--s-salmon); }


/* Responsive */
  @media (max-width: 768px) {
    .s-navLink {
      position: absolute;
      top: 50px;
      right: 0;
      background-color: var(--s-pink);
      flex-direction: column;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-in-out;
    }

    .s-navLink a {
      padding: 1rem;
      border-top: 1px solid rgba(255,255,255,0.2);
    }

    .s-navLink.active {
      max-height: 300px;
    }

    .s-hamburger {
      display: flex;
    }
  }
  /*end*/