/*==========================================================
    HI-TECH PATHSHALA
    GLOBAL DESIGN SYSTEM v2
==========================================================*/

/*==========================================================
    01. ROOT DESIGN TOKENS
==========================================================*/

:root{

  /*==================================
    BRAND COLORS
  ==================================*/

  --primary:#0F4C81;
  --primary-dark:#0B355A;
  --primary-light:#2F79B7;

  --secondary:#C6922F;
  --secondary-dark:#A87622;
  --secondary-light:#F7E6BF;

  /*==================================
    NEUTRALS
  ==================================*/

  --white:#FFFFFF;
  --black:#000000;

  --heading:#0B355A;
  --text:#344054;
  --text-light:#667085;
  --text-muted:#98A2B3;

  /*==================================
    SURFACES
  ==================================*/

  --body-bg:#F5F8FC;

  --surface:#FFFFFF;

  --surface-soft:#FAFBFD;

  --surface-blue:#F2F7FC;

  --surface-gold:#FFF9EF;

  --surface-dark:#0B355A;

  --glass:rgba(255,255,255,.72);

  /*==================================
    BORDERS
  ==================================*/

  --border:#E5EDF4;

  --border-light:#F2F5F8;

  --border-dark:#D7E2EC;

  --border-focus:rgba(15,76,129,.20);

  /*==================================
    STATUS
  ==================================*/

  --success:#16A34A;

  --warning:#EAAA08;

  --danger:#DC3545;

  --info:#0EA5E9;

  /*==================================
    TYPOGRAPHY
  ==================================*/

  --font-heading:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Font Weight */

  --fw-regular:400;

  --fw-medium:500;

  --fw-semibold:600;

  --fw-bold:700;

  --fw-extrabold:800;

  /*==================================
    SPACING
  ==================================*/

  --space-2xs:.25rem;

  --space-xs:.5rem;

  --space-sm:1rem;

  --space-md:1.5rem;

  --space-lg:2rem;

  --space-xl:3rem;

  --space-2xl:4rem;

  --space-3xl:6rem;

  --space-4xl:8rem;

  /*==================================
    BORDER RADIUS
  ==================================*/

  --radius-xs:6px;

  --radius-sm:10px;

  --radius-md:16px;

  --radius-lg:24px;

  --radius-xl:32px;

  --radius-pill:999px;

  /*==================================
    SHADOWS
  ==================================*/

  --shadow-xs:
      0 1px 2px rgba(15,76,129,.04);

  --shadow-sm:
      0 6px 18px rgba(15,76,129,.06);

  --shadow-md:
      0 14px 32px rgba(15,76,129,.10);

  --shadow-lg:
      0 24px 60px rgba(15,76,129,.15);

  --shadow-card:
      0 10px 35px rgba(15,76,129,.08);

  --shadow-hover:
      0 22px 50px rgba(15,76,129,.16);

  --shadow-gold:
      0 10px 30px rgba(198,146,47,.22);

  /*==================================
    Z INDEX
  ==================================*/

  --z-base:1;

  --z-dropdown:100;

  --z-sticky:500;

  --z-overlay:900;

  --z-modal:1000;

  /*==================================
    TRANSITIONS
  ==================================*/

  --transition-fast:.15s cubic-bezier(.4,0,.2,1);

  --transition:.3s cubic-bezier(.16,1,.3,1);

  --transition-slow:.5s cubic-bezier(.16,1,.3,1);

  --transition-bounce:.45s cubic-bezier(.34,1.56,.64,1);

  /*==================================
    LAYOUT
  ==================================*/

  --container:1280px;

  --container-sm:960px;

  --container-lg:1440px;

}

/*==========================================================
  02. RESET
==========================================================*/

*,
*::before,
*::after{

  margin:0;

  padding:0;

  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

  scroll-padding-top:90px;

  text-size-adjust:100%;

}

body{

  background:var(--body-bg);

  color:var(--text);

  font-family:var(--font-body);

  font-size:16px;

  line-height:1.7;

  font-weight:var(--fw-regular);

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

  text-rendering:optimizeLegibility;

}

img,
picture,
svg,
video,
canvas{

  display:block;

  max-width:100%;

  height:auto;

}

a{

  color:inherit;

  text-decoration:none;

  transition:var(--transition);

}

button{

  border:none;

  outline:none;

  background:none;

  cursor:pointer;

  transition:var(--transition);

}

input,
textarea,
select{

  font:inherit;

}

ul,
ol{

  list-style:none;

}

::selection{

  background:var(--primary);

  color:#fff;

}

/*==========================================================
    03. TYPOGRAPHY SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Default Headings (Semantic Only)
----------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    color:var(--heading);

    font-weight:var(--fw-bold);

    line-height:1.2;

    letter-spacing:-.02em;

    margin-bottom:1rem;

}

h1{font-size:2.5rem;}

h2{font-size:2rem;}

h3{font-size:1.75rem;}

h4{font-size:1.35rem;}

h5{font-size:1.15rem;}

h6{font-size:1rem;}


/*----------------------------------------------------------
    Display Headings
----------------------------------------------------------*/

.display-xl{

    font-family:var(--font-heading);

    font-size:clamp(3rem,6vw,5rem);

    font-weight:var(--fw-extrabold);

    line-height:1.05;

    letter-spacing:-.04em;

    color:var(--heading);

}

.display-lg{

    font-family:var(--font-heading);

    font-size:clamp(2.6rem,5vw,4rem);

    font-weight:var(--fw-extrabold);

    line-height:1.08;

    letter-spacing:-.03em;

    color:var(--heading);

}

.display-md{

    font-family:var(--font-heading);

    font-size:clamp(2.2rem,4vw,3.25rem);

    font-weight:var(--fw-bold);

    line-height:1.12;

    color:var(--heading);

}

.display-sm{

    font-family:var(--font-heading);

    font-size:clamp(1.9rem,3vw,2.6rem);

    font-weight:var(--fw-bold);

    line-height:1.2;

    color:var(--heading);

}


/*----------------------------------------------------------
    Section Headings
----------------------------------------------------------*/

.heading-xl{

    font-size:clamp(2rem,3vw,2.75rem);

    font-weight:var(--fw-bold);

    line-height:1.2;

}

.heading-lg{

    font-size:clamp(1.75rem,2.5vw,2.3rem);

    font-weight:var(--fw-bold);

}

.heading-md{

    font-size:1.5rem;

    font-weight:var(--fw-semibold);

}

.heading-sm{

    font-size:1.25rem;

    font-weight:var(--fw-semibold);

}


/*----------------------------------------------------------
    Paragraph Styles
----------------------------------------------------------*/

p{

    color:var(--text-light);

    line-height:1.75;

    margin-bottom:1rem;

}

.lead{

    font-size:clamp(1.05rem,1.6vw,1.2rem);

    font-weight:var(--fw-regular);

    line-height:1.8;

    color:var(--text-light);

}

.body-lg{

    font-size:1.125rem;

    line-height:1.8;

}

.body-md{

    font-size:1rem;

    line-height:1.75;

}

.body-sm{

    font-size:.925rem;

    line-height:1.7;

}

.body-xs{

    font-size:.85rem;

    line-height:1.6;

}


/*----------------------------------------------------------
    Small Text
----------------------------------------------------------*/

small{

    font-size:.875rem;

    color:var(--text-muted);

}


/*----------------------------------------------------------
    Strong Text
----------------------------------------------------------*/

strong,
b{

    color:var(--heading);

    font-weight:var(--fw-bold);

}


/*----------------------------------------------------------
    Text Utilities
----------------------------------------------------------*/

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.text-heading{

    color:var(--heading)!important;

}

.text-body{

    color:var(--text)!important;

}

.text-light{

    color:var(--text-light)!important;

}

.text-muted{

    color:var(--text-muted)!important;

}

.text-white{

    color:#fff!important;

}

.text-center{

    text-align:center;

}

.text-start{

    text-align:left;

}

.text-end{

    text-align:right;

}

.text-uppercase{

    text-transform:uppercase;

}

.text-nowrap{

    white-space:nowrap;

}


/*----------------------------------------------------------
    Font Weight Utilities
----------------------------------------------------------*/

.fw-regular{

    font-weight:var(--fw-regular);

}

.fw-medium{

    font-weight:var(--fw-medium);

}

.fw-semibold{

    font-weight:var(--fw-semibold);

}

.fw-bold{

    font-weight:var(--fw-bold);

}

.fw-extrabold{

    font-weight:var(--fw-extrabold);

}


/*----------------------------------------------------------
    Gradient Text
----------------------------------------------------------*/

.text-gradient-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.text-gradient-secondary{

    background:linear-gradient(
        135deg,
        var(--secondary-dark),
        var(--secondary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*==========================================================
    04. LAYOUT SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Containers
----------------------------------------------------------*/

.container{

  width:100%;

  max-width:1320px;

  margin-inline:auto;

  padding-inline:20px;

}

.container-sm{

  max-width:960px;

}

.container-lg{

  max-width:1440px;

}

.container-fluid{

  width:100%;

  padding-inline:20px;

}


/*----------------------------------------------------------
  Sections
----------------------------------------------------------*/

section{

  position:relative;

  overflow:hidden;

}

.section{

  position:relative;

  padding:100px 0;

}

.section-sm{

  padding:70px 0;

}

.section-lg{

  padding:140px 0;

}

.section-xl{

  padding:170px 0;

}


/*----------------------------------------------------------
  Display Helpers
----------------------------------------------------------*/

.d-flex{

  display:flex;

}

.d-inline-flex{

  display:inline-flex;

}

.d-grid{

  display:grid;

}

.d-block{

  display:block;

}

.d-inline{

  display:inline;

}

.d-none{

  display:none;

}


/*----------------------------------------------------------
  Flex Helpers
----------------------------------------------------------*/

.align-center{

  align-items:center;

}

.align-start{

  align-items:flex-start;

}

.align-end{

  align-items:flex-end;

}

.justify-center{

  justify-content:center;

}

.justify-between{

  justify-content:space-between;

}

.justify-around{

  justify-content:space-around;

}

.justify-evenly{

  justify-content:space-evenly;

}

.flex-column{

  flex-direction:column;

}

.flex-wrap{

  flex-wrap:wrap;

}

.flex-nowrap{

  flex-wrap:nowrap;

}

.flex-1{

  flex:1;

}


/*----------------------------------------------------------
  Grid Helpers
----------------------------------------------------------*/

.grid{

  display:grid;

  gap:24px;

}

.grid-2{

  grid-template-columns:repeat(2,minmax(0,1fr));

}

.grid-3{

  grid-template-columns:repeat(3,minmax(0,1fr));

}

.grid-4{

  grid-template-columns:repeat(4,minmax(0,1fr));

}

.grid-auto{

  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}


/*----------------------------------------------------------
  Gap Utilities
----------------------------------------------------------*/

.gap-0{gap:0;}

.gap-xs{gap:.5rem;}

.gap-sm{gap:1rem;}

.gap-md{gap:1.5rem;}

.gap-lg{gap:2rem;}

.gap-xl{gap:3rem;}

.gap-2xl{gap:4rem;}


/*----------------------------------------------------------
  Width Utilities
----------------------------------------------------------*/

.w-100{

  width:100%;

}

.w-auto{

  width:auto;

}

.max-w-sm{

  max-width:540px;

}

.max-w-md{

  max-width:720px;

}

.max-w-lg{

  max-width:960px;

}

.max-w-xl{

  max-width:1200px;

}


/*----------------------------------------------------------
  Height Utilities
----------------------------------------------------------*/

.h-100{

  height:100%;

}

.min-vh-100{

  min-height:100vh;

}


/*----------------------------------------------------------
  Position Utilities
----------------------------------------------------------*/

.position-relative{

  position:relative;

}

.position-absolute{

  position:absolute;

}

.position-fixed{

  position:fixed;

}

.top-0{

  top:0;

}

.bottom-0{

  bottom:0;

}

.start-0{

  left:0;

}

.end-0{

  right:0;

}


/*----------------------------------------------------------
  Overflow
----------------------------------------------------------*/

.overflow-hidden{

  overflow:hidden;

}

.overflow-auto{

  overflow:auto;

}

.overflow-visible{

  overflow:visible;

}


/*----------------------------------------------------------
  Z-index
----------------------------------------------------------*/

.z-1{

  z-index:1;

}

.z-2{

  z-index:2;

}

.z-5{

  z-index:5;

}

.z-10{

  z-index:10;

}


/*----------------------------------------------------------
  Border Radius
----------------------------------------------------------*/

.rounded-sm{

  border-radius:var(--radius-sm);

}

.rounded{

  border-radius:var(--radius);

}

.rounded-lg{

  border-radius:var(--radius-lg);

}

.rounded-xl{

  border-radius:var(--radius-xl);

}

.rounded-pill{

  border-radius:999px;

}

.rounded-circle{

  border-radius:50%;

}


/*----------------------------------------------------------
  Glass Panel
----------------------------------------------------------*/

.glass{

  background:var(--glass-surface);

  backdrop-filter:var(--backdrop-blur);

  -webkit-backdrop-filter:var(--backdrop-blur);

  border:1px solid rgba(255,255,255,.45);

}


/*----------------------------------------------------------
  Responsive
----------------------------------------------------------*/

@media (max-width:1200px){

  .section{

      padding:80px 0;

  }

}

@media (max-width:992px){

  .grid-2,
  .grid-3,
  .grid-4{

      grid-template-columns:1fr;

  }

  .section{

      padding:70px 0;

  }

}

@media (max-width:768px){

  .container{

      padding-inline:16px;

  }

  .section{

      padding:60px 0;

  }

}

@media (max-width:576px){

  .container{

      padding-inline:14px;

  }

  .section{

      padding:50px 0;

  }

}

/*==========================================================
    05. SPACING UTILITIES
==========================================================*/

/*----------------------------------------------------------
    Margin - All Sides
----------------------------------------------------------*/

.m-0{margin:0!important;}
.m-1{margin:.25rem!important;}
.m-2{margin:.5rem!important;}
.m-3{margin:1rem!important;}
.m-4{margin:1.5rem!important;}
.m-5{margin:2rem!important;}
.m-6{margin:3rem!important;}
.m-7{margin:4rem!important;}
.m-auto{margin:auto!important;}


/*----------------------------------------------------------
    Margin Top
----------------------------------------------------------*/

.mt-0{margin-top:0!important;}
.mt-1{margin-top:.25rem!important;}
.mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:1rem!important;}
.mt-4{margin-top:1.5rem!important;}
.mt-5{margin-top:2rem!important;}
.mt-6{margin-top:3rem!important;}
.mt-7{margin-top:4rem!important;}
.mt-auto{margin-top:auto!important;}


/*----------------------------------------------------------
    Margin Bottom
----------------------------------------------------------*/

.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:.25rem!important;}
.mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;}
.mb-4{margin-bottom:1.5rem!important;}
.mb-5{margin-bottom:2rem!important;}
.mb-6{margin-bottom:3rem!important;}
.mb-7{margin-bottom:4rem!important;}
.mb-auto{margin-bottom:auto!important;}


/*----------------------------------------------------------
    Margin Left
----------------------------------------------------------*/

.ms-0{margin-left:0!important;}
.ms-1{margin-left:.25rem!important;}
.ms-2{margin-left:.5rem!important;}
.ms-3{margin-left:1rem!important;}
.ms-4{margin-left:1.5rem!important;}
.ms-5{margin-left:2rem!important;}
.ms-6{margin-left:3rem!important;}
.ms-auto{margin-left:auto!important;}


/*----------------------------------------------------------
    Margin Right
----------------------------------------------------------*/

.me-0{margin-right:0!important;}
.me-1{margin-right:.25rem!important;}
.me-2{margin-right:.5rem!important;}
.me-3{margin-right:1rem!important;}
.me-4{margin-right:1.5rem!important;}
.me-5{margin-right:2rem!important;}
.me-6{margin-right:3rem!important;}
.me-auto{margin-right:auto!important;}


/*----------------------------------------------------------
    Margin X Axis
----------------------------------------------------------*/

.mx-0{
    margin-left:0!important;
    margin-right:0!important;
}

.mx-1{
    margin-left:.25rem!important;
    margin-right:.25rem!important;
}

.mx-2{
    margin-left:.5rem!important;
    margin-right:.5rem!important;
}

.mx-3{
    margin-left:1rem!important;
    margin-right:1rem!important;
}

.mx-4{
    margin-left:1.5rem!important;
    margin-right:1.5rem!important;
}

.mx-5{
    margin-left:2rem!important;
    margin-right:2rem!important;
}

.mx-auto{
    margin-left:auto!important;
    margin-right:auto!important;
}


/*----------------------------------------------------------
    Margin Y Axis
----------------------------------------------------------*/

.my-0{
    margin-top:0!important;
    margin-bottom:0!important;
}

.my-1{
    margin-top:.25rem!important;
    margin-bottom:.25rem!important;
}

.my-2{
    margin-top:.5rem!important;
    margin-bottom:.5rem!important;
}

.my-3{
    margin-top:1rem!important;
    margin-bottom:1rem!important;
}

.my-4{
    margin-top:1.5rem!important;
    margin-bottom:1.5rem!important;
}

.my-5{
    margin-top:2rem!important;
    margin-bottom:2rem!important;
}

.my-6{
    margin-top:3rem!important;
    margin-bottom:3rem!important;
}


/*----------------------------------------------------------
    Padding - All Sides
----------------------------------------------------------*/

.p-0{padding:0!important;}
.p-1{padding:.25rem!important;}
.p-2{padding:.5rem!important;}
.p-3{padding:1rem!important;}
.p-4{padding:1.5rem!important;}
.p-5{padding:2rem!important;}
.p-6{padding:3rem!important;}
.p-7{padding:4rem!important;}


/*----------------------------------------------------------
    Padding Top
----------------------------------------------------------*/

.pt-0{padding-top:0!important;}
.pt-1{padding-top:.25rem!important;}
.pt-2{padding-top:.5rem!important;}
.pt-3{padding-top:1rem!important;}
.pt-4{padding-top:1.5rem!important;}
.pt-5{padding-top:2rem!important;}
.pt-6{padding-top:3rem!important;}


/*----------------------------------------------------------
    Padding Bottom
----------------------------------------------------------*/

.pb-0{padding-bottom:0!important;}
.pb-1{padding-bottom:.25rem!important;}
.pb-2{padding-bottom:.5rem!important;}
.pb-3{padding-bottom:1rem!important;}
.pb-4{padding-bottom:1.5rem!important;}
.pb-5{padding-bottom:2rem!important;}
.pb-6{padding-bottom:3rem!important;}


/*----------------------------------------------------------
    Padding Left
----------------------------------------------------------*/

.ps-0{padding-left:0!important;}
.ps-1{padding-left:.25rem!important;}
.ps-2{padding-left:.5rem!important;}
.ps-3{padding-left:1rem!important;}
.ps-4{padding-left:1.5rem!important;}
.ps-5{padding-left:2rem!important;}
.ps-6{padding-left:3rem!important;}


/*----------------------------------------------------------
    Padding Right
----------------------------------------------------------*/

.pe-0{padding-right:0!important;}
.pe-1{padding-right:.25rem!important;}
.pe-2{padding-right:.5rem!important;}
.pe-3{padding-right:1rem!important;}
.pe-4{padding-right:1.5rem!important;}
.pe-5{padding-right:2rem!important;}
.pe-6{padding-right:3rem!important;}


/*----------------------------------------------------------
    Padding X Axis
----------------------------------------------------------*/

.px-0{
    padding-left:0!important;
    padding-right:0!important;
}

.px-1{
    padding-left:.25rem!important;
    padding-right:.25rem!important;
}

.px-2{
    padding-left:.5rem!important;
    padding-right:.5rem!important;
}

.px-3{
    padding-left:1rem!important;
    padding-right:1rem!important;
}

.px-4{
    padding-left:1.5rem!important;
    padding-right:1.5rem!important;
}

.px-5{
    padding-left:2rem!important;
    padding-right:2rem!important;
}

.px-6{
    padding-left:3rem!important;
    padding-right:3rem!important;
}


/*----------------------------------------------------------
    Padding Y Axis
----------------------------------------------------------*/

.py-0{
    padding-top:0!important;
    padding-bottom:0!important;
}

.py-1{
    padding-top:.25rem!important;
    padding-bottom:.25rem!important;
}

.py-2{
    padding-top:.5rem!important;
    padding-bottom:.5rem!important;
}

.py-3{
    padding-top:1rem!important;
    padding-bottom:1rem!important;
}

.py-4{
    padding-top:1.5rem!important;
    padding-bottom:1.5rem!important;
}

.py-5{
    padding-top:2rem!important;
    padding-bottom:2rem!important;
}

.py-6{
    padding-top:3rem!important;
    padding-bottom:3rem!important;
}

/*==========================================================
    06. BUTTON SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Base Button
----------------------------------------------------------*/

.ht-btn{

  position:relative;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:.65rem;

  min-height:52px;

  padding:0 28px;

  border:none;

  border-radius:var(--radius-pill);

  background:transparent;

  color:var(--text);

  font-family:var(--font-body);

  font-size:.95rem;

  font-weight:600;

  line-height:1;

  text-align:center;

  text-decoration:none;

  white-space:nowrap;

  cursor:pointer;

  user-select:none;

  overflow:hidden;

  transition:
      background .25s ease,
      color .25s ease,
      border-color .25s ease,
      box-shadow .25s ease,
      transform .25s ease;

}

.ht-btn i{

  font-size:.95rem;

  transition:transform .25s ease;

}

.ht-btn:hover{

  transform:translateY(-2px);

}

.ht-btn:hover i{

  transform:translateX(3px);

}

.ht-btn:active{

  transform:translateY(0);

}

.ht-btn:focus-visible{

  outline:none;

  box-shadow:0 0 0 4px rgba(15,76,129,.15);

}


/*----------------------------------------------------------
  Primary
----------------------------------------------------------*/

.ht-btn--primary{

  background:var(--primary);

  color:#fff;

  box-shadow:var(--shadow-sm);

}

.ht-btn--primary:hover{

  background:var(--primary-dark);

  box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
  Secondary / Gold
----------------------------------------------------------*/

.ht-btn--secondary{

  background:var(--secondary);

  color:#fff;

  box-shadow:var(--shadow-gold);

}

.ht-btn--secondary:hover{

  background:var(--secondary-dark);

}


/*----------------------------------------------------------
  White Button
----------------------------------------------------------*/

.ht-btn--white{

  background:#fff;

  color:var(--heading);

  border:1px solid var(--border);

  box-shadow:var(--shadow-sm);

}

.ht-btn--white:hover{

  box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
  Outline Primary
----------------------------------------------------------*/

.ht-btn--outline{

  border:1.5px solid var(--primary);

  color:var(--primary);

  background:transparent;

}

.ht-btn--outline:hover{

  background:var(--primary);

  color:#fff;

}


/*----------------------------------------------------------
  Outline Gold
----------------------------------------------------------*/

.ht-btn--outline-secondary{

  border:1.5px solid var(--secondary);

  color:var(--secondary);

}

.ht-btn--outline-secondary:hover{

  background:var(--secondary);

  color:#fff;

}


/*----------------------------------------------------------
  Ghost
----------------------------------------------------------*/

.ht-btn--ghost{

  color:var(--primary);

  background:transparent;

}

.ht-btn--ghost:hover{

  background:var(--surface-blue);

}


/*----------------------------------------------------------
  Light Button
----------------------------------------------------------*/

.ht-btn--light{

  background:var(--surface-soft);

  color:var(--heading);

}

.ht-btn--light:hover{

  background:#fff;

  box-shadow:var(--shadow-sm);

}


/*----------------------------------------------------------
  Danger
----------------------------------------------------------*/

.ht-btn--danger{

  background:var(--danger);

  color:#fff;

}

.ht-btn--danger:hover{

  filter:brightness(.95);

}


/*----------------------------------------------------------
  Success
----------------------------------------------------------*/

.ht-btn--success{

  background:var(--success);

  color:#fff;

}

.ht-btn--success:hover{

  filter:brightness(.95);

}


/*----------------------------------------------------------
  Sizes
----------------------------------------------------------*/

.ht-btn--sm{

  min-height:42px;

  padding:0 18px;

  font-size:.85rem;

}

.ht-btn--md{

  min-height:52px;

  padding:0 28px;

}

.ht-btn--lg{

  min-height:60px;

  padding:0 36px;

  font-size:1rem;

}

.ht-btn--xl{

  min-height:66px;

  padding:0 42px;

  font-size:1.05rem;

}


/*----------------------------------------------------------
  Width
----------------------------------------------------------*/

.ht-btn--block{

  width:100%;

}

.ht-btn--auto{

  width:auto;

}


/*----------------------------------------------------------
  Rounded Variants
----------------------------------------------------------*/

.ht-btn--rounded{

  border-radius:var(--radius);

}

.ht-btn--square{

  border-radius:0;

}


/*----------------------------------------------------------
  Icon Only Button
----------------------------------------------------------*/

.ht-btn--icon{

  width:50px;

  height:50px;

  padding:0;

  border-radius:50%;

}

.ht-btn--icon i{

  margin:0;

}


/*----------------------------------------------------------
  Disabled
----------------------------------------------------------*/

.ht-btn:disabled,

.ht-btn.disabled{

  opacity:.6;

  pointer-events:none;

  cursor:not-allowed;

  transform:none;

}


/*----------------------------------------------------------
  Responsive
----------------------------------------------------------*/

@media (max-width:768px){

  .ht-btn{

      min-height:48px;

      padding:0 22px;

      font-size:.9rem;

  }

  .ht-btn--lg{

      min-height:56px;

  }

}

/*==========================================================
    07. CARD SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Base Card
----------------------------------------------------------*/

.ht-card{

  position:relative;

  display:flex;

  flex-direction:column;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius-lg);

  overflow:hidden;

  transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease;

  box-shadow:var(--shadow-sm);

}

.ht-card:hover{

  transform:translateY(-8px);

  border-color:rgba(15,76,129,.12);

  box-shadow:var(--shadow-lg);

}


/*----------------------------------------------------------
  Card Body
----------------------------------------------------------*/

.ht-card__body{

  padding:28px;

  flex:1;

}


/*----------------------------------------------------------
  Card Header
----------------------------------------------------------*/

.ht-card__header{

  padding:24px 28px;

  border-bottom:1px solid var(--border);

}


/*----------------------------------------------------------
  Card Footer
----------------------------------------------------------*/

.ht-card__footer{

  padding:20px 28px;

  border-top:1px solid var(--border);

}


/*----------------------------------------------------------
  Card Image
----------------------------------------------------------*/

.ht-card__image{

  width:100%;

  overflow:hidden;

}

.ht-card__image img{

  width:100%;

  display:block;

  transition:transform .45s ease;

}

.ht-card:hover .ht-card__image img{

  transform:scale(1.05);

}


/*----------------------------------------------------------
  Card Title
----------------------------------------------------------*/

.ht-card__title{

  margin-bottom:.65rem;

  font-size:1.35rem;

  font-weight:700;

  color:var(--heading);

}


/*----------------------------------------------------------
  Card Description
----------------------------------------------------------*/

.ht-card__text{

  margin-bottom:0;

  color:var(--text-light);

}


/*----------------------------------------------------------
  Flat Card
----------------------------------------------------------*/

.ht-card--flat{

  box-shadow:none;

}

.ht-card--flat:hover{

  box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
  Elevated Card
----------------------------------------------------------*/

.ht-card--elevated{

  box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
  Soft Card
----------------------------------------------------------*/

.ht-card--soft{

  background:var(--surface-soft);

}


/*----------------------------------------------------------
  Primary Card
----------------------------------------------------------*/

.ht-card--primary{

  background:var(--surface-blue);

}


/*----------------------------------------------------------
  Gold Card
----------------------------------------------------------*/

.ht-card--gold{

  background:var(--surface-gold);

}


/*----------------------------------------------------------
  Dark Card
----------------------------------------------------------*/

.ht-card--dark{

  background:var(--surface-dark);

  color:#fff;

}

.ht-card--dark .ht-card__title{

  color:#fff;

}

.ht-card--dark .ht-card__text{

  color:rgba(255,255,255,.75);

}


/*----------------------------------------------------------
  Glass Card
----------------------------------------------------------*/

.ht-card--glass{

  background:rgba(255,255,255,.65);

  backdrop-filter:blur(18px);

  -webkit-backdrop-filter:blur(18px);

}


/*----------------------------------------------------------
  Border Variants
----------------------------------------------------------*/

.ht-card--border-primary{

  border-color:rgba(15,76,129,.25);

}

.ht-card--border-secondary{

  border-color:rgba(198,146,47,.3);

}


/*----------------------------------------------------------
  Hover Border Effect
----------------------------------------------------------*/

.ht-card--hover-border:hover{

  border-color:var(--primary);

}


/*----------------------------------------------------------
  Card Badge
----------------------------------------------------------*/

.ht-card__badge{

  position:absolute;

  top:18px;

  right:18px;

  z-index:2;

}


/*----------------------------------------------------------
  Horizontal Card
----------------------------------------------------------*/

.ht-card--horizontal{

  flex-direction:row;

}

.ht-card--horizontal .ht-card__image{

  width:280px;

  flex-shrink:0;

}

.ht-card--horizontal .ht-card__body{

  flex:1;

}


/*----------------------------------------------------------
  Card Overlay
----------------------------------------------------------*/

.ht-card__overlay{

  position:absolute;

  inset:0;

  background:linear-gradient(
      to top,
      rgba(0,0,0,.65),
      transparent
  );

  opacity:0;

  transition:.35s;

}

.ht-card:hover .ht-card__overlay{

  opacity:1;

}


/*----------------------------------------------------------
  Responsive
----------------------------------------------------------*/

@media(max-width:992px){

  .ht-card--horizontal{

      flex-direction:column;

  }

  .ht-card--horizontal .ht-card__image{

      width:100%;

  }

}

@media(max-width:768px){

  .ht-card__body{

      padding:22px;

  }

  .ht-card__header{

      padding:20px 22px;

  }

  .ht-card__footer{

      padding:18px 22px;

  }

}

/*==========================================================
    08. BADGE & CHIP SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Base Badge
----------------------------------------------------------*/

.ht-badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:.45rem;

  min-height:32px;

  padding:0 14px;

  border-radius:var(--radius-pill);

  font-size:.78rem;

  font-weight:700;

  line-height:1;

  letter-spacing:.02em;

  white-space:nowrap;

}


/*----------------------------------------------------------
  Badge Sizes
----------------------------------------------------------*/

.ht-badge--sm{

  min-height:26px;

  padding:0 10px;

  font-size:.72rem;

}

.ht-badge--lg{

  min-height:40px;

  padding:0 18px;

  font-size:.9rem;

}


/*----------------------------------------------------------
  Primary Badge
----------------------------------------------------------*/

.ht-badge--primary{

  background:rgba(15,76,129,.10);

  color:var(--primary);

}


/*----------------------------------------------------------
  Secondary Badge
----------------------------------------------------------*/

.ht-badge--secondary{

  background:rgba(198,146,47,.14);

  color:var(--secondary-dark);

}


/*----------------------------------------------------------
  Success Badge
----------------------------------------------------------*/

.ht-badge--success{

  background:#ECFDF3;

  color:#15803D;

}


/*----------------------------------------------------------
  Danger Badge
----------------------------------------------------------*/

.ht-badge--danger{

  background:#FEF2F2;

  color:#DC2626;

}


/*----------------------------------------------------------
  Warning Badge
----------------------------------------------------------*/

.ht-badge--warning{

  background:#FEFCE8;

  color:#CA8A04;

}


/*----------------------------------------------------------
  Info Badge
----------------------------------------------------------*/

.ht-badge--info{

  background:#EFF6FF;

  color:#2563EB;

}


/*----------------------------------------------------------
  Dark Badge
----------------------------------------------------------*/

.ht-badge--dark{

  background:var(--surface-dark);

  color:#fff;

}


/*----------------------------------------------------------
  Outline Badge
----------------------------------------------------------*/

.ht-badge--outline{

  background:transparent;

  border:1px solid var(--border);

  color:var(--heading);

}


/*==========================================================
  CHIP SYSTEM
==========================================================*/

.ht-chip{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:.5rem;

  min-height:42px;

  padding:0 20px;

  border-radius:var(--radius-pill);

  background:#fff;

  border:1px solid var(--border);

  color:var(--heading);

  font-size:.88rem;

  font-weight:600;

  cursor:pointer;

  transition:all .25s ease;

}


/*----------------------------------------------------------
  Hover
----------------------------------------------------------*/

.ht-chip:hover{

  border-color:var(--primary);

  background:var(--surface-blue);

  color:var(--primary);

  transform:translateY(-2px);

}


/*----------------------------------------------------------
  Active
----------------------------------------------------------*/

.ht-chip.is-active{

  background:var(--primary);

  border-color:var(--primary);

  color:#fff;

}


/*----------------------------------------------------------
  Secondary Active
----------------------------------------------------------*/

.ht-chip.is-secondary{

  background:var(--secondary);

  border-color:var(--secondary);

  color:#fff;

}


/*----------------------------------------------------------
  Soft Chip
----------------------------------------------------------*/

.ht-chip--soft{

  background:var(--surface-soft);

}


/*----------------------------------------------------------
  Outline Chip
----------------------------------------------------------*/

.ht-chip--outline{

  background:transparent;

}


/*----------------------------------------------------------
  Rounded Rectangle
----------------------------------------------------------*/

.ht-chip--rounded{

  border-radius:var(--radius);

}


/*----------------------------------------------------------
  Small Chip
----------------------------------------------------------*/

.ht-chip--sm{

  min-height:34px;

  padding:0 14px;

  font-size:.78rem;

}


/*----------------------------------------------------------
  Large Chip
----------------------------------------------------------*/

.ht-chip--lg{

  min-height:48px;

  padding:0 24px;

}


/*==========================================================
  LABELS
==========================================================*/

.ht-label{

  display:inline-flex;

  align-items:center;

  gap:.55rem;

  font-size:.82rem;

  font-weight:700;

  color:var(--heading);

  text-transform:uppercase;

  letter-spacing:.08em;

}


/*----------------------------------------------------------
  Section Label
----------------------------------------------------------*/

.ht-section-label{

  display:inline-flex;

  align-items:center;

  gap:.6rem;

  padding:8px 18px;

  border-radius:999px;

  background:rgba(15,76,129,.08);

  color:var(--primary);

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

}


/*----------------------------------------------------------
  Dot
----------------------------------------------------------*/

.ht-label-dot{

  width:8px;

  height:8px;

  border-radius:50%;

  background:var(--secondary);

}


/*==========================================================
  STATUS INDICATORS
==========================================================*/

.ht-status{

  display:inline-flex;

  align-items:center;

  gap:.45rem;

  font-size:.85rem;

  font-weight:600;

}

.ht-status::before{

  content:"";

  width:8px;

  height:8px;

  border-radius:50%;

  background:currentColor;

}

.ht-status--success{

  color:var(--success);

}

.ht-status--danger{

  color:var(--danger);

}

.ht-status--warning{

  color:var(--warning);

}

.ht-status--info{

  color:var(--info);

}


/*==========================================================
  RESPONSIVE
==========================================================*/

@media(max-width:768px){

  .ht-chip{

      min-height:38px;

      padding:0 16px;

      font-size:.82rem;

  }

  .ht-section-label{

      padding:7px 14px;

      font-size:.74rem;

  }

}

/*==========================================================
    09. ICON SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Base Icon Wrapper
----------------------------------------------------------*/

.ht-icon{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  transition:
      transform .3s ease,
      background-color .3s ease,
      color .3s ease,
      box-shadow .3s ease;

}


/*----------------------------------------------------------
  Sizes
----------------------------------------------------------*/

.ht-icon--xs{

  width:28px;

  height:28px;

  font-size:.75rem;

}

.ht-icon--sm{

  width:40px;

  height:40px;

  font-size:.95rem;

}

.ht-icon--md{

  width:54px;

  height:54px;

  font-size:1.15rem;

}

.ht-icon--lg{

  width:72px;

  height:72px;

  font-size:1.45rem;

}

.ht-icon--xl{

  width:88px;

  height:88px;

  font-size:1.8rem;

}


/*----------------------------------------------------------
  Radius
----------------------------------------------------------*/

.ht-icon--square{

  border-radius:var(--radius-sm);

}

.ht-icon--rounded{

  border-radius:var(--radius);

}

.ht-icon--circle{

  border-radius:50%;

}


/*----------------------------------------------------------
  Primary
----------------------------------------------------------*/

.ht-icon--primary{

  background:rgba(15,76,129,.08);

  color:var(--primary);

}

.ht-icon--primary:hover{

  background:var(--primary);

  color:#fff;

}


/*----------------------------------------------------------
  Secondary
----------------------------------------------------------*/

.ht-icon--secondary{

  background:rgba(198,146,47,.12);

  color:var(--secondary);

}

.ht-icon--secondary:hover{

  background:var(--secondary);

  color:#fff;

}


/*----------------------------------------------------------
  Success
----------------------------------------------------------*/

.ht-icon--success{

  background:#ECFDF3;

  color:var(--success);

}


/*----------------------------------------------------------
  Danger
----------------------------------------------------------*/

.ht-icon--danger{

  background:#FEF2F2;

  color:var(--danger);

}


/*----------------------------------------------------------
  Warning
----------------------------------------------------------*/

.ht-icon--warning{

  background:#FEFCE8;

  color:var(--warning);

}


/*----------------------------------------------------------
  Info
----------------------------------------------------------*/

.ht-icon--info{

  background:#EFF6FF;

  color:var(--info);

}


/*----------------------------------------------------------
  Dark
----------------------------------------------------------*/

.ht-icon--dark{

  background:var(--surface-dark);

  color:#fff;

}


/*----------------------------------------------------------
  White
----------------------------------------------------------*/

.ht-icon--white{

  background:#fff;

  color:var(--heading);

  box-shadow:var(--shadow-sm);

}


/*----------------------------------------------------------
  Outline
----------------------------------------------------------*/

.ht-icon--outline{

  border:1px solid var(--border);

  background:transparent;

  color:var(--heading);

}


/*----------------------------------------------------------
  Glass
----------------------------------------------------------*/

.ht-icon--glass{

  background:rgba(255,255,255,.65);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,.5);

}


/*----------------------------------------------------------
  Shadow Variants
----------------------------------------------------------*/

.ht-icon--shadow{

  box-shadow:var(--shadow-sm);

}

.ht-icon--shadow-lg{

  box-shadow:var(--shadow-lg);

}


/*----------------------------------------------------------
  Hover Effects
----------------------------------------------------------*/

.ht-icon--hover:hover{

  transform:translateY(-4px);

}

.ht-icon--grow:hover{

  transform:scale(1.08);

}

.ht-icon--rotate:hover{

  transform:rotate(8deg);

}

.ht-icon--lift:hover{

  transform:translateY(-5px);

  box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
  Card Integration
----------------------------------------------------------*/

.ht-card:hover .ht-icon{

  transform:translateY(-3px);

}


/*----------------------------------------------------------
  Feature Icon
----------------------------------------------------------*/

.ht-feature-icon{

  margin-bottom:1.25rem;

}


/*----------------------------------------------------------
  Responsive
----------------------------------------------------------*/

@media(max-width:768px){

  .ht-icon--lg{

      width:60px;

      height:60px;

      font-size:1.25rem;

  }

  .ht-icon--xl{

      width:72px;

      height:72px;

      font-size:1.5rem;

  }

}

/*==========================================================
    10. FORM SYSTEM
==========================================================*/

/*----------------------------------------------------------
    Form Group
----------------------------------------------------------*/

.ht-form-group{

  margin-bottom:1.5rem;

}

.ht-form-row{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:1.25rem;

}


/*----------------------------------------------------------
  Labels
----------------------------------------------------------*/

.ht-label{

  display:block;

  margin-bottom:.6rem;

  color:var(--heading);

  font-size:.9rem;

  font-weight:600;

}

.ht-label--required::after{

  content:" *";

  color:var(--danger);

}


/*----------------------------------------------------------
  Inputs
----------------------------------------------------------*/

.ht-input,
.ht-select,
.ht-textarea{

  width:100%;

  min-height:52px;

  padding:0 18px;

  border:1px solid var(--border);

  border-radius:var(--radius);

  background:var(--surface);

  color:var(--text);

  font-family:var(--font-body);

  font-size:.95rem;

  transition:
      border-color .25s ease,
      box-shadow .25s ease,
      background .25s ease;

}

.ht-textarea{

  min-height:140px;

  padding:16px 18px;

  resize:vertical;

}


/*----------------------------------------------------------
  Placeholder
----------------------------------------------------------*/

.ht-input::placeholder,
.ht-textarea::placeholder{

  color:var(--text-muted);

}


/*----------------------------------------------------------
  Hover
----------------------------------------------------------*/

.ht-input:hover,
.ht-select:hover,
.ht-textarea:hover{

  border-color:#CBD5E1;

}


/*----------------------------------------------------------
  Focus
----------------------------------------------------------*/

.ht-input:focus,
.ht-select:focus,
.ht-textarea:focus{

  outline:none;

  border-color:var(--primary);

  box-shadow:0 0 0 4px rgba(15,76,129,.10);

}


/*----------------------------------------------------------
  Disabled
----------------------------------------------------------*/

.ht-input:disabled,
.ht-select:disabled,
.ht-textarea:disabled{

  background:#F8FAFC;

  cursor:not-allowed;

  opacity:.7;

}


/*----------------------------------------------------------
  Readonly
----------------------------------------------------------*/

.ht-input[readonly],
.ht-textarea[readonly]{

  background:#F9FAFB;

}


/*----------------------------------------------------------
  Input With Icon
----------------------------------------------------------*/

.ht-input-group{

  position:relative;

}

.ht-input-group i{

  position:absolute;

  top:50%;

  left:18px;

  transform:translateY(-50%);

  color:var(--text-muted);

}

.ht-input-group .ht-input{

  padding-left:48px;

}


/*----------------------------------------------------------
  Right Icon
----------------------------------------------------------*/

.ht-input-group--right i{

  left:auto;

  right:18px;

}

.ht-input-group--right .ht-input{

  padding-left:18px;

  padding-right:48px;

}


/*----------------------------------------------------------
  Search Input
----------------------------------------------------------*/

.ht-search{

  position:relative;

}

.ht-search input{

  padding-left:50px;

}

.ht-search i{

  position:absolute;

  left:18px;

  top:50%;

  transform:translateY(-50%);

  color:var(--text-muted);

}


/*----------------------------------------------------------
  Checkbox
----------------------------------------------------------*/

.ht-checkbox{

  display:flex;

  align-items:center;

  gap:.65rem;

  cursor:pointer;

  font-size:.92rem;

}

.ht-checkbox input{

  width:18px;

  height:18px;

  accent-color:var(--primary);

}


/*----------------------------------------------------------
  Radio
----------------------------------------------------------*/

.ht-radio{

  display:flex;

  align-items:center;

  gap:.65rem;

  cursor:pointer;

  font-size:.92rem;

}

.ht-radio input{

  accent-color:var(--primary);

}


/*----------------------------------------------------------
  Switch
----------------------------------------------------------*/

.ht-switch{

  display:flex;

  align-items:center;

  gap:.75rem;

}

.ht-switch input{

  accent-color:var(--primary);

}


/*----------------------------------------------------------
  Validation States
----------------------------------------------------------*/

.is-valid{

  border-color:var(--success)!important;

}

.is-valid:focus{

  box-shadow:0 0 0 4px rgba(22,163,74,.12)!important;

}

.is-invalid{

  border-color:var(--danger)!important;

}

.is-invalid:focus{

  box-shadow:0 0 0 4px rgba(220,53,69,.10)!important;

}


/*----------------------------------------------------------
  Validation Messages
----------------------------------------------------------*/

.ht-feedback{

  margin-top:.4rem;

  font-size:.82rem;

}

.ht-feedback--success{

  color:var(--success);

}

.ht-feedback--error{

  color:var(--danger);

}

.ht-feedback--info{

  color:var(--info);

}


/*----------------------------------------------------------
  Help Text
----------------------------------------------------------*/

.ht-help{

  margin-top:.4rem;

  color:var(--text-muted);

  font-size:.82rem;

}


/*----------------------------------------------------------
  File Upload
----------------------------------------------------------*/

.ht-file{

  display:block;

  width:100%;

  padding:14px 18px;

  border:1px dashed var(--border);

  border-radius:var(--radius);

  background:var(--surface-soft);

  cursor:pointer;

  transition:.25s;

}

.ht-file:hover{

  border-color:var(--primary);

  background:var(--surface-blue);

}


/*----------------------------------------------------------
  Responsive
----------------------------------------------------------*/

@media(max-width:768px){

  .ht-form-row{

      grid-template-columns:1fr;

  }

  .ht-input,
  .ht-select,
  .ht-textarea{

      font-size:.92rem;

  }

}

/*==========================================================
    11. SECTION COMPONENTS
==========================================================*/


/*----------------------------------------------------------
    Section Header
----------------------------------------------------------*/

.ht-section-header{

  max-width:760px;

  margin:0 auto 70px;

  text-align:center;

}

.ht-section-header--left{

  margin-left:0;

  text-align:left;

}

.ht-section-header--right{

  margin-right:0;

  text-align:right;

}


/*----------------------------------------------------------
  Eyebrow / Label
----------------------------------------------------------*/

.ht-section-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:.6rem;

  margin-bottom:1rem;

  padding:8px 18px;

  border-radius:999px;

  background:rgba(15,76,129,.08);

  color:var(--primary);

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

}

.ht-section-eyebrow i{

  color:var(--secondary);

}


/*----------------------------------------------------------
  Title
----------------------------------------------------------*/

.ht-section-title{

  margin-bottom:1rem;

  color:var(--heading);

}


/*----------------------------------------------------------
  Description
----------------------------------------------------------*/

.ht-section-description{

  max-width:680px;

  margin-inline:auto;

  color:var(--text-light);

  font-size:1.05rem;

  line-height:1.8;

}

.ht-section-header--left .ht-section-description{

  margin-left:0;

}

.ht-section-header--right .ht-section-description{

  margin-right:0;

}


/*----------------------------------------------------------
  Divider
----------------------------------------------------------*/

.ht-section-divider{

  width:90px;

  height:4px;

  margin:2rem auto 0;

  border-radius:999px;

  background:linear-gradient(
      90deg,
      var(--primary),
      var(--secondary)
  );

}

.ht-section-header--left .ht-section-divider{

  margin-left:0;

}

.ht-section-header--right .ht-section-divider{

  margin-right:0;

}


/*----------------------------------------------------------
  Section Intro
----------------------------------------------------------*/

.ht-section-intro{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:2rem;

  margin-bottom:4rem;

}

.ht-section-intro__content{

  max-width:700px;

}

.ht-section-intro__action{

  flex-shrink:0;

}


/*----------------------------------------------------------
  Stats
----------------------------------------------------------*/

.ht-stats{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:2rem;

}

.ht-stat{

  text-align:center;

}

.ht-stat__number{

  display:block;

  margin-bottom:.5rem;

  font-family:var(--font-heading);

  font-size:clamp(2rem,4vw,3rem);

  font-weight:800;

  color:var(--heading);

  line-height:1;

}

.ht-stat__label{

  color:var(--text-light);

  font-size:.9rem;

}


/*----------------------------------------------------------
  CTA Box
----------------------------------------------------------*/

.ht-cta{

  position:relative;

  padding:60px;

  border-radius:var(--radius-xl);

  background:linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
  );

  color:#fff;

  overflow:hidden;

}

.ht-cta h2,

.ht-cta h3,

.ht-cta p{

  color:#fff;

}

.ht-cta__actions{

  display:flex;

  gap:1rem;

  margin-top:2rem;

  flex-wrap:wrap;

}


/*----------------------------------------------------------
  Empty State
----------------------------------------------------------*/

.ht-empty{

  padding:80px 30px;

  text-align:center;

}

.ht-empty__icon{

  margin-bottom:1.5rem;

}

.ht-empty__title{

  margin-bottom:.75rem;

}

.ht-empty__text{

  margin-bottom:2rem;

}


/*----------------------------------------------------------
  Responsive
----------------------------------------------------------*/

@media(max-width:992px){

  .ht-section-intro{

      flex-direction:column;

      align-items:flex-start;

  }

  .ht-stats{

      grid-template-columns:repeat(2,1fr);

  }

}

@media(max-width:768px){

  .ht-section-header{

      margin-bottom:50px;

  }

  .ht-section-description{

      font-size:1rem;

  }

  .ht-stats{

      grid-template-columns:1fr;

      gap:1.5rem;

  }

  .ht-cta{

      padding:40px 30px;

  }

}

/*==========================================================
    12. ANIMATION LIBRARY
==========================================================*/

/*----------------------------------------------------------
    Keyframes
----------------------------------------------------------*/

@keyframes htFadeIn{

  from{

      opacity:0;

  }

  to{

      opacity:1;

  }

}

@keyframes htFadeUp{

  from{

      opacity:0;

      transform:translateY(30px);

  }

  to{

      opacity:1;

      transform:translateY(0);

  }

}

@keyframes htFadeDown{

  from{

      opacity:0;

      transform:translateY(-30px);

  }

  to{

      opacity:1;

      transform:translateY(0);

  }

}

@keyframes htFadeLeft{

  from{

      opacity:0;

      transform:translateX(-40px);

  }

  to{

      opacity:1;

      transform:translateX(0);

  }

}

@keyframes htFadeRight{

  from{

      opacity:0;

      transform:translateX(40px);

  }

  to{

      opacity:1;

      transform:translateX(0);

  }

}

@keyframes htScale{

  from{

      opacity:0;

      transform:scale(.92);

  }

  to{

      opacity:1;

      transform:scale(1);

  }

}

@keyframes htFloat{

  0%,100%{

      transform:translateY(0);

  }

  50%{

      transform:translateY(-10px);

  }

}

@keyframes htPulse{

  0%,100%{

      transform:scale(1);

  }

  50%{

      transform:scale(1.04);

  }

}

@keyframes htRotate{

  from{

      transform:rotate(0deg);

  }

  to{

      transform:rotate(360deg);

  }

}

@keyframes htGlow{

  0%,100%{

      box-shadow:0 0 0 rgba(15,76,129,0);

  }

  50%{

      box-shadow:0 0 30px rgba(15,76,129,.18);

  }

}


/*----------------------------------------------------------
  Entrance Animations
----------------------------------------------------------*/

.fade-in{

  animation:htFadeIn .6s ease both;

}

.fade-up{

  animation:htFadeUp .7s ease both;

}

.fade-down{

  animation:htFadeDown .7s ease both;

}

.fade-left{

  animation:htFadeLeft .7s ease both;

}

.fade-right{

  animation:htFadeRight .7s ease both;

}

.scale-in{

  animation:htScale .5s ease both;

}


/*----------------------------------------------------------
  Continuous Animations
----------------------------------------------------------*/

.float{

  animation:htFloat 4s ease-in-out infinite;

}

.pulse{

  animation:htPulse 2.8s ease-in-out infinite;

}

.rotate{

  animation:htRotate 10s linear infinite;

}

.glow{

  animation:htGlow 3.5s ease infinite;

}


/*----------------------------------------------------------
  Hover Effects
----------------------------------------------------------*/

.hover-lift{

  transition:transform .3s ease;

}

.hover-lift:hover{

  transform:translateY(-6px);

}

.hover-scale{

  transition:transform .3s ease;

}

.hover-scale:hover{

  transform:scale(1.03);

}

.hover-rotate{

  transition:transform .3s ease;

}

.hover-rotate:hover{

  transform:rotate(3deg);

}

.hover-shadow{

  transition:box-shadow .3s ease;

}

.hover-shadow:hover{

  box-shadow:var(--shadow-lg);

}


/*----------------------------------------------------------
  Animation Delays
----------------------------------------------------------*/

.delay-1{

  animation-delay:.1s;

}

.delay-2{

  animation-delay:.2s;

}

.delay-3{

  animation-delay:.3s;

}

.delay-4{

  animation-delay:.4s;

}

.delay-5{

  animation-delay:.5s;

}

.delay-6{

  animation-delay:.6s;

}


/*----------------------------------------------------------
  Animation Duration
----------------------------------------------------------*/

.duration-fast{

  animation-duration:.4s;

}

.duration-normal{

  animation-duration:.7s;

}

.duration-slow{

  animation-duration:1.2s;

}


/*----------------------------------------------------------
  Transition Helpers
----------------------------------------------------------*/

.transition{

  transition:all .3s ease;

}

.transition-fast{

  transition:all .15s ease;

}

.transition-slow{

  transition:all .5s ease;

}


/*----------------------------------------------------------
  Reduced Motion
----------------------------------------------------------*/

@media (prefers-reduced-motion:reduce){

  .fade-in,
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .scale-in,
  .float,
  .pulse,
  .rotate,
  .glow{

      animation:none !important;

  }

  .hover-lift,
  .hover-scale,
  .hover-shadow,
  .hover-rotate{

      transition:none !important;

  }

}

/*==========================================================
    13. UTILITY CLASSES
==========================================================*/

/*----------------------------------------------------------
    Display
----------------------------------------------------------*/

.d-block{
  display:block;
}

.d-inline{
  display:inline;
}

.d-inline-block{
  display:inline-block;
}

.d-flex{
  display:flex;
}

.d-inline-flex{
  display:inline-flex;
}

.d-grid{
  display:grid;
}

.d-none{
  display:none;
}


/*----------------------------------------------------------
  Flex Alignment
----------------------------------------------------------*/

.align-start{
  align-items:flex-start;
}

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

.align-end{
  align-items:flex-end;
}

.justify-start{
  justify-content:flex-start;
}

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

.justify-end{
  justify-content:flex-end;
}

.justify-between{
  justify-content:space-between;
}

.justify-around{
  justify-content:space-around;
}

.justify-evenly{
  justify-content:space-evenly;
}

.flex-column{
  flex-direction:column;
}

.flex-wrap{
  flex-wrap:wrap;
}

.flex-1{
  flex:1;
}


/*----------------------------------------------------------
  Gap Utilities
----------------------------------------------------------*/

.gap-0{
  gap:0;
}

.gap-xs{
  gap:var(--space-xs);
}

.gap-sm{
  gap:var(--space-sm);
}

.gap-md{
  gap:var(--space-md);
}

.gap-lg{
  gap:var(--space-lg);
}

.gap-xl{
  gap:var(--space-xl);
}


/*----------------------------------------------------------
  Width
----------------------------------------------------------*/

.w-100{
  width:100%;
}

.w-auto{
  width:auto;
}

.h-100{
  height:100%;
}

.h-auto{
  height:auto;
}


/*----------------------------------------------------------
  Text Alignment
----------------------------------------------------------*/

.text-start{
  text-align:left;
}

.text-center{
  text-align:center;
}

.text-end{
  text-align:right;
}


/*----------------------------------------------------------
  Text Colors
----------------------------------------------------------*/

.text-primary{
  color:var(--primary)!important;
}

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

.text-heading{
  color:var(--heading)!important;
}

.text-body{
  color:var(--text)!important;
}

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

.text-muted{
  color:var(--text-muted)!important;
}

.text-white{
  color:#fff!important;
}

.text-success{
  color:var(--success)!important;
}

.text-danger{
  color:var(--danger)!important;
}


/*----------------------------------------------------------
  Background Utilities
----------------------------------------------------------*/

.bg-primary{
  background:var(--primary)!important;
}

.bg-secondary{
  background:var(--secondary)!important;
}

.bg-white{
  background:#fff!important;
}

.bg-light{
  background:var(--surface-soft)!important;
}

.bg-blue{
  background:var(--surface-blue)!important;
}

.bg-gold{
  background:var(--surface-gold)!important;
}


/*----------------------------------------------------------
  Border Radius
----------------------------------------------------------*/

.radius-sm{
  border-radius:var(--radius-sm);
}

.radius{
  border-radius:var(--radius);
}

.radius-lg{
  border-radius:var(--radius-lg);
}

.radius-xl{
  border-radius:var(--radius-xl);
}

.radius-pill{
  border-radius:999px;
}


/*----------------------------------------------------------
  Shadows
----------------------------------------------------------*/

.shadow-xs{
  box-shadow:var(--shadow-xs);
}

.shadow-sm{
  box-shadow:var(--shadow-sm);
}

.shadow-md{
  box-shadow:var(--shadow-md);
}

.shadow-lg{
  box-shadow:var(--shadow-lg);
}

.shadow-none{
  box-shadow:none!important;
}


/*----------------------------------------------------------
  Overflow
----------------------------------------------------------*/

.overflow-hidden{
  overflow:hidden;
}

.overflow-auto{
  overflow:auto;
}

.overflow-visible{
  overflow:visible;
}


/*----------------------------------------------------------
  Position
----------------------------------------------------------*/

.position-relative{
  position:relative;
}

.position-absolute{
  position:absolute;
}

.position-fixed{
  position:fixed;
}


/*----------------------------------------------------------
  Cursor
----------------------------------------------------------*/

.cursor-pointer{
  cursor:pointer;
}

.cursor-default{
  cursor:default;
}


/*----------------------------------------------------------
  User Select
----------------------------------------------------------*/

.select-none{
  user-select:none;
}

.select-all{
  user-select:all;
}


/*----------------------------------------------------------
  Visibility
----------------------------------------------------------*/

.visible{
  visibility:visible;
}

.invisible{
  visibility:hidden;
}


/*----------------------------------------------------------
  Opacity
----------------------------------------------------------*/

.opacity-0{
  opacity:0;
}

.opacity-25{
  opacity:.25;
}

.opacity-50{
  opacity:.5;
}

.opacity-75{
  opacity:.75;
}

.opacity-100{
  opacity:1;
}


/*----------------------------------------------------------
  Z-index
----------------------------------------------------------*/

.z-0{
  z-index:0;
}

.z-1{
  z-index:1;
}

.z-10{
  z-index:10;
}

.z-50{
  z-index:50;
}

.z-100{
  z-index:100;
}

/*==========================================================
    14. RESPONSIVE HELPERS
==========================================================*/

/*----------------------------------------------------------
    Large Devices (≤1199px)
----------------------------------------------------------*/

@media (max-width:1199.98px){

  .container{
      max-width:1140px;
  }

  .section{
      padding:80px 0;
  }

  .section-lg{
      padding:100px 0;
  }

  .grid-lg-1{
      grid-template-columns:1fr !important;
  }

  .grid-lg-2{
      grid-template-columns:repeat(2,1fr) !important;
  }

  .hide-lg{
      display:none !important;
  }

}


/*----------------------------------------------------------
  Medium Devices (≤991px)
----------------------------------------------------------*/

@media (max-width:991.98px){

  html{
      scroll-padding-top:80px;
  }

  .container{
      max-width:960px;
  }

  .section{
      padding:70px 0;
  }

  .section-lg{
      padding:90px 0;
  }

  .grid-2,
  .grid-3,
  .grid-4{
      grid-template-columns:1fr;
  }

  .grid-md-1{
      grid-template-columns:1fr !important;
  }

  .grid-md-2{
      grid-template-columns:repeat(2,1fr)!important;
  }

  .text-md-center{
      text-align:center!important;
  }

  .justify-md-center{
      justify-content:center!important;
  }

  .align-md-center{
      align-items:center!important;
  }

  .flex-md-column{
      flex-direction:column!important;
  }

  .hide-md{
      display:none!important;
  }

  .show-md{
      display:block!important;
  }

}


/*----------------------------------------------------------
  Small Tablets (≤767px)
----------------------------------------------------------*/

@media (max-width:767.98px){

  body{
      font-size:.95rem;
  }

  .container{
      padding-left:20px;
      padding-right:20px;
  }

  .section{
      padding:60px 0;
  }

  .section-lg{
      padding:70px 0;
  }

  .grid-sm-1{
      grid-template-columns:1fr!important;
  }

  .text-sm-center{
      text-align:center!important;
  }

  .justify-sm-center{
      justify-content:center!important;
  }

  .align-sm-center{
      align-items:center!important;
  }

  .flex-sm-column{
      flex-direction:column!important;
  }

  .w-sm-100{
      width:100%!important;
  }

  .hide-sm{
      display:none!important;
  }

  .show-sm{
      display:block!important;
  }

  .ht-btn{

      width:100%;

      justify-content:center;

  }

}


/*----------------------------------------------------------
  Mobile Devices (≤575px)
----------------------------------------------------------*/

@media (max-width:575.98px){

  .container{

      padding-left:16px;

      padding-right:16px;

  }

  .section{

      padding:50px 0;

  }

  .section-lg{

      padding:60px 0;

  }

  h1{

      font-size:clamp(2rem,8vw,2.5rem);

  }

  h2{

      font-size:clamp(1.7rem,6vw,2.1rem);

  }

  h3{

      font-size:1.35rem;

  }

  .lead{

      font-size:1rem;

  }

  .grid-xs-1{

      grid-template-columns:1fr!important;

  }

  .text-xs-center{

      text-align:center!important;

  }

  .justify-xs-center{

      justify-content:center!important;

  }

  .align-xs-center{

      align-items:center!important;

  }

  .flex-xs-column{

      flex-direction:column!important;

  }

  .w-xs-100{

      width:100%!important;

  }

  .hide-xs{

      display:none!important;

  }

  .show-xs{

      display:block!important;

  }

}


/*----------------------------------------------------------
  Desktop Visibility Helpers
----------------------------------------------------------*/

.show-desktop{

  display:block;

}

.show-mobile{

  display:none;

}

@media(max-width:991.98px){

  .show-desktop{

      display:none;

  }

  .show-mobile{

      display:block;

  }

}


/*----------------------------------------------------------
  Touch Devices
----------------------------------------------------------*/

@media (hover:none){

  .hover-lift:hover{

      transform:none;

  }

}


/*----------------------------------------------------------
  Landscape Phones
----------------------------------------------------------*/

@media (max-height:500px) and (orientation:landscape){

  .section{

      padding:40px 0;

  }

}

/*==========================================================
    15. ACCESSIBILITY, PRINT & FINAL HELPERS
==========================================================*/

/*----------------------------------------------------------
    Focus States
----------------------------------------------------------*/

:focus-visible{

  outline:3px solid rgba(15,76,129,.25);

  outline-offset:3px;

  border-radius:6px;

}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

  box-shadow:0 0 0 4px rgba(15,76,129,.15);

}


/*----------------------------------------------------------
  Better Text Selection
----------------------------------------------------------*/

::selection{

  background:var(--primary);

  color:#fff;

}

::-moz-selection{

  background:var(--primary);

  color:#fff;

}


/*----------------------------------------------------------
  Smooth Images
----------------------------------------------------------*/

img{

  image-rendering:auto;

  user-select:none;

  -webkit-user-drag:none;

}

svg{

  flex-shrink:0;

}


/*----------------------------------------------------------
  Scrollbar Styling
----------------------------------------------------------*/

*{

  scrollbar-width:thin;

  scrollbar-color:rgba(15,76,129,.35) transparent;

}

::-webkit-scrollbar{

  width:8px;

  height:8px;

}

::-webkit-scrollbar-track{

  background:transparent;

}

::-webkit-scrollbar-thumb{

  background:rgba(15,76,129,.25);

  border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

  background:var(--primary);

}


/*----------------------------------------------------------
  Disabled Elements
----------------------------------------------------------*/

:disabled{

  cursor:not-allowed;

  opacity:.65;

}


/*----------------------------------------------------------
  Loading State Helper
----------------------------------------------------------*/

.is-loading{

  pointer-events:none;

  opacity:.65;

  filter:grayscale(.15);

}


/*----------------------------------------------------------
  Screen Reader Only
----------------------------------------------------------*/

.visually-hidden{

  position:absolute !important;

  width:1px;

  height:1px;

  padding:0;

  margin:-1px;

  overflow:hidden;

  clip:rect(0,0,0,0);

  white-space:nowrap;

  border:0;

}


/*----------------------------------------------------------
  Text Utilities
----------------------------------------------------------*/

.text-truncate{

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

}

.text-balance{

  text-wrap:balance;

}


/*----------------------------------------------------------
  Border Utilities
----------------------------------------------------------*/

.border{

  border:1px solid var(--border);

}

.border-top{

  border-top:1px solid var(--border);

}

.border-bottom{

  border-bottom:1px solid var(--border);

}

.rounded{

  border-radius:var(--radius);

}

.rounded-lg{

  border-radius:var(--radius-lg);

}

.rounded-pill{

  border-radius:999px;

}


/*----------------------------------------------------------
  Background Utilities
----------------------------------------------------------*/

.bg-primary{

  background:var(--primary);

  color:#fff;

}

.bg-secondary{

  background:var(--secondary);

  color:#fff;

}

.bg-white{

  background:#fff;

}

.bg-soft{

  background:var(--surface-soft);

}

.bg-blue{

  background:var(--surface-blue);

}

.bg-gold{

  background:var(--surface-gold);

}


/*----------------------------------------------------------
  Cursor Utilities
----------------------------------------------------------*/

.cursor-pointer{

  cursor:pointer;

}

.cursor-default{

  cursor:default;

}


/*----------------------------------------------------------
  Object Fit Helpers
----------------------------------------------------------*/

.object-cover{

  object-fit:cover;

}

.object-contain{

  object-fit:contain;

}


/*----------------------------------------------------------
  Reduced Motion Support
----------------------------------------------------------*/

@media (prefers-reduced-motion:reduce){

  html{

      scroll-behavior:auto;

  }

  *,

  *::before,

  *::after{

      animation-duration:.01ms !important;

      animation-iteration-count:1 !important;

      transition-duration:.01ms !important;

      scroll-behavior:auto !important;

  }

}


/*----------------------------------------------------------
  Print Styles
----------------------------------------------------------*/

@media print{

  *{

      background:transparent !important;

      box-shadow:none !important;

      text-shadow:none !important;

  }

  body{

      color:#000;

      background:#fff;

  }

  a{

      text-decoration:underline;

  }

  .no-print{

      display:none !important;

  }

}

/* ==========================================================
   HI-TECH PATHSHALA FOOTER
   ========================================================== */

   .ht-footer {
    background-color: #020B21; /* Very dark navy blue */
    color: #94A3B8;
    font-family: inherit;
  }
  
  /* Main Section */
  .ht-footer__main {
    padding: 70px 0 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .ht-footer__grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 40px;
  }
  
  /* --- Brand Column --- */
  .ht-footer__col--brand {
    padding-right: 30px;
    position: relative;
  }
  
  .ht-footer__col--brand::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255, 255, 255, 0.06);
  }
  
  .ht-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 24px;
  }
  
  .ht-footer__logo-icon {
    width: 44px;
    height: 40px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  }
  
  .ht-footer__logo-text {
    font-size: 1.45rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.3px;
  }
  
  .ht-footer__logo-text span {
    color: #F59E0B;
  }
  
  .ht-footer__about {
    color: #94A3B8;
    font-size: 0.935rem;
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 360px;
  }
  
  /* Social Buttons */
  .ht-footer__socials {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .ht-footer__social-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .ht-footer__social-btn:hover {
    background: #2563EB;
    color: #FFFFFF;
    border-color: #2563EB;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  }
  
  /* --- Navigation Links Columns --- */
  .ht-footer__heading {
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
  }
  
  .ht-footer__heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 28px;
    height: 3px;
    background: #F59E0B;
    border-radius: 2px;
  }
  
  .ht-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  
  .ht-footer__links li {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  }
  
  .ht-footer__links li:last-child {
    border-bottom: none;
  }
  
  .ht-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    color: #94A3B8;
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25 ease;
  }
  
  .ht-footer__links a i {
    color: #F59E0B;
    font-size: 0.65rem;
    transition: transform 0.25s ease;
  }
  
  .ht-footer__links a:hover {
    color: #FFFFFF;
  }
  
  .ht-footer__links a:hover i {
    transform: translateX(4px);
  }
  
  /* --- Bottom Legal Bar --- */
  .ht-footer__bottom {
    padding: 24px 0;
    background-color: #01081A;
  }
  
  .ht-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .ht-footer__copyright {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94A3B8;
    font-size: 0.9rem;
  }
  
  .ht-footer__shield-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #F59E0B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
  }
  
  .ht-footer__legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .ht-footer__legal-links a {
    color: #94A3B8;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .ht-footer__legal-links a:hover {
    color: #FFFFFF;
  }
  
  .ht-footer__legal-links .divider {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
  }
  
  /* ==========================================================
     RESPONSIVE DESIGN
     ========================================================== */
  
  @media (max-width: 1024px) {
    .ht-footer__grid {
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 24px;
    }
  }
  
  @media (max-width: 868px) {
    .ht-footer__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
    }
  
    .ht-footer__col--brand {
      grid-column: span 2;
      padding-right: 0;
    }
  
    .ht-footer__col--brand::after {
      display: none;
    }
  
    .ht-footer__about {
      max-width: 100%;
    }
  }
  
  @media (max-width: 576px) {
    .ht-footer__grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    .ht-footer__col--brand {
      grid-column: span 1;
    }
  
    .ht-footer__bottom-inner {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
    }
  
    .ht-footer__legal-links {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* ==========================================================
   GLOBAL FLOATING WIDGETS
   ========================================================== */

/* Stack Container Anchor (Fixed at Bottom-Right) */
.ai-widget,
.whatsapp-float,
.back-to-top {
  position: fixed;
  right: 24px;
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px -5px rgba(11, 53, 90, 0.3);
}

/* ----------------------------------------------------------
   1. AI ASSISTANT WIDGET
   ---------------------------------------------------------- */
.ai-widget {
  bottom: 156px;
  background: linear-gradient(135deg, #0F4C81 0%, #0B355A 100%);
  color: #F5E5BF;
  border: 1px solid rgba(198, 146, 47, 0.4);
}

.ai-widget i {
  font-size: 1.35rem;
  transition: transform 0.3s ease;
}

.ai-widget:hover {
  background: linear-gradient(135deg, #2F79B7 0%, #0F4C81 100%);
  color: #FFFFFF;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 28px rgba(15, 76, 129, 0.4);
}

.ai-widget:hover i {
  transform: rotate(12deg);
}

/* Glowing Pulsing Ring for AI Widget */
.ai-widget::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #C6922F;
  opacity: 0.6;
  animation: ht-pulse 2s infinite ease-in-out;
}

/* ----------------------------------------------------------
   2. WHATSAPP FLOATING WIDGET
   ---------------------------------------------------------- */
.whatsapp-float {
  bottom: 92px;
  background-color: #25D366;
  color: #FFFFFF;
}

.whatsapp-float i {
  font-size: 1.65rem;
}

.whatsapp-float:hover {
  background-color: #20BA5A;
  color: #FFFFFF;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.4);
}

/* ----------------------------------------------------------
   3. BACK TO TOP BUTTON
   ---------------------------------------------------------- */
.back-to-top {
  bottom: 28px;
  background-color: #FFFFFF;
  color: #0B355A;
  border: 1px solid #E4ECF3;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
}

.back-to-top i {
  font-size: 1.1rem;
  transition: transform 0.25s ease;
}

/* Active Class added via JS when scrolling down */
.back-to-top.show,
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #0F4C81;
  color: #FFFFFF;
  border-color: #0F4C81;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(11, 53, 90, 0.25);
}

.back-to-top:hover i {
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
   KEYFRAME ANIMATIONS & ACCESSIBILITY
   ---------------------------------------------------------- */
@keyframes ht-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.12);
    opacity: 0;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* Focus States for Keyboard Accessibility */
.ai-widget:focus-visible,
.whatsapp-float:focus-visible,
.back-to-top:focus-visible {
  outline: 3px solid #C6922F;
  outline-offset: 3px;
}

/* Mobile Responsiveness */
@media (max-width: 767.98px) {
  .ai-widget,
  .whatsapp-float,
  .back-to-top {
    right: 16px;
    width: 46px;
    height: 46px;
  }

  .ai-widget { bottom: 136px; }
  .whatsapp-float { bottom: 80px; }
  .back-to-top { bottom: 24px; }

  .ai-widget i { font-size: 1.15rem; }
  .whatsapp-float i { font-size: 1.45rem; }
  .back-to-top i { font-size: 1rem; }
}