@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,500i,600,600i,700,700i,800|Open+Sans:400,400i,600,600i,700,700i,800&display=swap);

/* 1. CORE DEFAULTS */
body { background: #fff; color: #555; font-family: "Open Sans", sans-serif; line-height: 26px; font-size: 15px; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { color: #212121; font-weight: 700; font-family: "Montserrat", sans-serif; }
a { color: inherit; transition: 0.2s ease; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* Buttons */
.btn-primary, .btn-dark, a.call-btn { 
    border: 0; border-radius: 3px; padding: 12px 20px 10px; font-weight: 700; 
    text-transform: uppercase; color: #fff !important; font-family: "Montserrat", sans-serif; 
    transition: 350ms; font-size: 14px; display: inline-block; text-decoration: none;
}
.btn-primary, a.call-btn { background: #ffb600; }
.btn-dark { background: #23282d; }

/* Fix Double Tap on Mobile (Only hover on devices with mice) */
@media (hover: hover) {
    .btn-primary:hover, .btn-dark:hover, a.call-btn:hover { background: #111; color: #fff !important; }
}

/* Layout Helpers */
section, .section-padding { padding: 70px 0; position: relative; }
.no-padding { padding: 0; }
.gap-60 { clear: both; height: 60px; }
.gap-40 { clear: both; height: 40px; }
.gap-20 { clear: both; height: 20px; }
.bg-overlay { position: relative; }
.bg-overlay .container { position: relative; z-index: 1; }
.bg-overlay:after { background-color: rgba(0, 0, 0, 0.8); z-index: 0; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; }

/* 2. HEADER & NAVIGATION */
.top-bar { padding: 8px 0; background: #ebebeb; }
ul.top-info li { display: inline-block; padding-right: 15px; }
ul.top-info li i { color: #ffb600; margin-right: 5px; }
.top-social ul li { display: inline-block; }
.top-social ul li a { padding: 9px 12px; color: #2c2c2c; }

.header-one, .site-navigation { background: #23282d; }
/* Reduced padding to let logo grow */
.header-one .logo-area { padding: 5px 0 !important; background: #fff; }

/* Increased Logo Size */
header .logo img, .footer-logo { 
    max-height: 150px !important; /* Bigger logo */
    width: auto !important; 
    display: block; 
    padding: 0 !important; /* Removes inner padding */
}

/* Remove background box, bring back shadow */
.footer-logo {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
  -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
  margin-bottom: 25px;
}

/* Header Right Info */
ul.top-info-box { float: right; display: flex; align-items: center; }
ul.top-info-box li { border-right: 1px solid #dedede; padding-right: 25px; margin-right: 25px; }
ul.top-info-box li:last-child { border: 0; margin: 0; padding: 0; }
.info-box-title { font-size: 14px; margin-bottom: 5px; }
.info-box-subtitle { font-weight: 700; color: #111; margin: 0; }

/* Navigation Menu */
.navbar { padding: 0; }
ul.navbar-nav > li > a { color: #fff !important; font-weight: 700; text-transform: uppercase; font-size: 14px; padding: 25px 15px !important; display: block; }
ul.navbar-nav > li:hover > a, ul.navbar-nav > li.active > a { color: #ffb600 !important; }
.navbar-toggler { background: #ffb600; padding: 8px; margin: 10px 0; }

/* =========================================
   PREMIUM DROPDOWN MENU STYLE
   ========================================= */
   .dropdown-menu {
    border: none;
    border-top: 3px solid #ffb600;
    border-radius: 0;
    padding: 0;
    min-width: 220px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    background: #fff;
    display: none;
    margin-top: 0;
    position: absolute;
    z-index: 1000;
}

.dropdown-menu li a {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f1f1;
    color: #333 !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: block;
}

.dropdown-menu li a:hover {
    color: #fff !important;
    background: #ffb600;
    padding-left: 25px; /* The "Slide" Effect */
    text-decoration: none;
}

/* DESKTOP ONLY: Open on Hover with Animation */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeInUp 0.3s;
    }
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}

/* 3. SLIDER */
.banner-carousel .banner-carousel-item { height: 700px; background-size: cover; background-position: center; position: relative; }
/* Force Text Container to Top */
.slider-content {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 20; 
    pointer-events: none; 
}
/* Enable Clicks on Text/Buttons */
.slider-content .container * { pointer-events: auto; }

.slide-title { font-size: 52px; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
.slide-sub-title { font-size: 24px; color: #fff; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; display: block;}
.slider.btn { margin-right: 10px; }
.slider.btn.border { border: 2px solid #ffb600; background: transparent; color: #fff; }
.slider.btn.border:hover { background: #ffb600; color: #fff; }

/* Slider Arrows */
.banner-carousel .carousel-control {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    background: rgba(0,0,0,0.3); color: #fff; width: 50px; height: 50px;
    line-height: 50px; text-align: center; border: none; cursor: pointer; transition: 0.3s;
}
.banner-carousel .carousel-control:hover { background: #ffb600; }
.banner-carousel .carousel-control.left { left: 20px; }
.banner-carousel .carousel-control.right { right: 20px; }


/* 4. SECTIONS */
.call-to-action-box { margin-top: -50px; position: relative; z-index: 2; }
.action-style-box { background: #ffb600; padding: 40px; border-radius: 3px; }
.action-title { color: #fff; margin: 0; font-size: 20px; font-weight: 700; text-transform: uppercase; }

.ts-service-box { margin-bottom: 30px; display: flex; }
.ts-service-box .ts-service-icon { margin-right: 20px; }
.ts-service-box .ts-service-icon i { font-size: 36px; color: #ffb600; }
.ts-service-box-content h3 { font-size: 18px; margin-bottom: 10px; text-transform: uppercase; }
.ts-intro { margin-bottom: 40px; }

/* Accordion */
.accordion-group .card { border: none; border-bottom: 1px solid #eee; margin-bottom: 5px; }
.accordion-group .card-header { background: transparent; padding: 0; border: none; }
.accordion-group .card-header .btn {
    width: 100%; text-align: left; font-weight: 700; text-transform: uppercase; 
    color: #333; text-decoration: none; padding: 15px 0; position: relative;
}
.accordion-group .card-header .btn:hover { color: #ffb600; }
.accordion-group .card-header .btn[aria-expanded="true"] { color: #ffb600; }
.accordion-group .card-header .btn:after {
    font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; 
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.accordion-group .card-header .btn[aria-expanded="true"]:after { content: "\f106"; }

/* 5. FOOTER */
.footer { background-color: #0d0d0d; color: #999; }
.footer-main { padding: 80px 0 60px; }
.footer .widget-title { font-size: 16px; font-weight: 700; margin: 0 0 30px; padding-left: 15px; text-transform: uppercase; color: #fff; border-left: 3px solid #ffb600; }
.copyright { background: #ffb600; color: #111; padding: 25px 0; font-weight: 600; font-size: 12px; }

/* =========================================
   6. MOBILE FIXES (CRITICAL)
   ========================================= */
   @media (max-width: 991px) {
    /* Force Logo Left / Button Right */
    .header-one .logo-area .row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%; margin: 0; padding: 0 15px;
    }
    
    /* MAXIMIZED MOBILE LOGO */
    .header-one .logo { 
        flex: 0 1 auto !important; /* "1" allows shrinking if screen is tiny */
        width: auto !important; 
        max-width: 65%; /* Guardrail: Never take more than 65% of screen width */
        text-align: left; 
    }
    
    header .logo img { 
        max-height: 110px !important; /* Target Height (Big!) */
        width: auto !important;       
        margin: 0 !important;
    }

    .header-one .header-right { 
        flex: 0 0 auto !important; 
        width: auto !important; 
        padding: 0; 
        text-align: right; 
    }
    /* Show Call Button Only */
    ul.top-info-box { display: block !important; margin: 0; padding: 0; }
    ul.top-info-box li { display: none !important; }
    ul.top-info-box li.header-get-a-quote { display: block !important; border: none; margin: 0; padding: 0; }
    
    a.call-btn { font-size: 12px !important; padding: 8px 15px !important; }
    
    /* Menu Fix */
    .navbar-collapse {
        background: #212121;
        position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999;
        border-top: 1px solid #444;
    }
    .banner-carousel .banner-carousel-item { height: 500px !important; }
}
/* =========================================
   FIX FOR SUB-PAGE BANNERS
   ========================================= */
   .banner-area {
    padding: 180px 0; /* Gives the banner its height */
    background-size: cover !important; /* Ensures image covers the whole area */
    background-position: center center !important; /* Centers the image */
    background-repeat: no-repeat !important;
    position: relative;
    z-index: 1;
}



/* Force Text to White with Strong Drop Shadow */
.banner-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  /* This adds a black outline/shadow to the text so it's readable on any image */
  text-shadow: 2px 2px 8px rgba(0,0,0,0.9) !important; 
}

/* =========================================
   RESTORE CONTACT PAGE ICONS & BOXES
   ========================================= */

/* The Box Container */
.ts-service-box-bg {
  background: #252525;
  color: #fff;
  padding: 30px;
  border-radius: 4px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}
.ts-service-box-bg:hover {
  transform: translateY(-5px);
}

/* The Text inside the box */
.ts-service-box-bg h4, 
.ts-service-box-bg p {
  color: #fff !important;
}

/* The Round Icon */
.ts-service-icon.icon-round i {
  background: #ffb600;
  color: #fff;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  display: inline-block;
}

/* =========================================
   SLIDER TEXT VISIBILITY (Text-Only Fix)
   ========================================= */

/* Targeted Rule for Slider Headings & Paragraphs */
.slide-title, 
.slide-sub-title, 
.slider-content p,
.slider-content h2,
.slider-content h3 {
    color: #ffffff !important; /* Pure White Text */
    font-weight: 900 !important; /* Maximum Thickness */
    
    /* The "Heavy Lift" Shadow Effect: */
    /* Lines 1-4: Create a hard black outline around letters */
    /* Line 5: Creates a soft dark glow behind them to separate from busy backgrounds */
    text-shadow: 
        2px 2px 0 #000, 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        0 0 20px rgba(0,0,0,0.9) !important;
        
    letter-spacing: 1px; /* Adds tiny space to make reading easier */
}

/* Optional: Make the "Call To Action" buttons in the slider pop more too */
.slider.btn {
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Shadow behind buttons */
    border-width: 2px !important;
    font-weight: 800 !important;
}

/* =========================================
   FIX MOBILE SLIDER TEXT (Prevent Cut-off)
   ========================================= */
   @media (max-width: 767px) {
    /* 1. Shrink the Main Title */
    .slide-title {
        font-size: 24px !important; /* Was 52px */
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        white-space: normal !important; /* Forces text to wrap to next line */
        word-wrap: break-word !important; /* Breaks long words if necessary */
    }

    /* 2. Shrink the Subtitle */
    .slide-sub-title {
        font-size: 16px !important; /* Was 24px */
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }

    /* 3. Hide the paragraph text on tiny screens to save space (Optional) */
    /* This keeps the buttons visible without clutter */
    .slider-content p {
        font-size: 13px !important;
    }

    /* 4. Add "Safety Padding" so text doesn't touch screen edges */
    .slider-content .col-md-12 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 5. Adjust Buttons for Mobile */
    .slider.btn {
        font-size: 11px !important;
        padding: 8px 15px !important;
        margin-top: 5px;
    }
}/* =========================================
   MOBILE SLIDER FIX (Hide Arrows)
   ========================================= */
@media (max-width: 767px) {
    /* Hide the Left/Right Arrows on Phone */
    .banner-carousel .carousel-control {
        display: none !important;
    }

    /* (Optional) Ensure the container allows swiping */
    .banner-carousel {
        touch-action: pan-y;
    }
}
/* =========================================
   HEADER FACEBOOK ICON SIZE
   ========================================= */
   .top-social .social-icon i {
    font-size: 20px !important; /* Default is usually 14px */
    vertical-align: middle;     /* Keeps it centered vertically */
}

/* Optional: Make the clickable area bigger too for easier tapping */
.top-social ul li a {
    padding: 10px 15px !important;
}