/**
* Template Name: Vlava
* Template URL: https://bootstrapmade.com/vlava-free-bootstrap-one-page-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

:root { 
  --background-color: #ffffff; 
  --default-color: #212529; 
  --heading-color: #052c3f; 
  --accent-color: #85b0be; 
  --surface-color: #ffffff; 
  --contrast-color: #ffffff; 
}

:root {
  --nav-color: #ffffff;  
  --nav-hover-color: #85b0be; 
  --nav-mobile-background-color: #ffffff; 
  --nav-dropdown-background-color: #ffffff; 
  --nav-dropdown-color: #212529; 
  --nav-dropdown-hover-color: #85b0be; 
}

.light-background { --background-color: #0b3a44; --surface-color: #0b3a44; }
.dark-background { --background-color: #04253d; --default-color: #ffffff; --heading-color: #0b3a44; --surface-color: #07426d; --contrast-color: #ffffff; }

:root { scroll-behavior: smooth; }

/*--------------------------------------------------------------
# General Styling
--------------------------------------------------------------*/
/* FIX: Stop horizontal scrollbar jitter */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important; 
}

body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); }
a { color: var(--accent-color); text-decoration: none; transition: 0.3s; }
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: #0b3a44; font-family: var(--heading-font); }

/* PHP Email Form Messages */
.php-email-form .error-message { display: none; background: #df1529; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; }
.php-email-form .sent-message { display: none; color: #ffffff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; }
.php-email-form .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px; }
.php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid var(--accent-color); border-top-color: var(--surface-color); animation: php-email-form-loading 1s linear infinite; }
@keyframes php-email-form-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #ffffff;
  --default-color: #212529; 
  --heading-color: #052c3f;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}
.header .logo { line-height: 1; }
.header .logo img { max-height: 70px; margin-right: 8px; }
.header .logo h1 { font-size: 30px; margin: 0; font-weight: 700; color: var(--heading-color); }
.scrolled .header { box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1); --background-color: rgba(255, 255, 255, 0.95); }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .navmenu { padding: 0; }
  .navmenu ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; }
  .navmenu li { position: relative; }
  .navmenu a, .navmenu a:focus { color: #2a418a; padding: 18px 15px; font-size: 16px; font-family: var(--nav-font); font-weight: 400; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; }
  .navmenu a i, .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; transition: 0.3s; }
  .navmenu li:last-child a { padding-right: 0; }
  .navmenu li:hover>a, .navmenu .active, .navmenu .active:focus { color: var(--nav-hover-color); }
}

@media (max-width: 1199px) {
  .mobile-nav-toggle { color: #2a418a; font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s; z-index: 9999; }
  .navmenu { padding: 0; z-index: 9997; }
  .navmenu ul { display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 6px; background-color: var(--nav-mobile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); }
  
  /* CHANGED: Mobile Menu Font Color to Dark Blue */
  .navmenu a, .navmenu a:focus { 
    color: #0b3a44 !important; /* Dark Blue */
    padding: 10px 20px; 
    font-family: var(--nav-font); 
    font-size: 17px; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    white-space: nowrap; 
    transition: 0.3s; 
  }
  
  .mobile-nav-active { overflow: hidden; }
  .mobile-nav-active .mobile-nav-toggle { color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999; }
  .mobile-nav-active .navmenu { position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s; }
  .mobile-nav-active .navmenu>ul { display: block; }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer { color: var(--default-color); background: url(../img/footer-bg.jpg) center no-repeat; background-size: cover; font-size: 14px; text-align: center; padding: 30px 0; position: relative; }
.footer:after { content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; }
.footer .container { position: relative; z-index: 1; }
.footer h3 { font-size: 36px; font-weight: 700; position: relative; padding: 0; margin: 0 0 15px 0; }
.footer p { font-size: 15; font-style: italic; padding: 0; margin: 0 0 30px 0; }
.footer .social-links { margin: 0 0 30px 0; }
.footer .social-links a { font-size: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-color); color: var(--contrast-color); line-height: 1; margin: 0 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s; }
.footer .social-links a:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); text-decoration: none; }
.footer .copyright { padding-top: 25px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.footer .credits { font-size: 13px; padding-top: 5px; }

/*--------------------------------------------------------------
# Preloader & Scroll Top
--------------------------------------------------------------*/
#preloader { position: fixed; inset: 0; z-index: 999999; overflow: hidden; background: var(--background-color); transition: all 0.6s ease-out; }
#preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #ffffff; border-color: var(--accent-color) transparent var(--accent-color) transparent; border-radius: 50%; width: 60px; height: 60px; animation: animate-preloader 1.5s linear infinite; }
@keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 99999; background-color: var(--accent-color); width: 40px; height: 40px; border-radius: 4px; transition: all 0.4s; }
.scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; }
.scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); }
.scroll-top.active { visibility: visible; opacity: 1; }
@media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } }

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section, .section { color: var(--default-color); background-color: var(--background-color); padding: 60px 0; scroll-margin-top: 90px; overflow: clip; }
@media (max-width: 1199px) { section, .section { scroll-margin-top: 66px; } }
.section-title { text-align: center; padding-bottom: 60px; position: relative; }
.section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; }
.section-title p { margin-bottom: 0; }

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 { font-weight: 700; font-size: 34px; margin-bottom: 30px; }
.about .content p { margin-bottom: 30px; text-align: justify; }
.about .content .about-btn { padding: 8px 30px 9px 30px; color: var(--accent-color); border-radius: 50px; transition: 0.3s; text-transform: uppercase; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; border: 2px solid var(--accent-color); }
.about .content .about-btn i { font-size: 16px; padding-left: 5px; }
.about .content .about-btn:hover { background: var(--accent-color); color: var(--contrast-color); }
.about .icon-box i { font-size: 40px; color: var(--accent-color); margin-bottom: 10px; }
.about .icon-box h4 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; }
.about .icon-box h4 a { color: var(--heading-color); transition: 0.3s; }
.about .icon-box p { font-size: 15px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 0; }
.about .icon-box:hover h4 a { color: var(--accent-color); }

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item { background-color: var(--surface-color); box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1); padding: 30px; }
.stats .stats-item i { color: var(--accent-color); font-size: 42px; line-height: 0; margin-right: 20px; }
.stats .stats-item span { color: var(--heading-color); font-size: 36px; display: block; font-weight: 600; }
.stats .stats-item p { padding: 0; margin: 0; font-family: var(--heading-font); font-size: 16px; }

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

.testimonials { padding: 80px 0; position: relative; }
.testimonials:before { content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; z-index: 2; }
.testimonials .testimonials-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.testimonials .container { position: relative; z-index: 3; }
.testimonials .testimonial-item { text-align: center; color: #fff; }
.testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; color: #fff; }
.testimonials .testimonial-item h4 { font-size: 14px; margin: 0 0 15px 0; color: rgba(255,255,255,0.8); }
.testimonials .testimonial-item p { font-style: italic; margin: 0 auto 15px auto; color: #fff; }
.testimonials .swiper-pagination .swiper-pagination-bullet { background-color: rgba(255,255,255,0.5); }
.testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: #fff; }

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters { padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center; }
.portfolio .portfolio-filters li { cursor: pointer; display: inline-block; padding: 0; font-size: 18px; font-weight: 400; margin: 0 10px; line-height: 1; margin-bottom: 5px; transition: all 0.3s ease-in-out; }
.portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active { color: var(--accent-color); }
.portfolio .portfolio-content { position: relative; overflow: hidden; }
.portfolio .portfolio-content img { transition: 0.3s; width: 100%; }
.portfolio .portfolio-content .portfolio-info { opacity: 0; position: absolute; inset: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(0, 0, 0, 0.6); padding: 15px; }
.portfolio .portfolio-content:hover .portfolio-info { opacity: 1; }

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap { background-color: var(--surface-color); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); padding: 30px; margin-bottom: 30px; }
.contact .info-item i { font-size: 20px; color: var(--accent-color); width: 56px; height: 56px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent-color), transparent 40%); margin-right: 15px; }
.contact .info-item h3 { font-size: 18px; font-weight: 700; margin: 0 0 2px 0; }


/* ==============================================================
   FINAL RESPONSIVE & FIXES
   ============================================================== */

/* 1. HERO & BANNER RESET */
#hero, .banner {
  padding-top: 120px;
  background: #ffffff;
  overflow: hidden !important; 
  height: auto !important;
  min-height: 0 !important;
}

/* 2. HEADER COLOR */
#header { background-color: #ffffff !important; }

/* 3. RESPONSIVE CAROUSEL */
#carouselExampleInterval, .carousel-inner, .carousel-item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important; 
}

/* 4. IMAGE FIX (Full Width, No Crop) */
.carousel-img, #hero img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
  object-fit: contain !important;
}

/* 5. CAROUSEL ARROWS */
.carousel-control-prev, .carousel-control-next {
  width: 45px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  border: none;
  z-index: 10;
}
.carousel-control-prev { left: 10px; }
.carousel-control-next { right: 10px; }
.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(1) grayscale(100) brightness(0); 
  width: 20px;
  height: 20px;
}

/* 6. MOBILE FIXES */
@media (max-width: 991px) {
  
  /* FIX 1: Adjust Hero Top Padding */
  #hero, .banner {
    padding-top: 90px !important; 
    padding-bottom: 0 !important; /* REMOVED Bottom Padding */
    background-color: #ffffff;
  }

  /* FIX 2: Reduce About Section Top Padding to close the gap */
  #about {
    padding-top: 20px !important; /* Reduced from 60px to 20px */
  }
  
  /* FIX 3: HIDE Arrows on mobile */
  .carousel-control-prev, 
  .carousel-control-next {
    display: none !important;
  }
  
  /* Ensure full image visibility */
  .carousel-item img, .carousel-img {
    margin-top: 0px; 
    object-fit: contain !important;
  }

  /* Text Justification */
  .about-desc, .about p { 
    text-align: justify; 
    padding: 0 10px; 
  }
}

/* 7. CONTACT BUTTON FORCE FIX */
.php-email-form button[type="submit"] {
  background: #85b0be !important; 
  color: #ffffff !important;
  border: 0 !important;
  padding: 10px 30px !important;
  border-radius: 50px !important;
  transition: 0.4s !important;
  font-family: "Raleway", sans-serif;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer;
  margin-top: 20px;
}

.php-email-form button[type="submit"]:hover {
  background: #6a9aa8 !important; 
}

#footer .sitename {
  color: #ffffff !important;
}
/* --- FIX TESTIMONIAL DOTS --- */

/* 1. Create space at the bottom of the swiper specifically for the dots */
#testimonials .swiper {
    padding-bottom: 50px !important; /* Reserves 50px of empty space at the bottom */
    position: relative !important;
}

/* 2. Force the dots into that empty space */
#testimonials .swiper-pagination {
    position: absolute !important;
    bottom: 10px !important; /* Sit 10px from the bottom edge */
    top: auto !important;    /* Disable any 'center' alignment */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important; /* Remove any centering transforms */
    text-align: center;
    z-index: 99;
}

/* 3. Optional: Make sure dots are visible */
#testimonials .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5) !important;
    width: 12px;
    height: 12px;
    opacity: 1;
    margin: 0 5px;
}

#testimonials .swiper-pagination-bullet-active {
    background-color: #ffffff !important;
}
/* --- RESPONSIVE FLOATING WHATSAPP BUTTON --- */

/* 1. Default Design (Desktop): Pill Shape with Text */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50px;
  padding: 12px 24px;
  text-decoration: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.whatsapp-float span {
  font-weight: 600;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block; /* Visible by default */
}

.whatsapp-float i {
  font-size: 20px;
}

.whatsapp-float:hover {
  background-color: #1DA851;
  transform: translateY(-3px);
  color: #fff;
}

/* 2. Mobile Design (Screens smaller than 768px) */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px;       /* Force fixed width */
    height: 50px;      /* Force fixed height */
    border-radius: 50%; /* Make it a perfect circle */
    padding: 0;        /* Remove extra padding */
    bottom: 15px;      /* Slightly lower on mobile */
    right: 15px;       /* Slightly closer to edge */
  }

  .whatsapp-float span {
    display: none;     /* HIDES the text "WhatsApp Us" */
  }

  .whatsapp-float i {
    font-size: 24px;   /* Make the icon slightly bigger */
    margin: 0;
  }
}
/* --- PREMIUM FOOTER DESIGN (FIXED) --- */

.footer {
  /* 1. The Gradient IS the background image, so we set it here */
  background: linear-gradient(135deg, #04253d 0%, #0b3a44 100%) !important;
  
  /* 2. Top Orange Accent Line */
  border-top: 4px solid #f58634; 
  
  /* 3. Spacing */
  padding-top: 50px;
  padding-bottom: 30px;
  position: relative;
}

/* Remove the dark overlay from the old template */
.footer:after {
  display: none !important;
}

/* Force Text to be White */
.footer, .footer h3, .footer p, .footer .copyright, .footer .credits {
  color: #ffffff !important;
}

/* Social Icon Styling */
.footer .social-links a {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.3s;
  color: #fff; /* Ensure icons are white */
}

.footer .social-links a:hover {
  background: #f58634;
  border-color: #f58634;
  color: #fff;
}
/* --- TESTIMONIALS SECTION (Match Footer Theme) --- */

#testimonials, .testimonials {
  /* 1. Apply the same Deep Blue Gradient */
  background: linear-gradient(135deg, #04253d 0%, #0b3a44 100%) !important;
  
  /* 2. Optional: Add the Orange Top Border to match the footer style */
  border-top: 4px solid #f58634; 

  border-bottom: 4px solid #f58634;
  
  /* 3. Ensure text is white */
  color: #ffffff !important;
}

/* 4. HIDE the background image (Skyscrapers) */
.testimonials .testimonials-bg {
  display: none !important;
}

/* 5. REMOVE the dark overlay tint */
.testimonials:before {
  display: none !important;
}