:root{
      --primary-red: #d71c1c;
      --secondary-blue: #1169ad;
      --dark-overlay: rgba(6,10,18,0.60);
      --nav-height: 74px;
    }

    html,body{height:100%;}
    body{
      font-family: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      margin:0;
      color:#111;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background:#fff;
    }

    /* NAV */
    .topntown-nav{
      transition: background-color .28s ease, box-shadow .28s ease, padding .2s ease;
      padding: 18px 0;
      height: var(--nav-height);
      z-index: 1100;
      width:100%;
    }
    .topntown-nav .navbar-brand img{ height:46px; object-fit:contain; display:block; }
    .topntown-nav .nav-link{
      color: rgba(255,255,255,0.92);
      font-weight:500; /* menu font-weight */
      padding-left: .9rem;
      padding-right: .9rem;
    }
    .topntown-nav .nav-link:hover{ color: var(--primary-red); }

    /* Transparent over hero */
    .topntown-nav.transparent{
      position: absolute;
      top:0;
      left:0;
      right:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
      box-shadow:none;
    }

    /* Sticky / scrolled - full width */
    .topntown-nav.scrolled{
      position: fixed;
      top:0;
      left:0;
      right:0;
      width:100%;
      background: #fff;
      box-shadow: 0 6px 24px rgba(10,15,30,0.08);
      padding: 8px 0;
    }
    .topntown-nav.scrolled .nav-link{ color:#333; }
    .topntown-nav.scrolled .navbar-brand img{ filter:none; }
    
    
    
    

 
  
 
    /* ABOUT SECTION */
.tnt-about-section{
  background:#fff;
}

/* Section headings */
.tnt-sec-subtitle{
  color: var(--secondary-blue);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
  font-size:15px;
}

.tnt-sec-title{
  font-family:'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight:700;
  margin-bottom: 18px;
  color:#111;
  line-height:1.15;
}

.tnt-sec-para{
  font-size:16px;
  line-height:1.7;
  margin-bottom: 20px;
  color:#444;
}

/* Image */
.tnt-about-img-wrap{
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.tnt-about-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* Icon list */
.tnt-icon-list{
  margin-top:18px;
}
.tnt-icon-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
  font-size:16px;
  color:#333;
}
.tnt-icon-item i{
  font-size:22px;
  color: var(--primary-red);
  min-width:26px;
}

/* Luxury button (no border-radius) */
.tnt-lux-btn{
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff !important;
  padding:12px 28px;
  font-weight:700;
  border-radius:0;
  border:none;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition: all .2s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.tnt-lux-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.35);
}





   /* PROJECTS SECTION STYLES (UPDATED) */
.tnt-projects-section{
  background: #faf9f8;
}

/* Project card (keeps previous styling) */
.project-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 10px 36px rgba(11,17,30,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.project-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(11,17,30,0.12);
}

/* Media image */
.project-media{
  height:190px;
  overflow:hidden;
}
.project-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .5s ease;
}
.project-card:hover .project-media img{ transform: scale(1.06); }

/* Body */
.project-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.project-title{
  font-family:'Playfair Display', serif;
  font-size:18px;
  margin:0;
}
.project-meta{
  color:#6b7280;
  font-size:13px;
  margin-bottom:6px;
}
.project-desc{
  color:#444;
  font-size:14px;
  flex:1;
}

/* bullet list inside card */
.project-bullets{
  list-style: disc;
  margin:6px 0 0 18px;
  padding:0;
  color:#444;
  font-size:13.5px;
  line-height:1.5;
}

/* badge */
.project-badge{
  background: linear-gradient(90deg, var(--secondary-blue), #0a5a8f);
  color:#fff;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:4px;
}

/* small link under card */
.project-body .btn-link{
  padding:0;
  color:var(--secondary-blue);
  text-decoration:none;
}
.project-body .btn-link:hover{ text-decoration:underline; }

/* small luxury button (no border-radius) */
.btn-lux-sm{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  border-radius:0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* Tab buttons look */
.btn-group .btn{
  border-radius: 6px;
  background: transparent;
  color: #333;
  border: 1px solid rgba(18,22,30,0.06);
  padding:8px 14px;
  font-weight:600;
}
.btn-group .btn.active{
  background: linear-gradient(90deg, var(--secondary-blue), #0a5a8f);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(11,17,30,0.12);
}

/* responsive tweaks */
@media (max-width:767px){
  .project-media{ height:160px; }
  .btn-group{ width:100%; display:flex; gap:8px; }
  .btn-group .btn{ flex:1; }
  .project-bullets{ margin-left:14px; font-size:13px; }
}





    /* MISSION / VISION / VALUES */

.tnt-mv-section{
  background: #ffffff;
}

/* Reuse existing subtitle/title/para classes if present */
.tnt-mv-card{
  background: linear-gradient(180deg, rgba(246,246,246,1), #ffffff);
  border: 1px solid rgba(18,22,30,0.04);
  padding: 28px;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(11,17,30,0.06);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tnt-mv-icon{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(217,28,28,0.06), rgba(17,105,173,0.04));
  color: var(--primary-red);
  flex-shrink:0;
  box-shadow: 0 8px 20px rgba(11,17,30,0.06);
}

.tnt-mv-card .bi{ vertical-align:middle; }

/* Titles & text */
.tnt-mv-title{
  font-family: 'Playfair Display', serif;
  font-size:20px;
  margin:0;
  color:#111;
  line-height:1.15;
}

.tnt-mv-desc{
  color:#444;
  font-size:15px;
  line-height:1.7;
  margin-bottom:6px;
}

.tnt-mv-small{
  color:#6b7280;
  font-size:13px;
  margin-top:auto;
}

/* Values list */
.tnt-values-list li{
  display:block;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom: 1px dashed rgba(18,22,30,0.03);
  font-size:15px;
  color:#333;
}
.tnt-values-list li:last-child{ border-bottom:none; }

.tnt-values-list .bi-check-circle-fill{
  color: var(--secondary-blue);
  min-width:22px;
}

/* Responsive */
@media (max-width:991px){
  .tnt-mv-card{ padding:20px; }
  .tnt-mv-icon{ width:54px; height:54px; }
}





    /* CTA SECTION - Top N Town */
:root{
  /* fallback variables if not present */
  --primary-red: #d71c1c;
  --secondary-blue: #1169ad;
  --cta-bg: linear-gradient(90deg, rgba(15,18,25,0.92), rgba(8,10,16,0.86));
}

.tnt-cta-section{
  background-image: url('/assets/img/cta-bg.jpg'); /* optional: replace or remove if not available */
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  overflow: hidden;
}

/* dark overlay for legibility */
.tnt-cta-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--cta-bg);
  mix-blend-mode: normal;
  z-index:0;
  opacity:0.98;
}

.tnt-cta-section .container,
.tnt-cta-section .row{
  position:relative;
  z-index:2;
}

/* Text */
.tnt-cta-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3.4vw, 34px);
  margin:0 0 6px 0;
  color: #fff;
  line-height:1.08;
}
.tnt-cta-sub{
  font-family: 'Jost', system-ui, sans-serif;
  color: rgba(255,255,255,0.88);
  margin:0;
  font-size: 15px;
}

/* Buttons: luxury, sharp edges (no radius) */
.tnt-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border-radius:0; /* NO radius */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing: .06em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.32);
  border: none;
}

/* Primary CTA (red) */
.btn-primary-cta{
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
}

/* Secondary CTA (blue) */
.btn-secondary-cta{
  background: linear-gradient(90deg, #0e5a8a, var(--secondary-blue));
  color:#fff;
}

/* Hover */
.tnt-cta-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.4);
  text-decoration:none;
}

/* Mobile adjustments */
@media (max-width:767px){
  .tnt-cta-section{ padding-top:36px; padding-bottom:36px; }
  .tnt-cta-title{ font-size:20px; }
  .tnt-cta-btn{ padding:10px 14px; font-size:13px; }
  .tnt-cta-section .d-inline-flex{ width:100%; justify-content:center; }
}

/* Optional: subtle decorative accent line */
.tnt-cta-section .tnt-cta-accent{
  height:4px;
  width:120px;
  background: linear-gradient(90deg, var(--primary-red), var(--secondary-blue));
  margin-top:14px;
  border-radius:2px;
}





    /* WHY CHOOSE SECTION */
.tnt-why-section{
  background: #fff;
}

/* Left column content */
.tnt-why-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:6px 0;
  border-bottom: 1px solid rgba(18,22,30,0.04);
  font-size:15px;
  color:#333;
}
.tnt-why-list li:last-child{ border-bottom:none; }

.tnt-why-list .bi-check-circle-fill{
  color: var(--primary-red);
  font-size:20px;
  flex-shrink:0;
  margin-top:3px;
}

/* media box */
.tnt-why-media{
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 12px 36px rgba(11,17,30,0.06);
}
.tnt-why-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}
.tnt-why-media:hover img{ transform: scale(1.04); }

/* Buttons */
.btn-lux-sm{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  border-radius:0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* outline secondary button */
.btn-outline-secondary{
  background:transparent;
  border:1px solid rgba(18,22,30,0.06);
  color:#333;
  padding:9px 14px;
  border-radius:6px;
  font-weight:600;
}

/* responsive */
@media (max-width:991px){
  .tnt-why-media{ margin-top:18px; }
  .tnt-why-list li{ font-size:14px; }
}





    /* DHOLERA PROMO SECTION */
.tnt-dholera-section{
  position:relative;
  width:100%;
  overflow:hidden;
  /* background image - replace if you have a different filename */
  background-image: url('/assets/img/dholera.jpg?a');
  background-size: cover;
  background-position: center center;
  min-height: 65vh; /* tall but not full-screen; adjust to 70vh or 100vh if you want */
  display:flex;
  align-items:center;
}

/* dark overlay */
.tnt-dholera-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(6,10,18,0.55), rgba(6,10,18,0.35));
  z-index:1;
}

/* the whole card is a link */
.tnt-dholera-link{
  display:block;
  position:relative;
  width:100%;
  color:#fff;
  text-decoration:none;
  z-index:2;
}

/* content wrapper aligns center */
.tnt-dholera-inner{
  position:relative;
  z-index:3;
  padding: 65px 40px;
}

/* text center and max width */
.tnt-dholera-content{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

/* eyebrow */
.tnt-dholera-eyebrow{
  font-family:'Jost', sans-serif;
  color: rgba(255,255,255,0.9);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
  font-size:14px;
}

/* main title */
.tnt-dholera-title{
  font-family:'Playfair Display', serif;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height:1.04;
  margin:0 0 12px 0;
  color:#fff;
  text-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* subtitle */
.tnt-dholera-sub{
  font-family:'Jost', sans-serif;
  color: rgba(255,255,255,0.9);
  font-size: clamp(14px, 1.4vw, 18px);
  max-width:760px;
  margin:0 auto;
  line-height:1.6;
}

/* CTA (reuse luxury btn style: no radius) */
.tnt-dholera-cta{
  padding:12px 26px;
  border-radius:0;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.06em;
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  box-shadow: 0 14px 46px rgba(0,0,0,0.36);
}

/* hover feedback for entire link area */
.tnt-dholera-link:hover .tnt-dholera-cta,
.tnt-dholera-link:focus .tnt-dholera-cta{
  transform: translateY(-4px);
  box-shadow: 0 22px 64px rgba(0,0,0,0.42);
}

/* ensure the area is keyboard accessible */
.tnt-dholera-link:focus{ outline: 3px solid rgba(217,28,28,0.18); outline-offset:6px; }

/* smaller screens: adjust padding and min-height */
@media (max-width:991px){
  .tnt-dholera-section{ min-height:48vh; }
  .tnt-dholera-inner{ padding:36px 16px; }
  .tnt-dholera-title{ font-size: clamp(22px, 7.6vw, 36px); }
  .tnt-dholera-sub{ font-size:14px; }
  .tnt-dholera-cta{ padding:10px 18px; }
}





    /* FEATURES SECTION */
.tnt-features-section{
  background:#faf9f8;
}

/* Cards */
.tnt-feature-card{
  background:#fff;
  border-radius:10px;
  padding:28px 24px;
  border:1px solid rgba(18,22,30,0.05);
  box-shadow:0 10px 34px rgba(0,0,0,0.06);
  height:100%;
  transition:all .22s ease;
}
.tnt-feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(0,0,0,0.12);
}

/* Icons */
.tnt-feature-icon{
  width:64px;
  height:64px;
  border-radius:6px;
  background:linear-gradient(180deg, rgba(215,28,28,0.08), rgba(17,105,173,0.08));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  color:var(--primary-red);
  font-size:26px;
  box-shadow:0 8px 20px rgba(11,17,30,0.06);
}

/* Titles */
.tnt-feature-title{
  font-family:'Playfair Display', serif;
  font-size:20px;
  margin-bottom:10px;
  color:#111;
}

/* Description */
.tnt-feature-desc{
  color:#444;
  font-size:15px;
  line-height:1.65;
}

/* Responsive */
@media (max-width:991px){
  .tnt-feature-card{ padding:24px; }
  .tnt-feature-icon{ width:54px; height:54px; font-size:22px; }
}





    
    /* BRANDS SECTION */
.tnt-brands-section{
  background:#f7f7f7;
}

/* Logo container */
.tnt-brand-item{
  background:#ffffff;
  padding:18px;
  border-radius:10px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,0.06);
  transition:all .22s ease;
}

.tnt-brand-item img{
  width:100%;
  max-width:120px;
  height:auto;
  object-fit:contain;
  transition:all .22s ease;
}

/* Hover effect */
.tnt-brand-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}
.tnt-brand-item:hover img{
  filter:none;
  opacity:1;
}

/* responsive */
@media (max-width:767px){
  .tnt-brand-item{ padding:14px; border-radius:8px; }
  .tnt-brand-item img{ max-width:90px; }
}





    /* CONTACT SECTION */
.tnt-contact-section{
  background: #fff;
  color:#111;
}

.tnt-contact-card{
  background:#fff;
  border-radius:10px;
  border:1px solid rgba(18,22,30,0.04);
  box-shadow:0 12px 40px rgba(11,17,30,0.06);
}

.contact-info{
  color:#333;
  margin-top:16px;
}
.contact-info li{ margin-bottom:8px; }
.contact-info a{ color:var(--primary-red); font-weight:600; text-decoration:none; }

/* Form controls (match hero styles) */
.tnt-contact-card .form-control,
.tnt-contact-card .form-select{
  border-radius:6px;
  border:1px solid rgba(18,22,30,0.06);
  background: #fff;
  color:#111;
  padding:10px 12px;
  font-size:14px;
}
.tnt-contact-card .form-control::placeholder{ color:#9CA3AF; }

/* Submit button: luxury, sharp edges */
.tnt-submit-btn{
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  padding:11px 18px;
  font-weight:800;
  border-radius:0; /* sharp */
  border:none;
  text-transform:uppercase;
  letter-spacing:.05em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.tnt-submit-btn:hover{ transform: translateY(-3px); box-shadow:0 18px 46px rgba(0,0,0,0.28); }

/* Success card */
.contact-success{
  background: linear-gradient(180deg, rgba(17,105,173,0.06), rgba(215,28,28,0.04));
  border:1px solid rgba(17,105,173,0.06);
  border-radius:8px;
  color:#0b1220;
}

/* Responsive */
@media (max-width:991px){
  .tnt-contact-section .col-lg-6{ width:100%; }
  .tnt-contact-card{ margin-top:12px; }
}



    /* ABOUT HERO / BREADCRUMB AREA */
.about-hero-section{
  position:relative;
  width:100%;
  min-height:36vh;              /* adjust to taste (36-60vh) */
  display:flex;
  align-items:center;
  color:#fff;
  margin-bottom: 28px;
  overflow:hidden;
  font-family: 'Jost', sans-serif;
}

.about-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;
  transform: scale(1.02);
}

/* dark overlay for legibility */
.about-hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(6,10,18,0.56), rgba(6,10,18,0.35));
  z-index:2;
}

/* content wrapper sits above bg+overlay */
.about-hero-inner{
  position:relative;
  z-index:3;
  padding-top: 120px;
  padding-bottom: 80px;
}

/* breadcrumb */
.breadcrumb-wrap{
  text-align:left;
}
.breadcrumb{
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  justify-content: center;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: rgba(255,255,255,0.7);
  content: "›";               /* subtle separator */
  margin: 0 8px;
  font-weight:600;
}
.breadcrumb a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight:600;
  opacity:0.95;
}
.breadcrumb .active{
  color: rgba(255,255,255,0.9);
  font-weight:700;
}

/* Title / subtitle */
.about-hero-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4.8vw, 44px);
  margin: 10px 0 6px 0;
  color: #ffffff;
  line-height:1.04;
  letter-spacing:-0.01em;
}
.about-hero-sub{
  color: rgba(255,255,255,0.9);
  font-size: clamp(14px, 1.2vw, 18px);
  margin:0;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

/* responsive: smaller hero height on small screens */
@media (max-width:991px){
  .about-hero-section{ min-height: 28vh; padding-top:18px; padding-bottom:18px; }
  .about-hero-inner{ padding-top: 80px; padding-bottom: 65px; }
  .about-hero-title{ font-size: clamp(20px, 7.8vw, 30px); }
}

/* Accessibility focus style */
.breadcrumb a:focus, .about-hero-link:focus{
  outline: 3px solid rgba(215,28,28,0.16);
  outline-offset:4px;
  border-radius:4px;
}





    /* ABOUT CONTENT BLOCK */
.tnt-about-content-section{
  background: #ffffff;
  color: #212529;
  font-family: 'Jost', sans-serif;
}

/* Section title reuse (Playfair) */
.tnt-about-content-section .tnt-sec-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3.2vw, 34px);
  margin-bottom: 6px;
  color: #111;
}

/* Body copy */
.about-content-body p{
  font-size: 15.5px;
  line-height: 1.78;
  color: #444;
  margin-bottom: 14px;
}

/* Strong/em styling for emphasis */
.about-content-body strong{ color: #0b1220; font-weight:700; }
.about-content-body em{ font-style: italic; color: #0b1220; }

/* Buttons: reuse existing luxury button styles but ensure spacing */
.btn-lux-sm{ /* keep from global styles, re-declare fallback */
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  border-radius:0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.btn-outline-secondary{
  background:transparent;
  border:1px solid rgba(18,22,30,0.06);
  color:#333;
  padding:9px 14px;
  border-radius:6px;
  font-weight:600;
}

/* Image styling */
.about-image-wrap{
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 12px 36px rgba(11,17,30,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(245,245,245,0.02));
}
.about-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}
.about-image-wrap:hover .about-image{ transform: scale(1.03); }

/* smaller screens */
@media (max-width:991px){
  .tnt-about-content-section{ padding-top:18px; padding-bottom:18px; }
  .about-image-wrap{ margin-top:12px; }
  .tnt-about-content-section .tnt-sec-title{ font-size:24px; }
  .about-content-body p{ font-size:15px; line-height:1.65; }
}





    /* FOUNDER SECTION */
.tnt-founder-section{
  background: #fff;
  color: #222;
  font-family: 'Jost', sans-serif;
}

/* Photo */
.founder-photo-wrap{
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(11,17,30,0.07);
  max-width: 360px;
  margin: 0 auto;
}
.founder-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}
.founder-photo-wrap:hover .founder-photo{ transform: scale(1.03); }

/* Titles */
.tnt-founder-section .tnt-sec-subtitle{
  font-weight:600;
  color: var(--secondary-blue);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.tnt-founder-section .tnt-sec-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3.4vw, 34px);
  margin-bottom:14px;
  color:#111;
}

/* Bio text */
.founder-bio p{
  color:#444;
  font-size:15.5px;
  line-height:1.72;
  margin-bottom:12px;
}

/* Quote */
.founder-quote{
  margin:14px 0 0 0;
  padding:14px 18px;
  border-left:4px solid var(--primary-red);
  background: linear-gradient(180deg, rgba(17,105,173,0.03), rgba(215,28,28,0.02));
  color:#0b1220;
  border-radius:6px;
  font-style:italic;
}
.founder-quote cite{ display:block; margin-top:8px; font-style:normal; font-weight:700; color:#333; }

/* Buttons fallback */
.btn-lux-sm{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  border-radius:0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.btn-outline-secondary{
  background:transparent;
  border:1px solid rgba(18,22,30,0.06);
  color:#333;
  padding:9px 14px;
  border-radius:6px;
  font-weight:600;
}

/* Responsive */
@media (max-width:991px){
  .founder-photo-wrap{ max-width: 280px; }
  .tnt-founder-section .tnt-sec-title{ font-size:24px; }
  .founder-bio p{ font-size:15px; line-height:1.65; }
}





    /* MISSION / VISION / VALUES */

.tnt-mv-section{
  background: #ffffff;
}

/* Reuse existing subtitle/title/para classes if present */
.tnt-mv-card{
  background: linear-gradient(180deg, rgba(246,246,246,1), #ffffff);
  border: 1px solid rgba(18,22,30,0.04);
  padding: 28px;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(11,17,30,0.06);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tnt-mv-icon{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(217,28,28,0.06), rgba(17,105,173,0.04));
  color: var(--primary-red);
  flex-shrink:0;
  box-shadow: 0 8px 20px rgba(11,17,30,0.06);
}

.tnt-mv-card .bi{ vertical-align:middle; }

/* Titles & text */
.tnt-mv-title{
  font-family: 'Playfair Display', serif;
  font-size:20px;
  margin:0;
  color:#111;
  line-height:1.15;
}

.tnt-mv-desc{
  color:#444;
  font-size:15px;
  line-height:1.7;
  margin-bottom:6px;
}

.tnt-mv-small{
  color:#6b7280;
  font-size:13px;
  margin-top:auto;
}

/* Values list */
.tnt-values-list li{
  display:block;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom: 1px dashed rgba(18,22,30,0.03);
  font-size:15px;
  color:#333;
}
.tnt-values-list li:last-child{ border-bottom:none; }

.tnt-values-list .bi-check-circle-fill{
  color: var(--secondary-blue);
  min-width:22px;
}

/* Responsive */
@media (max-width:991px){
  .tnt-mv-card{ padding:20px; }
  .tnt-mv-icon{ width:54px; height:54px; }
}





    /* ABOUT HERO / BREADCRUMB AREA */
.about-hero-section{
  position:relative;
  width:100%;
  min-height:36vh;              /* adjust to taste (36-60vh) */
  display:flex;
  align-items:center;
  color:#fff;
  margin-bottom: 28px;
  overflow:hidden;
  font-family: 'Jost', sans-serif;
}

.about-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;
  transform: scale(1.02);
}

/* dark overlay for legibility */
.about-hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(6,10,18,0.56), rgba(6,10,18,0.35));
  z-index:2;
}

/* content wrapper sits above bg+overlay */
.about-hero-inner{
  position:relative;
  z-index:3;
  padding-top: 120px;
  padding-bottom: 80px;
}

/* breadcrumb */
.breadcrumb-wrap{
  text-align:left;
}
.breadcrumb{
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  justify-content: center;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: rgba(255,255,255,0.7);
  content: "›";               /* subtle separator */
  margin: 0 8px;
  font-weight:600;
}
.breadcrumb a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight:600;
  opacity:0.95;
}
.breadcrumb .active{
  color: rgba(255,255,255,0.9);
  font-weight:700;
}

/* Title / subtitle */
.about-hero-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4.8vw, 44px);
  margin: 10px 0 6px 0;
  color: #ffffff;
  line-height:1.04;
  letter-spacing:-0.01em;
}
.about-hero-sub{
  color: rgba(255,255,255,0.9);
  font-size: clamp(14px, 1.2vw, 18px);
  margin:0;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

/* responsive: smaller hero height on small screens */
@media (max-width:991px){
  .about-hero-section{ min-height: 28vh; padding-top:18px; padding-bottom:18px; }
  .about-hero-inner{ padding-top: 80px; padding-bottom: 65px; }
  .about-hero-title{ font-size: clamp(20px, 7.8vw, 30px); }
}

/* Accessibility focus style */
.breadcrumb a:focus, .about-hero-link:focus{
  outline: 3px solid rgba(215,28,28,0.16);
  outline-offset:4px;
  border-radius:4px;
}





    /* CONTACT PAGE STYLES */
.tnt-contact-intro{ background: #fff; padding-top: 18px; padding-bottom: 18px; }
.tnt-contact-intro .tnt-sec-title{ font-family:'Playfair Display', serif; font-size:32px; margin-bottom:6px; }
.tnt-contact-intro .tnt-sec-para{ color:#6b7280; }

/* contact main card styles reuse */
.tnt-contact-card, .tnt-office-card{
  background:#fff;
  border:1px solid rgba(18,22,30,0.05);
  box-shadow:0 12px 40px rgba(11,17,30,0.06);
  border-radius:10px;
}

.tnt-office-card a.btn{ border-radius:0; font-weight:700; }

/* map wrap */
.map-wrap{ width:100%; overflow:hidden; }

/* office hours */
.tnt-hours li{ margin-bottom:8px; color:#333; font-weight:600; }
.tnt-hours strong{ color:var(--primary-red); }

/* team cards */
.team-card{
  background:#fff;
  border:1px solid rgba(18,22,30,0.04);
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(11,17,30,0.06);
  transition: transform .18s ease;
}
.team-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 44px rgba(11,17,30,0.12); }

.team-avatar{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* FAQ */
#contact-faq .accordion-button{ font-weight:600; }

/* final CTA */
.bg-dark{ background: linear-gradient(90deg, #0b1220, #07101c) !important; }
.bg-dark .btn-lux-sm{ background: linear-gradient(90deg, var(--primary-red), #b31313); }

/* small utilities */
.btn-outline-secondary{ border-radius:6px; }





/* --------- Variables (define once) --------- */
:root{
  --primary-red: #d71c1c;
  --secondary-blue: #1169ad;
  --site-dark: #0b1220;
  --muted: #6b7280;
  --card-shadow: 0 12px 40px rgba(11,17,30,0.06);
}

/* --------- Utilities / Base overrides --------- */
/* Ensure fonts are applied (if Google fonts loaded) */
body, .tnt-contact-intro, .tnt-contact-main, .tnt-contact-card,
.tnt-office-card, .team-card, .project-card {
  font-family: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Make our buttons visually consistent and high-specificity */
.btn-lux-sm,
.tnt-submit-btn,
.tnt-cta-btn,
.tnt-contact-card .btn-lux-sm,
.tnt-office-card .btn-lux-sm,
.team-card .btn-lux-sm {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff !important;
  border:none !important;
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  border-radius:0 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* outline secondary button look */
.btn-outline-secondary, .team-card .btn-outline-secondary {
  background:transparent !important;
  border:1px solid rgba(18,22,30,0.06) !important;
  color:#333 !important;
  padding:9px 14px;
  border-radius:6px;
  font-weight:600;
}

/* --------- Contact Intro (Hero under breadcrumb) --------- */
.tnt-contact-intro{
  background: #fff;
  padding-top: 18px;
  padding-bottom: 18px;
  text-align:center;
}
.tnt-contact-intro .tnt-sec-title{
  font-family: 'Playfair Display', serif;
  font-size:32px;
  margin-bottom:6px;
}
.tnt-contact-intro .tnt-sec-para{ color: var(--muted); }

/* --------- Contact main layout & cards --------- */
.tnt-contact-main .tnt-contact-card,
.tnt-contact-main .tnt-office-card,
.tnt-contact-main .team-card {
  background:#fff;
  border:1px solid rgba(18,22,30,0.05);
  box-shadow: var(--card-shadow);
  border-radius:10px;
}

/* specific card padding */
.tnt-contact-card, .tnt-office-card { padding:20px; }

/* Form controls */
.tnt-contact-card .form-control,
.tnt-contact-card .form-select,
#pageContactForm .form-control,
#pageContactForm .form-select {
  border-radius:6px !important;
  border:1px solid rgba(18,22,30,0.06) !important;
  background: #fff !important;
  color:#111 !important;
  padding:8px 10px !important;
  font-size:14px;
}

/* invalid feedback visibility */
.is-invalid { border-color: #dc3545 !important; box-shadow: none !important; }

/* success message style */
#pageContactSuccess {
  background: linear-gradient(180deg, rgba(17,105,173,0.04), rgba(215,28,28,0.02));
  border:1px solid rgba(17,105,173,0.06);
  border-radius:8px;
  padding:14px;
  color:#0b1220;
}

/* --------- Map wrap --------- */
.map-wrap{ width:100%; overflow:hidden; height:360px; }

/* --------- Office hours & list styles --------- */
.tnt-hours li{ margin-bottom:8px; color:#333; font-weight:600; }
.tnt-hours strong{ color:var(--primary-red); }

/* --------- Team cards --------- */
.team-card{
  padding:14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.team-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 44px rgba(11,17,30,0.12); }

.team-avatar{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* small buttons inside team card */
.team-card .btn { padding:8px 10px; font-size:13px; }

/* --------- FAQ / Accordion --------- */
#contact-faq .accordion-button{ font-weight:600; }

/* --------- Final CTA / footer CTA override --------- */
.bg-dark{ background: linear-gradient(90deg, var(--site-dark), #07101c) !important; color:#fff; }
.bg-dark .btn-lux-sm{ background: linear-gradient(90deg, var(--primary-red), #b31313); color:#fff !important; }

/* --------- Accessibility and anchor smoothness (reinforce) --------- */
a[href^="#"] { scroll-behavior: smooth; }

/* --------- Responsive tweaks --------- */
@media (max-width:991px){
  .map-wrap{ height:300px; }
  .team-avatar{ width:64px; height:64px; }
  .tnt-contact-card, .tnt-office-card { padding:14px; }
  .tnt-contact-intro .tnt-sec-title{ font-size:26px; }
}

/* --------- High specificity fixes (in case of Bootstrap overrides) --------- */
/* Force contact buttons to show as designed even if Bootstrap sets .btn default */
.tnt-contact-main .tnt-contact-card .btn-lux-sm,
.tnt-contact-main .tnt-office-card .btn-lux-sm,
.tnt-contact-main .team-card .btn-lux-sm {
  background: linear-gradient(90deg, var(--primary-red), #b31313) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Ensure links inside cards use secondary blue */
.tnt-contact-main a, .tnt-contact-main a:visited { color: var(--secondary-blue); text-decoration: none; }
.tnt-contact-main a:hover { text-decoration: underline; }

/* If you still see weird spacing - force box-sizing */
.tnt-contact-main *, .tnt-contact-main *::before, .tnt-contact-main *::after { box-sizing: border-box; }

/* --------- end of contact CSS --------- */

    /* SITE FOOTER - Top N Town */
.tnt-site-footer{
  background: linear-gradient(180deg, #0b1220 0%, #07101c 100%);
  color: rgba(255,255,255,0.92);
  font-family: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin-top: 40px;
}

/* Container spacing */
.tnt-site-footer .container{ position: relative; z-index: 2; }

/* Headings */
.tnt-site-footer .footer-heading{
  font-family: 'Playfair Display', serif;
  color: #fff;
  margin-bottom: 12px;
  font-size: 18px;
}

/* About text */
.tnt-site-footer .footer-about{ color: rgba(255,255,255,0.78); }

/* Links */
.tnt-site-footer a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}
.tnt-site-footer a:hover{ color: var(--primary-red); text-decoration: none; }

/* Footer lists */
.footer-links li{ margin-bottom:8px; }
.footer-links li a{ color: rgba(255,255,255,0.9); }

/* Social icons */
.footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:6px;
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size:16px;
  text-decoration:none;
  transition: all .18s ease;
}
.footer-social:hover{
  transform: translateY(-3px);
  background: linear-gradient(90deg, var(--primary-red), var(--secondary-blue));
  color: #fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* Contact/address */
.footer-contact a{ color: rgba(255,255,255,0.92); font-weight:600; }

/* Newsletter */
.footer-newsletter{
  margin-top:6px;
  max-width:480px;
}
.footer-newsletter .form-control{
  border-radius:4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
.footer-newsletter .form-control::placeholder{ color: rgba(255,255,255,0.6); }
.footer-newsletter-btn{
  background: linear-gradient(90deg, var(--primary-red), #b31313);
  color:#fff;
  border: none;
  padding: 7px 12px;
  font-weight:700;
  text-transform:uppercase;
  border-radius:0;
}

/* Divider */
.footer-divider{
  border-color: rgba(255,255,255,0.04);
  margin: 28px 0;
}

/* Legal links */
.footer-legal li{ margin-left:12px; }
.footer-legal a{ color: rgba(255,255,255,0.8); }

/* Responsive */
@media (max-width:991px){
  .tnt-site-footer .footer-newsletter{ width:100%; }
  .footer-legal{ text-align:left; padding-left:0; margin-top:10px; }
}





    /* FIXED FLOATING BUTTONS */
.tnt-fixed-buttons{
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1200;
}

/* Base button */
.tnt-fab{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:0; /* sharp edges */
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
  transition: all .25s ease;
  border: none;
}

/* Call button */
.tnt-call{
  background: linear-gradient(90deg, #d71c1c, #b31313);
}

/* WhatsApp */
.tnt-whatsapp{
  background: #25D366;
}

/* Scroll to top */
.tnt-top{
  background: #1169ad;
  display: none; /* hidden until scrolled */
}

/* Hover effects */
.tnt-fab:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.35);
}

/* Mobile adjust */
@media (max-width:767px){
  .tnt-fixed-buttons{
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }
  .tnt-fab{
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

footer i:hover {
    color: #fff;
}
.d-block{
    display: block;
}
.display-inline{
    display: inline-block;
}

.navbar-toggler{
    border:none;
}

 /* Remove Bootstrap's default hamburger background */
.navbar-toggler-icon.custom-nav-icon {
    background: none !important;
    display: inline-block;
    width: 32px;
    height: 23px;
    position: relative;
}

/* All three lines */
.navbar-toggler-icon.custom-nav-icon::before,
.navbar-toggler-icon.custom-nav-icon::after,
.navbar-toggler-icon.custom-nav-icon i {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px;
    background: #fff; /* your btn-close-white theme */
    transition: all 0.28s ease;
}

.scrolled .navbar-toggler-icon.custom-nav-icon::before,
.scrolled .navbar-toggler-icon.custom-nav-icon::after,
.scrolled .navbar-toggler-icon.custom-nav-icon i {
   
    background: #444; /* your btn-close-white theme */
}


/* create middle line */
.navbar-toggler-icon.custom-nav-icon i {
    top: 50%;
    transform: translateY(-50%);
}

/* top line */
.navbar-toggler-icon.custom-nav-icon::before {
    top: 0;
}

/* bottom line */
.navbar-toggler-icon.custom-nav-icon::after {
    bottom: 0;
}

/* ANIMATION TO X when expanded */
button[aria-expanded="true"] .navbar-toggler-icon.custom-nav-icon::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

button[aria-expanded="true"] .navbar-toggler-icon.custom-nav-icon::after {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

button[aria-expanded="true"] .navbar-toggler-icon.custom-nav-icon i {
    opacity: 0;
    transform: scaleX(0.2);
}


/* ---------- tnt drawer (self-contained) ---------- */
.tnt-menu-btn{background:transparent;border:0;padding:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2001}
.tnt-menu-icon{display:inline-block;width:28px;height:20px;position:relative;right: -30px;}
.tnt-line{position:absolute;left:0;right:0;height:2px;background:#111;border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.tnt-line:nth-child(1){top:0} .tnt-line:nth-child(2){top:9px} .tnt-line:nth-child(3){bottom:0}

/* wrap & backdrop */
.tnt-side-wrap{display:block} /* always present to avoid layout jump */
.tnt-side-backdrop{position:fixed;inset:0;background:rgba(6,6,6,0.48);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:2000}
.tnt-side-menu{position:fixed;top:0;right:0;height:100vh;width:min(420px,92%);max-width:420px;background:linear-gradient(180deg,#fff 0%,#f8f7f6 100%);box-shadow:-24px 0 50px rgba(12,12,12,0.32);transform:translateX(110%);transition:transform .36s cubic-bezier(.22,.9,.32,1);z-index:2001;display:flex;flex-direction:column;padding:22px;border-left:1px solid rgba(0,0,0,0.04);overflow:hidden}

/* open state */
.tnt-side-wrap.tnt-open .tnt-side-backdrop{opacity:1;pointer-events:auto}
.tnt-side-wrap.tnt-open .tnt-side-menu{transform:translateX(0)}

/* header */
.tnt-side-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tnt-side-brand img{height:38px;display:block}
.tnt-side-close{background:transparent;border:0;font-size:30px;line-height:1;cursor:pointer;color:#111;padding:6px}

/* nav */
.tnt-side-nav{overflow:auto;flex:none;padding-right:6px}
.tnt-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tnt-side-link,.tnt-side-sublink{display:block;padding:12px 10px;font-weight:600;text-decoration:none;color:#111;border-radius:8px;transition:background .18s ease,transform .12s ease}
.tnt-side-link:hover,.tnt-side-sublink:hover{background:rgba(0,0,0,0.04);transform:translateX(3px)}
.tnt-side-item--has-children .tnt-side-acc-btn{color:#000;width:100%;text-align:left;padding:12px 10px;background:transparent;border:0;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-radius:8px}
.tnt-side-sublist{list-style:none;padding-left:12px;margin-top:6px;display:flex;flex-direction:column;gap:6px}

/* CTA/footer */
.tnt-side-cta{padding:18px 0;border-top:1px dashed rgba(0,0,0,0.04);margin-top:12px}
.tnt-cta-call{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--primary-red);color:#fff;font-weight:800;border-radius:8px;text-decoration:none;box-shadow:0 6px 18px rgba(199,27,27,0.14)}
.tnt-side-footer{padding-top:10px;font-size:13px;color:#666}

/* Prevent background scroll when menu open */
body.tnt-no-scroll{overflow:hidden}

/* ensure desktop shows bootstrap menu */
@media(min-width:992px){.tnt-menu-btn{display:none!important}.tnt-side-backdrop,.tnt-side-menu{display:none!important}.collapse.navbar-collapse{display:flex!important}}
/* hide bootstrap collapsed nav on mobile to avoid double menus */
@media(max-width:991.98px){#mainNav.collapse{display:none!important}}


.transparent .tnt-line {
  
    background: #fff;
    
    
}