:root {
            --banner-height: 100vh; /* Adjust height: 50vh, 400px, etc. */
            --panels: 15;         /* Number of slices */
        }

 body{
font-family: 'Montserrat', sans-serif !important;
font-weight:700;
}

/* ===== Navbar fix: keep menu on one line + show dropdown caret ===== */
.tp-header-10-menu > nav > ul { white-space: nowrap; }
.tp-header-10-menu > nav > ul > li { margin: 0 13px; }
.tp-header-10-menu > nav > ul > li > a { font-size: 15px; }

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .tp-header-10-menu { margin-left: -20px; }
  .tp-header-10-menu > nav > ul > li { margin: 0 8px; }
  .tp-header-10-menu > nav > ul > li > a { font-size: 14px; }
}

/* Re-enable the dropdown arrow that this header style hides by default */
.tp-header-10-menu.tp-header-dropdown nav > ul > li.has-dropdown > a::after {
  content: "\f107";
  font-family: var(--tp-ff-fontawesome);
  font-weight: 600;
  font-size: 12px;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.tp-header-10-menu.tp-header-dropdown nav > ul > li.has-dropdown:hover > a::after {
  transform: rotate(-180deg);
}

/* Request For Quote button — single line, vertically centred, no extra top/bottom bulk */
.tp-header-10-box { align-items: center; }
.tp-header-11-btn-box .tp-btn-black-radius {
  white-space: nowrap;
  padding: 15px 26px;
  line-height: 1;
  align-self: center;
  margin: 6px 0;
}
.tp-header-11-btn-box .tp-btn-black-radius span span { white-space: nowrap; }

/* Make inner-page navbar identical to the home page: they lack the .tp-header-10-wrapper
   floating white pill, so recreate the same pill + top spacing on their header container. */
.tp-header-11-style:not(:has(.tp-header-10-wrapper)) > .container-1630 {
  margin-top: 30px;
  padding: 1px 30px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 30px 0 rgba(33, 33, 45, 0.03);
  backdrop-filter: blur(10px);
}

/* Dropdown submenu — readable on the white panel, long names wrap inside the box */
.tp-header-dropdown nav ul li .tp-submenu { width: 320px; }
.tp-header-dropdown nav ul li .tp-submenu li a { white-space: normal; line-height: 1.35; }
.dropdown-white-bg nav ul li .tp-submenu li a { color: #3a3a3f; }
.dropdown-white-bg nav ul li .tp-submenu li:hover > a { background-color: #512729; color: #fff; }

/* Consistent breadcrumb / page-banner height across pages */
.tp-page-banner { height: 340px; }

/* ===== Mobile responsive polish ===== */
@media only screen and (max-width: 1199px) {
  .hero-title { font-size: 38px; }
  .hero-slide { max-width: 92%; }
}
@media only screen and (max-width: 767px) {
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: 14px; }
  .hero-overlay::before { background: linear-gradient(90deg, rgba(15,10,25,0.8) 0%, rgba(15,10,25,0.55) 100%); }
  .tp-page-banner { height: 240px; }
  .logo-content span:first-child { font-size: 20px; }
  .logo-content span:nth-child(2) { font-size: 13px; }
}

        /* Responsive Wrapper */
        .viewport {
        
            width: 100%; /* Full Width */
            height: var(--banner-height);
            position: relative;
            display: inline-block;
        }

        .board {
            width: 100%;
            height: 100%;
            display: flex;
            transform-style: preserve-3d;
            transform: rotateX(5deg);
            transition: transform 0.5s ease-out;
        }

        /* Slices */
        .panel {
            flex: 1;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .panel-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            background-size: cover; /* Ensures image covers the panel */
            background-repeat: no-repeat;
               /* border-right: 1px solid rgba(255,255,255,0.03);*/
        }

        /* Front & Back flip logic */
        .front { transform: rotateY(0deg); width: 100%;}
        .back { transform: rotateY(180deg); width: 100%;}

        /* LED Grid Overlay for Realism */
        .panel-face::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
        /*  background: linear-gradient(rgba(0,0,0,0.15) 50%, transparent 50%); 
           /*  background-size: 100% 3px;*/
            pointer-events: none;
        }
		
		.it-about-shape-2 {
  z-index: 0;
    opacity: 0.2;
}
.it-about-shape-1 {
  opacity: 0.2;
}
.it-about-thumb img {
  width: 100%;
}
.it-step-thumb img {
  max-width: 100%;
}
.creative-brand-item{
	max-width:150px;
}
        /* UI Controls */
        .controls {
            position: absolute;
            bottom: 30px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            z-index: 100;
        }

        .btn {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 12px 30px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 11px;
            backdrop-filter: blur(10px);
            transition: 0.3s;
        }

        .btn:hover {
            background: #fff;
            color: #000;
            box-shadow: 0 0 20px rgba(255,255,255,0.4);
        }

        .indicator {
            color: rgba(255,255,255,0.5);
            font-size: 14px;
            font-weight: 300;
        }

/* ===== Hero slider text + CTA overlay (images stay blank until banners are added) ===== */
/*.viewport { background: linear-gradient(120deg, #2c1d3a 0%, #512729 55%, #21212d 100%); }*/
.hero-overlay {
  position: absolute; inset: 0; z-index: 50;
  pointer-events: none;
}
.hero-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15,10,25,0.72) 0%, rgba(15,10,25,0.35) 45%, rgba(15,10,25,0) 78%);
}
.hero-overlay .container { position: relative; height: 100%; }
/* all 5 slides overlap in the SAME spot so each appears in an identical position */
.hero-slide {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  width: 100%;
  max-width: 780px;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-title {
  color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 58px; line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 22px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-sub {
  color: rgba(255,255,255,0.92); font-size: 18px; font-weight: 600;
  margin: 0 0 26px; letter-spacing: .3px;
}
.hero-cta {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: #21212d;
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 16px 34px; border-radius: 40px;
  border: 1px solid #fff; transition: all .3s ease;
}
.hero-cta i { font-style: normal; transition: transform .3s ease; }
.hero-cta:hover { background: #512729; color: #fff; border-color: #512729; }
.hero-cta:hover i { transform: translateX(5px); }
@media only screen and (max-width: 991px) {
  .hero-title { font-size: 40px; }
}
@media only screen and (max-width: 575px) {
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 15px; }
  .hero-cta { padding: 13px 26px; font-size: 13px; }
}
		.header-sticky.sticky-white-bg {
  background: rgba(255, 255, 255, 0.9);
  top: 0px;
}
.it-hero-area{
	Width:100%;
}
.logo-img{
	width:21%;
	display:inline-block;
	top: -8px;
	margin-right:20px;
	position: relative;
}
.logo-img img{ max-width:100%; height:auto; }
.tp-header-logo{
}
.logo-content{
width: 73%;
  display: inline-block;
  top: 14px;
  position: relative;
}
.logo-content span:first-child{
	width:82%;
	display:inline-block;
	font-size: 27px;
	font-weight: 900;
	font-family: 'Montserrat', sans-serif;
	text-transform:uppercase;
	color:#232728;
}
.logo-content span:nth-child(2){
		width:82%;
		display:inline-block;
		color:#512729;
		  text-transform:uppercase;
		  font-family: 'Intra', sans-serif;
		    font-weight:normal;
		text-align: center;
		font-weight: 900;
		font-size: 18px;
}
.logo-content span:nth-child(3){
		width:82%;
		display:inline-block;
	  color:#2c1d3a;
	   font-weight:normal;
		  text-transform:uppercase;
		  font-family: 'Montserrat', sans-serif;
}

		.fixed-top,
.topbar {
  width:100%;
  display:inline-block;
  position:relative
}
.topbar-left {
  width:50%;
  display:inline-block;
  position:relative;
  top:-5px
}
.topbar-left small {
  display:inline-block
}
.topbar-social a {
  color:#fff;
  margin-left:15px;
  font-size:15px;
  transition:color .3s;
  float:right;
  top:6px;
  position:relative
}
.topbar-social a:hover {
  color:#007bff
}
.topbar-social {
  width:49%;
  display:inline-block
}

		.topbar {
background: linear-gradient(170deg,#512729,#512729);
  color:#fbfbfb;
  padding:0;
  z-index:1050 !important;
  font-size:14px;
position: relative !important;
}
.topbar i {
  margin-right:8px;
  font-size:1.1rem
}
.topbar small+small {
  margin-left:2rem
}


.it-faq-wrap .accordion-buttons span {
  font-size: 25px;
  line-height: 36px;
}
.tp-section-title-platform {
  font-size: 35px;
}
.tp-section-title-platform.fs-84 {
  font-size: 40px;
}
.it-faq-wrap .accordion-items:not(:last-child) {
  margin-bottom: 25px;
}
.tp-section-title-platform.fs-200 {
  font-size: 35px;
  font-style: italic;
}

.it-feature-ptb {
  padding-top: 60px;
}

.paste-bg-2 {
  background-color: #272727ed;
}
.white-filter {
  /* Step 1: Turn everything black (except transparent areas) */
  /* Step 2: Invert the black to white */
  filter: brightness(0) invert(1);
}
.crp-footer-logo img{
	background: #ffffff47;
}
.opacity-low{
	opacity:0.2;
}
.it-feature-title {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 30px;
  margin-top: 25px;
}
.it-feature-icon img {
  min-width: 64px;
}
.it-feature-icon.color-1::before {
  background-color: #FFE9FD;
}
.it-feature-icon::before {
  height: 100px;
  width: 100px;
}
.it-feature-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
margin-bottom: 30px;
}
.it-about-info-wrap {
  top: -6%;
  left: 100%;
  z-index: 2;
}
.it-feature-item {
  padding: 30px;
}
.it-brand-style .tp-brand-style-2 .tp-brand-title {
  color: #fff;
}
.it-brand-style .tp-brand-title{
	 color: #fff;
}
.it-project-arrow button:hover {
  background-color: #512729;
}
.it-project-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #512729;
}
.tp-btn-black-radius.btn-blue-bg {
  background-color: #512729;
}
.it-testimonial-arrow button:hover {
  background-color: #512729;
}
.it-footer-style.crp-footer-bg {
  background-color: #232728;
}
.it-faq-wrap .accordion-body p {
  font-size: 15px;
}
.it-faq-wrap .accordion-body {
  padding: 5px 5px 0 0;
}
.it-faq-wrap .accordion-body {
  padding: 15px 15px 0 0;
}
.creative-brand-top-text {
  margin-bottom: 40px;
}
.it-project-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
}
.it-project-thumb {
  border-radius: 16px;
  height: 270px;
}
.it-project-content {
  padding: 30px 30px 10px 30px;
}
@media (max-width: 767px) {
	.tp-header-logo img {
  width: 90px !important;
  padding: 0px 0;
}
 .tp-header-logo {
    padding: 0px 0;
  }
	.topbar small+small{
		display:none;
	}
	.topbar-social{
		display:none !important;
	}
  .topbar {
    flex-direction:column;
    text-align:center
  }
  .topbar small+small {
    margin-left:0;
    margin-top:6px
  }
  .logo-content{
	  display:none;
  }
  .topbar-left {
  width: 100%;
}
.viewport {
  width: 100%;
  height: 400px;
}
}


.ht-why-light {
    background-color: #fdece9;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #333;
}

.ht-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 5;
}

/* Background Shapes */
.ht-why__shape {
    position: absolute;
    background: #f8dbd6;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
}
.shape-1 { width: 500px; height: 500px; top: -100px; right: -100px; opacity: 0.6; }
.shape-2 { width: 400px; height: 400px; bottom: -100px; left: -100px; opacity: 0.6; }

/* Header Section */
.ht-why__head {
    text-align: center;
    margin-bottom: 70px;
}
.ht-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.ht-eyebrow__line { width: 40px; height: 2px; background: #ed2a2f; }
.ht-eyebrow__text { font-size: 13px; letter-spacing: 5px; color: #ed2a2f; font-weight: 800; }

/* Title Styles */
.ht-why__title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.text-outline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(45px, 8vw, 90px);
    -webkit-text-stroke: 1.5px #1a1a1a;
    color: transparent;
    text-transform: uppercase;
}
.text-solid {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(45px, 8vw, 90px);
    color: #ed2a2f;
    text-transform: uppercase;
}
.ht-why__subtitle {
    max-width: 700px;
    margin: 25px auto 0;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}

/* Timeline Grid */
.ht-why__timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Card Styling - Transparent/Glass effect */
.ht-why__step {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    
    /* Animation Initial States */
    opacity: 0;
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Side Reveal Directions */
.reveal-left { transform: translateX(-80px); }
.reveal-right { transform: translateX(80px); }

/* Trigger State */
.ht-why__step.active {
    opacity: 1;
    transform: translateX(0);
}

/* Hover Effects */
.ht-why__step:hover {
    transform: translateY(-10px) !important;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(237, 42, 47, 0.1);
    border-color: rgba(237, 42, 47, 0.2);
}

.ht-why__step-content { display: flex; gap: 25px; align-items: flex-start; }

.ht-why__step-icon {
    width: 70px; height: 70px;
    background: #fdece9;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: 0.4s ease;
}
.ht-why__step-icon img {
    width: 32px; height: 32px;
    filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5);
}

.ht-why__step:hover .ht-why__step-icon { background: #ed2a2f; transform: rotate(10deg); }
.ht-why__step:hover .ht-why__step-icon img { filter: brightness(0) invert(1); }

.ht-why__step-text h3 { font-size: 20px; margin: 0 0 10px; font-weight: 700; color: #1a1a1a; }
.ht-why__step-text p { font-size: 14.5px; line-height: 1.7; color: #555; margin: 0; }

.creative-brand-active .swiper-wrapper {
    align-items: center;
}

.creative-brand-active .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.creative-brand-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px; /* இந்த value குறைச்சா gap குறையும் */
}

.creative-brand-item img {
    max-width: 150px;
    width: 100%;
    object-fit: contain;
	 display: block;  
}

/* Responsive */
@media (max-width: 992px) {
    .ht-why__timeline { grid-template-columns: 1fr; }
    .reveal-left, .reveal-right { transform: translateY(50px); } /* Side-ku bathila mobile-la mela varum */
}

.tp-header-10-menu > nav > ul{
	margin-left:150px;
}

.tp-header-10-menu nav ul li a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    font-size: 16px !important;
}
/* ─── HEADER FULL WIDTH + STICKY (site-wide, matches index.php) ───
   Theme main.js adds CLASS "header-sticky" on scroll to #header-sticky.
   Some pages also add "header-scrolled" / "sticky". Cover ALL of them.
   ─────────────────────────────────────────────────────────────── */
#header-sticky {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    top: 0 !important;
    /* Below topbar (1050) while page is at top */
    z-index: 999 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Transparent only when NOT stuck — do NOT use bare transparent !important always */
    background: transparent;
    box-shadow: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header-sticky .container,
#header-sticky .container-1630 {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
#header-sticky .container-1630 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#header-sticky .tp-header-10-wrapper {
    padding-left: 0 !important;
    margin-left: 0 !important;
    transition: margin-top 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#header-sticky .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#header-sticky .col-xl-4,
#header-sticky .col-lg-4,
#header-sticky .col-md-6,
#header-sticky .col-5 {
    padding-left: 0 !important;
}

.tp-header-logo {
    padding-left: 50px !important;
    margin-left: 0 !important;
}

/* ===== STUCK / SCROLLED STATE =====
   main.js → class "header-sticky"
   theme variants → "sticky"
   our pages → "header-scrolled"
*/
#header-sticky.header-sticky,
#header-sticky.sticky,
#header-sticky.header-scrolled {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important; /* above content when stuck (topbar has scrolled away) */
    animation: none !important; /* avoid double slide animation glitches on inner pages */
}

/* When stuck: solid outer bar is white; collapse the floating pill (same as main.css theme) */
#header-sticky.header-sticky .tp-header-10-wrapper,
#header-sticky.sticky .tp-header-10-wrapper,
#header-sticky.header-scrolled .tp-header-10-wrapper {
    margin-top: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#header-sticky.header-sticky .tp-header-10-box,
#header-sticky.sticky .tp-header-10-box,
#header-sticky.header-scrolled .tp-header-10-box {
    background: transparent !important;
}

/* Override main.css dark sticky default when white sticky is intended */
#header-sticky.header-sticky.sticky-white-bg,
#header-sticky.sticky.sticky-white-bg,
#header-sticky.header-scrolled.sticky-white-bg {
    background: #ffffff !important;
}

/* Topbar stays above header at page top */
.topbar {
    position: relative !important;
    z-index: 1050 !important;
}

/* Request For Quote spacing */
.tp-header-11-btn-box {
    margin-left: 20px;
}
.tp-header-10-right {
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .topbar small + small { display: none; }
    .topbar-social { display: none !important; }
    .logo-content { display: none; }
    .topbar-left { width: 100%; }
    .tp-header-logo { padding-left: 15px !important; }
    .tp-header-11-btn-box { margin-left: 0; }
}


.it-project-item .tp-btn-black-radius {
    pointer-events: all !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
}

.it-project-item .tp-btn-black-radius:hover {
    opacity: 0.85;
}

.it-project-arrow {
    position: relative;
    z-index: 10;
}

.it-project-prev,
.it-project-next {
    cursor: pointer !important;
    pointer-events: all !important;
}

  /* ── SECTION WRAPPER ── */
  .sv-section {
    padding: 90px 0 100px;
    background: var(--cream);
    position: relative;
    overflow: hidden;
  }
 
  /* Decorative BG blobs */
  .sv-section::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(81,39,41,0.07) 0%, transparent 70%);
    top: -150px; right: -150px;
    pointer-events: none;
  }
  .sv-section::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(81,39,41,0.05) 0%, transparent 70%);
    bottom: -100px; left: -100px;
    pointer-events: none;
  }
 
  .sv-container {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
  }
 
  /* ── HEADER ── */
  .sv-head {
    text-align: center;
    margin-bottom: 60px;
  }
 
  .sv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    background: rgba(81,39,41,0.08);
    padding: 6px 20px 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(81,39,41,0.15);
  }
  .sv-eyebrow__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--maroon);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(81,39,41,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(81,39,41,0); }
  }
  .sv-eyebrow__text {
    font-size: 20px;
    letter-spacing: 4px;
    font-weight: 700;
    color: var(--maroon);
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
  }
 
  .sv-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .sv-title em {
    font-style: italic;
    color: var(--maroon);
  }
 
  .sv-subtitle {
    font-size: 18px;
    color: var(--text-mid);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 400;
  }
 
  /* ── TABS ── */
  .sv-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 50px;
    flex-wrap: wrap;
  }
 
  .sv-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    border: 1.5px solid rgba(81,39,41,0.2);
    background: transparent;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-mid);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
 
  .sv-tab:hover {
    color: black;
    border-color: var(--maroon);
    background: transparent;
  }
 
  .sv-tab .tab-count {
    background: rgba(81,39,41,0.1);
    color: var(--maroon);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
  }
 
 
  /* ── GRID ── */
  .sv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
 
  /* ── CARD — Image-first design ── */
  .sv-card {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    height: 380px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(30px);
    animation: cardIn 0.5s forwards;
    display: none;
  }
 
  .sv-card.visible { display: block; }
 
  @keyframes cardIn {
    to { opacity: 1; transform: translateY(0); }
  }
 
  .sv-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 28px 60px rgba(81,39,41,0.28);
  }
 
  /* Full-bleed image */
  .sv-card__img {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
 
  .sv-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
    display: block;
    filter: none;
  }
 
  .sv-card:hover .sv-card__img img {
    transform: scale(1.1);
    filter: brightness(0.7);
  }
 
  /* Always-visible gradient at bottom */
  .sv-card__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(20,8,9,0.80) 0%,
      rgba(20,8,9,0.10) 38%,
      transparent 58%
    );
    z-index: 1;
  }
 
  /* Category chip */
  .sv-card__cat {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--maroon);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 50px;
    z-index: 5;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  }
 
  /* Bottom text — always visible, slides up on hover */
  .sv-card__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 26px;
    z-index: 3;
    transform: translateY(0);
    transition: var(--transition);
  }
 
  .sv-card__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: margin var(--transition);
  }
 
  .sv-card__desc {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.65;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.45s ease, opacity 0.4s ease, margin 0.3s ease;
  }
 
  .sv-card:hover .sv-card__desc {
    max-height: 100px;
    opacity: 1;
    margin-top: 10px;
  }
 
  .sv-card:hover .sv-card__title {
    margin-bottom: 4px;
  }
 
  /* View More button */
  .sv-card__footer {
    margin-top: 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s 0.05s ease, opacity 0.35s 0.1s ease;
  }
 
  .sv-card:hover .sv-card__footer {
    max-height: 60px;
    opacity: 1;
  }
 
  .sv-card__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: white;
    color: var(--maroon);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 50px;
    transition: background 0.3s, gap 0.3s;
  }
  .sv-card__link:hover {
    background: var(--maroon);
    color: white;
    gap: 13px;
  }
 
  /* hide unused overlay btn */
  .sv-card__overlay { display: none; }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 991px) {
    .sv-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  }
  @media (max-width: 600px) {
    .sv-grid { grid-template-columns: 1fr; }
    .sv-tabs { gap: 8px; }
    .sv-tab { padding: 9px 16px; font-size: 11px; }
    .sv-section { padding: 60px 0 70px; }
  }
  
 /* ── SECTION ── */
  .wc-section {
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
	 background: #f5ede8 !important; 
  }
 
  /* BG decorative text */
  .wc-section__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(80px, 15vw, 180px);
    font-weight: 900;
    color: rgba(81,39,41,0.04);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    letter-spacing: 10px;
    text-transform: uppercase;
  }
 
  .wc-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
  }
 
  /* ── HEADER ── */
  .wc-head {
    text-align: center;
    margin-bottom: 70px;
  }
 
  .wc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    background: var(--maroon-light);
    padding: 6px 20px 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(81,39,41,0.15);
  }
  .wc-eyebrow__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--maroon);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(81,39,41,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(81,39,41,0); }
  }
  .wc-eyebrow__text {
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 700;
    color: (--tp-common-black-10);
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
  }
 
  .wc-title {   
    font-weight: 900;
    color: (--tp-common-black-10);
    margin-bottom: 16px;
	font-size: 44px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
    font-family: var(--tp-ff-platform);
  }
  .wc-title em { font-style: italic; color: var(--maroon); }
 
  .wc-subtitle {
    font-size: 15.5px;
    color: var(--text-mid);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 400;
	
  }
 
  /* ── LIST ── */
  .wc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
 
  /* Hover */
  .wc-item:hover {
    background: cream;
    box-shadow: 0 12px 40px rgba(81,39,41,0.1);
    border-color: transparent;
  }
 
  /* Maroon left border on hover */
  .wc-item::before {
    content: '';
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 4px;
    background: var(--maroon);
    border-radius: 4px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1);
  }
  .wc-item:hover::before { transform: scaleY(1); }
 
  /* ── NUMBER ── */
  .wc-num {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    perspective: 300px;
  }
 
  /* ── CONTENT ── */
  .wc-content {
    display: flex;
    align-items: flex-start;
    gap: 22px;
  }
 
  .wc-icon img {
    width: 30px; height: 30px;
    object-fit: contain;
    filter: none;
    transition: filter var(--transition);
  }
 
  .wc-item:hover .wc-icon img {
    filter: brightness(0) invert(1);
  }
 
  /* ── ANIMATION — clip-path wipe in ── */
  .wc-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0 36px;
    align-items: stretch;
    border-bottom: 1px solid rgba(81,39,41,0.1);
    padding: 36px 28px;
    border-radius: 16px;
    cursor: default;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.22,1,0.36,1),
      background 0.4s ease,
      box-shadow 0.4s ease;
  }
 
  .wc-item.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 
  /* Number flip — starts rotated, flips upright */
  .wc-num__text {
    font-family: 'Montserrat', sans-serif;
    font-size: 52px;
    font-weight: 900;
    color: rgba(81,39,41,0.15);
    line-height: 1;
    letter-spacing: -2px;
    display: inline-block;
    transform: rotateX(90deg);
    opacity: 0;
    transition:
      transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
      opacity 0.4s ease,
      color 0.4s ease;
  }
 
  .wc-item.in-view .wc-num__text {
    transform: rotateX(0deg);
    opacity: 1;
  }
 
  .wc-item:hover .wc-num__text {
    color: var(--maroon);
  }
 
  /* Icon pop in */
  .wc-icon {
    width: 75px; height: 75px;
    min-width: 75px;
    background: var(--maroon-light);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.5);
    opacity: 0;
    border: 2px solid rgba(81,39,41,0.12);
    transition:
      transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
      opacity 0.4s ease,
      background 0.4s ease,
      border-color 0.4s ease;
  }
 
  .wc-icon img {
    width: 42px; height: 42px;
    object-fit: contain;
    filter: none;
    transition: filter 0.4s ease;
}
 
  .wc-item.in-view .wc-icon {
    transform: scale(1);
    opacity: 1;
  }
 
  .wc-item:hover .wc-icon {
    background: #512729 !important;
    border-color: #512729 !important;
    transform: scale(1) rotate(8deg) !important;
}

.wc-item:hover .wc-icon img {
     filter: brightness(0) invert(1) !important;
     opacity: 1 !important;
}
  /* Text slide in */
  .wc-text h3,
  .wc-text p {
    transform: translateX(20px);
    opacity: 0;
    transition:
      transform 0.5s cubic-bezier(0.22,1,0.36,1),
      opacity 0.45s ease;
  }
 
  .wc-item.in-view .wc-text h3,
  .wc-item.in-view .wc-text p {
    transform: translateX(0);
    opacity: 1;
  }
 
  .wc-item.in-view .wc-text p {
    transition-delay: 0.07s;
  }
 
  .wc-text { flex: 1; }
 
  /* Title — Montserrat only */
  .wc-text h3 {
    
    font-size: 30px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.3;
    transition: color var(--transition);
  }
  .wc-item:hover .wc-text h3 { color: var(--maroon); }
 
  /* Content — clean readable sans, bigger size */
  .wc-text p {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 20px;
    color: var(--text-mid);
    line-height: 1.8;
    font-weight: 400;
  }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 600px) {
    .wc-item {
      grid-template-columns: 56px 1fr;
      gap: 0 18px;
      padding: 28px 16px;
    }
    .wc-num__text { font-size: 34px; }
    .wc-content { gap: 14px; }
    .wc-icon { width: 46px; height: 46px; min-width: 46px; }
    .wc-text h3 { font-size: 16px; }
    .wc-section { padding: 60px 0 70px; }
  }
  /* ── Marquee Track ── */
.marquee-track-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}

/* Fade edges — left & right */
.marquee-track-wrap::before,
.marquee-track-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee-track-wrap::before {
    left: 0;
    background: linear-gradient(to right, #272727, transparent);
}
.marquee-track-wrap::after {
    right: 0;
    background: linear-gradient(to left, #272727, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 10s linear infinite;
}

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}
.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-inner {
    display: flex;
    align-items: center;
    gap: 0;
}

/* ── Logo Cards ── */
.marquee-inner .creative-brand-item {
    width: 220px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    margin: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.marquee-inner .creative-brand-item img {
    max-width: 170px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: none;
    opacity: 1;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.marquee-inner .creative-brand-item:hover img {
    opacity: 1;
    filter: none;
}



@media (max-width: 767px) {
    .marquee-inner .creative-brand-item {
        width: 160px;
        height: 100px;
        padding: 0 20px;
    }
    .marquee-inner .creative-brand-item img {
        max-width: 120px;
        max-height: 70px;
    }
}

/* =========================================================
   SITEWIDE HEADER STICKY LOCK
   Loaded last via custom.css — wins over pg-*.css leftovers
   ========================================================= */
.topbar {
  background: linear-gradient(170deg, #512729, #512729) !important;
  color: #fbfbfb !important;
  z-index: 1050 !important;
  position: relative !important;
  width: 100% !important;
}

/* Resting header: never cover topbar, never force a white slab */
#header-sticky:not(.header-sticky):not(.sticky):not(.header-scrolled) {
  background: transparent !important;
  box-shadow: none !important;
  z-index: 999 !important;
}

/* Stuck header: solid white bar on EVERY page (index + inner) */
#header-sticky.header-sticky,
#header-sticky.sticky,
#header-sticky.header-scrolled {
  background: #ffffff !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12) !important;
  z-index: 9999 !important;
}

#header-sticky.header-sticky .tp-header-10-wrapper.mt-30,
#header-sticky.sticky .tp-header-10-wrapper.mt-30,
#header-sticky.header-scrolled .tp-header-10-wrapper.mt-30,
#header-sticky.header-sticky .tp-header-10-wrapper,
#header-sticky.sticky .tp-header-10-wrapper,
#header-sticky.header-scrolled .tp-header-10-wrapper {
  margin-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Quote button */
.tp-header-11-btn-box .tp-btn-black-radius {
  white-space: nowrap !important;
  padding: 15px 26px !important;
  line-height: 1 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
}
.tp-header-11-btn-box .tp-btn-black-radius span span {
  white-space: nowrap !important;
}

/* Menu font match index */
.tp-header-10-menu nav ul li a {
  font-family: 'Outfit', 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
}
.tp-header-10-menu > nav > ul {
  white-space: nowrap;
}


/* =========================================================
   Button arrow (Get A Quote / btn-accent) — always visible
   Theme expects 2 SVGs inside i>span; force icon circle + stroke
   ========================================================= */
.tp-btn-black-radius i {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  height: 38px !important;
  width: 38px !important;
  line-height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
}
.tp-btn-black-radius i span {
  position: relative !important;
  overflow: hidden !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tp-btn-black-radius i svg {
  display: block !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
}
.tp-btn-black-radius i svg path {
  stroke: #21212D !important;
}
.tp-btn-black-radius.btn-accent {
  background-color: #512729 !important;
  color: #fff !important;
  border-color: #512729 !important;
  gap: 10px;
}
.tp-btn-black-radius.btn-accent:hover {
  color: #fff !important;
}
.tp-btn-black-radius.btn-accent i {
  background-color: #ffffff !important;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */

/* Offcanvas wrapper mobile adjustments */
@media (max-width: 767px) {
  .tp-offcanvas-wrapper {
    padding: 30px 20px !important;
  }
  .tp-offcanvas-top {
    margin-bottom: 30px !important;
  }
  .tp-offcanvas-menu ul li > a {
    font-size: 16px !important;
    padding: 12px 0 !important;
  }
  .tp-offcanvas-menu .tp-submenu li a {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  .tp-menu-close {
    right: 0 !important;
    top: 10px !important;
    font-size: 14px !important;
  }
  .tp-offcanvas-contact ul li a {
    font-size: 13px !important;
  }
  .tp-offcanvas-title {
    font-size: 20px !important;
  }
  .tp-offcanvas-title.sm {
    font-size: 13px !important;
  }
}

/* Mobile header fixes */
@media only screen and (max-width: 767px) {
  body {
    padding-top: 0;
  }
  .tp-header-10-wrapper {
    padding: 8px 0;
  }
  .tp-header-logo {
    padding-left: 12px !important;
  }
  .logo-img {
    width: 40px !important;
    margin-right: 0 !important;
    top: 0 !important;
  }
  .tp-header-logo img {
    width: 40px !important;
  }
  .tp-header-10-offcanvas {
    margin-right: 8px;
  }
  .tp-header-bar button {
    width: 36px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .tp-header-bar button i {
    display: block;
    width: 100%;
    height: 3px;
    background: #232728;
    border-radius: 3px;
    transition: background 0.3s;
  }
  .tp-header-10-box {
    gap: 6px;
  }
  .tp-header-10-right {
    gap: 4px;
  }

  /* Hero section mobile */
  .hero-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  .hero-sub {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }
  .hero-slide {
    top: 62% !important;
    max-width: 95% !important;
  }
  .hero-cta {
    padding: 11px 20px !important;
    font-size: 11px !important;
    gap: 8px !important;
  }
  .controls {
    bottom: 16px !important;
    gap: 16px !important;
  }
  .controls .btn {
    padding: 8px 16px !important;
    font-size: 10px !important;
  }
  .viewport {
    height: 360px !important;
  }

  /* Services section mobile */
  .sv-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sv-card {
    height: 300px !important;
  }
  .sv-card__title {
    font-size: 16px !important;
  }
  .sv-card__body {
    padding: 18px 20px !important;
  }
  .sv-head {
    margin-bottom: 30px !important;
  }
  .sv-title {
    font-size: 24px !important;
  }
  .sv-tabs {
    gap: 6px !important;
  }
  .sv-tab {
    padding: 7px 12px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  /* Why Choose Us section mobile */
  .wc-item {
    grid-template-columns: 40px 1fr !important;
    gap: 0 12px !important;
    padding: 20px 14px !important;
  }
  .wc-num__text {
    font-size: 28px !important;
  }
  .wc-content {
    gap: 10px !important;
  }
  .wc-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  .wc-icon img {
    width: 20px !important;
    height: 20px !important;
  }
  .wc-text h3 {
    font-size: 14px !important;
  }
  .wc-text p {
    font-size: 13px !important;
  }
  .wc-title {
    font-size: 28px !important;
  }

  /* About section mobile */
  .it-about-title-box {
    text-align: center;
  }
  .it-about-title-box .tp-section-title-platform {
    font-size: 28px !important;
  }
  .it-about-thumb-inner {
    margin-bottom: 20px !important;
  }
  .it-about-info-wrap {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
  }
  .it-about-info-item {
    padding: 10px 18px !important;
  }
  .it-about-info-item i {
    font-size: 20px !important;
  }
  .it-about-info-item i span {
    font-size: 24px !important;
  }
  .it-about-info-item p {
    font-size: 12px !important;
  }

  /* Page banners mobile */
  .tp-page-banner {
    height: 200px !important;
  }
  .tp-page-banner-content h1 {
    font-size: 24px !important;
    letter-spacing: 2px !important;
  }
  .ht-breadcrumb {
    height: 220px !important;
  }
  .ht-breadcrumb__title {
    font-size: 24px !important;
  }

  /* Services page mobile */
  .ht-svc-card__img {
    height: 180px !important;
  }
  .ht-svc-card__body {
    padding: 18px !important;
  }
  .ht-svc-card__title {
    font-size: 16px !important;
  }

  /* Contact page mobile */
  .ht-info-card {
    padding: 24px 18px !important;
  }
  .ht-form-wrap {
    padding: 20px 16px !important;
  }
  .ht-map-wrap {
    min-height: 280px !important;
  }
  .ht-map-wrap iframe {
    min-height: 280px !important;
  }

  /* About page mobile */
  .ht-mv-card {
    padding: 30px 24px !important;
  }
  .ht-mv-card h3 {
    font-size: 20px !important;
  }
  .ht-stat-item .stat-num {
    font-size: 28px !important;
  }
  .ht-value-card {
    padding: 28px 20px !important;
  }

  /* Footer mobile */
  .crp-footer-widget {
    margin-bottom: 40px !important;
  }
  .crp-footer-widget-title {
    font-size: 16px !important;
    margin-bottom: 16px !important;
  }
  .crp-footer-widget-menu ul li a {
    font-size: 13px !important;
  }

  /* General spacing fixes */
  .pt-140 {
    padding-top: 60px !important;
  }
  .pb-90 {
    padding-bottom: 40px !important;
  }
  .pt-60 {
    padding-top: 40px !important;
  }
  .pb-60 {
    padding-bottom: 40px !important;
  }
  .ht-about-intro {
    padding: 50px 0 40px !important;
  }
  .ht-values-section {
    padding: 50px 0 !important;
  }
  .ht-cta {
    padding: 50px 0 !important;
  }
  .ht-cta h2 {
    font-size: 22px !important;
  }
  .ht-services-intro {
    padding: 50px 0 30px !important;
  }
  .ht-services-grid {
    padding: 30px 0 50px !important;
  }
  .ht-cta-band {
    padding: 50px 0 !important;
  }
  .ht-cta-strip {
    padding: 40px 0 !important;
  }
  .ht-contact-section {
    padding: 20px 0 50px !important;
  }
  .ht-info-strip {
    padding: 40px 0 10px !important;
  }
  .ht-sub-services {
    padding: 40px 0 !important;
  }
  .wc-section {
    padding: 50px 0 60px !important;
  }
  .sv-section {
    padding: 50px 0 60px !important;
  }
  .it-step-area {
    padding: 40px 0 !important;
  }
  .ht-about-intro h2 {
    font-size: 22px !important;
  }
  .ht-section-head h2 {
    font-size: 22px !important;
  }

  /* Section titles mobile */
  .tp-section-title-platform {
    font-size: 24px !important;
  }
  .tp-section-title-platform.fs-84 {
    font-size: 28px !important;
  }
  .tp-section-subtitle-platform {
    font-size: 12px !important;
  }

  /* Testimonial section mobile */
  .it-testimonial-area {
    padding: 50px 0 !important;
  }

  /* Step section mobile */
  .it-step-title-box {
    margin-bottom: 30px !important;
  }
  .it-step-accordion-wrap .accordion-buttons span {
    font-size: 18px !important;
  }

  /* Brand / marquee mobile */
  .marquee-inner .creative-brand-item {
    width: 130px !important;
    height: 80px !important;
    padding: 0 14px !important;
  }
  .marquee-inner .creative-brand-item img {
    max-width: 100px !important;
    max-height: 55px !important;
  }
}

/* Small phones */
@media only screen and (max-width: 400px) {
  .hero-title {
    font-size: 18px !important;
  }
  .hero-slide {
    top: 58% !important;
  }
  .viewport {
    height: 300px !important;
  }
  .tp-offcanvas-area {
    max-width: 92vw;
  }
  .logo-img {
    width: 32px !important;
  }
  .tp-header-logo img {
    width: 32px !important;
  }
}

/* Tablet fixes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-title {
    font-size: 34px !important;
  }
  .viewport {
    height: 450px !important;
  }
  .hero-slide {
    max-width: 90% !important;
  }
  .tp-page-banner {
    height: 260px !important;
  }
  .ht-breadcrumb {
    height: 260px !important;
  }
  .ht-breadcrumb__title {
    font-size: 36px !important;
  }
  .wc-title {
    font-size: 32px !important;
  }
  .tp-section-title-platform.fs-84 {
    font-size: 32px !important;
  }
}