/* ===== Responsive Improvements ===== */

*{
  box-sizing:border-box;
}

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

.container,
.container-fluid{
  width:100%;
  padding-inline:16px;
}

.row{
  margin-inline:0;
}

section{
  overflow:hidden;
}

.navbar{
  padding:12px 16px;
}

.btn{
  min-height:44px;
}

.card,
.box,
.content,
.about,
.services,
.contact{
  border-radius:16px;
}

@media (max-width:1200px){
  h1{font-size:2.6rem;}
  h2{font-size:2rem;}
}

@media (max-width:992px){

  .navbar-nav{
    gap:10px;
    padding-top:12px;
  }

  .hero,
  .header,
  .banner{
    text-align:center;
    padding:80px 20px;
  }

  .hero img,
  .banner img{
    margin-top:30px;
  }

  .row{
    flex-direction:column;
  }

  .col,
  [class*="col-"]{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100%;
    margin-bottom:20px;
  }
}

@media (max-width:768px){

  body{
    font-size:15px;
  }

  h1{font-size:2rem;}
  h2{font-size:1.6rem;}
  h3{font-size:1.3rem;}

  .section{
    padding:60px 0;
  }

  .card,
  .box{
    padding:18px;
  }

  .btn{
    width:100%;
  }

  .navbar-brand{
    font-size:1rem;
  }
}

@media (max-width:576px){

  body{
    overflow-x:hidden;
  }

  .hero,
  .header,
  .banner{
    padding:60px 14px;
  }

  .container,
  .container-fluid{
    padding-inline:12px;
  }

  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}


/* ===== Mobile Navbar Scroll Fix ===== */

@media (max-width:768px){

  .navbar,
  .navbar.scrolled,
  .header.scrolled,
  .topbar.scrolled{
    width:0%;
    max-height:0px !important;
    overflow:hidden !important;
    transition:background-color .3s ease;
  }

  .navbar-collapse{
    max-height:none !important;
  }

  body{
    overflow-x:hidden !important;
  }
}



/* ===== FULL MOBILE RESPONSIVE FIX ===== */

*{
  box-sizing:border-box;
}

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

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

.row{
  display:flex;
  flex-wrap:wrap;
}

@media(max-width:768px){

  body{
    padding-top:70px;
  }

  /* Navbar Fix */
  nav,
  .navbar,
  header{
    width:100% !important;
    height:10% !important;
    left:0 !important;
    right:0 !important;
    overflow:hidden !important;
  }

  .navbar.scrolled,
  header.scrolled{
    transform:none !important;
    height:auto !important;
  }

  .navbar-collapse,
  .menu{
    width:100% !important;
  }

  /* Columns */
  .row{
    flex-direction:column !important;
  }

  [class*="col-"]{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    margin-bottom:20px;
  }

  /* Typography */
  h1{
    font-size:2rem !important;
  }

  h2{
    font-size:1.5rem !important;
  }

  h3{
    font-size:1.2rem !important;
  }

  p,a,button,li{
    font-size:15px !important;
  }

  /* Sections */
  section,
  .hero,
  .banner,
  .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* Buttons */
  button,
  .btn{
    max-width:100%;
  }

  /* Eitaa Button Fix */
  .eita,
  .eitaa,
  .eita-btn,
  .social-btn{
    position:fixed !important;
    bottom:18px !important;
    right:18px !important;
    left:auto !important;
    z-index:999999 !important;
    transform:none !important;
  }
}

@media(max-width:480px){

  h1{
    font-size:1.7rem !important;
  }

  .eita,
  .eitaa,
  .eita-btn{
    width:55px !important;
    height:55px !important;
    bottom:14px !important;
    right:14px !important;
  }
}



/* ====================================
   GREEN & WHITE PROFESSIONAL THEME
==================================== */

:root{
    --primary:#0f8f55;
    --primary-dark:#0a6e42;
    --light:#ffffff;
    --light-soft:#f5fff9;
    --text:#163020;
}

/* Global colors */
body{
    background:var(--light) !important;
    color:var(--text) !important;
}

/* Sections */
section,
.hero,
.banner,
.content,
.card,
.box{
    background:var(--light) !important;
    color:var(--text) !important;
}

/* Navbar */
nav,
.navbar,
header{
    background:var(--primary) !important;
    color:#fff !important;
}

nav a,
.navbar a,
header a{
    color:#fff !important;
}

/* Buttons */
button,
.btn,
input[type="submit"]{
    background:var(--primary) !important;
    color:#fff !important;
    border:none !important;
    transition:.3s;
}

button:hover,
.btn:hover{
    background:var(--primary-dark) !important;
}

/* Cards */
.card,
.box,
.service-box{
    border:1px solid rgba(15,143,85,.15) !important;
    box-shadow:0 4px 20px rgba(15,143,85,.08) !important;
}

/* Footer */
footer{
    background:var(--primary) !important;
    color:#fff !important;
}

footer a{
    color:#fff !important;
}

/* Remove black backgrounds */
.bg-dark,
.dark,
.black,
[class*="dark"]{
    background:var(--light) !important;
    color:var(--text) !important;
}

/* Mobile menu */
@media(max-width:991px){

    .navbar-collapse,
    .menu,
    .mobile-menu{
        background:var(--primary) !important;
    }
}



/* =====================================
   MOBILE TYPOGRAPHY + SPACING FIX
===================================== */

html{
    -webkit-text-size-adjust:80%;
}

body{
    line-height:1.8 !important;
}

/* Better text rendering */
h1,h2,h3,h4,h5,h6,p,a,li,span{
    word-wrap:break-word;
}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    body{
        font-size:15px !important;
    }

    h1{
        font-size:2rem !important;
        line-height:1.5 !important;
        margin-bottom:18px !important;
        text-align:center !important;
    }

    h2{
        font-size:1.6rem !important;
        line-height:1.6 !important;
        margin-bottom:16px !important;
        text-align:center !important;
    }

    h3{
        font-size:1.25rem !important;
        line-height:1.7 !important;
    }

    p,
    li{
        font-size:15px !important;
        line-height:2 !important;
        text-align:center !important;
        width:100% !important;
    }

    .container,
    section,
    .hero,
    .banner,
    .content{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .row{
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
    }

    [class*="col-"]{
        width:100% !important;
        max-width:100% !important;
        text-align:center !important;
    }

    .card,
    .box{
        padding:18px !important;
        border-radius:18px !important;
    }

    img{
        margin:auto !important;
    }

    button,
    .btn{
        width:100% !important;
        max-width:100% !important;
        font-size:15px !important;
        padding:12px 18px !important;
    }
}

/* =========================
   SMALL PHONES
========================= */

@media(max-width:480px){

    body{
        font-size:14px !important;
    }

    h1{
        font-size:1.65rem !important;
        line-height:1.6 !important;
    }

    h2{
        font-size:1.35rem !important;
    }

    h3{
        font-size:1.1rem !important;
    }

    p,
    li,
    a{
        font-size:14px !important;
        line-height:2.1 !important;
    }

    .container,
    section,
    .hero,
    .banner{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .card,
    .box{
        padding:15px !important;
    }
}