/* =====================================================

   TATTVA INFOTECH — Main Stylesheet

   Color Palette:

     White:       #FFFFFF / #F8F7F4

     Dark:        #1A1917 / #2C2C2A

     Gold/Amber:  #C9922A / #B8830F / #E5A83A

     Light Gray:  #F2F0EB

   ===================================================== */



/* ── CSS Reset & Custom Properties ── */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

#loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

#loader img {
  width: 150px;
  max-width: 60%;
  animation: logoPulse 2.5s infinite ease-in-out;
}

.loading-line {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #fcb634, #724e00);
  border-radius: 10px;
  animation: linePulse 2.5s infinite alternate;
}

#loader.hide {
  opacity: 0;
  pointer-events: none;
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes linePulse {
  from { width: 40px; }
  to { width: 120px; }
}




:root {

  --white:        #FFFFFF;

  --off-white:    #F8F7F4;

  --light-gray:   #F2F0EB;

  --mid-gray:     #E0DDD6;

  --text-muted:   #888580;

  --dark:         #1A1917;

  --dark-2:       #2C2C2A;

  --dark-3:       #3D3D3A;

  --gold:         #C9922A;

  --gold-light:   #E5A83A;

  --gold-dark:    #A87520;



  --font-serif:   'Cormorant Garamond', Georgia, serif;

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;



  --header-h:     72px;

  --section-pad:  100px;

  --radius:       12px;

  --radius-lg:    24px;

  --shadow:       0 4px 32px rgba(26,25,23,.08);

  --shadow-lg:    0 8px 60px rgba(26,25,23,.14);

  --transition:   0.3s ease;



  --max-width:    1200px;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

}



body {

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

  background: var(--white);

  color: var(--dark);

  line-height: 1.7;

  overflow-x: hidden;

  /* No padding-top — main element handles header clearance instead */

}



/* ── Typography helpers ── */

.gold { color: var(--gold); font-style: italic; }



h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.15; font-weight: 400; }

h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); }

h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }

h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }



p { font-size: 1rem; color: var(--dark-3); }



a { color: inherit; text-decoration: none; }

ul { list-style: none; }

img { display: block; max-width: 100%; height: auto; }

button { cursor: pointer; border: none; background: none; font-family: var(--font-sans); font-size:3.5rem }



.mt-2 { margin-top: 2rem; }



/* ── Container ── */

.container {

  width: 100%;

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

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* Push page content below fixed header — handled by main { margin-top } above */



/* ── Section base ── */

.section {

  padding: var(--section-pad) 0;

}

.section--dark {

  background: var(--dark);

  color: var(--white);

}

.section--dark p { color: rgba(255,255,255,.7); }

.section--light-gray {

  background: var(--light-gray);

}



/* ── Section headings ── */

.section__tag {

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

  font-size: .75rem;

  font-weight: 600;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: .75rem;

}

.section__tag--light { color: var(--gold-light); }



.section__title {

  margin-bottom: 1.25rem;

  font-weight: 300;

}

.section__title--light { color: var(--white); }



.section__header { margin-bottom: 3.5rem; }

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



/* ── Buttons ── */

.btn {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  padding: .85rem 1.75rem;

  border-radius: 50px;

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

  font-size: .875rem;

  font-weight: 500;

  letter-spacing: .04em;

  transition: background var(--transition), color var(--transition),

              border-color var(--transition), transform var(--transition),

              box-shadow var(--transition);

  white-space: nowrap;

  cursor: pointer;

}

.btn--dark {

  background: var(--dark);

  color: var(--white);

  border: 2px solid var(--dark);

}

.btn--dark:hover {

  background: var(--dark-2);

  border-color: var(--dark-2);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(26,25,23,.25);

}

.btn--outline {

  background: transparent;

  color: var(--dark);

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

}

.btn--outline:hover {

  background: var(--dark);

  color: var(--white);

}

.btn--outline-dark {

  background: transparent;

  color: var(--dark);

  border: 1.5px solid var(--mid-gray);

}

.btn--outline-dark:hover {

  border-color: var(--dark);

  background: var(--dark);

  color: var(--white);

}

.btn--ghost {

  background: transparent;

  color: var(--dark);

  border: none;

  padding: .85rem 1rem;

  font-size: .875rem;

}

.btn--ghost:hover { color: var(--gold); }

.btn--lg {

  padding: 1rem 2.25rem;

  font-size: 1rem;

}

.btn--full { width: 100%; justify-content: center; }



/* =====================================================

   HEADER / NAVBAR

   ===================================================== */



/* 

  Safe-area fix for phones with notch/dynamic island:

  We extend the header's BACKGROUND into the safe area zone,

  but keep the nav content sitting in the normal 72px zone below it.

  This means: no white strip, and logo/burger are never clipped.

*/

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 9999;

  /* Total visual height = nav height + notch zone */

  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));

  /* Pad the TOP so nav sits below the notch, not inside it */

  padding-top: env(safe-area-inset-top, 0px);

  display: flex;

  align-items: center;

  background: #ffffff;

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

  box-shadow: 0 2px 12px rgba(26,25,23,.08);

}



/* Push main content below the full header (nav + notch zone) */

main {

  margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));

}



.nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  width: 100%;

  /* Height is exactly the nav zone, not including the notch padding */

  height: var(--header-h);

  /* NO overflow:hidden — that was clipping the logo */

}



.nav__logo {

  display: flex;

  flex-direction: column;

  line-height: 1;

  text-decoration: none;

  flex-shrink: 0;

}

/* Image logo (left side of header) */
.nav__logo img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 900px) { .nav__logo img { height: 48px; } }
@media (max-width: 480px) { .nav__logo img { height: 40px; } }


.nav__logo-main {

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

  font-size: 1.7rem;

  font-weight: 600;

  color: var(--dark);

  letter-spacing: .05rem;
  margin-left:0.5rem

}

.nav__logo-sub {

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

  font-size: 12px;

  letter-spacing: 2px;

  color: var(--gold);

  text-transform: capitalize;
  margin-left: 26px;
}



.nav__list {

  display: flex;

  align-items: center;

  gap: 2.5rem;

}

.nav__link {
  font-size: 1.125rem;
  color: var(--dark-2);
  font-weight: 700;

  display: flex;

  align-items: center;

  gap: .3rem;

  transition: color var(--transition);

  position: relative;

}.nav__link::after {

  content: '';

  position: absolute;

  bottom: -4px; left: 0;

  width: 0; height: 1px;

  background: var(--gold);

  transition: width var(--transition);

}

.nav__link:hover::after,

.nav__link--active::after { width: 100%; }

/* Active link stays dark; hovering any link turns it gold (site theme) + underline */
.nav__link--active { color: var(--dark); }

.nav__link:hover,
.nav__link:focus-visible { color: var(--gold); }



.nav__num {

  font-size: .65rem;

  color: var(--gold);

  font-weight: 600;

  margin-right: .15rem;

}



.nav__cta { display: flex; }



.nav__burger {

  display: none;

  flex-direction: column;

  gap: 5px;

  padding: 8px;

  border-radius: 6px;

  transition: background var(--transition);

}

.nav__burger span {

  display: block;

  width: 22px;

  height: 2px;

  background: var(--dark);

  border-radius: 2px;

  transition: transform var(--transition), opacity var(--transition);

}

.nav__burger:hover { background: var(--light-gray); }

.nav__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav__burger.active span:nth-child(2) { opacity: 0; }

.nav__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* =====================================================

   HERO / IMAGE SLIDER

   ===================================================== */

.hero {

  /* Let content determine height — no cropping ever */

  height: auto;

  min-height: 460px;

}



.slider {

  position: relative;

  width: 100%;

  height: 100%;

  min-height: 460px;

  overflow: hidden;

  z-index: 1;

}



.slide {

  /* Use relative positioning for the active slide so height is natural */

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  background-size: cover;

  background-position: center;

  opacity: 0;

  transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: none;

  z-index: 1;

  /* Give each slide a fixed height so slider has dimensions */

  min-height: 460px;

}

.slide.active {

  opacity: 1;

  pointer-events: auto;

}



/* Slide backgrounds using CSS gradients as fallbacks */

.slide--1 {


              
  background-image: url('slide1.png');
          
 
}


.slide--2 {

               
  background-image: url('slide2.jpg');
         
 

}

.slide--3 {

            
  background-image: url('slide3.jpg');
        
 

}



.slide__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to right, rgba(26,25,23,.65) 40%, transparent 100%);

  pointer-events: none;

}



.slide__content {

  position: relative;

  z-index: 2;

  max-width: 620px;

  padding: 3rem 1.5rem;

}

.slide__label {

  display: flex;

  align-items: center;

  gap: .75rem;

  font-size: .65rem;

  font-weight: 600;

  letter-spacing: .22em;

  text-transform: uppercase;

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

  margin-bottom: .75rem;

}

.slide__line {

  display: block;

  width: 2rem;

  height: 1px;

  background: var(--gold);

}

.slide__title {

  color: var(--white);

  margin-bottom: .75rem;

  text-shadow: 0 2px 20px rgba(0,0,0,.2);

}

.slide__desc {

  font-size: .9rem;

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

  max-width: 460px;

  line-height: 1.65;

  margin-bottom: 1.25rem;

}

.slide__actions {

  display: flex;

  align-items: center;

  gap: .75rem;

  flex-wrap: wrap;

}

.slide .btn--ghost { color: rgba(255,255,255,.85); }

.slide .btn--ghost:hover { color: var(--gold-light); }



/* Slider buttons */



/* Minimalist Large Chevron Buttons */
.slider__btn {
    position: absolute;
    top: 45%;
    transform: none;

    

    background: transparent;
    color: #fff7f7;
    border: none;
    border-radius: 0;

    
    font-weight: lighter;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease, transform 0.3s ease;
}

.slider__btn:hover {
    background: transparent;
    color: #fffefe;
    transform: translateY(-50%) scale(1.15);
}

.slider__btn--prev {
    left: 20px;
}

.slider__btn--next {
    right: 20px;
}


/* Dots */

.slider__dots {

  position: absolute;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: .6rem;

  z-index: 10;

}


.dot {
    background: #d6d6d6;
}

.dot.active {
    background: #ffffff;
    border: 1px solid #999999;
    width: 24px;
    border-radius: 10px;
}



/* =====================================================

   STATS STRIP

   ===================================================== */

.stats {

  background: var(--off-white);

  padding: 3rem 0;

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

}

.stats__grid {

  display: grid;

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

  gap: 1rem;

}

.stat {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 1.5rem 1rem;

  border-right: 1px solid var(--mid-gray);

  text-align: center;

}

.stat:last-child { border-right: none; }

.stat__num {

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

  font-size: clamp(2.5rem, 5vw, 3.5rem);

  font-weight: 300;

  color: var(--dark);

  line-height: 1;

}

.stat__sym {

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

  font-size: 2rem;

  color: var(--gold);

  font-weight: 300;

  align-self: flex-start;

  margin-top: .2rem;

}

.stat__label {

  font-size: .8rem;

  color: var(--text-muted);

  letter-spacing: .05em;

  margin-top: .4rem;

}



/* =====================================================

   ABOUT

   ===================================================== */

.about__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 5rem;

  align-items: center;

}

.about__image-wrap {

  position: relative;

  display: flex;

  justify-content: center;

}

.about__image-frame {

  width: 100%;

  max-width: 480px;

  aspect-ratio: 4/5;

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

  overflow: hidden;

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

}

.about__image {

  width: 100%;

  height: 100%;

  object-fit: fill;

  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);

}

.about__image-frame:hover .about__image { transform: scale(1.04); }



.about__badge {

  position: absolute;

  bottom: 2rem;

  right: 0;

  background: var(--gold);

  color: var(--white);

  border-radius: var(--radius);

  padding: 1.25rem 1.5rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  box-shadow: 0 8px 32px rgba(201,146,42,.35);

  min-width: 130px;

  text-align: center;

}

.about__badge-num {

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

  font-size: 2.5rem;

  font-weight: 600;

  line-height: 1;

}

.about__badge-text {

  font-size: .75rem;

  font-weight: 500;

  letter-spacing: .04em;

  margin-top: .3rem;

  opacity: .9;

}



.about__text { margin-bottom: 1rem; line-height: 1.8; }



.about__values { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }

.value {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

}

.value__icon {

  font-size: 1rem;

  color: var(--gold);

  margin-top: .25rem;

  flex-shrink: 0;

}

.value__title {

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

  font-size: 1rem;

  font-weight: 600;

  margin-bottom: .2rem;

  color: var(--dark);

}

.value__desc { font-size: .9rem; color: var(--dark-3); line-height: 1.6; }



/* =====================================================

   SERVICES

   ===================================================== */

.services__intro {

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

  font-size: 1rem;

  max-width: 500px;

  margin-top: -1rem;

}



.services__grid {

  display: grid;

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

  gap: 1.5px;

  border: 1.5px solid var(--dark-3);

  border-radius: var(--radius);

  overflow: hidden;

}



.service-card {

  position: relative;

  padding: 2.5rem 2rem;

  background: var(--dark-2);

  border: 1.5px solid transparent;

  transition: background var(--transition), border-color var(--transition);

  cursor: default;

  overflow: hidden;

}.service-card:hover {

  background: var(--dark-3);

  border-color: var(--gold-dark);

}



.service-card__icon {

  width: 48px; height: 48px;

  color: var(--gold);

  margin-bottom: 1.25rem;

}

.service-card__icon svg { width: 100%; height: 100%; }



.service-card__title {

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

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--white);

  margin-bottom: .6rem;

}

.service-card__desc {

  font-size: .9rem;

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

  line-height: 1.7;

}






.service-card:hover .service-card__num { color: rgba(201,146,42,.08); }



/* =====================================================

   PROCESS

   ===================================================== */

.process__steps {

  display: grid;

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

  gap: 2rem;

  position: relative;

}

.process__steps::before {

  content: '';

  position: absolute;

  top: 1.75rem;

  left: calc(12.5% + .75rem);

  right: calc(12.5% + .75rem);

  height: 1px;

  background: var(--mid-gray);

}



.process__step {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  position: relative;

}

.process__num {

  width: 3.5rem; height: 3.5rem;

  border-radius: 50%;

  background: var(--white);

  border: 2px solid var(--gold);

  color: var(--gold);

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

  font-size: .85rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

  position: relative;

  z-index: 1;

  box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--mid-gray);

}

.process__connector { display: none; }

.process__title {

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

  font-size: 1rem;

  font-weight: 600;

  color: var(--dark);

  margin-bottom: .5rem;

}

.process__desc { font-size: .875rem; color: var(--text-muted); line-height: 1.65; }



/* =====================================================

   PROJECTS

   ===================================================== */

.projects__grid {

  display: grid;

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

  grid-template-rows: auto auto;

  gap: 1.5rem;

}



.project-card {

  border-radius: var(--radius);

  overflow: hidden;

  background: var(--white);

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition);

}

.project-card:hover {

  transform: translateY(-6px);

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

}

.project-card--large { grid-column: span 2; }

.project-card--right { grid-column: span 2; }



.project-card__image-wrap {

  position: relative;

  overflow: hidden;

}

.project-card--large .project-card__image-wrap { aspect-ratio: 16/9; }

.project-card:not(.project-card--large) .project-card__image-wrap { aspect-ratio: 4/3; }



.project-card__image {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);

}

.project-card:hover .project-card__image { transform: scale(1.05); }



.project-card__overlay {

  position: absolute;

  inset: 0;

  background: transparent; /* no dark fade over image */

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity var(--transition);

}

.project-card:hover .project-card__overlay { opacity: 1; }



.project-card__link {

  color: var(--white);

  font-size: .875rem;

  font-weight: 500;

  letter-spacing: .08em;

  background: rgba(26,25,23,.75);

  border: 1.5px solid rgba(255,255,255,.6);

  border-radius: 50px;

  padding: .6rem 1.25rem;

  transition: background var(--transition), border-color var(--transition), color var(--transition);

}

.project-card__link:hover {

  background: var(--gold);

  border-color: var(--gold);

}



.project-card__info { padding: 1.5rem; }

.project-card__tag {

  font-size: .7rem;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--gold);

  display: block;

  margin-bottom: .5rem;

}

.project-card__title {

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

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--dark);

  margin-bottom: .4rem;

}

.project-card__desc { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }



.projects__footer {

  margin-top: 3rem;

  display: flex;

  justify-content: center;

}



/* =====================================================

   TESTIMONIALS

   ===================================================== */

.testimonials__grid {

  display: grid;

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

  gap: 1.5rem;

}



.testimonial {

  background: var(--off-white);

  border-radius: var(--radius);

  padding: 2rem;

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

  transition: box-shadow var(--transition), transform var(--transition);

}

.testimonial:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow);

}

.testimonial::before {

  content: '\201C';

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

  font-size: 4rem;

  color: var(--gold);

  line-height: .7;

  display: block;

  margin-bottom: .5rem;

}

.testimonial__text {

  font-size: .95rem;

  line-height: 1.75;

  color: var(--dark-2);

  margin-bottom: 1.5rem;

  font-style: italic;

}

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

.testimonial__text { flex: 0 0 auto; }

/* Push the author block to the bottom so all cards line up on one row */
.testimonial > :last-child,
.testimonial__author {
  margin: auto 0 0;
  padding: 0;
}

.testimonial__author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
}

.testimonial__author > * { margin: 0; }

.testimonial__avatar { flex-shrink: 0; }

.testimonial__avatar {

  width: 48px; height: 48px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--mid-gray);

}

.testimonial__name {

  display: block;

  font-size: .9rem;

  font-weight: 600;

  color: var(--dark);

}

.testimonial__role {

  font-size: .78rem;

  color: var(--text-muted);

}



/* =====================================================

   TECH STACK

   ===================================================== */

.tech__logos {

  display: grid;

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

  gap: 1rem;

}

.tech__logo {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: .75rem;

  padding: 1.5rem 1rem;

  border-radius: var(--radius);

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

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

  transition: color var(--transition), border-color var(--transition), background var(--transition);

  cursor: default;

}

.tech__logo:hover {

  color: var(--gold-light);

  border-color: var(--gold-dark);

  background: rgba(201,146,42,.07);

}

.tech__logo svg { width: 36px; height: 36px; }

.tech__logo span {

  font-size: .72rem;

  letter-spacing: .05em;

  font-weight: 500;

}



/* =====================================================

   CONTACT CTA STRIP

   ===================================================== */

.contact-cta { background: var(--off-white); }

.contact-cta__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 3rem;

  flex-wrap: wrap;

}

.contact-cta__desc { color: var(--text-muted); margin-top: .5rem; }



/* =====================================================

   FOOTER

   ===================================================== */

.footer {

  background: var(--dark);

  color: var(--white);

  padding-top: 5rem;

}

.footer__grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 3rem;

  padding-bottom: 4rem;

}



.footer .nav__logo-main { color: var(--white); font-size: 1.5rem; }

.footer__tagline {

  font-size: .875rem;

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

  margin-top: 1rem;

  line-height: 1.65;

  max-width: 260px;

}



.footer__socials {

  display: flex;

  gap: .75rem;

  margin-top: 1.75rem;

}

.footer__social {

  width: 40px; height: 40px;

  border-radius: 50%;

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

  display: flex;

  align-items: center;

  justify-content: center;

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

  transition: background var(--transition), border-color var(--transition),

              color var(--transition), transform var(--transition);

}

.footer__social svg { width: 16px; height: 16px; }

.footer__social:hover {

  background: var(--gold);

  border-color: var(--gold);

  color: var(--white);

  transform: translateY(-3px);

}



.footer__heading {

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

  font-size: .75rem;

  font-weight: 700;

  letter-spacing: .16em;

  text-transform: uppercase;

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

  margin-bottom: 1.25rem;

}



.footer__links ul { display: flex; flex-direction: column; gap: .75rem; }

.footer__links a,

.footer__links li {

  font-size: .875rem;

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

  transition: color var(--transition);

  line-height: 1.5;

}

.footer__links a:hover { color: var(--gold-light); }



.footer__bottom {

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

  padding: 1.5rem 0;

}

.footer__bottom-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1rem;

}

.footer__bottom p { font-size: .8rem; color: rgba(255,255,255,.35); }

.footer__legal {

  display: flex;

  gap: 1.5rem;

}

.footer__legal a {

  font-size: .8rem;

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

  transition: color var(--transition);

}

.footer__legal a:hover { color: var(--gold-light); }



/* =====================================================

   BACK TO TOP

   ===================================================== */

.back-to-top {

  position: fixed;

  bottom: 2rem;

  right: 2rem;

  width: 48px; height: 48px;

  border-radius: 50%;

  background: var(--gold);

  color: var(--white);

  font-size: 1.1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 20px rgba(201,146,42,.4);

  opacity: 0;

  pointer-events: none;

  transform: translateY(16px);

  transition: opacity var(--transition), transform var(--transition), background var(--transition);

  z-index: 9998;

}

.back-to-top.visible {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

}

.back-to-top:hover {

  background: var(--gold-dark);

  transform: translateY(-3px);

}



/* =====================================================

   SCROLL ANIMATIONS

   ===================================================== */

[data-reveal] {

  opacity: 0;

  transform: translateY(28px);

  transition: opacity .6s cubic-bezier(0.4, 0, 0.2, 1),

              transform .6s cubic-bezier(0.4, 0, 0.2, 1);

}

[data-reveal].revealed {

  opacity: 1;

  transform: none;

}

[data-reveal="left"] { transform: translateX(-28px); }

[data-reveal="left"].revealed { transform: none; }

[data-reveal="right"] { transform: translateX(28px); }

[data-reveal="right"].revealed { transform: none; }



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

  [data-reveal] {

    opacity: 1;

    transform: none;

    transition: none;

  }

  .slide { transition: opacity .3s ease; }

  html { scroll-behavior: auto; }

}



/* =====================================================

   RESPONSIVE — TABLET (≤ 1024px)

   ===================================================== */

@media (max-width: 1034px) {

  :root { --section-pad: 72px; }
   
.slider__btn {
    position: absolute;
    top: 50%;
    transform: none;

    

    background: transparent;
    color: #fff7f7;
    border: none;
    border-radius: 0;

    
    font-weight: lighter;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease, transform 0.3s ease;
}

.slider__btn:hover {
    background: transparent;
    color: #fffefe;
    transform: translateY(-50%) scale(1.15);
}

.slider__btn--prev {
    left: 20px;
}

.slider__btn--next {
    right: 20px;
}
  .about__grid { gap: 3rem; }

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

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

  .project-card--large,

  .project-card--right { grid-column: span 2; }

  .tech__logos { grid-template-columns: repeat(4, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

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

  .stat { border-right: none; border-bottom: 1px solid var(--mid-gray); }

  .stat:nth-child(odd) { border-right: 1px solid var(--mid-gray); }

  .stat:last-child { border-bottom: none; }
   .nav__logo-main {font-size: 48px; margin-left: -2px; }

  
.nav__logo-sub  { margin-left: 10px; font-size: 17px;  } 

}



/* =====================================================

   RESPONSIVE — MOBILE (≤ 768px)

   ===================================================== */

@media (max-width: 768px) {

  :root {

    --header-h: 56px;

    --section-pad: 56px;

  }



  /* Shrink logo to fit neatly inside 56px nav zone */

  .nav__logo-main {font-size: 2.4rem; margin-left: -2px; }

  
.nav__logo-sub  { margin-left: 13px; font-size: 17px;  } 


  /* Tighten nav spacing on mobile */

  .nav { gap: .5rem; padding: 0 1rem; }



  /* Mobile nav dropdown — positioned below the complete header */
  .nav__list {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 8px 15px;
    background: #ffffff;
    border-bottom: 1px solid var(--mid-gray);
    box-shadow: 0 8px 24px rgba(26, 25, 23, 0.1);
    z-index: 9998;

    /* Keep the closed menu completely hidden */
    transform: translateY(-110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .nav__list.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, visibility 0s;
  }

  .nav__link {
    display: block;
    padding: 12px 15px;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid var(--light-gray);
  }

  .nav__list li:last-child .nav__link {
    border-bottom: none;
  }

  .nav__link::after { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* Slider */

  .hero {

    min-height: 360px;

  }

  .slider { min-height: 360px; }

  .slide  { min-height: 360px; }

  .slide__content { max-width: 100%; padding: 2rem 1.5rem; }

  .slide__title { font-size: clamp(1.6rem, 6vw, 2.4rem); }

  .slide__desc { font-size: .82rem; margin-bottom: 1rem; }

  .slider__btn { width: 8px; height: 10px; font-size: 2.85rem }

  .slider__btn--prev { left: .4rem; }

  .slider__btn--next { right: .4rem; }



  /* Stats */

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

  .stat { border-right: none !important; border-bottom: 1px solid var(--mid-gray); }

  .stat:nth-child(odd) { border-right: 1px solid var(--mid-gray) !important; }



  /* About */

  .about__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .about__image-wrap { max-width: 400px; margin: 0 auto; }



  /* Services */

  .services__grid { grid-template-columns: 1fr; }

  .service-card { padding: 2rem 1.5rem; }



  /* Process */

  .process__steps {
    grid-template-columns: 1fr;
    gap: 0;
    padding: .5rem .5rem 0;
  }

  .process__steps::before { display: none; }

  /* Circle on the left, title + description stacked neatly on the right */
  .process__step {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    column-gap: 1.5rem;
    row-gap: .35rem;
    text-align: left;
    align-items: start;
    justify-items: start;
    padding-bottom: 2rem;
  }

  .process__step:last-child { padding-bottom: 0; }

  /* vertical line connecting the numbered circles */
  .process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.75rem;
    top: 4.25rem;
    bottom: .75rem;
    width: 1px;
    background: var(--mid-gray);
  }

  .process__num {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .process__title,
  .process__desc {
    grid-column: 2;
    width: 100%;
  }

  .process__title {
    margin: .4rem 0 0;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .process__desc { margin: 0; }



  /* Projects */

  .projects__grid { grid-template-columns: 1fr; }

  .project-card--large,

  .project-card--right { grid-column: span 1; }



  /* Testimonials */

  .testimonials__grid { grid-template-columns: 1fr; }



  /* Tech */

  .tech__logos { grid-template-columns: repeat(4, 1fr); }



  /* CTA strip */

  .contact-cta__inner {

    flex-direction: column;

    text-align: center;

  }



  /* Footer */

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  .footer__bottom-inner { flex-direction: column; text-align: center; }

  .footer__legal { justify-content: center; }



  .back-to-top { bottom: 1.25rem; right: 1.25rem; }

}



/* =====================================================

   RESPONSIVE — SMALL MOBILE (≤ 480px)

   ===================================================== */

@media (max-width: 480px) {

  :root { --header-h: 52px; }



  .nav__logo-main { font-size: 1.8rem; margin-left: -5px; }

  .nav__logo-sub  { margin-left: 12px; font-size: 14px;  } 

  .nav { gap: .5rem; padding: 0 .75rem; }

  .nav__burger { padding: 6px; }



  .hero    { min-height: 320px; }

  .slider  { min-height: 320px; }

  .slide   { min-height: 320px; }

  .slide__content { padding: 1.5rem 1.25rem; }

  .slide__title { font-size: clamp(1.4rem, 5.5vw, 2rem); }

  .slide__desc { display: none; }

  .stats__grid { grid-template-columns: 1fr 1fr; }

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

  .about__badge { right: -1rem; }

  .slide__actions { flex-direction: column; align-items: flex-start; }

}

/* Stat number + symbol sit side by side */
.stat__value { display: flex; align-items: flex-start; justify-content: center; gap: .1rem; }
.stat__value .stat__sym { align-self: flex-start; margin-top: .2rem; }