/*
Theme Name:   impresome.com
Theme URI:    http://impresome.com
Description:  Transport & Logistics WordPress Theme. 
Author:       Impresome Team
Version:    1.0
License:    GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  impresome-com
Template:     impresome
*/

/* Optimized custom.css */
@charset "UTF-8";

/*-------------------- FONTS --------------------*/
/*@font-face {
  font-family: "MyFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}
*/
/*@font-face {
  font-family: "MyFont";
  src: url("/wp-content/themes/impresome-com/assets/fonts/font.woff2") format("woff2");
  font-display: swap;
}*/
/*@font-face {
  font-family: 'Caveat';
  src: url('/wp-content/themes/impresome-com/assets/Caveat-Regular.woff2') format('woff2');
  font-display: swap;
}*/

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial:wght@400;600&display=swap');

:root {
  --font-main: 'Oswald', sans-serif;
  --font-heading: 'Google Sans Flex', sans-serif;
  --font-accent: 'Questrial', cursive;

  /* Primary Brand Colors – now matching your new screenshots 100% */
  --main-color: #00c47f;          /* Vivid electric blue (your new main accent) */
  --main-color-light: #65ed63;    /* LIGHT Vivid electric blue (your new main accent) */
  --main-color-dark: #44a52f;     /* Brighter blue (hover, active) */
  --main-title: #122458;          /* Deep midnight navy (dark section bg) */
  --text-dark: #122458;             /* Deep navy for headings */
  --text-shadow:  2px 2px 12px rgba(0,0,0,0.3);
  --color-white: #FFFFFF;
  --accent-border: solid 4px #65ed63;
  --box-shadow-drop-down:0 6px 24px rgba(18,36,88,0.42);
  --card-shadow: 0 4px 10px rgba(18, 36, 88, 0.32);
  --main-dark-overlay-banners: linear-gradient(rgba(18, 36, 88, 0.75), rgba(18, 36, 88, 0.75));


  --deep-indigo: #0b3acd;           /* Same deep navy (used in dark areas) */
  
  --transparent-grey: #F8F8F8;      /* Clean light gray-white (main page bg) */
  --text-medium: #333333;           /* Dark gray for body text */
  --vine-red: #0260FF;              /* Keeps name, now bright blue accent */
  --link-blue: #0257E7;             /* Links = your electric blue */

  /* Paper form style – updated to match new clean look */
  --main-line-color: #CDDBCA;
  --main-line-color-full: #122458;
  --side-line-color: rgba(2, 87, 231, 0.6);
  --paper-color: rgba(248, 248, 248, 0.96);
  --line-thickness: 2.5px;
  --top-space: 1.2lh;
  --main-gradient: linear-gradient(to bottom, #122458, #122458);

  /* Neutrals & Warm Grays – replaced with cool, modern tones */
  
  --light-grey: #5474d3;            /* Soft cool gray */
  --border-light: #D7EA8F;          /* Your signature lime-green border */
  --bg-silver: #DFE7F3;            /* Very light blue-tinted white */

  /* Dark Tones – now matching your new dark navy */
  --nav-bg: #122458;                /* Navigation background */
  --black: #122458;                 /* Deepest tone */
  --near-black: #122458;            /* Dark screen bg */
  --thumbnail-border: #D7EA8F;      /* Lime-green accent border */

  /* Accents & Overlays – refreshed */
  --overlay-light: rgba(18, 36, 88, 0.05);
  --overlay-blur: rgba(248, 251, 255, 0.3);
  --tape-beige: rgba(215, 234, 143, 0.6);
  --glass-white: rgba(255, 255, 255, 0.8);

  /* Computer youtube – kept but updated to match new palette */
  --gray-shadow: rgba(18, 36, 88, 0.15);
  --dark-gradient: linear-gradient(to top, #122458 0%, #0260FF 50%, #0257E7 100%);
  
  --base-gradient: linear-gradient(to right, #122458, #E0F8E0);
  --bottom-bar: linear-gradient(to left, #E0E8E0 0%, #D7EA8F 40%, #F0F8FF 100%);

  /* Z-index & Typography – unchanged */
  --z-low: 10;
  --z-medium: 20;
  --z-high: 3450;
  --z-top: 100;
  --font-weight-t: 800;

  /* Titles style */
/* Your existing variables */

  --card-padding: 20px;

  /* ← NEW: consistent heading variables (add these) */
  --font-size-h1: clamp(2.4rem, 7.5vw, 5rem);   /* big & responsive */
  --line-height-h1: 1.05;                       /* or 1.1 if you want slightly more air */
  --letter-spacing-h1: -0.10em;                 /* very tight – luxury feel */
  --letter-spacing-og-img: 0.04em;              /* OG image style */
  --letter-spacing-thumb: 0em;              /* OG image style */
  --font-size-h2: clamp(1.4em, 3vw, 1.85em);
  --font-size-h3: clamp(1.2em, 2.5vw, 1.45em);
}
.container{
 max-width: 1140px !important;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--text-dark);
  background-color: var(--transparent-grey);
  line-height: 1.6;
}
/*related posts*/
/* Make the main section background grey */
#main,
#main .related-posts-section {
  background-color: var(--transparent-grey);
}

/* Make the area under the wave match */
.wave-divider2 {
  background-color: var(--transparent-grey);
}

/* Wave color itself (upper curve) */
.wave-divider2 .wave-path {
  fill: var(--deep-indigo); /* or whatever your top section color is */
}

/*---- Correcting here---*/
.entry-header{
  margin-top:60px;
  background-color: var(--transparent-grey);
}


@media (max-width: 768px) {
  .entry-header{
  margin-top:-20px;
}
}
 .entry-title, .entry-content, .widget-area{
    padding: 0 20px 0 20px;
}
}
/*-------------------- TYPOGRAPHY --------------------*/

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading);color:var(--main-title);margin-bottom: 1em;font-weight:var(--font-weight-t)}
h2 {font-size: var(--font-size-h2);letter-spacing: -1px;font-weight:var(--font-weight-t)}
h3 {font-size: var(--font-size-h3);letter-spacing: -1px;font-weight:var(--font-weight-t)}
h4 { font-size: 1.3em;font-weight:var(--font-weight-t)}
h5 { font-size: 1.1em;font-weight:var(--font-weight-t)}
h6 { font-size: 0.9em;font-weight:var(--font-weight-t)}

h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

p { margin-bottom: 1em; }
p.special {
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 0px;
  color:var(--text-medium);
}
/* Optional: Improve hyphenation behavior for German */
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3,
html[lang="de"] h4,
html[lang="de"] h5,
html[lang="de"] h6 {
  hyphens: auto;
}
/*-------------------- LINKS --------------------*/
a {
  color: var(--main-color);
  text-decoration: none;
}
a:hover {
  color: var(--main-color-dark);
  text-decoration: none;
}
a.copy-right {
  color: var(--color-white);
  text-decoration: none;
}
a.copy-right:hover {
  color: var(--main-color);
}
/*-------------------- ALIGNMENT CLASSES --------------------*/
.al-left   { text-align: left; }
.al-centr  { text-align: center; align-items: center; }
.al-right  { text-align: right; align-items: center; }

/*-------------------- BUTTONS --------------------*/
.BtnMainColorLight{
  background: var(--main-color-light);
  color: var(--main-title);
  border: solid 1px var(--main-color-light);
}
.BtnMainColorLight:hover {
  background: var(--main-title);
  border-color: var(--main-title);
  color:var(--color-white);
}
.BtnMainSize{
  font-size: 18px;
  font-weight: 600;
  border-radius: 20px;
  padding: 10px 45px;
  text-decoration: none;
  transition: background 0.3s ease, border 0.3s ease;
}

.btn {
  background: var(--main-color);
  color: var(--color-white);
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background 0.3s ease;
}
.btn:hover { background: var(--main-color-dark); }
.BtnSubmitTop {
  font-size: 18px;
  color: var(--main-title);
  background: var(--main-color-light);
  border-radius: 20px;
  border: solid 1px var(--main-color-light);
  padding: 10px 45px;
  margin: 0 10px;
  text-decoration: none;
  transition: background 0.3s ease, border 0.3s ease;
}
.BtnSubmitTop:hover {
  background: var(--main-title);
  border-color: var(--main-title);
  color:var(--color-white);
}

/*-------------------- LAYOUT HELPERS --------------------*/
.wrapper { padding: 8em 0 6em; }
img#logo {
  max-width: 240px;
  max-height: 75px;
}
#blue { color: var(--main-color); font-weight:var(--font-weight-t)}
#blue-light { color: var(--main-color-light); font-weight:var(--font-weight-t)}
/*-------------------- TITLE STYLES --------------------*/

#banner h1.responsive-tight,
h1.responsive-tight {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

#title-in h2 {
  font-size: 42px;
  line-height: 48px;
  font-family:var(--font-heading);
}
#title-in h3, #banner h3 {
  font-size: 16px;
  font-weight: 100;
}
#title-in h3 {
  letter-spacing: 12px;
}

/*-------------------- HEADER --------------------*/
#header {
  background: var(--transparent-grey);
  height: 6em;
  line-height: 4em;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: var(--z-top);
  border-bottom: var(--accent-border); 

}
#logo {
  height: inherit;
  left: 3em;
  line-height: inherit;
  padding-bottom: 10px;
}
/*-------------------- PHONE NUMBER --------------------*/
#phone-number {
  width: 100%;
  position: fixed;
  text-align: center;
  font-size: 1.2em;
  padding: 1px 0;
  color: var(--deep-indigo);
  background-color: var(--main-color);
  z-index: var(--z-medium);
  top:95px;
}

#phone-number .phone-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  align-items: center;
  color: white;
}

#phone-number a {
  color: var(--deep-indigo);
  border: 1px solid var(--deep-indigo);
  background: var(--main-color);
}
#phone-number a:hover {
  border: 1px solid var(--main-title);
  background: var(--main-title);
}
#phone-number a.button.special.custom:hover {
  border: 1px solid var(--main-title);
  background-color: transparent;
}

/*-------------------- NAVIGATION --------------------*/
.nav-links {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-links ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links ul li {
  position: relative;
  margin: 0 0 0 10px;
}

/* Main menu links */
.nav-links ul li > a {
  text-decoration: none;
  color: var(--main-title);
  transition: color 0.25s;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

/* Last item: remove separator */
.nav-links ul li:last-child > a {
  border-right: none;
}

.nav-links ul li > a:hover {
  background-color: var(--main-color-light);
}

.nav-links a.active {
  font-weight: bold;
  border-bottom: 2px solid var(--main-title);
}
/* Arrows */
.step_item i.fa-chevron-down {
    font-size: 20px !important; /* increase size */
}
.step_item::after {
    font-size: 20px !important; /* increase size */
}


/*-------------------- DROPDOWN MENU --------------------*/

.nav-links li.dropdown > a::after {
  content: "▾";
  font-size: 0.9em;
  margin-left: 4px;
  transition: transform 0.2s ease-in-out;
  color: var(--main-title);
}

/* Dropdown panel */
.nav-links li .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;

  background: var(--transparent-grey);
  border: 1px solid var(--main-title);
  border-radius: 10px;

  /* shadow like your select menu */
  box-shadow: var(--box-shadow-drop-down);
  padding: 6px 0;
  margin-top: 6px;
  z-index: var(--z-high);

  max-height: 260px; /* scroll enabled */
  overflow-y: auto;
}

/* Links inside dropdown */
.nav-links li .dropdown-menu li a {
  display: block;
  padding: 10px 14px;
  color: var(--text-dark);
  font-size: 14px;
  border-radius: 6px;
  white-space: nowrap;
}

/* hover style similar to .custom-option:hover */
.nav-links li .dropdown-menu li a:hover {
  background: var(--main-color-light);
  color: var(--main-title);
}

/* Show dropdown on hover */
.nav-links li.dropdown:hover > .dropdown-menu {
  display: block;
}

.nav-links li.dropdown:hover > a::after {
  transform: rotate(180deg);
}

/*-------------------- SUBMENU --------------------*/
.nav-links li.dropdown-submenu > a::after {
  content: "▸";
  float: right;
  font-size: 0.9em;
  margin-left: 6px;
}

.nav-links li.dropdown-submenu ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: var(--transparent-grey);
  border-radius: 10px;
  border: 1px solid var(--main-title);
  box-shadow: var(--box-shadow-drop-down);
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
}

.nav-links li.dropdown-submenu:hover > ul {
  display: block;
}
/*-------------------- BURGER MENU --------------------*/

.menu-toggle, .menu-icon {
  display: none;
}
.menu-icon {
  flex-direction: column;
  cursor: pointer;
  width: 32px;
  height: 26px;
  justify-content: space-between;
}
.menu-icon span {
  display: block;
  height: 5px;
  width: 100%;
  background: var(--main-title);
  border-radius: 3px;
  transition: 0.3s;
}
/*-------------------- RESPONSIVE --------------------*/
@media screen and (max-width: 1024px) {
  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    top: 6em;
    width: 100%;
    background: var(--transparent-grey);
    padding: 15px 0;
    flex-direction: column;
    z-index: var(--z-low);
  }

  .nav-links ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-links ul li {
    margin: 6px 0;
    width: 100%;
  }

  .nav-links ul li > a {
    width: 100%;
    border-right: none;
    padding: 12px;
  }

  .menu-icon {
    display: flex;
  }

  .menu-toggle:checked ~ .nav-links {
    display: flex;
  }

  /* Mobile dropdown behavior */
  .nav-links li.dropdown .dropdown-menu,
  .nav-links li.dropdown-submenu ul {
    position: static;
    box-shadow: none;
    border-radius: 0;
    border: none;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0;
  }
  .nav-links li.dropdown > a::after,
  .nav-links li.dropdown-submenu > a::after {
    float: right;
    transition: transform 0.2s;
  }
  .nav-links li.dropdown:focus-within > a::after,
  .nav-links li.dropdown-submenu:focus-within > a::after {
    transform: rotate(180deg);
  }
}

/*----------------------------  First Banner ---------------------------- */
/* ====================== UNIFIED BANNER – GREY GRADIENT + MAN + TITLE CARD ====================== */
#banner,
#bottom-banner {
  position: relative;
  margin-top: 50px;
  min-height: 700px;
  overflow: hidden;
  color: var(--color-white);
}
/* 1. Soft grey gradient background – same on ALL devices */
#banner::before,
#bottom-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #cccccc;
  background: linear-gradient(to bottom, #cccccc 0%, #efeff2 69%, #c8c8c8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#c8c8c8', GradientType=0);
  z-index: 1;
}
/* 2. Man image – desktop & tablet: right side | mobile: top center */
#banner::after,
#bottom-banner::after {
  content: "";
  position: absolute;
  background: url("../images/img/man-with-cartons.webp") no-repeat;
  background-size: auto 95%;
  z-index: 2;
}
/* All content above image layers */
#banner > *,
#bottom-banner > * {
  position: relative;
  z-index: 3;
}

/* ================================================================== */
/* RESPONSIVE ADJUSTMENTS – only overrides, no duplication */
/* ================================================================== */

/* Desktop & Tablet – man on the right */
@media (min-width: 769px) {
  #banner::after,
  #bottom-banner::after {
    top: 0; right: 0; bottom: 0;
    width: 68%;
    background-position: center right;
  }
}
/* Tablet – slightly smaller man */
@media (max-width: 1200px) and (min-width: 991px) {
  .form_block {
    margin-top: 10px;
  }
}

/* ================================================================== */
/* TABLET & MOBILE – MAN AT TOP (your exact values preserved)        */
/* ================================================================== */

/* Large tablets (713px – 990px) */
@media (max-width: 990px) and (min-width: 713px) {
  #banner,
  #bottom-banner { min-height: 650px; }
  #banner::after,
  #bottom-banner::after {
    top: -30px; left: -20px; right: 0;
    height: 450px;
    width: 100%;
    background-position: center top;
    background-size: auto 100%;
  }
}
/* Very narrow tablets / large phones (700px – 712px) */
@media (max-width: 712px) and (min-width: 700px) {
  #banner,
  #bottom-banner 
  { min-height: 650px; }

  #banner::after,
  #bottom-banner::after {
    top: -30px; left: -20px; right: 0;
    height: 450px;
    width: 100%;
    background-position: center top;
    background-size: auto 100%;
  }
}

/* Regular phones (413px – 699px) */
@media (max-width: 699px) and (min-width: 413px) {
  #banner,
  #bottom-banner 
  { min-height: 650px; }
  #banner::after,
  #bottom-banner::after {
    top: -30px; left: -20px; right: 0;
    height: 450px;
    width: 100%;
    background-position: center top;
    background-size: auto 100%;
  }
  .form_block
  { margin-top: 5px; }
}
/* Smallest phones (≤412px) */
@media (max-width: 412px) {
  #banner,
  #bottom-banner { min-height: 650px; }

  #banner::after,
  #bottom-banner::after {
    top: -30px; left: -20px; right: 0;
    height: 450px;
    width: 100%;
    background-position: center top;
    background-size: auto 100%;
  }

  .form_block
  { margin-top: 15px; }
}
/* ------------------About Section ------------------*/
#about {
background: var(--main-gradient);
padding: 50px 0;
color: white;
width: 100%;
display: block;
position: relative;
text-align: left;
margin-bottom:-1px;
}
.sp-heading {
font-size: 18px;
line-height: 15px;
letter-spacing: 8px;
font-weight: 200;
text-transform: uppercase;
color: var(--color-white);
}

#about h2,
#about h3,
#about h4 {
color: var(--color-white);
}
#about h4 {
font-size: 40px;
}

/* Ensure the container stretches */
#about .container {
max-width: 1200px;
width: 100%;
padding-left: 8%;
padding-right: 8%;
}

/*---Youtube section---*/
.youtube-video {
  position: relative;
  width: 100%;
  height: 80%;
  max-width: 100%;
  cursor: pointer;
  z-index: 100;
  margin-bottom: -88%;
}

.youtube-thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  border: solid 15px var(--thumbnail-border);
  background-color: var(--thumbnail-border);
}

.youtube-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: solid 15px var(--thumbnail-border);
  border-radius: 15px;
  z-index: -1;
  cursor: pointer;
}

/* ⚠️ This rule probably won't work reliably */
.youtube-thumbnail:has([controls]:not([paused])) + .youtube-preview {
  display: none;
}

.img-fluid {
  width: 100%;
  /*height: 525px;*/
  border-radius: 15px;
  position: relative;
  z-index: 10;
}

.youtube-video iframe {
  height: 290px;
  width: 100%;
  border: 0;
  border-radius: 20px;
}

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

@media (min-width: 770px) and (max-width: 1024px) {
  .youtube-video {
    position: relative;

    margin-bottom: -67%;
  }
  .img-fluid {
    /*width: 80%;*/
  }
  .youtube-video iframe {
    height: 250px;
    width: 80%;
  }
}

@media (min-width: 769px) and (max-width: 850px) {
  .youtube-video {
    margin-bottom: -67%;
  }
  .img-fluid {
    /*width: 80%;*/
  }
  .youtube-video iframe {
    height: 350px;
    width: 80%;
  }
}

@media (min-width: 500px) and (max-width: 768px) {
  .youtube-video {
    margin-bottom: -91%;
  }
  .img-fluid {
   /* width: 80%;*/
  }
  .youtube-video iframe {
    height: 250px;
    width: 80%;
  }
}

@media (max-width: 499px) {
  .youtube-video {
    margin-bottom: -35%;
  }
  .img-fluid {
   /* width: 80%;
    height: 120px;*/
  }
  .youtube-video iframe {
    height: 150px;
    width: 80%;
  }
}

/*---END: Youtube section---*/
/* ---------END: About Section ---------*/
/* --------- How Does It Work Section --------- */

/* -------------------- BASE STRUCTURE -------------------- */
#how-does-it-work,
#how-does-it-work2 {
  position: relative;
}

#how-does-it-work {
  padding: 0;
}

/* Van (desktop default) */
#van {
  position: sticky;
  top: 40%;
  left: 46.5%;
  width: 94px;
  z-index: 1;
  margin-top: -170px;
}

/* Houses (desktop) */
#house2 {
  margin-top: 0;
  z-index: 10;
}

/* Margin helpers */
.margin-right { margin-right: 25%; }
.margin-left  { margin-left: 25%; margin-right: 5%; }

/* -------------------- PURE CSS ROAD -------------------- */
#how-does-it-work2 {
  position: relative;
  padding-bottom: 150px;
  z-index: -1;
  margin: -100px 0 -250px;
  overflow: visible;
}

/* The road strip */
#how-does-it-work2::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 134px;
  z-index: -1;

  /* base road */
  background-color: var(--main-title);

  /* three layered gradients: dashed center + side lines */
  background-image:
    repeating-linear-gradient(
      to bottom,
      #ffffff 0px,
      #ffffff 12px,
      rgba(255,255,255,0) 12px,
      rgba(255,255,255,0) 28px
    ),
    linear-gradient(var(--main-color), var(--main-color)),
    linear-gradient(var(--main-color), var(--main-color));

  background-size:
    8px 100%,
    6px 100%,
    6px 100%;

  background-position:
    center top,
    8px top,
    calc(100% - 8px) top;

  background-repeat: repeat-y, repeat-y, repeat-y;

  box-shadow: inset 0 6px 18px rgba(0,0,0,0.25);
  border-radius: 6px;
}

/* ===========================================================
   RESPONSIVE BEHAVIOR
   Mirrors your previous road.webp layout logic
   =========================================================== */

/* -------- Tablet (≤1024px) -------- */
@media (max-width: 1024px) {
  #house-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #how-does-it-work #title-in {
    margin-bottom: 120px;
  }

  #how-does-it-work2 {
    z-index: -1;
    margin: -50px 0 -470px;
  }

  #how-does-it-work2 .row.align-items-center {
    margin: -100px 0 270px;
  }

  #house1,
  #house2 {
    position: absolute;
    width: 30%;
    box-sizing: border-box;
    left: 83%;
  }

  #house1 { margin-top: -178px; }
  #house2 { margin-top: -218px; }

  #van {
    left: 90%;
    top: 55%;
    width: 10%;
    height: auto;
    margin: 0 0 -170px;
  }

  .margin-right { margin-right: 38%; }
  .margin-left  { margin: 0 38% 0 0; }

  /* Road alignment fix */
  #how-does-it-work2::before {
    left: auto;
    right: 10%;
    transform: none;
  }
}

/* -------- Small Tablet (≤900px) -------- */
@media (max-width: 1000px) {
  #van {
    left: 90%;
    top: 55%;
    width: 90px;
    height: auto;
    margin-top: 0;
  }
   #how-does-it-work2::before {
    right: 1%;
    width: 110px;
  }
}

@media (max-width: 900px) {
  #van {
    left: 80%;
    top: 55%;
    width: 90px;
    height: auto;
    margin-top: 0;
  }

  #how-does-it-work2::before {
    right: 8%;
    width: 110px;
  }
}

/* -------- Mobile (≤768px) -------- */
@media (max-width: 768px) {
  div.container.text-center.house { padding: 0; }

  #how-does-it-work2 {
    right: 4%;
    padding: 5px;
    padding-bottom: 170px;
  }

  #how-does-it-work2::before {
    right: 3%;
    width: 90px;
    background-position: center top, 6px top, calc(100% - 6px) top;
  }

  #house1,
  #house2 {
    position: absolute;
    transform: none;
    box-sizing: border-box;
  }

  #house1 { margin-top: -145px; left: 60%; width: 36.75%; }
  #house2 { margin-top: -224px; left: 60%; width: 36.75%;}

  #van {
    position: sticky;
    top: 55%;
    width: 80px;
    height: auto;
    margin-top: 0;
  }
}


/* --------- END: How Does It Work Section --------- */


/* --------- About Section --------- */

#about2 {
background-color: var(--transparent-grey);
padding: 0;
margin: 0;

}
#about2 p{
  color:var(--text-dark);
}
#about2 h2, #about2 h3, #about2 h4, #about2 i {
  color:var(--main-title);
  font-weight:600;
}
.margin-b {
padding: 70px 20px;
}

.block-picture{
  padding: 0;
}
/* Background Image with Overlay */
.background-overlay {
background-image: url("../images/about2/man-in-city.webp");
background-size: cover;
background-position: center;
position: relative;
height: 100%;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

/* Dark Overlay Effect */
.background-overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--main-gradient);
opacity: 0.6;
}

/* Text Content on Overlay */
.overlay-content {
position: relative;
z-index: 2;
color: white;
width: 80%;
}

/* Experience Box Styling */
.experience-box {
background: var(--color-white);
padding: 10px;
text-align: left;
box-shadow: var(--gray-shadow);
width: 95%;
margin-top: auto;
margin-bottom: -350px;
border-bottom: var(--accent-border);
}

.experience-box .impresome-icon-box-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}

.experience-box .impresome-icon-box-icon {
font-size: 36px;
padding: 10px;
}

.experience-box h3 {
font-size: 18px;
color: var(--color-white);
font-weight: bold;
margin-bottom: 5px;
}

.experience-box p {
font-size: 14px;
color: var(--color-white);
}

/* ----------------- SERVICES STYLES APPLIED TO ICON BOXES ----------------- */

/* Section Title */
.services h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-t);
    font-size: var(--font-size-h2);
    color: var(--midnight-blue);
    margin-bottom: 3rem;
}

/* Grid Layout */
.icon-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

/* Icon Box (service box style applied) */
.icon-box {
    background-color: var(--color-white);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--card-shadow); /* same as service box */
    height: 100%;
    border-radius: 0;
    border-bottom: var(--accent-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* matches service_box */
}

/* Hover animation */
.icon-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow);
}

/* Full-width icon */
.icon-box img,
.icon-box .service_icon {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Slight hover zoom */
.icon-box:hover img,
.icon-box:hover .service_icon {
    transform: scale(1.02);
}

/* Title */
.icon-box h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: var(--font-weight-t);
    color: var(--main-title);
    margin-bottom: 0.75rem;
    min-height: 3rem; /* equal spacing for title height */
}

/* Description */
.icon-box p {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 576px) {
    .icon-box {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .icon-boxes {
        grid-template-columns: 1fr;
    }
    .experience-box {
        width: 100%;
    }
}


/*------------------- Testimonial email style ---------*/
.gmail-carousel-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 30px;
}

.gmail-carousel {
  display: flex;
  gap: 20px;
  padding-bottom: 10px;
  min-width: max-content;
}

.gmail-testimonial {
  background: var(--color-white);
  border-radius: 10px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 20px;
  width: 300px;
  min-width: 300px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-dark);
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gmail-header,
.gmail-subject,
.gmail-profile,
.gmail-body {
  margin-bottom: 10px;
}

.gmail-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.gmail-nav-icons i,
.gmail-icons-right i {
  margin-left: 10px;
  cursor: pointer;
  color: var(--text-medium);
}

.gmail-subject {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.gmail-folder {
  background: var(--border-light);
  color: var(--text-medium);
  font-size: 11px;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
}

.gmail-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.gmail-user-meta {
  font-size: 13px;
  flex-grow: 1;
}

.gmail-to {
  font-size: 12px;
  color: var(--text-medium);
}

.gmail-time-small {
  color: var(--text-medium);
  margin-left: 8px;
}

.gmail-buttons button {
  background: var(--color-white);
  border: solid 1px var(--border-light);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.gmail-buttons button:hover {
  background: var(--border-light);
}

.name-blur {
  display: inline-block;
  position: relative;
}

.name-blur::after {
  content: '';
  position: absolute;
  top: 0;
  left: 43%;
  width: 70%;
  height: 100%;
  backdrop-filter: blur(4px);
  background: var(--overlay-blur);
}


/* ------------------ Why choose us ------------------*/

.testimonial-box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.testimonial-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
.testimonial-logo {
width: 50px;
margin-top: 10px;
}
.yellow {
color: var(--main-color);
font-size: 18px;
margin: 10px 0;
}

/* ------------------END: Why choose us ------------------*/

/* ------------------ Blog ------------------*/
#latest-articles {
background: url(../images/footer/our-vans.webp) center center / cover;
color: white;
position: relative;
padding: 60px 0;
}
/* Dark Overlay */
#latest-articles::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--main-gradient);
opacity: 0.8;
}

#latest-articles #title-in h2,
#latest-articles #title-in h3,
#latest-articles #title-in p {
position: relative;
z-index: 2;
color: white;
}

/* Article Card */
.article-card {
background: white;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease-in-out;
}

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

/* Article Image */
.article-image {
width: 100%;
height: auto;
}

/* Article Content */
.article-content {
padding: 20px;
text-align: center;
color: black;
}

.article-content h3 {
font-size: 18px;
font-weight: bold;
}

.article-content p {
font-size: 14px;
margin-bottom: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
.article-card {
margin-bottom: 20px;
}

.article-content {
padding: 15px;
}
}

/* --------- END: Blog ---------*/
/* --------- Moving Tips Section ---------  */
#moving-tips {
position: relative;
padding: 60px 0;
margin-top: -50px;
}
/* Bottom Wave Divider - Flipped */
.wave-divider {
position: absolute;
bottom: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: scaleY(-1) scaleX(-1); /* Flip the wave vertically */
}

.wave-divider svg {
width: 100%;
height: 160px;
display: block;
}
.wave-path {
fill: var(--deep-indigo);
}

#moving-tips #how-does-it-work2 {
margin-bottom: -50px;
}
@media (max-width: 768px) {
#moving-tips #how-does-it-work2 .margin-left {
margin-left: -16%;
margin-bottom: 5%;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.moving-van {
margin-top: 20px;
}

#moving-tips h2 {
font-size: 1.5rem;
}
}

/* ---------  END: Moving Tips Section ---------  */

/* -------------- Horizontal Carousel by 1 image ------ */
.slider-wrapper-horizontal {
width: 80%;
max-width: 900px;
height: 500px; /* Ensures only one image is visible */
overflow: hidden;
position: relative;
margin: auto;
}

.slider-horizontal {
display: flex;
animation: slideHorizontal 16s infinite ease-in-out;
width: 100%; /* Enough to fit all images in a row */
}

.slider-horizontal img {
width: 100%;
height: 500px; /* Matches wrapper height */
border-radius: 15px; /* Rounded corners */
object-fit: cover;
flex-shrink: 0;
}

/* Keyframes for horizontal sliding - Moves exactly 1 image */
@keyframes slideHorizontal {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(-100%);
}
40% {
transform: translateX(-200%);
}
60% {
transform: translateX(-300%);
}
80% {
transform: translateX(-400%);
}
100% {
transform: translateX(0%);
}
}

.slider-horizontal {
animation: slideHorizontal 16s infinite;
}

/*-----------------END: Horizontal Carousel by 1 image ------*/

/* --------- Horizontal Carousel by 3 images Section --------- */
/* Carousel Container */
.carousel-container {
  width: 92%;
  max-width: 1200px;
  overflow: hidden;
  margin: auto;
  position: relative;
}

/* Carousel Track */
.carousel-track {
  display: flex;
  width: 100%;
  animation: slide 44s infinite ease-in-out; /* 11 slides, 4 seconds each */
}

/* Individual Slide */
.carousel-slide {
  flex: 0 0 100%; /* One image per slide */
  padding: 0 10px;
  text-align: center;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  max-width: 1200px;
  max-height: 675px;
  object-fit: cover;
  border-radius: 15px;
}

/* Slide Text Overlay (Presentation Sign) */
.slide-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

/* Keyframes for Animation */
@keyframes slide {
  0%, 9.09% { transform: translateX(0%); }
  9.10%, 18.18% { transform: translateX(-100%); }
  18.19%, 27.27% { transform: translateX(-200%); }
  27.28%, 36.36% { transform: translateX(-300%); }
  36.37%, 45.45% { transform: translateX(-400%); }
  45.46%, 54.54% { transform: translateX(-500%); }
  54.55%, 63.63% { transform: translateX(-600%); }
  63.64%, 72.72% { transform: translateX(-700%); }
  72.73%, 81.81% { transform: translateX(-800%); }
  81.82%, 90.90% { transform: translateX(-900%); }
  90.91%, 100% { transform: translateX(-1000%); }
}

/* Responsive for Mobile */
@media (max-width: 768px) {
  .carousel-container {
    width: 90%;
    max-width: 600px;
  }

  .carousel-slide img {
    max-width: 600px;
    max-height: 338px;
  }

  .slide-text {
    font-size: 0.8em; /* Slightly smaller text for mobile */
    padding: 8px 15px;
  }
}
/* --------- END : Carousel Section --------- */
/* --------- Footer Styles --------- */
#footer {
background-color: var(--main-title);
color: var(--white);
padding: 50px 0;
text-align: center;
}

#banner h2,
#banner #title-in h3,
#banner #title-in p {
color: var(--color-white);
}

/* Footer Logo */
.footer-logo {
width: 180px;
margin-bottom: 10px;
}
/* Footer Tagline */
.footer-tagline {
font-size: 14px;
font-style: italic;
margin-top: 10px;
color: var(--color-white);
}

/* Footer Links */
.footer-links {
list-style: none;
padding: 0;
}

.footer-links li {
margin-bottom: 8px;
}

.footer-links a {
color: var(--color-white);
text-decoration: none;
transition: 0.3s ease-in-out;
}

.footer-links a:hover {
color: var(--main-color);
}

/* Footer Divider */
.footer-divider {
border-top: 1px solid var(--color-white);
margin-top: 30px;
}

/* Copyright */
#footer p {
font-size: 14px;
color: var(--white);
}

a.copy-right  {
color: var(--main-color);
text-decoration: none;
}

a.copy-right:hover {
color: var(--color-white);

}

#footer h4 {
color: var(--color-white);
}

/* Responsive Design */
@media (max-width: 768px) {
.footer-links {
text-align: center;
}
}
/* ---------  END: Footer Styles --------- */
/*----------------------------  BLOG: First Banner ---------------------------- */

/*----------------------------  BLOG: First Banner ---------------------------- */
#banner-blog {
  background: url("../images/footer/our-vans.webp") center center / cover no-repeat;
  text-align: center;
  position: relative;
  color: var(--white);
  min-height: 500px;
}
#banner-blog{
position: relative;
background-color: var(--navy-blue); /* Fallback color */
color: var(--color-white);
padding-left: 10%;
min-height: 500px;
}
@media (max-width: 1024px){
  #banner-blog {
   padding-right: 10%;
   padding-left: 0;
  }
}

/* Mobile: Change Background for Small Screens */
@media screen and (max-width: 768px) {
  #banner-blog {
    background-image: url("../images/footer/our-vans-mobile.webp");
    background-position: center center;
    background-size: cover;
    min-height: 300px;
    padding: 0;
  }
}

#banner-blog::before, #bottom-banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--main-gradient);
opacity: 0.8;
}

.banner-blog{
  margin-top:80px;
}

.bottom{
    background: url(../images/footer/our-vans.webp);
    margin-top: 0!important;
    background-position-x: 40%; /* move background horizontally */
    background-position-y: 50%;
}

@media screen and (max-width: 768px) {
  .bottom{
    background: url(../images/footer/our-vans-mobile.webp);
}
}

#banner-blog h1 {
  margin-top: 45px;
  font-size: 53px;
  font-weight: 900;
  letter-spacing: -4px;
  text-shadow: var(--text-shadow);
}

#banner-blog h1,
#banner-blog p,
#banner-blog h2,
#banner-blog h3,
form {
position: relative;
z-index: 2;
}
#banner-blog h1,
#banner-blog h3,
#banner-blog h3 a,
#bottom-banner-blog h1,
#bottom-banner-blog h2,
#bottom-banner-blog h3, .row.uniform h2, .row.uniform h3, .row.uniform p {
color: var(--transparent-grey);
}

/*---------------------------- END: BLOG: First Banner ---------------------------- */


/*----------------------------  Youtube Section ---------------------------- */

.youtube-video-blog {
  position: relative;
  margin: 40px 20% -49%;
  border: 15px solid var(--thumbnail-border);
  border-radius: 10px;
  background-color: var(--thumbnail-border);
  cursor: pointer;
  z-index: 100;
}

.youtube-video-blog iframe {
  width: 100%;
  height: 310px;
  border: 0;
}

.img-fluid-blog {
  width: 60%;
  height: 525px;
  position: relative;
  z-index: 99;
}

/* Tablet */
@media (max-width: 1024px) {
  .youtube-video-blog {
    margin: 40px 10% -65%;
  }

  .youtube-video-blog iframe {
    height: 290px;
  }

  .img-fluid-blog {
    width: 80%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .youtube-video-blog {
    margin: 40px 15% -86%;
  }

  .youtube-video-blog iframe {
    height: 228px;
    background-color: var(--thumbnail-border);
  }

  .img-fluid-blog {
    width: 70%;
  }
}

/*---------------------------- END: Youtube Section ---------------------------- */


/*---------------------------- Related Posts Section ---------------------------- */

.related-posts-section {
  background-color: var(--bg-silver);
  padding: 60px 20px;
}

.related-posts-section .container {
  max-width: 1140px;
  margin: 0 auto;
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  color: var(--text-dark);
}

/* Grid */
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Cards */
.related-post-card {
  background: var(--color-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--overlay-light);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.related-post-card:hover {
  box-shadow: 0 4px 14px var(--overlay-light);
  transform: translateY(-3px);
}

.related-post-card .post-thumbnail {
  margin-bottom: 15px;
}

.related-post-card .post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.related-post-card .post-title {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.related-post-card .post-title a {
  text-decoration: none;
  color: var(--main-title);
}

.related-post-card .post-title a:hover {
  color: var(--main-color);
}

.related-post-card .post-excerpt {
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 15px;
}

.related-post-card .BtnSubmitTop {
  display: inline-block;
  padding: 8px 16px;
  background: var(--main-color);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.related-post-card .BtnSubmitTop:hover {
  background: var(--dotted-red);
}

/* Pagination */
.pagination {
  margin-top: 40px;
  text-align: center;
}

.pagination .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-dark);
  text-decoration: none;
}

.pagination .page-numbers.current {
  background: var(--main-color);
  color: var(--color-white);
  border-color: var(--main-color);
}

.pagination .page-numbers:hover {
  background: var(--bg-silver);
}

/*---------------------------- END: Related Posts Section ---------------------------- */


/*---------------------------- Blog Archive ---------------------------- */

.blog-archive-header {
  background: var(--transparent-grey);
  padding: 50px 0 30px;
  text-align: center;
}

.blog-archive-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.blog-archive-header .subtitle {
  font-size: 1.2rem;
  color: var(--text-dark);
}

.blog-archive-grid .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
}

.blog-card {
  background: var(--color-white);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 4px 16px var(--overlay-light);
  transition: transform 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-title {
  font-size: 1.3rem;
  margin-bottom: 15px;
}

.blog-title a {
  color: var(--text-dark);
  text-decoration: none;
}

.blog-excerpt {
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 15px;
}

.read-more {
  display: inline-block;
  font-weight: bold;
  color: var(--link-blue);
  text-decoration: none;
}

.blog-meta {
  color: var(--light-grey);
  font-size: 0.85rem;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

/*---------------------------- END: Blog Archive ---------------------------- */


/* === Contact page === */

.contact-section {
  background: var(--bg-silver);
  padding: 100px 20px;
  font-family: var(--font-main);
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.section-header .separator-line {
  width: 60px;
  height: 3px;
  background: var(--main-color-dark);
  margin: 10px auto;
}

.section-header p {
  color: var(--text-dark);
}

.contact-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.contact-box {
  background: var(--color-white);
  padding: 20px;
  flex: 1 1 260px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.contact-box .icon {
  font-size: 32px;
  color: var(--main-color-dark);
  margin-bottom: 10px;
}

.contact-box h5 {
  font-size: 18px;
  margin-bottom: 5px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 15px !important;
  font-size: 16px !important;
  border: 1px solid var(--border-light); !important;
  border-radius: 6px !important;
  background: var(--white); !important;
}

.contact-form button {
  padding: 14px;
  font-size: 16px;
  background-color: var(--main-color-dark);
  color: var(--white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background-color: var(--main-color-dark);
}

.small-margin-top {
  margin-top: 20px;
}

.map-container {
  width: 100%;
  height: 450px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 60px;
  box-shadow: 0 2px 10px var(--overlay-light);
}

/* === END: Contact page === */

/* ==== TABLE Styling Optimized ======= */

/* Base table styles */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 2px;
    margin: 20px 0;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--text-dark);
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    border-color: gray;
    display: table;
}

/* Header and cell reset styles */
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

tbody, td, tfoot, th, thead, tr {
    border: 0 solid;
    border-color: inherit;
}

/* Table cells */
table td,
table th {
    border: 1px solid var(--border-light);
    padding: 8px;
    text-align: left;
}

/* Zebra striping for rows */
table tr:nth-child(odd) {
    background-color: var(--color-white);
}

/* Table headers */
table th,
table th b,
th,
th strong,
th b {
    background-color: var(--main-title);
    color: var(--white); !important;
    padding: 10px;
    text-align: left;
}

/* Gutenberg block table adjustments */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.wp-block-table table td,
.wp-block-table table th {
    padding: 10px 20px;
    border: 1px solid var(--border-light);
}

/* ==== END: TABLE Styling Optimized ======= */
/* ==========PRICING grid =======------------ */
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.pricing-item {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
  border: 1px solid var(--light-grey);
  padding: 16px;
  border-radius: 8px;
}
.pricing-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 12px;
}
.price {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 8px;
}

/* ==========END:  PRICING grid =======------------ */
/*===========Youtube monitor drawing =============*/
.imac-frame3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem auto;
  width: 100%;
  max-width: 840px;
}
.imac-monitor3 {
  width: 100%;
  aspect-ratio: 16.5 / 9;
  background: #000; /* full black bezel */
  border-radius:16px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 -12px 30px var(--gray-shadow),
    0 8px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 35px; /* space for grey bottom bar */
}
.imac-frame2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem auto;
  width: 100%;
  max-width: 640px;
}

.imac-monitor {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000; /* full black bezel */
  border-radius:16px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 -12px 30px var(--gray-shadow),
    0 8px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 35px; /* space for grey bottom bar */
}

/* The visible screen inside the monitor */
.imac-screen {
  padding-top:10px;
  padding-bottom:8px;
  width: 95%; /* makes it smaller to reveal bezel */
  aspect-ratio: 2 / 1;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);

}

.imac-screen iframe {
  width: 100%;
  height: 100%;
  border: none !important;
  display: block;

}
iframe{
  border-radius: 0px;
  border: none !important;
}

/* Grey bottom bar (below black frame) */
.imac-monitor::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: var(--bottom-bar);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: inset 0 -2px 3px var(--glass-white);
  z-index: 1;
}

/* Neck */
.imac-neck {
  width: 60px;
  height: 60px;
  margin-top: -2px;
  background: var(--dark-gradient);
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
  box-shadow:
    inset 0 0 5px var(--glass-white),
    0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Base */
.imac-base {
  width: 200px;
  height: 10px;
  margin-top: -8px;
  background: var(--base-gradient);
  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  border-radius: 0 0 30px 30px;
}

/*===========Youtube monitor drawing =============*/
/*===========Simple page. Page without a banner========*/
#simple-page{
  margin-top:30px;
}
/*=========== Umzüge Review Widget========*/

.cu-review-widget {
  position: fixed;
  right: 0;
  bottom: 130px;
  z-index: var(--z-top);
  background: var(--main-color);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.4;
  border-radius: 8px 0 0 8px;
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  width: 250px;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.cu-review-widget:hover {
    right: 5px;
}

.cu-review-header {
    display: flex;
    align-items: center;
    padding: 10px;
}

.cu-review-header img {
    width: 100%; /* responsive */
    max-width: 40px; /* default for desktop */
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--color-white);
    padding: 3px;
}

.cu-review-header strong {
    font-size: 15px;
}

.cu-review-score {
    font-size: 13px;
    margin-top: 4px;
    opacity: 0.9;
}

.cu-review-footer {
    background: var(--color-white);
    color: var(--text-dark);
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
}

.cu-review-footer a {
    color: var(--main-color);
    font-weight: bold;
    text-decoration: none;
}

.cu-review-footer a:hover {
    text-decoration: underline;
}

/*===========Mobile Friendly Adjustments========*/
@media (max-width: 480px) {
    .cu-review-widget {
        width: 180px;
        bottom: 80px;
        font-size: 12px;
    }

    .cu-review-header img {
        max-width: 30px;
        height: auto;
        margin-right: 8px;
    }

    .cu-review-header strong {
        font-size: 13px;
    }

    .cu-review-score {
        font-size: 11px;
    }

    .cu-review-footer {
        font-size: 11px;
        padding: 6px 8px;
    }
}
/*===========END: Classic Umzüge Review Widget========*/
/*========== Price table==============*/
.price-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: 50px;
}

.price-table {
  background: var(--paper-color);
  border-radius: 10px;
  padding: var(--card-padding);
  flex: 1 1 30%;
  box-shadow: var(--card-shadow);
  position: relative;
}

.price-header {
  margin-bottom: 15px;
}

.price-heading {
  font-size: 1.45em;
  font-weight: 700;
  color: var(--main-title);
}

.price-amount {
  font-size: 1.35em;
  font-weight: 700;
  margin-bottom: 15px;
}

.price-amount .currency {
  margin-right: 5px;
}

.price-features {
  list-style-type: disc;
  padding-left: 20px;
  color: var(--main-title);
}

.price-ribbon {
  position: absolute;
  top: 10px;
  right: -10px;
  background: var(--main-color);
  color: var(--color-white);
  padding: 5px 10px;
  font-weight: bold;
  transform: rotate(15deg);
  font-size: 0.85em;
}

/* Rating snippet */
.fa-star {
    color: var(--light-grey);
}
.fa-star.checked {
    color: var(--main-color); /* gold */
}
/* ----------------How does it wor1 --------------*/
/* Ensure the road container is centered */
/* Road */
/* Container */
#how-does-it-work1 {
  position: relative;
  padding: 0 0 200px 0;
  min-height: 2000px;
}

/* Houses */
#house11{
  margin-top:-20px;
}
#house11, #house21 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  z-index: 20;
}

#house11 {
  top: 50px;
}
#house21 {
  bottom: 50px;
}

/* Road (drawn in CSS) */
#road1 {
  position: absolute;
  left: 50%;
  top: calc(50px + /*house11 height*/ 200px); /* adjust */
  bottom: calc(50px + /*house21 height*/ 200px);
  width: 80px; /* road same as van cargo width */
  margin-left: -40px;
  background: var(--text-dark);
  border-radius: 20px;
  z-index: 1;
}

#road1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom, var(--white); 0 40px, transparent 40px 80px);
  z-index: 2;
}

/* Van with actual image, sticky so it moves on scroll */
#van1 {
  position: sticky;
  top: 100px; /* distance from top of viewport when sticky */
  left: 50%;
  width: 90px; /* full van with mirrors */
  transform: translateX(-50%);
  z-index: 10;
}

/* Steps content etc. */
#how-does-it-work21 .row.align-items-center {
  position: relative;
  z-index: 5;
  margin-bottom: 150px;
}

/* Responsive */
@media(max-width:1024px) {
  #house11, #house21 { width: 40%; }
  #van1 { width: 90px; }
  #road1 { width: 80px; margin-left: -40px; }
  #road1::before { width: 4px; }
}


@media(max-width:768px) {
  /* Road */
  #road1 {
    left: auto;
    right: 10px;   /* stick to right side */
    transform: none; 
    width: 80px;
  }
  #road1::before { width: 3px; }

  /* Van */
  #van1 {
    left: auto;     /* cancel center alignment */
    right: 10px;
    transform: none; /* cancel translate */
    width: 80px;
  }

  /* Houses */
  #house11, #house21 {
    left: auto;     /* cancel center alignment */
    right: 0px;
    transform: none;
    width: 50%;
  }
}
/* ----------------END: How does it wor1 --------------*/
/*==================Product style +=================*/
.service-banner {
  /*background-color: var(--main-title);*/
  padding: 70px 20px!important;
  position: relative;
  overflow: hidden;
}

/* Container */
.service-banner .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Left side */
.banner-left {
  max-width: 60%;
  padding: 2%;
}
.banner-title, .banner-left h3 a {
  text-shadow: var(--card-shadow);

}
.banner-title {
  margin-top: 15px;
  font-size: 73px;
  font-weight: 900;
  letter-spacing: -4px;
   z-index: 100;
    
}

.banner-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.banner-rating .stars {
  color: var(--main-color);
  font-size: 24px;
  margin-right: 10px;
}

.banner-rating .review-text {
  color: var(--main-color);
  font-size: 18px;
}

.banner-excerpt {
  font-size: 18px;
  margin-bottom: 10px;
}


/* Right side */
.banner-right {
  max-width: 45%;
  position: relative;

}
/*Come here here*/
.banner-img {
  position: relative;
  box-shadow: var(--card-shadow);
  border-radius:10px;
 /* border: 4px solid var(--main-color-dark);*/
  width: 100%;
  max-width: 100%;
  height: auto;
  z-index: 2;
}
@media (max-width: 768px) {
  /* Stack banner-left above banner-right */
  .service-banner .container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .banner-left,
  .banner-right {
    max-width: 100%;
    text-align: center;
  }

  /* Banner title */
  .banner-title {
    padding-top:50px;
    font-size: 40px;
    letter-spacing: -2px;
  }

  /* Banner excerpt */
  .banner-excerpt {
    font-size: 16px;
  }

  /* Banner image */
  .banner-right .banner-img {
    width: 100%;
    height: auto;

  }
  /* Center star rating */
  .banner-rating {
    justify-content: center;   /* centers the stars + review text */
    margin-bottom: 20px;
  }

  .banner-rating .stars {
    font-size: 22px;
  }

  .banner-rating .review-text {
    font-size: 16px;
    margin-left: 8px; /* optional spacing between stars and text */
  }

  /* Optional: center the price and button */
  .banner-price,
  .BtnSubmitTop {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.thumb-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto;  /* ensure horizontal centering if flex fails */
}

.thumb-center img {
    max-width: 100%;         /* optional: prevent overflow */
    height: auto;            /* maintain aspect ratio */
}

/* 1. Ensure title is left-aligned */
.banner-left {
    text-align: left;
}

/* 3. Increase minimum height of banner on desktop */


/* Thumb wrapper */
.thumb-main {
    width: 100%;            /* fill the col-lg-6 */
    max-width: 400px;       /* maximum desired width */
    margin: 0 auto;         /* center in container */
    position: relative;     /* for rectangle */
    max-height: 150px;
}

/* Image inside wrapper */
.thumb-main img.banner-img {
    width: 100% !important;
    height: auto !important;
    max-width: 400px; /* or whatever you want */
}


/* Red rectangle behind image */
.thumb-main {
    position: absolute;
    top: -25px;
    left: -40px;
    width: 50%;
    height: 80%;
    background-color: var(--main-color-dark);
    z-index: 1;
}
/* ----------------------------Transportica styles-------------------------------*/

/* ----------------FORM TRANSPORTCA-------------*/
/* ------------------------------------------
   GLOBAL FORM & BUTTON STYLES (your original)
-------------------------------------------*/
.btn.btn-main.w-100{
  color: var(--main-title);
  background-color: var(--main-color); 
  padding: 15px;
  border: solid 1px var(--main-color); 
}

/* Main form block */
.form_block {
  border-top:var(--accent-border);
  color: var(--main-title);
  background-color: var(--color-white);
  box-shadow: var(--card-shadow);
}
.blue_box h2{ 
  color: var(--main-title)!important;
}
/* Steps wrapper */
.steps {
  padding: 10px;
  background-color: var(--main-title);
}

.steps .step_item .num{
  display:block;
  font-size:28px;
  font-weight:800;
  color:var(--main-color-light);
}

.white_trasnparent_box {
  background-color: var(--glass-white);
  box-shadow: var(--card-shadow);
}

.form_title_2 {
  margin: 0;
  font-weight: 800;
  line-height: 1.2em;
  font-size: 3.1em;
  letter-spacing: -0.06em;
  color: var(--main-title) !important;
  text-shadow: var(--card-shadow); 
}

/* Banner padding adjustments */
#banner .white_trasnparent_box {
  margin-bottom:10px;
  padding-top: 0px!important;
  padding-bottom: 0px!important;
}

@media (max-width: 1024px) and (min-width: 761px){
  #banner .white_trasnparent_box { margin-top:140px; }
  .form_title_2 { font-size: 3.1em; }
}

@media (max-width: 760px) {
  #banner .white_trasnparent_box { margin-top:140px; }
  .form_title_2 { font-size: 2.5em; }
}

/* Ensure select wrapper sits above all form fields */
.select-wrapper {
  position: relative;
  z-index: 1000 !important;
}

/* Ensure dropdown options are always on top */
.select-wrapper .custom-options {
  z-index: 9999 !important;
  position: absolute;
  overflow: visible;
}

/* Prevent form or banner from clipping the menu */
.form_block,
.white_trasnparent_box,
#banner {
  overflow: visible !important;
}

/* Inputs should NOT have z-index (remove conflict) */
.form_block input[type="text"],
.form_block input[type="email"],
.form_block input[type="tel"],
.form_block select,
.form_block textarea {
  z-index: auto !important;
}


/* ------------------------------------------
   MERGED: Custom-Quote-Form (fields, dropdown)
   Applied to your existing form
-------------------------------------------*/

/* Text inputs & dropdowns */
.form_block input[type="text"],
.form_block input[type="email"],
.form_block input[type="tel"],
.form_block select,
.form_block textarea {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--color-white);
  border: 1px solid var(--main-title);
  border-radius: 10px;
  outline: none;
  box-shadow: var(--card-shadow);
  font-family: var(--font-main);
  z-index: var(--z-low);
}

/* Placeholder */
.form_block input::placeholder,
.form_block textarea::placeholder,
.form_block select {
  color: var(--main-color);
}

/* Focus state */
.form_block input:focus,
.form_block textarea:focus,
.form_block select:focus {
  border-color: var(--main-title);
}



/* ------------------------------------------
   Button (combined, polished)
-------------------------------------------*/

/* Submit button (keep your colors, improve UX) */
.form_block .btn.btn-main {
  background: var(--main-color-light);
  border: 1px solid var(--main-color-light);
  font-weight: 700;
  padding: 14px;
  border-radius: 20px;
  transition: background 0.3s ease;
  z-index: 1 !important;
}

.form_block .btn.btn-main:hover {
  background: var(--main-title);
  color: var(--color-white);
  border-color: var(--main-title);
}

/* ------------------------------------------
   STEPS (combined, polished)
-------------------------------------------*/
.steps .step_item {
  flex: 1;
  text-align: center;
}

/* Circle number */
.steps .step_item .num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: var(--main-title);
  background-color: var(--main-color-light);
  border-radius: 50%;
  margin-bottom: 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
}

/* FIX: Image container with equal height */
.steps .step_item img {
  display: block;
  margin: 0 auto;
  height: 60px;       /* <= adjust based on your tallest icon */
  object-fit: contain;
  margin-bottom: 10px;
}

/* Step text */
.steps .step_item p {
  color: var(--color-white);
  margin-top: 5px;
  font-size: 15px;
}
/* Restore Bootstrap default spacing */
.form_block .row > [class*="col-"] {
    margin-bottom: 15px !important;
}

/* Ensure inputs have correct vertical space */
.form_block input,
.form_block select,
.form_block textarea {
    margin-top: 6px !important;
}

/* Increase spacing before buttons */
.form_block button[type="submit"],
.form_block .btn {
    margin-top: 15px !important;
}

/* Add spacing between Step title blocks */
.form_block h4,
.form_block h5 {
    margin-top: 20px !important;
}
/* Calendar Field Styling */
.form_block input[type="date"] {
    background: var(--color-white);
    border: 1px solid var(--main-title);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 16px;
    box-shadow: var(--card-shadow);
    color: var(--text-dark);
    cursor: pointer;
}

/* ===== Calendar Icon Color ===== */
.form_block input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(20%) sepia(60%) saturate(300%) hue-rotate(190deg);
  opacity: 0.8;
}



/* ---- CUSTOM ARROW FOR SELECT ---- */
.select-wrapper {
  position: relative;
  width: 100%;
  font-family: var(--font-main);

}

/* Trigger */
.select-wrapper .custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--transparent-grey);
  color: var(--text-dark);
  border: 1px solid var(--main-title);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  user-select: none;
}

/* Arrow */
.select-wrapper .custom-select-trigger::after {
  content: "▾";
  color: var(--main-title);
  font-size: 14px;
  transition: transform 0.2s;
}

/* Rotate arrow when open */
.select-wrapper.open .custom-select-trigger::after {
  transform: rotate(180deg);
}
/* Come here */
/* Options panel */
.select-wrapper .custom-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  background: var(--transparent-grey);
  border-radius: 10px;
  box-shadow: var(--box-shadow-drop-down);
  max-height: 220px;
  overflow-y: auto;
 
  display: none;
}

/* Show options when open */
.select-wrapper.open .custom-options {
  display: block;
}

/* Individual options */
.select-wrapper .custom-option {
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text-dark);
  font-size: 15px;
  border-radius: 6px;
}

/* Hover / selected */
.select-wrapper .custom-option:hover,
.select-wrapper .custom-option.selected {
  background: var(--main-color-light);
}
/* ----------------END FORM TRANSPORTCA-------------*/
/* ----------------- ADVANTAGES SECTION ----------------- */

/* Background image + overlay */
.advantages {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--transparent-grey);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 992px) {
    .advantages {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Section title */
.advantages h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-t);
    font-size: var(--font-size-h2);
    color: var(--main-title);
    text-align: center;
    margin-bottom: 2rem;
}

/* Equal height columns */
.advantages .row > [class*="col"] {
    display: flex;
}

/* Advantage block */
.adv-block {
    background-color: var(--color-white);
    border-radius: 0;
    padding: 2rem 1.5rem;
    box-shadow: var(--card-shadow);
    border-bottom: var(--accent-border);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.adv-block:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-shadow);
}

/* ---------------- Bigger Icon Circles ---------------- */
.adv-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--main-color-light);
    color: var(--main-title);
    font-size: 32px;
    margin-bottom: 1.2rem;
    transition: transform 0.3s ease;
}

.adv-block:hover .adv-icon {
    transform: scale(1.12);
}

/* Titles */
.adv-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-t);
    color: var(--main-title);
    margin-bottom: 0.5rem;
}

/* Description */
.adv-desc {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.5;
    max-width: 250px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .adv-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }
    .adv-title {
        font-size: 1.15rem;
    }
    .adv-desc {
        font-size: 0.9rem;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .adv-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    .adv-title {
        font-size: 1rem;
    }
    .adv-desc {
        font-size: 0.85rem;
    }
}

/* Container override */
.container {
    max-width: 1140px !important;
}

/* ABOUT US ----------*/
.home-about {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--transparent-grey);
}

@media (min-width: 992px) {
    .home-about {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Section Title */
.home-about .section-title h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-t);
    font-size: var(--font-size-h2);
    color: var(--main-title);
    margin-bottom: 2rem;
}

/* Text description */
.about-desc {
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Image */
.about-image {
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.about-image:hover {
    transform: scale(1.02);
}

/*---- Testimonials -----*/

/* Stars */
.testimonial-stars .fa {
    color: var(--main-color-light) !important;
    font-size: 18px;
    margin-top: 0.5rem;
}

.testimonial-stars i {
    margin: 0 2px;
}

/* Hover effect for stars */
.testimonial-card:hover .testimonial-stars i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Decorative stars + map pins pattern background */
.testimonials-slider-section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--transparent-grey);
    overflow: hidden;
}

/* Pattern layer */


/* Keeps testimonials on top of pattern */
.testimonials-slider-section > * {
    position: relative;
    z-index: 2;
}


.testimonials-slider h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-t);
    color: var(--main-title);
}

.testimonials-slider {
    display: flex;
    overflow: hidden;
    position: relative;
}

.testimonial-slide {
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    background-color: var(--color-white);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--card-shadow);

    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 45%;
    max-width: 45%;
    min-width: 300px;
    border-bottom: var(--accent-border);
}

@media (max-width: 991px) {
    .testimonial-card {
        flex: 1 1 48%;
        max-width: 48%;
    }
}

@media (max-width: 576px) {
    .testimonial-slide {
        flex-direction: column;
        gap: 1.5rem;
    }
    .testimonial-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow);
}

/* Avatar */
.avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
}

.testimonial-name {
    font-weight: bold;
    margin: 0.5rem 0;
}

.testimonial-text {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

/* Stars */
.testimonial-stars {
    color: var(--main-color-light);
    margin-bottom: 1rem;
}

.testimonial-stars i {
    margin: 0 2px;
}

/* Company logos below testimonial */
.testimonial-logo {
  width: 120px;
    max-width: 220px;
    margin-top: 0.5rem;
}

/* Slider nav */
.testimonial-slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.testimonial-slider-nav button {
    border: none;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

/* ------------------- Service block ---------------------*/
/* ===== SERVICES SECTION ===== */
.services {
    /*background-color: var(--transparent-grey);*/
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 992px) {
    .services {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Extra spacing between row 1 and row 2 */
.services .row + .row {
    margin-top: 30px;
}

/* Section title */
.services h2, .testimonials-slider-section h2{
    font-family: var(--font-heading);
    font-weight: var(--font-weight-t);
    font-size: var(--font-size-h2);
    /*color: var(--main-title);*/
    margin-bottom: 3rem;
}

/* Service box */
.service_box {
    background-color: var(--color-white);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--card-shadow); /* standard shadow */
    height: 100%;
    border-radius: 0;
    border-bottom: var(--accent-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* top align content */
}

/* Hover animation */
.service_box:hover {
    transform: translateY(-5px);
    box-shadow:var(--card-shadow); /* standard hover shadow */
}

/* Icon full width */
.service_icon {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Slight hover zoom */
.service_box:hover .service_icon {
    transform: scale(1.02);
}

/* Title */
.service_box h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: var(--font-weight-t);
    color: var(--main-title);
    margin-bottom: 0.75rem;
    min-height: 3rem; /* ensures all titles take same space */
}

/* Description */
.service_box p {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.6;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .service_box {
        padding: 1.5rem 1rem;
    }
}

/* ===== END:SERVICES SECTION ===== */

/* ============ Statistics ===========*/
.benefits-stats {
    padding: 60px 0;
}

.benefits-stats .section-title {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 10px;
}

.benefits-stats .section-subtitle {
    font-size: 16px;
    color: var(--main-title);
    max-width: 700px;
    margin: 0 auto 40px;
}

.stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-box {
    background: var(--color-white);
    padding: 25px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: 0.25s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--main-color); /* adjust to your theme */
    margin-bottom: 5px;
}

.stat-label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.stat-desc {
    font-size: 14px;
    color: var(--main-title);
    margin: 0;
}
/*=============Statistics ============/
/* ======== GLOBAL SECTION ======== */
.about-more {
    padding: 60px 0;
}

/* ======== TITLES ======== */
.about-more .section-title .title-text {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    
}
.progressText{
  color: var(--main-title);
}

.about-more .section-title .description {
    font-size: 15px;
    margin-bottom: 25px;
}

/* ======== PROGRESS BARS ======== */
.progress-holder .barWrapper {
    margin-bottom: 25px;
}

.progress-holder .progressText {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.progress-holder .progress {
    height: 20px;
    background: var(--main-line-color);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    position: relative;
}

.progress-holder .progress-bar {
    background: var(--main-color);
    box-shadow: var(--card-shadow);
}

.popOver {
    position: absolute;
    right: 0;
    top: -28px;
    font-size: 12px;
    color: var(--main-color);
}

/* ======== FAQ BLOCK ======== */
.th-accordions .item {
    margin-bottom: 10px;
    border-radius: 0;
    box-shadow: var(--card-shadow);
}

.th-accordions .collapse-bar {
    display: block;
    padding: 12px 15px;
    background: var(--color-white);
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    position: relative;
}

.th-accordions .collapse-bar i {
    margin-right: 8px;
    color: var(--main-color);
}

.th-accordions .tab-pane {
    padding: 12px 15px;
    background: var(--color-white);
    border-top: 1px solid var(--main-color-light);
    font-size: 14px;
}
.item a{
  color: var(--main-color);
  text-decoration: none;
}

/* Hover effect */
.th-accordions .item:hover .collapse-bar {
    background: var(--main-color-light);
    color: var(--main-title);
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
    .progress-holder .progressText {
        font-size: 14px;
    }
}
.progress-bar {
    position: relative;
}

.progress-bar .progress-value {
    position: absolute;
    right: 8px;
    top: -22px;
    font-size: 12px;
    font-weight: 600;
    color: var(--main-title);
}

/*=========== Foter transportica ============*/
/* ================== FOOTER BACKGROUND WITH GRADIENT ================== */
.footer-bg {
    position: relative;
    background: var(--main-dark-overlay-banners),
                url("../images/footer/footer-i.webp") center center / cover no-repeat;
    color: var(--color-white);
    padding-top: 80px;
    padding-bottom: 80px;
    overflow: visible;
}

@media screen and (max-width: 768px) {
    .footer-bg {
        background: var(--main-dark-overlay-banners),
                    url("../images/footer/footer-i-mobile.webp") center center / cover no-repeat;
        padding-top: 60px;
        padding-bottom: 60px;
    }
}



/* ================== FOOTER FORM DROPDOWN FIX ================== */
.footer-bg .select-wrapper {
    position: relative;
    z-index: 1000;
}

.footer-bg .select-wrapper .custom-options {
    position: absolute;
    z-index: 9999 !important;
    max-height: 220px;
    overflow-y: auto;
}

.footer-bg,
.form_block,
.white_trasnparent_box,
#banner {
    overflow: visible !important;
}

.footer-bg input,
.footer-bg textarea,
.footer-bg select {
    z-index: auto !important;
}
/* ================== END: FOOTER FORM DROPDOWN FIX ================== */


/* ================== Banner Transportica ================== */


    /* ==================== BANNER 1 - F35 (Adapted to your theme) ==================== */
  .banner-1-f35 {
      padding-top: 50px;
      top:50px;
      width: 100%;
      min-height: 680px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 15px 35px rgba(0,0,0,0.25);
      background: var(--main-title); /* Your navy blue base */
  }

  /* Diagonal section */
  .banner-1-f35::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(to bottom, #cccccc 0%, #efeff2 69%, #c8c8c8 100%);
      clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
      z-index: 1;
  }

  /* Top-right triangle */
  .banner-1-f35::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 15%;
      height: 320px;
      background: var(--main-title);
      clip-path: polygon(0 0, 100% 0, 100% 100%);
      z-index: 2;
  }

  /* Logo */
  .logo-1-f35 {
      position: absolute;
      top: 30px;
      left: 40px;
      font-size: 32px;
      font-weight: var(--font-weight-t);
      font-family: var(--font-heading);
      color: var(--color-white);
      z-index: 10;
      text-transform: uppercase;
  }

  /* Main text area */
  .text-area-1-f35 {
      margin-left:20%;
      position: relative;
      z-index: 10;
      color: var(--main-title);
      width: 73%;
  }

  .subtitle-1-f35 {
      font-family: var(--font-heading);
      color: var(--main-title) !important; 
  }

  .title-1-f35 {
      font-size: 68px;
      font-weight: var(--font-weight-t);
      text-transform: uppercase;
      line-height: 1;
      margin-top: 10px;
      font-family: var(--font-heading);
  }

  .btn-order-1-f35 {
      display: inline-block;
      margin-top: 30px;
      color: var(--main-title);
      padding: 16px 44px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 18px;
      text-decoration: none;
      transition: all 0.3s;
      font-family: var(--font-main);
  }

  .btn-order-1-f35:hover {
      transform: translateY(-3px);
  }

  /* Discount Circle */
  .discount-circle-1-f35 {
      position: relative;
      top: 48%;
      right:18%;
      transform: translateY(-50%);
      width: 170px;
      height: 170px;
      background: var(--color-white);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: var(--box-shadow-drop-down);
      z-index: 15;
      color: var(--main-title);
  }

  .discount-circle-1-f35 .big {
      font-size: 56px;
      font-weight: var(--font-weight-t);
      line-height: 1;
      font-family: var(--font-heading);
  }

  .discount-circle-1-f35 .small {
      font-size: 20px;
      font-weight: 600;
      margin-top: -8px;
      font-family: var(--font-main);
  }

  /* Chair image */
  .chair-container-1-f35 {
      border: 20px solid var(--glass-white);
      box-shadow: var(--card-shadow);
      position: relative;
      right: 2%;
      top: 10%;
      width: 420px;
      height: 420px;
      border-radius: 10%;
      overflow: hidden;
      z-index: 9;
  }

  .chair-img-1-f35 {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 5%;
  }

  .image-wrap-f35 {
      margin-top: 10%;
      margin-left: 15%;
  }

  /* Footer bar */
  .footer-bar-1-f35 {
      height: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(18,36,88,0.95);
      padding: 20px 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ccc;
      font-size: 16px;
      z-index: 10;
      font-family: var(--font-main);
  }

  .footer-bar-1-f35 a {
      color: var(--main-color-light);
      text-decoration: none;
      font-weight: 600;
  }

  /* ===========================
     IMG-MAN FIXED
  =========================== */

  /* Desktop default */
  .img-man {
      position: absolute;
      z-index: 9;
      right: 8%;
      top: -5%;
  }

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

  @media (max-width: 1800px) and (min-width: 993px){
      .img-man{ right:-30%; top:-18%;width:420px; }
  }

  @media (max-width: 992px) {

      .banner-1-f35 {
          padding-top:0;
          min-height: 880px;
      }

      .text-area-1-f35 {
          margin-left: 6%;
          margin-bottom: 9%;
          top: -50px;
      }

      .title-1-f35,
      .subtitle-1-f35 {
          width: 93%;
          z-index:15;
      }
      .banner-1-f35::before {
          clip-path: polygon(0 0,28% 0,100% 100%,0 100%);
      }
      .discount-circle-1-f35 {top: 48%;right:18%;}

      .discount-circle-1-f35 .big { font-size: 48px; }

      .image-wrap-f35 {
          margin-top: 3%;
          margin-bottom: 10%;
          left: -14%;
          z-index:10;
      }

      .chair-container-1-f35 {
          width: 380px;
          height: 380px;
          margin: 5rem auto 1rem;
      }

      .img-man { right:-44%; top:-5%; width:380px; }
  }

  /* Mobile + Tablets */
  @media (max-width: 768px) {

      .banner-1-f35 { padding-top:0; }

      .text-area-1-f35 {
          margin-left: 6%;
          margin-bottom: 14%;
          top: 10px;
      }

      .image-wrap-f35 { top: -5%; }

      .chair-container-1-f35 {
          width: 380px;
          height: 380px;
          margin: 5rem auto 1rem;
      }
      



      .subtitle-1-f35 { font-size: 25px; }

      .title-1-f35 { font-size: 48px; }

      .banner-min-h { min-height: 100vh; }

      /* moved from global → correct place */
      .img-man { right:-35%; top:5%; width: 85%;}
  }

  /* Phones */
  @media (max-width: 576px) {
      .banner-1-f35 {
          padding-top:20px;
          min-height: 980px;
      }
      .img-man { right:-47%; top:-5%; width: 120%;}
      .text-area-1-f35 {
          margin-left: 6%;
          margin-bottom: 9%;
          top: 120px;
      }

      .subtitle-1-f35 {
          font-size: 23px;
          margin-top: -130px;
      }

      .title-1-f35 { font-size: 43px; }

      .chair-container-1-f35 {
          margin-top: 12%;
          width: 270px;
          height: 270px;
      }

      .discount-circle-1-f35 {
          width: 110px;
          height: 110px;
      }

      .discount-circle-1-f35 .big {
          font-size: 32px;
      }
      .discount-circle-1-f35 .small {
        margin-top: 2px;
          font-size: 15px;
      }
  }

  /* Single */
  .single-hero-section {
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    position: relative;
    color: #fff;
}
.single-hero-section .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.single-hero-section .container {
    position: relative;
    z-index: 2;
}
.single-title {
    font-size: 48px;
    font-weight: 700;
}
.single-meta {
    margin-top: 10px;
    font-size: 16px;
    opacity: 0.8;
}
.single-content {
    margin-top: 40px;
    max-width: 800px;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 30px;
}
.related-post-card {
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.navigation-section {
    margin-top: 50px;
    padding-bottom: 50px;
}
/* END Single*/
/* SIngle page */