/* ================================
   GLOBAL DESIGN VARIABLES
================================ */

:root{
--primary:#0f8f8f;
--secondary:#00bfa6;
--dark:#1e3a5f;
--light:#f6fbfb;
--accent:#34d399;
--text:#333;
--shadow:0 10px 25px rgba(0,0,0,0.08);
--radius:12px;
--transition:all .3s ease;
}

/* ================================
   GLOBAL STYLES
================================ */

body{
font-family:'Segoe UI',sans-serif;
background:var(--light);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
padding-top:90px;
}

body.home{
padding-top:0;
}

section{
padding:80px 0;
}

h1,h2,h3,h4,h5{
font-weight:700;
color:var(--dark);
letter-spacing:.5px;
}

p{
color:#555;
}

/* ================================
   NAVBAR
================================ */

.navbar{
position:fixed;
top:0;
left:0;
right:0;
width:100%;
z-index:9998;
background:white;
padding:12px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
transition:all 0.2s ease;
backdrop-filter:none;
}

body.home .navbar{
background:transparent;
box-shadow:none;
}

body.home .navbar.scrolled{
background:white;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
backdrop-filter:none;
padding:12px 0;
}

.navbar .nav-link{
color:var(--dark) !important;
margin-left:20px;
font-weight:500;
position:relative;
}

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

body.home .navbar .nav-link{
color:white !important;
}

body.home .navbar.scrolled .nav-link{
color:var(--dark) !important;
}

body.home .navbar .nav-link:hover{
color:#eaffff !important;
}

body.home .navbar.scrolled .nav-link:hover{
color:var(--primary) !important;
}

.navbar-brand img{
height:80px;
}
/* ================================
   MOBILE MENU (DRAWER) - PROFESSIONAL
================================ */

.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
  position: relative;
  z-index: 10001;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler-icon {
  width: 24px;
  height: 24px;
  position: relative;
  transition: var(--transition);
}

/* Mobile menu overlay and drawer */
@media (max-width: 991px) {
  
  .navbar-collapse {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex !important;
    flex-direction: row;
    padding: 0 !important;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .navbar-collapse.show {
    opacity: 1;
    visibility: visible;
  }

  .navbar-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: white;
    padding-top: 100px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    z-index: 10000;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    display: flex !important;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .navbar-collapse.show .navbar-nav {
    transform: translateX(0);
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    margin: 0 !important;
  }

  .nav-item .nav-link {
    display: block;
    padding: 18px 25px !important;
    margin-left: 0 !important;
    color: var(--dark) !important;
    font-weight: 500;
    transition: var(--transition);
    border-left: 4px solid transparent;
  }

  .nav-item .nav-link:hover {
    background: #f5f5f5;
    color: var(--primary) !important;
    border-left-color: var(--primary);
    padding-left: 35px;
  }

  .nav-item .nav-link.active {
    background: #e8f8f7;
    color: var(--primary) !important;
    border-left-color: var(--primary);
  }

  body.home .navbar .nav-link {
    color: var(--dark) !important;
  }

  body.home .navbar .nav-link:hover {
    color: var(--primary) !important;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }

  /* Close overlay click handler */
  .navbar-collapse {
    cursor: pointer;
  }

  .navbar-collapse.show .navbar-nav {
    cursor: default;
  }
}

@media (min-width: 992px) {
  .navbar-collapse {
    position: relative !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    padding: 0 !important;
    z-index: auto;
  }

  .navbar-nav {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    flex-direction: row !important;
    display: flex !important;
  }

  .nav-item {
    border-bottom: none !important;
    margin-left: 20px !important;
  }

  .nav-item .nav-link {
    padding: 0 !important;
    border-left: none !important;
  }

  .nav-item .nav-link:hover {
    background: transparent !important;
    padding: 0 !important;
  }

  body.menu-open {
    overflow: auto;
  }
}


/* ================================
   HERO SECTION
================================ */

.hero-image-section{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}

.hero-image-section img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
right:0;
height:180px;
background:linear-gradient(180deg,rgba(0,0,0,0.4),transparent);
z-index:1;
pointer-events:none;
}

.carousel-inner{
height:600px;
}

.carousel-item{
height:100%;
}

.carousel-item img{
width:100%;
height:100%;
object-fit:cover;
position:relative;
}

.carousel-item::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:150px;
background:linear-gradient(180deg,rgba(0,0,0,0.4),transparent);
z-index:1;
pointer-events:none;
}

.hero-section{
background:linear-gradient(135deg,#e8fbfb,#ffffff);
padding:120px 0 100px 0;
}

.hero-title{
font-size:48px;
margin-bottom:20px;
}

.hero-subtitle{
font-size:18px;
max-width:650px;
}

/* ================================
   BUTTONS
================================ */

.btn-primary{
background:var(--primary);
border:none;
padding:12px 30px;
border-radius:8px;
font-weight:600;
transition:var(--transition);
}

.btn-primary:hover{
background:var(--secondary);
transform:translateY(-2px);
}

.btn-outline{
border:2px solid var(--primary);
color:var(--primary);
padding:10px 26px;
border-radius:8px;
}

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

/* ================================
   PRODUCT CARD
================================ */

.product-card{
background:white;
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:25px;
text-align:center;
transition:var(--transition);
height:100%;
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.product-card img{
max-height:180px;
margin-bottom:15px;
}

.product-card h5{
margin-top:10px;
}

.product-card p{
font-size:14px;
}

.product-img{
width:100%;
height:250px;
object-fit:contain;
padding:15px;
background:#f9f9f9;
border-radius:8px;
}

/* ================================
   PRODUCT DETAIL PAGE
================================ */

.product-hero{
background:linear-gradient(135deg,#e6f8f7,#ffffff);
padding:120px 0 80px 0;
}

.product-hero img{
width:100%;
height:380px;
object-fit:contain;
border-radius:15px;
box-shadow:var(--shadow);
padding:20px;
background:#f9f9f9;
}

.product-hero h1{
color:var(--dark);
margin-bottom:10px;
}

.product-tagline{
font-size:18px;
color:#666;
}

/* ================================
   INFO SECTIONS
================================ */

.section-card{
background:white;
border-radius:var(--radius);
padding:30px;
margin-bottom:30px;
box-shadow:var(--shadow);
}

.section-block{
background:white;
border-radius:var(--radius);
padding:30px;
margin-bottom:30px;
box-shadow:var(--shadow);
}

.section-card h4,
.section-block h4{
color:var(--dark);
margin-bottom:20px;
}

.section-card ul,
.section-block ul{
padding-left:18px;
}

.section-card li,
.section-block li{
margin-bottom:8px;
}

/* ================================
   FEATURES / ABOUT
================================ */

.feature-box{
text-align:center;
padding:30px;
border-radius:var(--radius);
transition:var(--transition);
}

.feature-box:hover{
background:white;
box-shadow:var(--shadow);
}

.feature-icon{
font-size:36px;
color:var(--primary);
margin-bottom:15px;
}

/* ================================
   CATEGORY FILTERS
================================ */

.category-filter{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
}

.btn-filter{
background:white;
border:2px solid var(--primary);
color:var(--primary);
padding:10px 20px;
border-radius:25px;
font-weight:600;
transition:all 0.3s ease;
cursor:pointer;
}

.btn-filter:hover,
.btn-filter.active{
background:var(--primary);
color:white;
}

/* ================================
   ANIMATIONS
================================ */

.fade-in{
opacity:0;
transform:translateY(30px);
transition:all .7s ease;
}

.fade-in.show{
opacity:1;
transform:none;
}

/* ================================
   FOOTER
================================ */

footer{
background:var(--dark);
color:white;
padding:60px 0;
}

footer h5{
color:white;
margin-bottom:20px;
}

footer p{
color:#d1d1d1;
}

footer a{
color:#c8f7f5;
text-decoration:none;
}

footer a:hover{
color:white;
}

.footer-logo img{
max-height:70px;
margin-bottom:15px;
}

.social-icons a{
display:inline-block;
margin-right:12px;
color:white;
transition:var(--transition);
}

.mt-3{
margin-top:1rem !important;
font-size: 25px;
}

.fab{
  padding-right: 8px;
}

.social-icons a:hover{
color:var(--accent);
transform:translateY(-2px);
}

/* ================================
   RESPONSIVE
================================ */

@media(max-width:992px){

.hero-title{
font-size:36px;
}

section{
padding:60px 0;
}

.product-hero{
text-align:center;
}

.product-hero img{
height:300px;
}

}

@media(max-width:768px){

body.home{
padding-top:90px;
}

.hero-image-section{
height:auto;
min-height:auto;
margin-top:0;
}

.hero-overlay{
height:100px;
}

.hero-title{
font-size:30px;
}

.navbar .nav-link{
margin-left:10px;
}

.product-img{
height:200px;
}

.product-hero img{
height:250px;
}

}