/* =====================================================================
   UMRAZ ENTERPRISES — RESPONSIVE + HOVER-EFFECTS STYLESHEET
   Theme: Netstager_Creative_Suite-3.0  |  Template: home.php
   -----------------------------------------------------------------
   Load this file AFTER css/style.css so it can safely refine/patch
   the existing rules without touching the original stylesheet.

   Scope:
   - Section 1 & 2 (Header / Footer) are intentionally GLOBAL because
     they are shared on every page — fixing them here fixes them
     site-wide, which is what "responsive header & footer" requires.
   - Section 3 (homepage sections: hero, stats, services, testimonials,
     portfolio, contact) is scoped to `body.home` so it can NEVER leak
     onto other pages. WordPress automatically adds the `home` class
     to <body> on whichever page is set as the site's front page.
     (As a safety net it is also duplicated on `.page-template-home-php`,
     the class WP adds automatically for pages using home.php.)

   Units: rem (matches the theme's existing fluid html{font-size} scale)
   Colours/fonts: reused 1:1 from css/style.css (Anton / Urbanist,
   navy #012056/#06265d/#082a67, gold #d18b19/#f0ad1d/#f6a800)
===================================================================== */

:root {
  --umz-navy-900: #06265d;
  --umz-navy-800: #012056;
  --umz-navy-700: #082a67;
  --umz-navy-600: #123d8a;
  --umz-navy-500: #0b2d6c;
  --umz-gold-600: #b8740d;
  --umz-gold-500: #d18b19;
  --umz-gold-400: #f0ad1d;
  --umz-gold-300: #f6a800;
  --umz-gold-200: #e39a17;
  --umz-grey-600: #7f7f7f;
  --umz-grey-700: #454545;
  --umz-white: #ffffff;
  --umz-ease: all 0.3s ease;
}

/* =====================================================================
   0. BASE SAFETY — prevents horizontal scroll / overflow on all sizes
===================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
iframe,
video {
  max-width: 100%;
}

.container {
  width: 100%;
}

@media (max-width: 767px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* =====================================================================
   1. HEADER + NAVIGATION  (global — applies site-wide, by design)
===================================================================== */

/* --- Hover effects ------------------------------------------------- */

.header-logo a {
  display: inline-flex;
  transition: var(--umz-ease);
}

.header-logo a:hover {
  opacity: 0.85;
}

/* Animated underline sweep on nav links, using theme's gold accent */
.menuList li a {
  position: relative;
  padding-bottom: 0.25rem;
}

.menuList li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.125rem;
  background: var(--umz-gold-500);
  transition: width 0.3s ease;
}

.menuList li a:hover::after,
.menuList li a:focus-visible::after {
  width: 100%;
}

.header-btn {
  transition: var(--umz-ease);
}

.header-btn:hover,
.header-btn:focus-visible {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1rem rgba(209, 139, 25, 0.35);
}

.contact-item {
  transition: var(--umz-ease);
}

.contact-item:hover {
  color: var(--umz-gold-500);
}

.mobilemenuBtn span {
  transition: var(--umz-ease);
}

.mobilemenuBtn:hover span {
  background: #CD8D23;
}

/* --- Responsive: large tablet / small laptop ------------------------ */

@media (max-width: 1024px) {
  .header-wrapper {
    min-height: 6.25rem;
  }

  .header-contact {
    gap: 0.85rem;
  }

  .menuList {
    gap: 0.9rem;
  }

  .menuList li a {
    font-size: 0.72rem;
  }

  .header-btn {
    margin-left: 2rem;
  }
}

/* --- Responsive: tablet --------------------------------------------- */

@media (max-width: 991px) {
  .site-header {
    padding: 0;
  }

  .header-wrapper {
    flex-wrap: wrap;
    min-height: auto;
    padding: 0.75rem 0;
  }

  .header-logo {
    width: auto;
  }

  .header-right {
    width: auto;
    align-items: center;
  }

  .header-contact {
    display: none; /* keep header compact on tablets, same as mobile */
  }

  .header-navigation {
    border-top: 0;
    padding-top: 0;
    width: auto;
    gap: 1rem;
  }

  .navMenu {
    display: none; /* replaced by the off-canvas mmenu panel */
  }

  .header-btn {
    margin-left: 0;
    font-size: 0.85rem;
    padding: 0.55rem 1rem;
  }

  .mobilemenuBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    width: 2.2rem;
    height: 2.2rem;
  }

  .mobilemenuBtn span {
    display: block;
    width: 1.8rem;
    height: 0.14rem;
    background: var(--umz-gold-500);
  }
}

/* --- Responsive: mobile ---------------------------------------------- */

@media (max-width: 575px) {
  .header-logo img {
    max-width: 5.5rem;
  }

  .header-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.85rem;
  }
}

@media (max-width: 400px) {
  .header-wrapper {
    padding: 0.6rem 0;
  }

  .header-logo img {
    max-width: 4.75rem;
  }

  .header-btn span,
  .header-btn {
    font-size: 0.7rem;
    padding: 0.45rem 0.75rem;
  }
}


/* =====================================================================
   2. FOOTER  (global — applies site-wide, by design)
===================================================================== */

/* --- Hover effects ---------------------------------------------------- */

.site-footer li a {
  position: relative;
}

.socialIcns a {
  background: rgba(255, 255, 255, 0.08);
}

.socialIcns a:hover {
  background: var(--umz-gold-500);
}

.site-footer .footer-contact-list li {
  transition: var(--umz-ease);
}

.site-footer .footer-contact-list li:hover {
  transform: translateX(0.25rem);
}

/* --- Responsive: tablet ------------------------------------------------ */

@media (max-width: 991px) {
  .site-footer .row {
    row-gap: 2.25rem;
  }

  .site-footer .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* --- Responsive: mobile -------------------------------------------------- */

@media (max-width: 575px) {
  .site-footer {
    text-align: left;
    padding: 2.5rem 0 0;
  }

  .site-footer .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .site-footer h3 {
    font-size: 1.1rem;
  }

  .site-footer li,
  .site-footer li a {
    font-size: 0.95rem;
  }

  .footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .copyrightCvr {
    padding: 0.9rem 1rem;
  }

  .reserverd p {
    font-size: 0.8rem;
  }
}


/* =====================================================================
   3. HOMEPAGE SECTIONS — scoped to the front page only
===================================================================== */

/* ---------------------------------------------------------------------
   3.1 HERO / .sec1
--------------------------------------------------------------------- */

body.home .sec1,
body.page-template-home-php .sec1 {
  height: auto;
  min-height: 46rem;
  display: flex;
  align-items: center;
  background-position: center;
}

body.home .sec1Lft,
body.page-template-home-php .sec1Lft {
  height: auto;
  width: 100%;
  padding: 3rem 0;
}

body.home .sec1Lft h1,
body.page-template-home-php .sec1Lft h1 {
  transition: var(--umz-ease);
}

@media (max-width: 991px) {
  body.home .sec1,
  body.page-template-home-php .sec1 {
    min-height: 36rem;
  }

  body.home .sec1Lft h1,
  body.page-template-home-php .sec1Lft h1 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
}

@media (max-width: 767px) {
  body.home .sec1,
  body.page-template-home-php .sec1 {
    min-height: 28rem;
  }

  body.home .sec1Lft,
  body.page-template-home-php .sec1Lft {
    padding: 2.25rem 0;
  }

  body.home .sec1Lft h1,
  body.page-template-home-php .sec1Lft h1 {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}

@media (max-width: 480px) {
  body.home .sec1,
  body.page-template-home-php .sec1 {
    min-height: 24rem;
  }

  body.home .sec1Lft h1,
  body.page-template-home-php .sec1Lft h1 {
    font-size: 1.9rem;
    line-height: 2.5rem;
  }
}

/* ---------------------------------------------------------------------
   3.2 INTRO / .sec2
--------------------------------------------------------------------- */

body.home .sec2,
body.page-template-home-php .sec2 {
  max-width: 80%;
}

@media (max-width: 991px) {
  body.home .sec2,
  body.page-template-home-php .sec2 {
    max-width: 100%;
  }

  body.home section.sec2,
  body.page-template-home-php section.sec2 {
    margin-top: 4.5rem;
  }
}

@media (max-width: 575px) {
  body.home section.sec2,
  body.page-template-home-php section.sec2 {
    margin-top: 3rem;
  }

  body.home .sec2 .h2,
  body.page-template-home-php .sec2 .h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
}

/* ---------------------------------------------------------------------
   3.3 STATS STRIP / .stats-section
   (base responsive rules already exist in style.css — this only
   tightens the smallest breakpoint and adds a subtle hover)
--------------------------------------------------------------------- */

body.home .stats-item,
body.page-template-home-php .stats-item {
  transition: var(--umz-ease);
}

body.home .stats-item:hover,
body.page-template-home-php .stats-item:hover {
  transform: translateY(-0.2rem);
}

@media (max-width: 991px) {
  body.home .stats-section,
  body.page-template-home-php .stats-section {
    padding-top: 4.5rem;
  }
}

@media (max-width: 400px) {
  body.home .stats-item h2 span,
  body.page-template-home-php .stats-item h2 span {
    font-size: 1.5rem;
  }

  body.home .stats-item p,
  body.page-template-home-php .stats-item p {
    font-size: 0.7rem;
  }
}

/* ---------------------------------------------------------------------
   3.4 "WHAT WE DELIVER" SERVICES GRID / .Sec4 .secrvices
--------------------------------------------------------------------- */

body.home .secrvices,
body.page-template-home-php .secrvices {
  overflow: hidden;
  border-radius: 0.5rem;
}

body.home .secrvices img,
body.page-template-home-php .secrvices img {
  width: 100%;
  transition: transform 0.5s ease;
}

body.home .secrvices:hover img,
body.page-template-home-php .secrvices:hover img {
  transform: scale(1.06);
}

body.home .servicesName,
body.page-template-home-php .servicesName {
  right: 0.625rem;
  transition: var(--umz-ease);
}

@media (max-width: 991px) {
  body.home section.Sec4,
  body.page-template-home-php section.Sec4 {
    margin-top: 4.5rem;
  }

  body.home .sec4Hd,
  body.page-template-home-php .sec4Hd {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  body.home .secrvices,
  body.page-template-home-php .secrvices {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 767px) {
  body.home section.Sec4,
  body.page-template-home-php section.Sec4 {
    margin-top: 3rem;
  }

  body.home .servicesName,
  body.page-template-home-php .servicesName {
    font-size: 1.25rem;
    line-height: 1.6rem;
    bottom: 1rem;
    left: 0.85rem;
  }
}

@media (max-width: 480px) {
  body.home .servicesName,
  body.page-template-home-php .servicesName {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
}

/* ---------------------------------------------------------------------
   3.5 TESTIMONIALS / .testimonial-section
--------------------------------------------------------------------- */

body.home .testimonial-card,
body.page-template-home-php .testimonial-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

body.home .testimonial-card:hover,
body.page-template-home-php .testimonial-card:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
}

@media (max-width: 991px) {
  body.home .testimonial-section,
  body.page-template-home-php .testimonial-section {
    margin-top: 4.5rem;
    padding: 3.5rem 0;
  }

  body.home .testimonial-heading h2,
  body.page-template-home-php .testimonial-heading h2 {
    font-size: 2.25rem;
  }

  body.home .testimonial-card,
  body.page-template-home-php .testimonial-card {
    min-height: auto;
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  body.home .testimonial-section,
  body.page-template-home-php .testimonial-section {
    margin-top: 3rem;
    padding: 3rem 0;
  }

  body.home .testimonial-heading,
  body.page-template-home-php .testimonial-heading {
    margin-bottom: 2rem;
  }

  body.home .testimonial-heading h2,
  body.page-template-home-php .testimonial-heading h2 {
    font-size: 1.75rem;
  }

  body.home .quote-icon,
  body.page-template-home-php .quote-icon {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  body.home .testimonial-card,
  body.page-template-home-php .testimonial-card {
    padding: 1.25rem;
  }

  body.home .testimonial-content,
  body.page-template-home-php .testimonial-content {
    font-size: 0.9rem;
  }
}

/* ---------------------------------------------------------------------
   3.6 PORTFOLIO GRID / .Sec4 .secrvices.portfolio
--------------------------------------------------------------------- */

body.home .secrvices.portfolio,
body.page-template-home-php .secrvices.portfolio {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

@media (max-width: 767px) {
  body.home .secrvices.portfolio,
  body.page-template-home-php .secrvices.portfolio {
    margin-bottom: 1.25rem;
  }
}

/* ---------------------------------------------------------------------
   3.7 CONTACT / .sec11
--------------------------------------------------------------------- */

body.home .sec11Cvr,
body.page-template-home-php .sec11Cvr {
  transition: var(--umz-ease);
}

/* Focus states for the Contact Form 7 fields — same gold accent used
   throughout the site for interactive elements */
body.home .wpcf7-form input[type="text"]:focus,
body.home .wpcf7-form input[type="email"]:focus,
body.home .wpcf7-form input[type="tel"]:focus,
body.home .wpcf7-form textarea:focus,
body.page-template-home-php .wpcf7-form input[type="text"]:focus,
body.page-template-home-php .wpcf7-form input[type="email"]:focus,
body.page-template-home-php .wpcf7-form input[type="tel"]:focus,
body.page-template-home-php .wpcf7-form textarea:focus {
  box-shadow: 0 0 0 0.125rem var(--umz-gold-400);
}

body.home .wpcf7-form input[type="submit"],
body.page-template-home-php .wpcf7-form input[type="submit"] {
  transition: var(--umz-ease);
}

body.home .wpcf7-form input[type="submit"]:hover,
body.page-template-home-php .wpcf7-form input[type="submit"]:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1rem rgba(227, 154, 23, 0.35);
}

@media (max-width: 991px) {
  body.home section.sec11,
  body.page-template-home-php section.sec11 {
    margin-top: 4.5rem;
  }

  body.home .sec11Cvr,
  body.page-template-home-php .sec11Cvr {
    padding: 2.5rem 1.5rem;
  }

  body.home .sec11Cvr .col-lg-4,
  body.page-template-home-php .sec11Cvr .col-lg-4 {
    margin-bottom: 0rem;
  }
}

@media (max-width: 767px) {
  body.home section.sec11,
  body.page-template-home-php section.sec11 {
    margin-top: 3rem;
  }

  body.home .sec11Cvr,
  body.page-template-home-php .sec11Cvr {
    padding: 2rem 1.25rem;
    border-radius: 0.75rem;
  }

  body.home .wpcf7-form::before,
  body.page-template-home-php .wpcf7-form::before {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  body.home .sec11Cvr,
  body.page-template-home-php .sec11Cvr {
    padding: 1.5rem 1rem;
  }

  body.home .wpcf7-form,
  body.page-template-home-php .wpcf7-form {
    padding: 1.25rem;
  }
}