/* ========== Default Variables and Font Imports ========== */

/* Import Google Roboto font with common weights */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Define custom font face */
@font-face {
  font-family: 'alternate-font';
  src: url('Futura-CondensedLight.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root{
	
	
  /* Basic Colors */
  --basic: #ffffff;          /* White */
  --dark: #232323;           /* Dark gray / near black */
  
  /* Informational & Status Colors */
  --info: #46b8da;           /* Soft Blue */
  --success: #5cb85c;        /* Green */
  --warning: #f0ad4e;        /* Orange */
  --danger: #df4937;         /* Red */
  
  /* Background & Shadow */
  --lighter: #eeeeee;        /* Very light gray */
  --light: #d7d7d7;          /* Light gray */
  --shadow: #cecece;         /* Subtle gray shadow */
  
  /* Borders & Highlights */
  --bordered: #929292;       /* Medium gray border */
  --highlight: #4f4f4f;      /* Dark gray highlight */
  
  /* Brand Colors */
  --primary: #61b3de;        /* Primary blue */
  --secondary: #61b3de;      /* Secondary blue (same as primary) */
  --alternate: #9dba58;      /* Olive green */
  --default: #4298b5;        /* Default blue-gray */
	
	/* Font Size Variables */
--heading: 48px;        /* Main headings (h1) */
--sub-heading: 40px;    /* Secondary headings (h2) */
--title-heading: 32px;  /* Section titles (h3) */
--largest-size: 26px;   /* Large text, subtitles */
--larger-size: 20px;    /* Slightly larger body text */
--caption-size: 18px;   /* Captions, labels */
--large-size: 16px;     /* Standard paragraph text */
--default-size: 15px;   /* Default smaller text */
--small-size: 13px;     /* Small text, fine print */
--smaller-size: 12px;   /* Very small text */

}

	


/* Global Reset and Base Font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Better box model */
  font-family: 'Open Sans', sans-serif;
}


/* ========== General Pages Styles & Settings ========== */

/* Margin Top Utilities */
.margin-top-10  { margin-top: 10px; }
.margin-top-20  { margin-top: 20px; }
.margin-top-30  { margin-top: 30px; }
.margin-top-40  { margin-top: 40px; }
.margin-top-50  { margin-top: 50px; }
.margin-top-70  { margin-top: 70px; }
.margin-top-80  { margin-top: 80px; }
.margin-top-90  { margin-top: 90px; }
.margin-top-100 { margin-top: 100px; }
.margin-top-120 { margin-top: 120px; }
.margin-top-150 { margin-top: 150px; }
.margin-top-180 { margin-top: 180px; }
.margin-top-200 { margin-top: 200px; }

/* Margin Bottom Utilities */
.margin-bottom-10  { margin-bottom: 10px; }
.margin-bottom-20  { margin-bottom: 20px; }
.margin-bottom-30  { margin-bottom: 30px; }
.margin-bottom-50  { margin-bottom: 50px; }
.margin-bottom-60  { margin-bottom: 60px; }
.margin-bottom-80  { margin-bottom: 80px; }
.margin-bottom-100 { margin-bottom: 100px; }


/* ===== Default Button Settings ===== */
.btn {
    transition: all 0.3s ease-in-out;
    border-radius: 7px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    height: 32px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--basic);
    width: 96px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary);
    opacity: 0.85;
    outline: none;
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--basic);
    width: 125px;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary);
    opacity: 0.85;
    outline: none;
}

.btn-alternate {
    background-color: var(--alternate);
    color: var(--basic);
    border-radius: 3px;
    padding: 2px 10px;
    outline: none;
    border: none;
    height: 32px;
    width: 125px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: all 0.3s ease-in-out;
}

.btn-alternate:hover,
.btn-alternate:focus {
    background-color: var(--alternate);
    color: var(--basic);
    text-decoration: none;
    opacity: 0.85;
    outline: none;
}

.btn-default {
    background-color: var(--default);
    color: var(--basic);
    outline: none;
    border: none;
    height: 32px;
    width: 125px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: all 0.3s ease-in-out;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--default);
    color: var(--basic);
    text-decoration: none;
    opacity: 0.85;
    outline: none;
}

.btn-transparent {
    background-color: transparent;
    border: 1px solid var(--basic);
    text-transform: uppercase;
    color: var(--basic);
    padding: 10px 16px;
    font-weight: 600;
    outline: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: all 0.3s ease-in-out;
}

.btn-transparent:hover,
.btn-transparent:focus {
    background-color: var(--basic);
    color: var(--primary);
    outline: none;
}


/* ===== Flexbox Utility Classes ===== */
.flex-box {
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping by default */
  gap: 0; /* Optional: no gap between flex items */
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-2 {
  flex: 2 1 0%;
}

.flex-3 {
  flex: 3 1 0%;
}

.flex-4 {
  flex: 4 1 0%;
}

.flex-5 {
  flex: 5 1 0%;
}

.flex-6 {
  flex: 6 1 0%;
}


/* ===== Other General Settings ===== */
.show-on-tab {
  display: none;
}

/* ===== Responsive Typography & Buttons ===== */

@media screen and (min-width: 1900px) {
  :root {
    --heading: 54px;
    --sub-heading: 46px;
    --title-heading: 42px;
    --largest-size: 32px;
    --larger-size: 26px;
    --caption-size: 24px;
    --large-size: 22px;
    --default-size: 20px;
    --small-size: 16px;
    --smaller-size: 15px;
  }

  h6 {
    font-size: var(--smaller-size);
  }

  .btn-transparent {
    font-size: var(--default-size);
    padding: 12px 20px;
    font-weight: 400;
    border-radius: 7px;
  }

  .btn-alternate {
    font-size: var(--small-size);
    padding: 5px 15px;
    border-radius: 5px;
  }
}

@media screen and (max-width: 1899px) and (min-width: 1650px) {
  :root {
    --heading: 50px;
    --sub-heading: 42px;
    --title-heading: 36px;
    --largest-size: 28px;
    --larger-size: 24px;
    --caption-size: 21px;
    --large-size: 20px;
    --default-size: 18px;
    --small-size: 14px;
    --smaller-size: 13px;
  }

  h6 {
    font-size: var(--smaller-size);
  }

  .btn-transparent {
    font-size: var(--default-size);
    padding: 10px 18px;
    font-weight: 400;
    border-radius: 6px;
  }

  .btn-alternate {
    font-size: var(--small-size);
    padding: 4px 12px;
    border-radius: 4px;
  }
}

@media screen and (max-width: 1649px) and (min-width: 1401px) {
  :root {
    --heading: 44px;
    --sub-heading: 36px;
    --title-heading: 30px;
    --largest-size: 24px;
    --default-size: 14px;
    --small-size: 12px;
    --smaller-size: 11px;
  }

  h6 {
    font-size: var(--smaller-size);
  }

  .btn-transparent {
    font-size: var(--default-size);
    padding: 8px 14px;
    font-weight: 400;
    border-radius: 5px;
  }

  .btn-alternate {
    font-size: var(--small-size);
    padding: 3px 10px;
    border-radius: 3px;
  }
}

@media screen and (max-width: 1400px) {
  :root {
    --heading: 38px;
    --sub-heading: 30px;
    --title-heading: 26px;
    --largest-size: 22px;
    --larger-size: 18px;
    --caption-size: 16px;
    --large-size: 14px;
    --default-size: 13px;
    --small-size: 11px;
    --smaller-size: 10px;
  }

  h6 {
    font-size: var(--smaller-size);
  }

  .btn-transparent {
    font-size: var(--default-size);
    padding: 6px 10px;
    font-weight: 400;
    border-radius: 4px;
  }

  .btn-alternate {
    font-size: 12px;
    padding: 2px 8px;
    height: 24px;
    width: 150px;
    border-radius: 3px;
  }
}


@media screen and (max-width: 1400px) {
  :root {
    /* Font Size Responsiveness */
    --heading: 30px;
    --sub-heading: 24px;
    --title-heading: 16px;
    --largest-size: 18px;
    --larger-size: 16px;
    --caption-size: 14px;
    --large-size: 13px;
    --default-size: 12px;
    --small-size: 10px;
    --smaller-size: 9px;
  }

  /* Default Buttons Responsiveness */
  .btn-transparent {
    font-size: var(--default-size);
    border-radius: 4px;
    padding: 6px 10px;
    font-weight: 400;
  }

  .btn-alternate {
    font-size: 11px;
    padding: 2px 8px;
    height: 24px;
    width: 150px;
  }
}

@media screen and (max-width: 767px) {
  /* Other General Settings Responsiveness */
  .show-on-tab {
    display: block;
  }

  .hide-on-tab {
    display: none !important;
  }
}