/* Color Variables */
:root {
    --kanns-blue: #1f2b60;
    --kanns-red: #cb2d19;
    --kanns-black: #000000;
    --kanns-white: #ffffff;
    --kanns-light-gray: #f7f7f7;
    --kanns-medium-gray: #ededed;
    --kanns-dark-gray-footer: #000000; /* Original is black */
    --kanns-light-blue-gray: #90a2bc;
    --kanns-dark-blue-gray: #465467;

    /* Hero tuning */
    --hero-height: 55vh; /* adjust to 35–50vh to taste */
}

/* Base Styles */
body {
    font-family: 'Poppins', sans-serif; /* Link from Google Fonts */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--kanns-black);
    font-size: 13px; /* As seen in inline styles */
}

/* Global Headings */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Default */
    text-transform: none;
    line-height: 1.2;
    letter-spacing: -0.7px;
    color: var(--kanns-black);
}
h2 { font-size: 22px; }
h4 { color: var(--kanns-blue); }

/* Buttons */
.btn {
    background-color: var(--kanns-red);
    color: var(--kanns-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}
.btn:hover { background-color: var(--kanns-red); }
/* Black button for Quick Quote on header */
.topbar-button .btn { background-color: var(--kanns-blue) !important; color: var(--kanns-white); }
.topbar-button .btn:hover { background-color: var(--kanns-red) !important; color: var(--kanns-white); }

/* Header Topbar */
#topbar {
    background-color: var(--kanns-light-gray);
    color: var(--kanns-white);
    padding: 0px 0;
    box-shadow: 0px 1px 0px 0px rgba(10, 10, 10, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
#topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
#topbar .content a { text-decoration: none; }
#topbar .content a:hover { color: var(--kanns-blue); }

/* Main Header */
#header {
    background-color: var(--kanns-white);
    padding: 0 0;
    position: relative;
    z-index: 1000; /* keep above hero */

}

/* Make the logo-block container more robust */
#header .logo-block {
  /* Ensure no unexpected margin/padding is added to the logo block itself */
  display: block; /* Treat it as a block */
  margin: 10;
  padding: 0;
}

#header .logo-block .row > .col-md-12 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  /* Add padding to the column if needed for spacing, but be mindful */
  padding: 0px 0; /* Small vertical padding to ensure some buffer */
  /* Ensure the column takes up available space but doesn't add extra margin */
  margin: 0;
}
#header .logo img {
    max-height: 100px;
    width: auto; 
    display: block; /* Helps with spacing */
  /* Reset any potential inherited margin or vertical alignment */
  margin: 0;
  vertical-align: top; /* Can sometimes help with spacing issues */

}
#header .info { display: flex; gap: 30px; align-items: center;}
.info-box { display: flex; align-items: center; }
.info-box-icon { color: var(--kanns-blue); margin-right: 8px; font-size: 18px; }
.info-box-content h6 { margin: 0; font-size: 14px; font-weight: bold; }
.info-box-content p { margin: 0; font-size: 13px; color: var(--kanns-black); }
.info-box-content a { color: var(--kanns-black); text-decoration: none; }
.info-box-content a:hover { color: var(--kanns-blue); }

/* --- Logo Size Adjustment for Laptops (from previous response) --- */
@media (min-width: 992px) {
  #header .logo img {
    height: 180px; /* Slightly larger for laptops */
  }
}

/* --- Mobile Header (from previous response) --- */
/* Ensure mobile logo is appropriately sized if it's different */
@media (max-width: 768px) {
    /* ... your mobile header styles ... */
    #mobile-header #logo {
        /* Example: set a smaller height for mobile logo if needed */
        /* height: 80px; */
        max-width: 120px; /* Or max-width */
        height: auto;
    }
    /* ... rest of your mobile styles ... */
}
  
/* ===============================
  Main Navigation (desktop)
================================ */
.nav-block {
 background-color: var(--kanns-blue); /* Your existing style */
 padding: 10px 0;
 position: relative;
 z-index: 3000; /* above hero */
}

/* Target the UL specifically for the desktop navigation */
#navigation > ul { /* Using direct child selector to be more specific */
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex; /* Horizontal layout */
 justify-content: space-around;
}

/* Ensure list items in DESKTOP navigation are clean */
#navigation > ul > li { /* Direct child LI */
 position: relative;
 list-style: none;
 display: block; /* OK for flex children */
}

/* Anchor links for desktop navigation */
#navigation > ul > li > a { /* Direct child A */
 font-family: 'Poppins', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 14px;
 color: var(--kanns-white); /* SETTING THE COLOR TO WHITE HERE */
 text-decoration: none;
 padding: 10px 15px;
 display: block;
 transition: color 0.3s ease, background 0.2s ease;
}
/* Hover and active states for desktop navigation */
#navigation > ul > li > a:hover,
#navigation > ul > li.current-menu-item > a {
 color: var(--kanns-black) !important; /* Example: Black on hover */
}

/* --- Navigation Submenu Styles (Desktop) --- */
/* Target ALL submenus within the desktop navigation */
#navigation .sub-menu {
 display: none; /* HIDDEN BY DEFAULT */
 position: absolute;
 left: 0;
 top: 100%; /* Position below the parent */
 background: #002b5c; /* Your existing submenu background */
 padding: 10px 0;
 min-width: 220px;
 z-index: 4000;
 box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
/* Show the immediate sub-menu when the parent LI is hovered */
#navigation ul li:hover > .sub-menu {
 display: block; /* SHOW ON HOVER */
}

/* Style sub-sub-menus (nested sub-menus) */
#navigation .sub-menu .sub-menu {
 display: none; /* HIDDEN BY DEFAULT */
 top: 0; /* Position relative to parent LI */
 left: 100%; /* Position to the right */
 position: absolute;
}
/* Show the sub-sub-menu when its parent LI is hovered */
#navigation .sub-menu li:hover > .sub-menu {
 display: block; /* SHOW ON HOVER */
  position: absolute;
  left: 100%;
  top: 0;
}

/* Submenu link styling */
#navigation .sub-menu li a {
 color: #fff; /* Ensure submenu links are white */
 padding: 8px 15px;
 display: block;
 white-space: nowrap;
 text-transform: none;
 font-weight: 600;
}
#navigation .sub-menu li a:hover { background: #004080; } /* Example hover color for submenu items */

/* Ensure sub-menu list items are block for proper styling */
#navigation .sub-menu li {
  display: block; /* Each submenu item should be on its own line */
}


/* --- Mobile Navigation --- */
#mobile-header { display: none; } /* Hidden by default */
#mobile-navigation {
 display: none; /* Hidden by default */
 background-color: #2c394c; /* Your existing mobile nav background */
 padding: 15px;
}
#mobile-navigation ul {
 list-style: none; /* Ensure no bullets */
 padding: 0;
 margin: 0;
}
#mobile-navigation ul li {
 list-style: none; /* Ensure no bullets */
 display: block; /* Stacked vertically */
}
#mobile-navigation ul li a {
 color: var(--kanns-white); /* SETTING THE COLOR TO WHITE HERE */
 padding: 10px 15px;
 display: block;
 text-decoration: none;
 border-bottom: 1px solid rgba(255,255,255,0.1);
}
#mobile-navigation ul li a:hover { background-color: rgba(255,255,255,0.1); }


/* --- Media query to handle mobile/desktop display --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
  /* Hide desktop navigation elements */
  #header .nav-block { display: none; }
  .big-letter { font-size: 70vh;}

  /* Show mobile header */
  #mobile-header {
    display: flex; /* Use flex for alignment */
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--kanns-white);
    position: relative;
    z-index: 3002; /* above hero */
  }

  /* --- Mobile Logo Handling --- */
  /* Hide the desktop logo when in mobile view */
  #header .logo-block .logo {
    display: none;
  }
  /* Show the logo specifically within the mobile header */
  #mobile-header #logo {
    display: block; /* Show the mobile logo */
    max-width: 120px; /* Example - adjust as needed */
    height: auto;
  }
}
  /* --- End Mobile Logo Handling --- */

  /* Show the mobile navigation when active */
  #mobile-navigation.active { display: block; position: relative; z-index: 3001; }

  /* Hide the info boxes from the desktop header on mobile */
  #header .logo-block .info { display: none; }

  /* Adjusting the hamburger button */
  #mobile-navigation-btn { font-size: 24px; color: var(--kanns-black); text-decoration: none; }

  /* Specific adjustments for very small screens if needed */
  @media (max-width: 518px) {
    #mobile-header #logo img { margin-top: -20px; } /* Adjust logo vertical position */
  }
  @media (max-width: 399px) {
    #mobile-header #logo img { position: relative; top: -20px; } /* Another adjustment example */
  }

/* --- Ensure Desktop Logo Visibility on Larger Screens --- */
/* On screens larger than the mobile breakpoint, show the desktop logo */
@media (min-width: 769px) { /* Should match or be larger than your mobile breakpoint (e.g., 768px + 1px) */
  #header .logo-block .logo {
    display: block; /* Show desktop logo */
  }
  /* Hide the mobile header elements that are only for mobile */
  #mobile-header {
    display: none; /* Hide mobile header entirely */
  }
  /* Re-show desktop nav-block if it was hidden by mistake elsewhere */
  #header .nav-block {
    display: block;
  }
}

/* --- Re-adding Logo Size Adjustment for Laptops --- */
@media (min-width: 992px) { /* This breakpoint is common for tablet to desktop transition */
  #header .logo img { /* Targeting the img directly within #header .logo */
    height: 180px; /* INCREASED SIZE FOR LAPTOPS */
  }
}
/* --- End Mobile Logo Handling --- */

  /* Show the mobile navigation when active (handled by JS, but ensure display is block) */
  #mobile-navigation.active { display: block; position: relative; z-index: 3001; }
  /* Hide the info boxes from the desktop header on mobile */
 /* #header .logo-block .info { display: none; }*/
  /* Adjusting the hamburger button */
  #mobile-navigation-btn { font-size: 24px; color: var(--kanns-black); text-decoration: none; }

  /* --- Existing media queries for specific widths --- */
  /* @media (max-width: 518px) { #mobile-logo img { margin-top: -20px; } } */
  /* @media (max-width: 458px) { #mobile-logo img { position: relative; top: -20px; } } */
  /* @media (max-width: 399px) { ... } */
  /* It's often cleaner to consolidate these. The main 768px query should suffice for logo visibility, but you might need specific ones for button spacing. */
}

/* --- Refinement for Logo visibility based on the structure --- */
/* If your mobile logo is within a #mobile-logo div */
#mobile-header #mobile-logo {
    display: block; /* Show the mobile logo container */
    /* Adjust its positioning/sizing as needed */
}

/* Hide the desktop logo container in mobile view */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
  .big-letter { font-size: 70vh;}
    #header .logo-block .logo {
        display: none; /* Hide desktop logo */
    }
    /* Make sure the mobile logo container is visible */
    #mobile-header #mobile-logo {
        display: block;
    }
}
/* ===============================
   Hero Slideshow (reduced height)
================================ */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: var(--hero-height);  /* reduced height */
  overflow: hidden;
  background: var(--kanns-blue, #D11A2A);
}

/* Background slideshow with dimmed opacity */
.hero-slideshow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: slideshow 24s infinite;
  z-index: 1;
  opacity: 0.55;        /* dim images so K + text pop */
}

/* Slideshow cycle */
@keyframes slideshow {
  0%   { background-image: url('/img/hero-ship.jpg'); }
  25%  { background-image: url('/img/hero-plane.jpg'); }
  50%  { background-image: url('/img/hero-truck.jpg'); }
  75%  { background-image: url('/img/hero-port.jpg'); }
  100% { background-image: url('/img/hero-ship.jpg'); }
}

/* Overlay container for K + text */
.slideshow-overlay {
  position: relative;
  z-index: 3;           /* text above the K */
  color: #ffffff;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background-color: transparent; /* REMOVED BLUE BACKGROUND EFFECT HERE */

}

/* Big K fills hero from top to bottom */
.big-letter {
  position: absolute;
  inset: 0;
  z-index: 2; /* between bg and text */



 /* --- Crucial Cutout Effect --- */
 /* 1. Apply the CLEAR IMAGE to THIS element's background. */
 background-size: cover;
 background-position: center;
 /* NO ANIMATION OR MIX-BLEND-MODE HERE for the K itself */

 /* 2. Make the TEXT itself transparent. */
 color: transparent; /* Make the text transparent */
 -webkit-text-fill-color: transparent; /* For WebKit browsers */
 -webkit-text-stroke: 2px transparent; /* Ensure no stroke */
 text-shadow: none;

 /* 3. Clip the ELEMENT's BACKGROUND to the SHAPE OF THE TEXT. */
 background-clip: text;
 -webkit-background-clip: text; /* For WebKit browsers */


  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin: 0;
  line-height: 0.85; /* reduces extra ascender/descender space */
  font-weight: 900;
  font-size: 80vh;
/*  font-size: calc(var(--hero-height) * 1.39);*/ /* ~90% of hero height */
  color: rgba(255,255,255,0.22);
  -webkit-text-stroke: 2px rgba(255,255,255,0.65); /* crisp edges */
  text-shadow: 0 3px 18px rgba(0,0,0,0.55);
  opacity: 0.35;        /* dim images so K + text pop */
}

/* Hero copy */
.hero-text { position: relative; z-index: 3; max-width: 800px; }
.hero-text h2 { font-size: 3rem; margin-bottom: 1rem; line-height: 1.2; }
.hero-text p  { font-size: 1.25rem; margin-bottom: 2rem; }
.hero-text .btn {
  background: var(--kanns-blue, #D11A2A);
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.3s ease;
}
.hero-text .btn:hover { background: #a81420; }

/* Main Content Section */
.main-content-section {
    padding: 50px 0;
    position: relative;
    left: 0px;
    top: 11px;
    padding-top: 24px;
}

.tabs-container { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1200px; }
.tab-list { flex: 0 0 30%; list-style: none; padding: 0; margin: 0; background-color: var(--kanns-light-gray); }
.tab-list li { margin-bottom: 5px; }
.tab-list button {
    width: 100%;
    padding: 15px 20px;
    text-align: left;
    background-color: #f4f4f4;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #0c0c0c;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}
.tab-list button:hover, .tab-list button.active { background-color: var(--kanns-blue); color: var(--kanns-white); }
.tab-content-container { flex: 1; padding: 30px; background-color: var(--kanns-white); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane h4 span { color: var(--kanns-blue); }

/* Service Boxes */
.service-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 50px 0;
    background-color: var(--kanns-medium-gray);
    justify-content: center;
}
.service-box {
    background-color: var(--kanns-white);
    padding: 28px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    max-width: 350px;
    flex: 1 1 100%;
}
.service-box .btn {
  background: var(--kanns-blue, #D11A2A);
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

.service-box .icon {
    background-color: var(--kanns-blue);
    color: var(--kanns-white);
    font-size: 40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.service-box h2 { font-size: 24px; margin-top: 0; margin-bottom: 15px; }
.service-box p { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }


@media (max-width: 576px) {
  .service-box {
    padding: 20px;
  }
  .service-box h2 { font-size: 20px; }
  .service-box p { font-size: 13px; }
}

@media (min-width: 992px) {
  .service-box { flex: 1 1 30%; }
}


/* Contact Promo */
.contact-promo-section {
    background-color: var(--kanns-blue);
    color: var(--kanns-white);
    padding: 35px;
    text-align: center;
    border-radius: 5px;
}
.contact-promo-section h3, .contact-promo-section h4 { color: var(--kanns-white) !important; }
.contact-promo-section a { color: var(--kanns-white); text-decoration: underline; }
.contact-promo-section .btn { background-color: var(--kanns-black); color: var(--kanns-white); }
.contact-promo-section .btn:hover { background-color: var(--kanns-white); color: var(--kanns-black); }

/* Form Styles */
.contact-form-section input[type=text],
.contact-form-section input[type=email],
.contact-form-section textarea {
    width: 100%;
    padding: 7px 10px;
    height: 40px;
    background-color: var(--kanns-medium-gray);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.contact-form-section textarea { height: 87px; resize: vertical; }
.contact-form-section label { display: block; margin-bottom: 5px; font-weight: bold; }
.contact-form-section .frm_submit button {
    background-color: var(--kanns-blue);
    color: var(--kanns-white);
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.contact-form-section .frm_submit button:hover { background-color: var(--kanns-black); }

/* Parallax Sections */
.parallax-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 100px 0;
    color: var(--kanns-white);
    position: relative;
    display: flex;
    align-items: center;
}
.parallax-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}
.parallax-section > .container { position: relative; z-index: 1; }
.parallax-section h1, .parallax-section h2, .parallax-section h4 { color: var(--kanns-white) !important; }
.parallax-section .heading-seperator {
    width: 50px;
    height: 3px;
    background-color: var(--kanns-white);
    margin-bottom: 20px;
}

/* Footer */
#footer {
    background-color: var(--kanns-white);
    color: var(--kanns-light-blue-gray);
    padding-top: 0px;
    padding-bottom: 0px;
}
#footer .multi-col-widget { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
#footer .widget { flex: 1 1 200px; margin-bottom: 30px; }
#footer .widget h2 { color: var(--kanns-white) !important; font-size: 18px; margin-bottom: 20px; }
#footer .widget p, #footer .widget small, #footer .widget a { color: var(--kanns-light-blue-gray); text-decoration: none; }
#footer .widget a:hover { color: var(--kanns-white); }
#footer .widget img { max-width:60%; height: auto%; }
.contact-widget .contact-info div { display: flex; align-items: flex-start; margin-bottom: 10px; }
.contact-widget .contact-info i { color: var(--kanns-blue); margin-right: 10px; font-size: 16px; line-height: 1.5; }
.image-post-widget ul { list-style: none; padding: 0; margin: 0; }
.image-post-widget li { display: flex; align-items: flex-start; margin-bottom: 15px; }
.image-post-widget .widget-post-thumb img { width: 50px; height: 50px; object-fit: cover; margin-right: 10px; border-radius: 4px; }
.image-post-widget .widget-post-content a { font-weight: bold; display: block; color: var(--kanns-light-blue-gray); }
.image-post-widget .widget-post-content small { font-size: 12px; }

.social-widget .social-icons { display: flex; gap: 10px; }
.social-widget .social-icons span a {
    background-color: var(--kanns-dark-blue-gray);
    color: var(--kanns-white);
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.social-widget .social-icons span a:hover { background-color: var(--kanns-blue); }

.copyright {
    background-color: var(--kanns-blue);
    color: var(--kanns-white);
    padding: 20px 0;
    font-size: 13px;
    border-top: 1px solid var(--kanns-black);
}
.copyright .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.copyright-text { margin: 0; color: var(--kanns-white); }
.copyright a { color: var(--kanns-white); text-decoration: none; }
.copyright a:hover { color: var(--kanns-black) !important; }

/* Utility */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
.col-md-6  { flex: 0 0 50%;  max-width: 50%;  padding: 0 15px; }
.col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.col-sm-12 { /* responsive placeholder */ }

@media (max-width: 992px) {
    .col-md-6, .col-md-4 { flex: 0 0 100%; max-width: 100%; }
    #header .info { flex-direction: column; align-items: flex-end; gap: 10px; }
    #navigation ul { flex-direction: column; align-items: center; }
    #navigation ul li a { padding: 8px 10px; }
}
@media (max-width: 768px) {
    .service-box { max-width: none; flex: 1 1 100%; }
    .big-letter { font-size: 70vh;}
    .tabs-container { flex-direction: column; }
    .tab-list { flex: 0 0 100%; }
    .tab-content-container { padding: 20px; }
}

@media (max-width: 480px) {
    .big-letter { font-size: 60vh;}
}

/* --- Sea Freight Page --- */
.service-page {
  padding: 60px 0;
}

.hero--sea-freight {
  position: relative;
  height: 40vh;
  background: url('/img/sea-freight-hero.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero--sea-freight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,43,92,0.6); /* dark blue overlay */
}

.hero--sea-freight .hero-content {
  position: relative;
  z-index: 2;
}

.hero--sea-freight h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.hero--sea-freight p {
  font-size: 1.25rem;
}

.service-page .container {
  max-width: 1100px;
  margin: auto;
  line-height: 1.7;
}

.service-page h2 {
  margin-top: 40px;
  color: #002b5c;
  font-size: 1.75rem;
}

.service-page ul {
  margin: 20px 0;
  padding-left: 20px;
}

.service-page ul li {
  margin-bottom: 10px;
}

.service-page ol {
  margin: 20px 0;
  padding-left: 20px;
}

.service-page .btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 25px;
  background: #002b5c;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.service-page .btn:hover {
  background: #004080;
}


/* Contact Form Styling */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.4;
  background: #fafafa;
  transition: border 0.3s ease, background 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ec1c24; /* Kanns primary red */
  background: #fff;
  outline: none;
}

.contact-form .form-actions {
  text-align: center;
}

.contact-form button.btn {
  background-color: #ec1c24;
  color: #fff;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-form button.btn:hover {
  background-color: #c3141a;
}

/* Quote Form Styling */
.quote-form {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  margin-top: 20px;
}

.quote-form .form-group {
  margin-bottom: 20px;
}

.quote-form .form-row {
  display: flex;
  gap: 20px;
}

.quote-form .form-group.half {
  flex: 1;
}

.quote-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.quote-form input,
.quote-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  background: #fafafa;
  transition: border 0.3s ease, background 0.3s ease;
}

.quote-form input:focus,
.quote-form textarea:focus {
  border-color: #ec1c24;
  background: #fff;
  outline: none;
}

.quote-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.quote-form .consent label {
  font-size: 14px;
  line-height: 1.4;
}

.quote-form .form-actions {
  text-align: center;
  margin-top: 20px;
}

.quote-form button.btn {
  background-color: #ec1c24;
  color: #fff;
  padding: 14px 35px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.quote-form button.btn:hover {
  background-color: #c3141a;
}

/* Page Heading */
.highlight-title {
  color: #ec1c24;
  font-weight: 700;
  margin-bottom: 10px;
}

.subtitle {
  margin-bottom: 25px;
  font-size: 16px;
  color: #555;
}
/* Section container */
.form-section {
  padding: 60px 20px;
  background: #f9f9f9;
}

/* Card */
.form-card {
  background: #fff;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Title & Subtitle */
.form-title {
  text-align: center;
  color: #ec1c24;
  font-size: 26px;
  margin-bottom: 10px;
}

.form-subtitle {
  text-align: center;
  color: #555;
  font-size: 16px;
  margin-bottom: 30px;
}

/* Input fields */
.styled-form .form-group {
  margin-bottom: 20px;
  flex: 1;
}

.styled-form .form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.styled-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

.styled-form input,
.styled-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #fafafa;
  transition: border 0.3s ease, background 0.3s ease;
}

.styled-form input:focus,
.styled-form textarea:focus {
  border-color: #ec1c24;
  background: #fff;
  outline: none;
}

/* Checkbox */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

/* Submit button */
.btn-submit {
  display: block;
  width: 100%;
  background-color: #ec1c24;
  color: #fff;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 10px;
}

.btn-submit:hover {
  background-color: #c3141a;
}

/* --- Footer Logo Styling --- */
.footer-logo {
  max-width: 100px; /* Adjust this value to control the width */
  height: 10 px;     /* Maintain aspect ratio */
  display: block;   /* Helps with spacing and centering if needed */
  /* If you want to center it within its container: */
  /* margin: 0 auto; */
}

@media (max-width: 992px) {
  .big-letter { font-size: 70vh; }
}
@media (max-width: 576px) {
  .big-letter { font-size: 60vh; }
}


/* Show desktop header only on large screens */
#header { display: block; }
#mobile-header, #mobile-navigation { display: none; }

@media (max-width: 992px) {
  #header { display: none; }
  #mobile-header { display: block; }
  #mobile-navigation { display: none; } /* stays hidden until .open */
  #mobile-navigation.open { display: block; }
}