/* ======================================================
   TABLE OF CONTENTS
======================================================
1.  Font Face Declarations
2.  Root Variables
3.  General Style
    3.1 Headings
    3.2 Paragraphs
    3.3 Links
    3.4 Buttons
    3.5 Image
    3.6 Lists
4.  Utility Classes
    4.1 Color Utilities
    4.2 Background Utilities
    4.3 Sizing Utilities
    4.4 Other Utilities
5.  Navbar Styles
    5.1 Offcanvas
    5.1.1 Offcanvas Social Icon
    5.2 Dropdown
6.  Hero Styles
7.  About Styles
8.  Service Styles
9.  Process Styles
10. Pricing Styles
11. Client & Testimonials Styles
12. FAQs Styles
13. Blog Post Styles
14. Contact Styles
15. Banner Styles
16. Team Styles
17. Quotation Styles
18. Career Styles
19. 404 Error Styles
20. Single Post Styles
21. Maps Styles
22. Footer Styles
23. Animation
24. Media Queries
====================================================== */

/* ======================================================
   1. FONT FACE DECLARATIONS
   Define custom fonts used throughout the template.
====================================================== */

/* ======================================================
   2. ROOT VARIABLES
   Global variables for colors, fonts, and reusable values.
====================================================== */
:root {
  --text-color: #5c5c5b;
  --color-main: #215343;
  --color-primary: #1e3029;
  --color-secondary: #cecece;
  --color-accent: #efe51c;
  --color-bg-1: #fcf8ea;
  --color-border: #888888;
  --font-1: "worksans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-2: "urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  font-size: 16px;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ======================================================
   3. GENERAL STYLE
   Base styles for HTML elements.
====================================================== */

/* ------------------------------------------------------
   3.1 HEADINGS
   Typography for all heading levels.
------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-2);
  font-weight: 900;
  line-height: 1.3em;
  color: var(--color-primary);
  letter-spacing: 1.5px;
}

h1 {
  font-size: 55px;
}

h2 {
  font-size: 46px;
}

h3 {
  font-size: 38px;
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 21px;
}

h6 {
  font-size: 18px;
}

/* ------------------------------------------------------
   3.2 PARAGRAPHS
   Styles for paragraph text.
------------------------------------------------------ */
p {
  font-size: 16px;
  color: var(--text-color);
  font-weight: 400;
  font-family: var(--font-1);
  line-height: 1.8em;
}

.subtitle {
  font-size: 16px;
  font-weight: 600;
  word-spacing: 6px;
  letter-spacing: 1.5px;
  color: var(--color-accent);
}

/* span {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    font-family: var(--font-1);
} */

/* ------------------------------------------------------
   3.3 LINKS
   Anchor tag styles.
------------------------------------------------------ */
a {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
  font-size: 16px;
  color: var(--color-primary);
  font-family: var(--font-1);
}

/* ------------------------------------------------------
   3.4 BUTTONS
   Button base styles.
------------------------------------------------------ */
button {
  font-family: var(--font-1);
  font-weight: 400;
  font-size: 16px;
  border: none;
  outline: none;
  box-shadow: none;
}

.btn-1 {
  background-color: var(--color-main);
  color: var(--color-bg-1);
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.btn-1:hover {
  background-color: var(--color-accent);
  color: black;
}

.btn-2 {
  background-color: var(--color-accent);
  color: var(--color-primary);
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.btn-2:hover {
  background-color: white;
}

.btn-3 {
  background-color: transparent;
  color: var(--color-accent);
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.btn-3:hover {
  color: white;
}

.btn-4 {
  background-color: white;
  color: var(--color-primary);
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.btn-4:hover {
  background-color: var(--color-accent);
}

.btn-5 {
  background-color: var(--color-accent);
  color: var(--color-primary);
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.btn-5:hover {
  background-color: var(--color-main);
  color: white;
}

/* ------------------------------------------------------
   3.5 IMAGE
   Image element styles.
------------------------------------------------------ */
img {
  object-fit: cover;
  object-position: center;
  width: 100%;
}

img.nav-logo-brand {
  width: auto !important;
}

/* ------------------------------------------------------
   3.6 LISTS
   List element styles.
------------------------------------------------------ */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  font-family: var(--font-1) !important;
  font-weight: 400;
  color: var(--text-color);
}

/* ------------------------------------------------------
   4.1 COLOR UTILITIES
   Utility classes for text colors.
------------------------------------------------------ */
.c-text {
  color: var(--text-color) !important;
}

.c-main {
  color: var(--color-main);
}

.c-primary {
  color: var(--color-primary);
}

.c-secondary {
  color: var(--color-secondary);
}

.c-accent {
  color: var(--color-accent);
}

.c-white {
  color: white !important;
}

/* ------------------------------------------------------
   4.2 BACKGROUND UTILITIES
   Utility classes for background colors.
------------------------------------------------------ */

.bg-main {
  background-color: var(--color-main);
}

.bg-prime {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-bg-1 {
  background-color: var(--color-bg-1);
}

.bg-white {
  background-color: white;
}

/* ------------------------------------------------------
   4.3 SIZING UTILITIES
   Utility classes for element sizing and spacing.
------------------------------------------------------ */

.page-size {
  max-width: 1300px;
  width: 100%;
  padding: 100px 32px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------
   4.4 OTHER UTILITIES
   Miscellaneous utility classes.
------------------------------------------------------ */
.divider {
  border: 1px solid var(--color-border);
}

/* ======================================================
   5. NAVBAR STYLES
   Styles for navigation bar and navigation elements.
====================================================== */

.nav-link {
  color: var(--color-secondary);
  font-size: 16px;
  font-family: var(--font-1);
  font-weight: 400;
  box-shadow: none;
}

.nav-link.dropdown-toggle:hover {
  color: white;
  box-shadow: none;
}

.nav-link.dropdown-toggle:active {
  box-shadow: none;
}

.nav-link:hover {
  color: var(--color-accent);
}

.nav-link.active {
  color: var(--color-accent) !important;
  box-shadow: none;
}

.nav-link:focus,
.dropdown-item:focus {
  color: white;
  outline: none;
  box-shadow: none !important;
}

.dropdown-toggle {
  box-shadow: none !important;
}

.dropdown-menu {
  color: var(--text-color);
  min-width: 240px;
  border: none;
  box-shadow: none;
  border-radius: 0px;
}

.dropdown-menu a {
  padding-top: 4px;
  padding-bottom: 4px;
}

.dropdown-menu:hover a:hover {
  color: #fff;
  background-color: var(--color-main);
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.dropdown-item {
  color: var(--text-color);
  font-weight: 500 !important;
}

.dropdown-item.active {
  color: var(--color-main) !important;
  background-color: transparent !important;
}

.dropdown-item:hover {
  color: var(--color-main) !important;
  background-color: transparent !important;
}

.logo-wrapper {
  max-width: 180px;
  padding-right: 30px;
  border-right: 1px solid var(--color-border);
}

.nav-phone {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
}

.nav-phone span {
  color: var(--color-secondary);
}

.nav-phone i {
  color: var(--color-accent);
}

/* Logo brand specific styles */
.navbar img.nav-logo.nav-logo-brand,
.navbar .navbar-brand img.nav-logo-brand,
.navbar .logo-wrapper img.nav-logo-brand,
.navbar .navbar-brand .nav-logo-brand,
.navbar .logo-wrapper .nav-logo-brand,
.navbar-nav .logo-wrapper .navbar-brand img.nav-logo-brand {
  object-fit: fill !important;
  width: 47px !important;
  max-width: 47px !important;
  min-width: 47px !important;
  margin-right: -24px !important;
  height: auto !important;
}

/* ------------------------------------------------------
   5.1 OFFCANVAS
   Styles for offcanvas navigation menu.
------------------------------------------------------ */

.btn-close {
  color: var(--color-main) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--color-main)'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 1 !important;
}

.btn-close:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--color-main)'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.offcanvas-icon {
  background-color: var(--color-accent);
  padding: 8px;
  border-radius: 4px;
}

.offcanvas {
  background-color: var(--color-bg-1) !important;
}

/* ------------------------------------------------------
   6. Hero
   Styles for hero section.
------------------------------------------------------ */
.hero-icon-circle {
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 5px solid var(--color-primary);
}

.hero-icon-circle:nth-child(2),
.hero-icon-circle:nth-child(3),
.hero-icon-circle:nth-child(4) {
  margin-left: -10px;
}

.hero-trust-badge {
  background-color: var(--color-main);
  padding: 12px 16px;
  border-radius: 12px;
  width: max-content;
  max-width: 100%;
  border-left: 3px solid var(--color-accent);
}

.hero-trust-badge span {
  font-size: 0.95rem;
}

.hero-trust-badge small {
  font-size: 0.8rem;
  display: block;
}

.hero-trust-icon {
  color: var(--color-accent);
  font-size: 18px;
  flex-shrink: 0;
}

@media screen and (max-width: 576px) {
  .hero-trust-badge {
    width: 100%;
    padding: 10px 12px;
  }

  .hero-trust-badge span {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .hero-trust-badge small {
    font-size: 0.75rem;
    margin-left: 0 !important;
    margin-top: 4px;
  }

  .hero-trust-icon {
    font-size: 16px;
  }
}

/* About */
.padding-bottom-8 {
  padding-bottom: 8rem;
}

.about-img {
  object-fit: cover;
}

.about-card {
  background-color: var(--color-primary);
  padding: 16px;
  min-height: 260px;
}

/* Services */
.services-card {
  padding: 24px;
  background-color: var(--color-primary);
  min-height: 400px;
}

.services-card-icon-circle {
  background-color: var(--color-main);
  border-radius: 50%;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-it-works-card {
  padding: 20px;
  background-color: var(--color-main);
}

.how-it-works-circle-number {
  background-color: var(--color-accent);
  color: var(--color-main);
  font-family: var(--font-2);
  font-size: 26px;
  border-radius: 50%;
  padding: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
}

/* FAQ  */
.accordion,
.accordion-button,
.accordion-item,
.accordion-header,
.accordion-body {
  border: none !important;
  box-shadow: none !important;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  margin-bottom: 0.5rem !important;
}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
  display: none !important;
}

.accordion-header {
  background-color: var(--color-bg-1) !important;
}

.accordion-button {
  position: relative;
  padding: 0.75rem 3rem 0.75rem 1rem !important;
  background-color: var(--color-bg-1) !important;
  min-height: auto;
  line-height: 1.4;
}

.accordion-button:not(.collapsed) {
  border-bottom: none !important;
}

.accordion-body {
  background-color: var(--color-bg-1) !important;
  padding: 0.75rem 1rem 1.25rem !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

.accordion-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
  font-size: 0.9rem;
  color: var(--color-main);
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-button:not(.collapsed) .accordion-icon {
  transform: rotate(180deg);
}

.accordion-button:not(.collapsed) .accordion-icon::before {
  content: "\f068";
}

.accordion-button.collapsed .accordion-icon::before {
  content: "\2b";
}

/* Testimonials Banner */
.testimonials-bg {
  position: relative;
  overflow: hidden;
}

.testimonials-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.testimonials-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.testimonials-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  z-index: 1;
}

.testimonials-bg-content {
  position: relative;
  z-index: 2;
}

.testimonials-icon {
  font-size: 72px;
  margin-bottom: 20px;
  color: var(--color-accent);
}

.testimonials-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* Testimonials */
.testimonials-card {
  background-color: white;
  padding: 32px;
}

.testimonials-icon-right {
  font-size: 56px;
  color: var(--color-main);
}

.testimonials-text {
  font-size: 14px;
  color: var(--text-color);
}

/* Blog Post */
.blog-card {
  padding: 20px;
}

.blog-img {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.blog-img-wrapper {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.blog-img-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 10;
}

.blog-date {
  font-size: 14px;
  color: var(--color-main);
  font-weight: 700;
}

.blog-img-wrapper:hover .blog-img,
.blog-col-1:hover .blog-img,
.blog-col-2:hover .blog-img,
.blog-col-3:hover .blog-img,
.blog-col-4:hover .blog-img,
.blog-col-5:hover .blog-img,
.blog-col-6:hover .blog-img {
  transform: scale(1.05) rotate(2deg);
}

.blog-img-wrapper:hover::before {
  opacity: 1;
}

.recent-post-img {
  width: 100%;
  height: 80%;
  object-fit: cover;
}

.recent-post-card {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../img/recent-post-iYkrype.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 32px;
}

/* Why Choose Us */

#whyChooseUsAccordion .accordion-header {
  background-color: var(--color-primary) !important;
}

#whyChooseUsAccordion .accordion-button {
  background-color: var(--color-primary) !important;
  color: white !important;
}

#whyChooseUsAccordion .accordion-body {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
}

#whyChooseUsAccordion
  .accordion-button:not(.collapsed)
  .accordion-icon::before {
  color: var(--color-accent) !important;
}

#whyChooseUsAccordion .accordion-button.collapsed .accordion-icon::before {
  color: var(--color-accent) !important;
}

.img-why-choose-us {
  object-fit: cover;
}

/* Our Value */
.our-value-card {
  background-color: white;
  padding: 24px;
}

.our-value-icon {
  height: 48px;
  width: 48px;
  font-size: 24px;
  color: var(--color-primary);
  background-color: var(--color-accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Video */

/* Our Team */

/* Installation */

/* Pricing */

/* Career */

/* 404 Page */

/* Single post */
.single-post-banner {
  background-color: var(--color-primary);
  padding: 32px;
}
.banner-icon {
  font-size: 48px;
  color: var(--color-accent);
}
.single-post-form {
  background-color: white;
  padding: 64px;
}
.comment-input {
  background-color: var(--color-bg-1);
  padding: 14px 20px 10px;
  border: none;
  outline: none;
  box-shadow: none;
}
.comment-input::placeholder {
  color: var(--text-color);
}

/* contact */
.contact-form {
  background-color: white;
  padding: 32px;
}
.contact-input {
  background-color: var(--color-bg-1);
  padding: 14px 20px 10px;
  border: none;
  outline: none;
  box-shadow: none;
}
.contact-input::placeholder {
  color: var(--text-color);
}
.contact-input-label {
  font-size: 14px;
  font-family: var(--font-1);
  color: black;
}

.contact-info {
  background-color: var(--color-primary);
  padding: 24px;
}
.maps-wrapper {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 5px;
  overflow: hidden;
}

.maps-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  transition: background-color 0.3s ease;
}

.maps-overlay:hover {
  background-color: transparent;
}

.maps {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1;
  pointer-events: auto;
}

/* Footer */
footer.bg-prime > .page-size {
  display: flex;
  flex-direction: column;
}

.footer-link {
  color: var(--color-secondary);
}

.footer-link:hover {
  color: var(--color-accent);
}

.footer-border {
  border-bottom: 1px solid var(--color-border);
}

.social-icon-circle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-main);
  border: none;
  font-size: 16px;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.social-icon-circle:hover {
  background-color: white;
}

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1049;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float:hover {
  background-color: #1ebe5b;
  color: #fff;
  transform: scale(1.08);
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #25d366;
  animation: whatsapp-pulse 2.2s infinite;
  z-index: -1;
}

@keyframes whatsapp-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (max-width: 991.98px) {
  .whatsapp-float {
    right: 16px;
    bottom: 96px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

.footer-logo {
  width: 250px;
}

/* Footer logo brand styles */
footer .footer-logo.nav-logo-brand,
footer img.footer-logo.nav-logo-brand {
  object-fit: fill !important;
  width: 47px !important;
  max-width: 47px !important;
  min-width: 47px !important;
  margin-right: -24px !important;
  height: auto !important;
}

/* ======================================================
   23. ANIMATION
   Animation keyframes and animation utility classes.
====================================================== */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

.fade-in {
  animation-name: fadeIn;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

.delay-4 {
  animation-delay: 0.4s;
}

.delay-5 {
  animation-delay: 0.5s;
}

.fade-in {
  animation-fill-mode: both;
}

/* ======================================================
   24. MEDIA QUERIES
   Responsive styles for different screen sizes.
====================================================== */
@media screen and (min-width: 760px) and (max-width: 991px) {
  /* Adjust column width for tablet */
  .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .col-lg-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 992px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.1em;
  }

  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 38px;
  }

  h3 {
    font-size: 27px;
  }

  h4 {
    font-size: 21px;
  }

  h5 {
    font-size: 19px;
  }

  h6 {
    font-size: 14px;
  }

  p {
    font-size: 14px;
  }

  button {
    font-size: 12px;
  }

  a {
    font-size: 12px;
  }

  .page-size {
    width: 100%;
    padding: 50px 32px;
  }

  .padding-bottom-8 {
    padding-bottom: 0;
  }

  .about-img-2 {
    max-height: 500px;
  }

  .nav-logo {
    max-height: 40px;
    padding-left: 20px;
  }

  .navbar img.nav-logo.nav-logo-brand,
  .navbar .navbar-brand img.nav-logo-brand,
  .navbar .logo-wrapper img.nav-logo-brand,
  .navbar .navbar-brand .nav-logo-brand,
  .navbar .logo-wrapper .nav-logo-brand,
  .navbar-nav .logo-wrapper .navbar-brand img.nav-logo-brand {
    object-fit: fill !important;
    width: 47px !important;
    max-width: 47px !important;
    min-width: 47px !important;
    margin-right: -24px !important;
    height: auto !important;
  }

  footer .footer-logo.nav-logo-brand,
  footer img.footer-logo.nav-logo-brand {
    object-fit: fill !important;
    width: 47px !important;
    max-width: 47px !important;
    min-width: 47px !important;
    margin-right: -24px !important;
    height: auto !important;
  }

  .img-why-choose-us {
    max-height: 460px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 25px;
  }

  h4 {
    font-size: 20px;
  }

  h5 {
    font-size: 18px;
  }

  h6 {
    font-size: 14px;
  }

  .page-size {
    padding: 50px 20px;
  }

  .nav-logo {
    width: 100%;
    max-height: 30px;
    padding-left: 8px;
  }

  .navbar img.nav-logo.nav-logo-brand,
  .navbar .navbar-brand img.nav-logo-brand,
  .navbar .logo-wrapper img.nav-logo-brand,
  .navbar .navbar-brand .nav-logo-brand,
  .navbar .logo-wrapper .nav-logo-brand,
  .navbar-nav .logo-wrapper .navbar-brand img.nav-logo-brand {
    object-fit: fill !important;
    width: 47px !important;
    max-width: 47px !important;
    min-width: 47px !important;
    margin-right: -24px !important;
    height: auto !important;
  }

  footer .footer-logo.nav-logo-brand,
  footer img.footer-logo.nav-logo-brand {
    object-fit: fill !important;
    width: 47px !important;
    max-width: 47px !important;
    min-width: 47px !important;
    margin-right: -24px !important;
    height: auto !important;
  }

  .nav-link {
    color: var(--color-primary);
  }

  .nav-link.active {
    color: var(--color-main) !important;
  }

  .nav-link:hover {
    color: var(--color-main) !important;
  }

  .nav-link:focus {
    color: var(--color-main) !important;
  }

  .about-img-2 {
    max-height: 300px;
  }

  .blog-card {
    padding: 0px;
  }

  .img-why-choose-us {
    max-height: 320px;
  }
}

/* ======================================================
   25. SIMULATOR STYLES
   Styles for the solar panel installation simulator
====================================================== */

/* Simulator form */
#simulator-form {
  max-height: none;
}

#simulator-form h4 {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 10px;
}

#simulator-form hr {
  border-color: #e0e0e0;
}

/* Structure options */
#sim-structure-options .form-check {
  padding: 12px 12px 12px 35px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

#sim-structure-options .form-check:hover {
  border-color: var(--color-main);
  background-color: #f8f9fa;
}

#sim-structure-options .form-check-input:checked + .form-check-label {
  color: var(--color-main);
}

#sim-structure-options .form-check-input:checked ~ * {
  font-weight: 500;
}

/* Results panel */
#sim-results {
  min-height: 400px;
}

#sim-results .sim-result-item {
  font-size: 0.9rem;
}

#sim-results .sim-result-item span:last-child {
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

/* Total highlight */
#sim-total {
  font-size: 1.8rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Email section */

/* Validation errors */
.text-danger.small {
  font-size: 0.8rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  #sim-results {
    position: static !important;
    margin-top: 20px;
  }
}

/* ======================================================
   25. MOBILE FIXED CTA BAR
   Fixed action buttons for mobile devices
====================================================== */
.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 0;
  background-color: var(--color-primary);
  padding: 10px 15px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1050;
}

.mobile-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mobile-cta-btn:first-child {
  margin-right: 8px;
}

.btn-cta-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.btn-cta-primary:hover {
  background-color: white;
  color: var(--color-primary);
}

.btn-cta-secondary {
  background-color: var(--color-main);
  color: white;
}

.btn-cta-secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

/* Add padding to body to prevent content from being hidden behind the fixed bar */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 80px;
  }
}

/* ======================================================
   25b. DESKTOP SIDE CTA - Full page slide-out panels
====================================================== */

/* Header above side tabs */
header {
  position: relative;
  z-index: 1043;
}

/* Fix header when side panel is open */
body.side-panel-open header {
  position: fixed;
  top: 0;
  left: 72px;
  right: 0;
  z-index: 1043;
}

@media (max-width: 991.98px) {
  body.side-panel-open header {
    left: 0;
  }
}

/* Offset page content to prevent side tabs from overlapping text on large screens */
@media (min-width: 992px) {
  body {
    padding-left: 72px;
  }
}

/* Vertical tabs - parallel, full height of viewport */
.desktop-side-cta {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: row;
  z-index: 1042;
  pointer-events: none;
}

.side-cta-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 36px;
  height: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  transition: all 0.3s ease;
  pointer-events: all;
}

.side-cta-tab i {
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
  font-size: 1rem;
}

.side-cta-tab.tab-contact i {
  transform: rotate(113deg);
}

.side-cta-tab.tab-devis {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.side-cta-tab.tab-devis:hover,
.side-cta-tab.tab-devis.active {
  width: 44px;
  background-color: #fff;
  color: var(--color-primary);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.side-cta-tab.tab-contact {
  background-color: var(--color-main);
  color: #fff;
}

.side-cta-tab.tab-contact:hover,
.side-cta-tab.tab-contact.active {
  width: 44px;
  background-color: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

/* Full-page slide-out panel (below header) */
.side-cta-fullpanel {
  position: fixed;
  top: var(--header-height, 70px);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height, 70px));
  z-index: 1041;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  pointer-events: none;
}

.side-cta-fullpanel.open {
  transform: translateX(0);
  pointer-events: all;
}

.side-cta-fullpanel iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.side-fullpanel-close {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.side-fullpanel-close:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  transform: scale(1.1);
}

/* Overlay (below header) */
.side-cta-overlay {
  position: fixed;
  top: var(--header-height, 70px);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height, 70px));
  background: rgba(0, 0, 0, 0.4);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.side-cta-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ======================================================
   26. SIMULATOR STYLES
   Styles for the solar panel installation simulator.
====================================================== */

/* Installation Type Cards */
.installation-type-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-color: #dee2e6 !important;
}

.installation-type-card:hover:not(.disabled) {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--color-main) !important;
}

.installation-type-card.active {
  border-color: var(--color-main) !important;
  background-color: rgba(33, 83, 67, 0.05);
}

.installation-type-card.active .card-title {
  color: var(--color-main);
}

.installation-type-card.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.installation-type-card.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Estimation Method Cards */
.estimation-method-card {
  cursor: pointer;
  transition: all 0.2s ease;
  border-color: #dee2e6 !important;
}

.estimation-method-card:hover {
  border-color: var(--color-main) !important;
}

.estimation-method-card.active {
  border-color: var(--color-main) !important;
  background-color: rgba(33, 83, 67, 0.05);
}

.estimation-method-card .form-check-input {
  margin-top: 0.25rem;
}

/* Simulator Results */
#sim-results {
  transition: all 0.3s ease;
}

.sim-result-item {
  transition: background-color 0.2s ease;
}

.sim-result-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Appliances Table */
#sim-appliances-table {
  font-size: 0.875rem;
}

#sim-appliances-table th {
  white-space: nowrap;
  font-weight: 600;
}

#sim-appliances-table .input-group-text {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Auto Calculation Result Box */
#sim-auto-calc-result {
  background-color: #f8f9fa;
}

#sim-auto-calc-result .c-main {
  color: var(--color-main);
}

/* Coming Soon Placeholder */
#sim-coming-soon {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sim-coming-soon > div {
  max-width: 400px;
}

/* Mobile Responsiveness for Simulator */
@media (max-width: 767.98px) {
  .estimation-method-card {
    margin-bottom: 0.5rem;
  }

  #sim-appliances-table {
    font-size: 0.75rem;
  }

  #sim-appliances-table th,
  #sim-appliances-table td {
    padding: 0.35rem;
  }

  #sim-auto-calc-result .col-md-4 {
    border-right: none !important;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  #sim-auto-calc-result .col-md-4:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}