/* =====================================================
   BAOIAM - GLOBAL CSS
   Tech Stack : HTML + Tailwind CSS + Vanilla CSS
   Author : Production Ready
===================================================== */

/* ==========================
   GOOGLE FONTS
========================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Kalam:wght@400;700&family=Instrument+Sans:ital,wght@1,700&display=swap");
@import "./enquiry.css";

/* ==========================
   RESET
========================== */

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

/* ==========================
   ROOT VARIABLES
========================== */

/* -----------------------------------------------------
   Tokens below are lifted straight from the Figma file
   "Internship Hifi" (node 2296:1178) so the site and the
   prototype stay on one palette / type scale / motion feel.
----------------------------------------------------- */

:root{

    /* Brand */

    --primary:#FF6600;
    --primary-hover:#E65C00;

    /* Brand alpha ramp (Figma uses these exact stops) */

    --primary-10:rgba(255,102,0,.10);
    --primary-20:rgba(255,102,0,.20);
    --primary-25:rgba(255,102,0,.25);
    --primary-35:rgba(255,102,0,.35);
    --primary-50:rgba(255,102,0,.50);
    --primary-65:rgba(255,102,0,.65);
    --primary-75:rgba(255,102,0,.75);

    /* Colors */

    --white:#FFFFFF;
    --black:#111111;

    --text:#1A1A1A;
    --text-light:#4A4A4A;
    --text-muted:#5C5C5C;

    /* ---------------------------------------------------------------
       FLUID TYPE + SPACING SCALE

       One ladder for every section. Sizes are fluid (clamp) so a 1440px
       desktop, a 1280px laptop and a tablet all stay in proportion —
       previously each section hard-coded its own px size (section titles
       ranged 28px to 72px), which is why the page only looked balanced
       at ~90% browser zoom.

       Tuned for a 1366px laptop (the common case), where they resolve to:
         hero 39px / section 33px / sub 22px / lead 16px / pad 59px
       and at 1440px and wider:
         hero 40px / section 35px / sub 22px / lead 16px / pad 62px

       To nudge the whole site up or down later, scale ALL THREE numbers in
       each clamp together. Changing only the last one moves nothing below
       roughly 1420px, because that is where each clamp stops growing and
       the middle vw term is what is actually in effect on a 1366px laptop.

       This ladder covers section titles, heroes, sub-headings and lead
       paragraphs site-wide, but it is not the only source of type size:
       a number of page-specific files (internship.css, pay-after-placement.css,
       course.css, Ourinsight.css and others) still hard-code their own
       font-size in px and will not follow changes made here.
    --------------------------------------------------------------- */

    /* One value per role. A page that needs a size not on this ladder is
       almost always mis-labelling its own element -- a card title sized like
       a hero, a paragraph sized like a sub-heading -- so reach for the
       matching role here before adding a px value in a page file. */

    --fs-hero:clamp(30px,3.2vw,44px);      /* A  hero h1 -- must exceed --fs-section */
    --fs-section:clamp(22px,2.24vw,32px);  /* B  every section title */
    --fs-sub:clamp(17px,1.6vw,22px);       /* sub-headings inside a section */
    --fs-card:clamp(17px,1.45vw,20px);     /* C1 card / panel title -- never above B */
    --fs-card-sm:16px;                     /* C2 dense or compact card title */
    --fs-lead:clamp(15px,1.15vw,17px);     /* D  intro paragraph under a title */
    --fs-body:clamp(15px,1.15vw,16px);     /* E  running copy */
    --fs-meta:13px;                        /* F  label, eyebrow, date, tag -- 600 max */
    --fs-caption:12px;                     /* G  footnote, disclaimer */

    /* Two tiers of section rhythm, and three gaps inside one.

       These are per-section vertical PADDING, not the gap between two
       sections -- adjacent sections stack their padding, so the visible band
       between them is roughly twice the token.

       --space-section is the major-section value: 40px on a phone, ~46 on a
       tablet, ~55 at 1440 and 64 above 1684. The old 5.6vw slope held the
       56px floor all the way to 1000px, which handed tablets phone spacing;
       the vw term starts moving at around 1050 instead.

       These came down on 2026-09-05. At 6.6vw/104px the stacked band between
       two sections reached ~180px on a laptop and 208px above 1575, which
       read as the page having ended rather than as a new section starting --
       raised twice in one day, on the course pages and again on Udaan 90.
       3.8vw/64px puts the visible band at roughly 100 to 128px, which is the
       range a modern marketing site actually sits in. All three numbers in
       the clamp moved together, which is what keeps the slope sane; changing
       only the cap moves nothing below ~1575.

       --space-section-sm has to stay under --space-section. It was 48/5vw/72,
       which after this change would have been LARGER than the major value and
       would have inverted the two tiers.

       --space-block was a flat 40px, so a header sat the same distance from
       its grid on a phone as on a 27" display. It is the one gap most of the
       site re-invented by hand -- 40, 44, 45, 48, 50, 54, 56, 60, 62, 64 and
       72px were all in use for "header block -> grid" before this. It is
       deliberately unchanged: the complaint was the gap BETWEEN sections, and
       pulling a heading down onto its own grid is a different, worse problem. */

    --space-section:clamp(40px,3.8vw,64px);   /* vertical padding per section */
    --space-section-sm:clamp(32px,3vw,48px);  /* sections that genuinely sit tighter */
    --space-block:clamp(32px,3.2vw,48px);     /* header block -> grid */
    --space-gap:clamp(20px,1.7vw,24px);       /* card to card, row to row */
    --space-tight:16px;                       /* title -> its own lead, icon -> label */

    /* Figma ink ramp */

    --ink:#000000;
    --ink-900:#171717;
    --ink-800:#232121;
    --ink-700:rgba(35,33,33,.95);
    --ink-600:#3D3C3C;
    --ink-500:#4A4A4A;
    --ink-400:#565454;
    --ink-soft:rgba(0,0,0,.78);

    --border:#E5E5E5;
    --border-soft:#E8E8E8;
    --border-grey:#D9D9D9;

    --section-bg:#FAFAFA;

    /* Peach / cream surfaces */

    --cream-50:#FFF7F2;
    --cream-100:#FFF0E6;
    --cream-200:#FFE8D9;
    --cream-300:#FFE2CF;
    --cream-400:#FFDDC7;
    --cream-500:#FFD8BF;
    --sand:#FBF0E8;
    --paper:#F7F7F7;

    /* Footer */

    --footer-bg:rgba(13,18,28,.93);
    --footer-tile:#1F2937;
    --footer-tile-alt:#2A3648;
    --footer-rule:#374151;
    --footer-muted:#A0AEC0;

    /* Gradients */

    --grad-nav:linear-gradient(63deg,rgba(255,255,255,.75) 0%,#F1E0D6 100%);
    --grad-strip:linear-gradient(143deg,#FFDDC7 0%,#FFFFFF 100%);
    --grad-card:linear-gradient(135deg,#FFFFFF 36%,#FFF7F2 58%,#FFF0E6 80%,#FFE8D9 100%);
    --grad-media:linear-gradient(224deg,#FFFFFF 0%,#FFD2B4 55%,#FFB888 97%);
    --grad-cta:linear-gradient(133deg,rgba(255,102,0,.96) 1%,rgba(252,146,51,.96) 49%,rgba(254,167,72,.96) 97%);
    --grad-cta-panel:linear-gradient(180deg,#FFFFFF 0%,#FFD5B9 100%);
    --wash-top:radial-gradient(circle at 5% -29%,#FFE2CF 0%,#FFFFFF 100%);
    --wash-corner:radial-gradient(circle at 96% 72%,rgba(255,102,0,.2) 0%,rgba(255,255,255,.2) 100%);

    /* Shadow */

    --shadow-sm:0 2px 8px rgba(0,0,0,.08);

    --shadow-md:0 8px 24px rgba(0,0,0,.12);

    --shadow-lg:0 15px 40px rgba(0,0,0,.16);

    /* Figma shadows */

    --shadow-card:0 8px 10px rgba(0,0,0,.15);
    --shadow-soft:0 8px 30px rgba(0,0,0,.06);
    --shadow-nav:0 50px 73px rgba(0,0,0,.06);
    --shadow-avatar:3px 3px 4px rgba(0,0,0,.25);
    --glow:4px 4px 16px 4px var(--primary-25);
    --glow-lg:4px 4px 18px 0 var(--primary-25);

    /* Radius */

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:20px;

    --radius-xl:30px;

    /* Figma radii */

    --r-15:15px;
    --r-20:20px;
    --r-22:22px;
    --r-25:25px;
    --r-32:32px;
    --r-40:40px;
    --r-50:50px;

    /* Type */

    --font-sans:"Inter",sans-serif;
    --font-display:"Poppins",sans-serif;
    --font-hand:"Kalam",cursive;
    --font-quote:"Instrument Sans",sans-serif;

    /* Transition */

    --transition:.3s ease;

    /* Motion — matches the prototype's smart-animate feel */

    --ease-out:cubic-bezier(.22,.61,.36,1);
    --ease-soft:cubic-bezier(.4,0,.2,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);

    --dur-fast:180ms;
    --dur-base:320ms;
    --dur-slow:620ms;
    --dur-reveal:760ms;

    /* Layout */

    --container-width:1400px;

    --container-padding:20px;

}

/* Used by the sections that were built with Tailwind utilities, so they sit
   on the same ladder as the hand-written ones instead of text-5xl / py-20. */

.bao-section-title{
    font-size:var(--fs-section);
    line-height:1.15;
    font-weight:800;
    color:var(--ink);
    text-align:center;
    display:block;
    width:100%;
}

.bao-section-lead{
    font-size:var(--fs-lead);
    max-width:min(70ch,100%);
    margin-inline:auto;
    font-weight:400;
    line-height:1.65;
    text-wrap:pretty;
    color:var(--ink-500);
    text-align:center;
    display:block;
}

/* ---------------------------------------------------------------
   COMMON SECTION & LAYOUT UTILITIES
--------------------------------------------------------------- */
.text-center{ text-align:center !important; }
.text-left{ text-align:left !important; }
.text-right{ text-align:right !important; }
.mx-auto{ margin-left:auto !important; margin-right:auto !important; }
.max-w-7xl{ max-width:1280px; width:100%; margin-inline:auto; }
.max-w-3xl{ max-width:768px; width:100%; margin-inline:auto; }
.w-\[90\%\]{ width:90%; }
.w-full{ width:100%; }
.h-auto{ height:auto; }
.block{ display:block; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.overflow-hidden{ overflow:hidden; }
.rounded-3xl{ border-radius:24px; }
.shadow-xl{ box-shadow:0 20px 40px rgba(0,0,0,0.1); }
.hover\:shadow-2xl:hover{ box-shadow:0 25px 50px rgba(0,0,0,0.15); }
.duration-500{ transition-duration:500ms; }
.px-5{ padding-left:20px; padding-right:20px; }
.mt-5{ margin-top:20px; }
.mt-6{ margin-top:24px; }
.mt-14{ margin-top:56px; }
.mt-16{ margin-top:64px; }
.bg-white{ background-color:#ffffff; }
.bg-gray-50{ background-color:#f9fafb; }

/* ---------------------------------------------------------------
   SECTION TITLE ACCENT

   One rule for the whole site: the closing word of every section
   title is orange, and the 3-stroke spark sits just past it.

   Before this, each page invented its own orange class
   (.cr-orange, .ab-orange, .int-orange, .rs-orange, .ud-orange,
   .course_brand, Tailwind's .text-orange-500 …) and highlighted
   anywhere from zero to four words, so no two sections agreed.
--------------------------------------------------------------- */

.bao-last{
    color:var(--primary);
}

/* The spark is a sibling of the last word, so the heading itself is
   the positioning context. inline-block keeps it on the same line as
   the word it trails. */

.bao-spark{
    position:relative;
    display:inline-block;
    /* Sized in em so every burst stays the same proportion of whatever
       heading it trails, from the 44px hero down to a 21px card title. */
    width:.74em;
    height:.74em;
    /* Tucked in tight against the final letter — the burst should look like
       it is coming off the word, not floating away from it. The SVG's own
       artwork already sits inset from the left of its box, which supplies
       the small visual gap. */
    margin-left:-.16em;
    /* Lifts it to sit above the cap height rather than on the baseline. */
    vertical-align:.3em;
    flex:none;
}

.bao-spark svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.bao-spark path{
    stroke:var(--primary);
    stroke-width:1.8;
    stroke-linecap:round;
}

.bao-section-pad{
    padding-top:var(--space-section);
    padding-bottom:var(--space-section);
}

/* ==========================
   HTML
========================== */

html{

    scroll-behavior:smooth;
    scroll-padding-top:86px;

    

    /* Reserves the vertical scrollbar's width on every page, scrollbar or
       not — otherwise pages long enough to scroll are ~15-17px narrower
       than short ones, and the (full-width) navbar visibly jumps sideways
       when you navigate from one to the other. */
    overflow-y:scroll;

    /* The default bar is ~17px of grey chrome sitting against a full-width
       navbar. Firefox/modern engines take these two; WebKit is handled
       below. */
    scrollbar-width:thin;
    scrollbar-color:rgba(255,102,0,.38) transparent;

}

/* ==========================
   SCROLLBAR (WebKit)

   Narrow and unobtrusive, in the brand orange rather than system grey, so
   it reads as part of the page instead of browser chrome beside it.
========================== */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

::-webkit-scrollbar-thumb{
    border-radius:8px;
    background:rgba(255,102,0,.34);
    /* Inset from the track so the thumb reads as a floating pill rather than
       a bar filling the gutter edge to edge. */
    border:2px solid transparent;
    background-clip:padding-box;
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(255,102,0,.55);
    background-clip:padding-box;
}

/* ==========================
   BODY
========================== */

body{

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

    /* Stated once here so a page file never has to re-declare its own
       default and drift from it. */
    font-weight:400;

    color:var(--text);

    background:var(--white);

    /* Scroll-reveal elements start life offset sideways (data-reveal="right"
       sits at translateX(38px)) so before they animate in they widen the
       document and produce a horizontal scrollbar.

       `clip` rather than `hidden` on purpose: hidden would turn <body> into a
       scroll container and break the position:sticky card stack on the
       internship page. `clip` trims the overflow without doing that. */

    overflow-x:clip;

    

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* ==========================
   SELECTION
========================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ==========================
   CONTAINER
========================== */

.container{

    width:100%;

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:var(--container-padding);

}

/* ==========================
   COMMON UTILITIES
========================== */

.text-primary{

    color:var(--primary);

}

.bg-primary{

    background:var(--primary);

}

.hidden{

    display:none !important;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================
   MEDIA
========================== */

@media (max-width:1200px){

.container{

    max-width:1140px;

}

}

@media (max-width:992px){

.container{

    max-width:960px;

}

}

@media (max-width:768px){

:root{

    --container-padding:16px;

}

.container{

    max-width:100%;

}

}

@media (max-width:576px){

.container{

    padding-inline:14px;

}

}

/* ==========================
   HERO LIGHT
==========================

   A soft brand-tinted light that follows the pointer across a hero. The
   section carries [data-hero-light] and holds one .hero-light; js/hero-light.js
   writes the pointer's position into --light-x / --light-y and the transition
   below is what gives it the trailing ease rather than snapping to the
   cursor.

   Positioned by transform rather than left/top so it moves on the compositor,
   and the -50% is off the light's own box, which centres it on the pointer.

   It sits at z-index 0, on the hero's own background layer, so a hero's
   content (z-index 1) always stays above it. */

.hero-light{
    position:absolute;
    left:0;
    top:0;
    z-index:0;
    width:clamp(220px,26vw,420px);
    aspect-ratio:1;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    /* Warm white rather than brand orange: these heroes are already a peach
       wash, and an orange light on a peach ground is invisible. White with
       the warmth left in reads as light falling on the section. */
    background:radial-gradient(circle,
        rgba(255,252,248,.80) 0%,
        rgba(255,236,222,.34) 38%,
        rgba(255,236,222,0) 70%);
    transform:translate3d(calc(var(--light-x,50%) - 50%),calc(var(--light-y,50%) - 50%),0);
    transition:
        transform 200ms cubic-bezier(.22,.61,.36,1),
        opacity 320ms ease-out;
}

/* Only while the pointer is actually over the hero. */

[data-hero-light].is-lit .hero-light{
    opacity:1;
}

/* Nothing to follow on a touch screen, and it is movement the reader may
   have asked not to see. js/hero-light.js does not bind in either case;
   this keeps the light out of the paint even if it somehow does. */

@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){

    .hero-light{
        display:none;
    }

}