/* ================================================================= */
/* ================================================================= */
/*         CONTACT PAGE MASTER OVERRIDE STYLESHEET (v.2)             */
/* ================================================================= */
/* ================================================================= */
/*  NOTE: This version uses highly specific selectors to guarantee   */
/*  overrides and removes all incorrect global/footer styles.        */
/* ================================================================= */


/* ================================================================= */
/* 1. Global Page Body & Typography                                  */
/* ================================================================= */
body {
  background-color: #ffffff !important; /* Sets the default background color for the entire page. */
}


/* ================================================================= */
/* 2. Top Header Bar                                                 */
/* ================================================================= */
.header__top {
  background-color: #ffffff !important; /* Sets the background color of the very top bar. */
}
.header__top .header__wrapper .info li {
  color: #222222 !important;       /* Sets the text color for the contact info (address, phone, email). */
  font-size: 16px !important;     /* Sets the font size for the contact info. */
  font-weight: 500 !important;    /* Sets the font weight for the contact info. */
}
.header__top .header__wrapper .info li i {
  color: #2e0c5e !important;       /* Sets the color of the small icons next to the contact info. */
}
.header__top .header__wrapper .social__icon li a {
  background-color: transparent !important; /* Sets the background of the social media icon circles. */
  border-color: #2e0c5e !important;         /* Sets the border color of the social media icon circles. */
}
.header__top .header__wrapper .social__icon li a:hover {
  background-color: #2e0c5e !important; /* Sets the background of the icon circles on mouse hover. */
}
.header__top .header__wrapper .social__icon li a i {
  color: #2e0c5e !important;       /* Sets the color of the social media icons (F, Twitter, etc.). */
}
.header__top .header__wrapper .social__icon li a:hover i {
  color: #ffffff !important;       /* Sets the color of the social media icons on mouse hover. */
}


/* ================================================================= */
/* 3. Main Header & Navigation Menu                                  */
/* ================================================================= */
header.header-section.header__one {
  background-color: #2e0c5e !important; /* Sets the background color of the main navigation bar. */
}
.header-section .main-menu > li > a {
  color: #ffffff !important;       /* Sets the text color for the main menu links (Home, About Us, etc.). */
  font-size: 18px !important;     /* Sets the font size for the main menu links. */
  font-weight: 600 !important;    /* Sets the font weight for the main menu links. */
}
.header-section .main-menu > li > a:hover {
  color: #facc15 !important;       /* Sets the text color for main menu links on mouse hover. */
}
.header-section .main-menu > li > a i {
  color: #ffffff !important;       /* Sets the color of the dropdown chevron arrow in the menu. */
}


/* ================================================================= */
/* 4. Breadcrumb Banner (Page Title Section)                         */
/* ================================================================= */
section.breadcumd__banner {
  background-color: #f0f0f0 !important; /* Sets the background color for the page title banner. */
}
section.breadcumd__banner .breadcumd__wrapper h2.left__content {
  color: #222222 !important;       /* Sets the color of the main page title (e.g., "Contact Us"). */
  font-size: 48px !important;     /* Sets the font size of the main page title. */
  font-weight: 700 !important;    /* Sets the font weight of the main page title. */
}
section.breadcumd__banner .breadcumd__wrapper ul.right__content li,
section.breadcumd__banner .breadcumd__wrapper ul.right__content li a {
  color: #facc15 !important;       /* Sets the text color of the breadcrumb navigation (e.g., "Home / Contact Us"). */
  font-size: 16px !important;     /* Sets the font size of the breadcrumb navigation. */
}
section.breadcumd__banner .breadcumd__wrapper ul.right__content li a:hover {
    color: #facc15 !important;     /* Sets the text color of breadcrumb links on mouse hover. */
}
section.breadcumd__banner .breadcumd__wrapper ul.right__content li i {
  color: #2e0c5e !important;       /* Sets the color of the icons (house, chevron) within the breadcrumb navigation. */
}


/* ================================================================= */
/* 5. Contact Info Boxes Section                                     */
/* ================================================================= */
section.contact__info {
  background-color: #fbf8f8 !important; /* Sets the background color for the entire contact info section. */
}
section.contact__info .info__items {
  background-color: #ffffff !important; /* Sets the background color of the individual white info boxes. */
}
section.contact__info .info__items .info__icon {
  background-color: #ffffff !important; /* Sets the background of the circle behind the main icon. */
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1) !important; /* Sets the drop shadow for the icon circle. */
}
section.contact__info .info__items .info__icon i {
  color: #2e0c5e !important;       /* Sets the color of the main icons (map marker, envelope, phone). */
  font-size: 28px !important;     /* Sets the font size of the main icons. */
}
section.contact__info .info__items h4 {
  color: #ffd000 !important;       /* Sets the color of the title in each box ("Service Location", etc.). */
  font-size: 24px !important;     /* Sets the font size of the title. */
  font-weight: 600 !important;    /* Sets the font weight of the title. */
}
section.contact__info .info__items p,
section.contact__info .info__items p a {
  color: #2e0c5e !important;       /* Sets the text color of the content (address, email, phone). */
  font-size: 16px !important;     /* Sets the font size of the content. */
}
section.contact__info .info__items p a:hover {
  color: #facc15 !important;       /* Sets the text color of content links on mouse hover. */
}


/* ================================================================= */
/* 6. Contact Form Section                                           */
/* ================================================================= */
section.contact__us__section {
  background-color: #ffffff !important; /* Sets the background color for the contact form section. */
}
section.contact__us__section .section__title h6 {
  color: #0ace6c !important;       /* Sets the color for the small subtitle ("Contact Us"). */
  font-size: 14px !important;     /* Sets the font size for the subtitle. */
  font-weight: 600 !important;    /* Sets the font weight for the subtitle. */
}
section.contact__us__section .section__title h2 {
  color: #facc15 !important;       /* Sets the color for the main header ("Have Any Question?"). */
  font-size: 42px !important;     /* Sets the font size for the main header. */
  font-weight: 700 !important;    /* Sets the font weight for the main header. */
}
section.contact__us__section .section__title p {
  color: #070707 !important;       /* Sets the color for the paragraph text below the header. */
  font-size: 16px !important;     /* Sets the font size for the paragraph. */
}
section.contact__us__section .form__clt input,
section.contact__us__section .form__clt__big textarea {
  background-color: #b8b8b84c !important; /* Sets the background color of the input fields and textarea. */
  color: #000000 !important;             /* Sets the color of the text that users type into the fields. */
  border: 1px solid #cccccc !important;   /* Sets the border for the fields. */
  font-size: 16px !important;           /* Sets the font size for the text that users type. */
}
section.contact__us__section .form__clt input::placeholder,
section.contact__us__section .form__clt__big textarea::placeholder {
  color: #050505 !important;       /* Sets the color of the placeholder text ("Your Name..."). */
}
section.contact__us__section .cmn--btn {
  background-color: #facc15 !important; /* Sets the background color of the "Send Message" button. */
  border-color: #facc15 !important;     /* Sets the border color of the button. */
}
section.contact__us__section .cmn--btn:hover {
  background-color: #2e0c5e !important; /* Sets the background color of the button on mouse hover. */
}
section.contact__us__section .cmn--btn span {
  color: #222222 !important;       /* Sets the color of the text inside the button. */
  font-size: 16px !important;     /* Sets the font size of the button text. */
  font-weight: 700 !important;    /* Sets the font weight of the button text. */
}
section.contact__us__section .cmn--btn:hover span {
  color: #ffffff !important;       /* Sets the color of the button text on mouse hover. */
}


/* ================================================================= */
/* 7. Map Section                                                    */
/* ================================================================= */
div.map__section {
    background-color: #e0e0e0 !important; /* Sets a fallback background color in case the map is slow to load. */
}
div.map__section .googpemap iframe {
    border: none !important;              /* Removes the default border from the Google Maps iframe. */
}


/* ================================================================= */
/* RESPONSIVE OVERRIDE BLOCK (For screens < 1201px)                  */
/* ================================================================= */
@media (max-width: 1200px) {

  /* ================================================================= */
  /* RESPONSIVE: BREADCRUMB BANNER ADJUSTMENTS                         */
  /* ================================================================= */
  section.breadcumd__banner .breadcumd__wrapper {
    text-align: center !important;     /* Centers all content in the banner on tablets. */
    flex-direction: column !important; /* Stacks the title above the breadcrumb links. */
  }
  section.breadcumd__banner .breadcumd__wrapper h2.left__content {
    font-size: 40px !important;        /* Reduces the title font size for better fit. */
    margin-bottom: 15px !important;    /* Adds space between the title and the links below it. */
  }
  section.breadcumd__banner .breadcumd__wrapper ul.right__content {
    justify-content: center !important; /* Ensures the "Home / Contact" links are centered. */
  }

  /* ================================================================= */
  /* RESPONSIVE: CONTACT INFO BOXES ADJUSTMENTS                        */
  /* ================================================================= */
  section.contact__info .row {
    flex-direction: column !important; /* Stacks the three info boxes vertically. */
    align-items: center !important;    /* Centers the stacked boxes horizontally. */
    gap: 1.5rem !important;            /* Adds consistent spacing between the stacked boxes. */
  }
  section.contact__info .row > .col-lg-4 {
    width: 90% !important;             /* Sets the width of each box to 90% of the screen. */
    max-width: 500px !important;       /* Prevents the boxes from becoming too wide on larger tablets. */
    flex: none !important;             /* Resets any flexbox growing/shrinking behavior. */
  }

  /* ================================================================= */
  /* RESPONSIVE: CONTACT FORM ADJUSTMENTS                              */
  /* ================================================================= */
  section.contact__us__section .row.g-4 {
    flex-direction: column !important; /* Stacks form elements vertically. */
    align-items: center !important;    /* Centers the form elements. */
  }
  section.contact__us__section .row.g-4 > div {
    width: 100% !important;            /* Ensures each form row takes the full width. */
    max-width: 100% !important;        /* Overrides any max-width. */
    flex: none !important;             /* Resets flexbox behavior. */
  }
}


/* ================================================================= */
/* RESPONSIVE OVERRIDE BLOCK (For screens < 768px)                   */
/* ================================================================= */
@media (max-width: 767px) {

  /* ================================================================= */
  /* RESPONSIVE: GLOBAL SECTION PADDING FOR MOBILE                     */
  /* ================================================================= */
  section.contact__info,
  section.contact__us__section {
    padding-top: 60px !important;    /* Reduces the top space for these sections on mobile. */
    padding-bottom: 60px !important; /* Reduces the bottom space for these sections on mobile. */
  }

  /* ================================================================= */
  /* RESPONSIVE: BREADCRUMB BANNER FOR MOBILE                          */
  /* ================================================================= */
  section.breadcumd__banner .breadcumd__wrapper h2.left__content {
    font-size: 32px !important;      /* Makes the main page title even smaller for mobile phones. */
  }

  /* ================================================================= */
  /* RESPONSIVE: CONTACT FORM SECTION FOR MOBILE                       */
  /* ================================================================= */
  section.contact__us__section .section__title h2 {
    font-size: 32px !important;      /* Makes the "Have Any Question?" header smaller on mobile. */
  }

  /* ================================================================= */
  /* RESPONSIVE: MAP FOR MOBILE                                        */
  /* ================================================================= */
  div.map__section .googpemap iframe {
    height: 450px !important;        /* Reduces the height of the map on mobile to save vertical space. */
  }
}