/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter', sans-serif;
  background:#f4f8ff;
  color:#111;
}

/* ================= HEADER ================= */
.header{
  background:white;
  color:#fff; 
  padding:16px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.2);
  flex-wrap:wrap;
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;   /* 👈 important */
}

.hero-landscape{
    position: relative;

    width: 100vw;
    left: 50%;
    margin-left: -50vw;   /* 👈 FULL WIDTH FIX */

    height: 110px;

    background: url("images/landspace.jpg") no-repeat center;
    background-size: contain;
    background-color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    color: #fff;
}

.hero-landscape .overlay{
    background: none;
}
.hero-landscape{
    display: block;
}

/* Mobile view (hide) */
@media (max-width:768px){
    .hero-landscape{
        display: none;
    }
}

.hero-landscape h1{
    font-size: 32px;
    margin-bottom: 8px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.hero-landscape p{
    font-size: 16px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.hero-btn{
    background: linear-gradient(90deg,#5f3bff,#a82ee6,#ff3c9e);
    color: #fff;
    padding: 8px 18px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
}
@media (max-width:768px){

    .hero-landscape{
        height: 260px;
    }

    .hero-landscape h1{
        font-size: 24px;
    }

    .hero-landscape p{
        font-size: 14px;
    }

    .hero-btn{
        padding: 8px 16px;
        font-size: 13px;
    }
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}



/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-img{
  height:60px;   
  width:auto;    /* important */
}

.logo-text h1{
  font-size:20px;
}

.logo-text p{
  font-size:11px;
  opacity:0.8;
}

/* Right menu */
.header-right{
  display:flex;
  align-items:center;
  gap:20px;
}
.custom-btn{
display:block;
width:90%;
margin:15px auto 0;
background:#0b0c2a;   /* dark color */
color:#fff;
padding:12px 28px;
border-radius:40px;
text-decoration:none;
font-weight:600;
font-size:16px;
text-align:center;
transition:0.3s;
}


.custom-btn:hover{
background:#14166b;
color:#fff;
}

.header-right a{
  color:white;
  text-decoration:none;
  font-size:16px;
}
.logo-text h1,
.logo-text p{
  background: linear-gradient(90deg,#5f3bff,#a82ee6,#ff3c9e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-right button{
  padding:7px 14px;
  border:none;
  border-radius:6px;
  background:linear-gradient(90deg,#5f3bff,#a82ee6,#ff3c9e);
  color:white;
  cursor:pointer;
}

/* 📱 Mobile Responsive */
@media (max-width:768px){

  .header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .header-right{
    width:100%;
    justify-content:space-between;
  }

  .logo-text h1{
    font-size:16px;
  }

  .logo-text p{
    font-size:10px;
  }

  .logo-img{
  height:60px;   
  width:auto;    /* important */
}
}

.header-right{
  display:flex;
  gap:20px;
  align-items:center;
}

.header-right a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.header-right button{
  padding:8px 16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg,#5f3bff,#a82ee6,#ff3c9e);
  color:white;
  font-weight:700;
  cursor:pointer;
}

/* ================= MAIN ================= */
.container{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

/* ================= SECTION CARD ================= */
.section-card{
  background:#fff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  margin-bottom:40px;
}

.section-card h2{
  color:#1d4ed8;
  margin-bottom:8px;
}

.section-card p{
  color:#555;
}

/* ================= GRID ================= */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:30px;
}

.card{
  background:#fff;
  border-radius:18px;
  padding:25px;
  box-shadow:0 12px 30px rgba(0,0,0,0.1);
  position:relative;
}
.button_color{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  color:#fff;
  transition:0.3s;
}

.card-icon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  color:#fff;
  font-size:24px;
}

.green{
  background: linear-gradient(135deg, #00c97b, #00a86b);
}

.purple{
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.pink{
  background: linear-gradient(135deg, #ec4899, #be185d);
}

.blue{
  background: linear-gradient(135deg, #2563eb, #1e40af);
}

.orange{
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

.card h3{
  margin-bottom:6px;
}

.card p{
  color:#555;
  font-size:14px;
  margin-bottom:16px;
}

.card button{
  width:100%;
  padding:10px;
  border:none;
  border-radius:12px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
}
.btn-pink{
 background: linear-gradient(135deg, #ff4da6, #ff0080);
  color: #fff;
}

.btn-blue{
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color:#fff;
}

.btn-purple{
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color:#fff;
}

.btn-green{
  background: linear-gradient(135deg, #00c97b, #00a86b);
  color:#fff;
}

.btn-orange{
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color:#fff;
}

/* Responsive Heading */
.responsive-heading{
font-size:28px;
line-height:1.3;
}

/* Responsive Text */
.responsive-text{
font-size:15px;
}

/* Tablet */
@media (min-width:768px){
.responsive-heading{
font-size:36px;
}
.responsive-text{
font-size:16px;
}
}

/* Desktop */
@media (min-width:992px){
.responsive-heading{
font-size:42px;
}
.responsive-text{
font-size:18px;
}
}

.badge{
  position:absolute;
  top:18px;
  right:18px;
  background:#fb923c;
  color:#fff;
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
}
.site-footer{
    background:#1B0C0C;
    color:#fff;
    font-family:'Inter', sans-serif;
    position:relative;
}
@media(max-width:768px){

.site-footer{
    background:#1B0C0C;
background-size:cover;
min-height:500px;
}

}



.footer-overlay{
background:rgba(0,0,0,0.65);
padding:47px 22px;
}

.footer-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
max-width:1200px;
margin:auto;
}

.footer-col h3{
color:#ff7a00;
margin-bottom:20px;
font-size:22px;
}

.footer-col p{
margin:8px 0;
line-height:1.6;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin:10px 0;
}

.footer-col ul li a{
color:#fff;
text-decoration:none;
transition:0.3s;
}

.footer-col ul li a i{
color:#ffb400;
margin-right:8px;
}

.footer-col ul li a:hover{
color:#ff7a00;
padding-left:5px;
}

.map iframe{
width:100%;
height:150px;
margin-top:15px;
border-radius:6px;
}

.footer-bottom{
text-align:center;
padding:15px;
background:#111;
font-size:14px;
}

/* MOBILE RESPONSIVE */

@media(max-width:900px){

.footer-container{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.footer-container{
grid-template-columns:1fr;
text-align:left;
}

.footer-overlay{
padding:40px 20px;
}

}
.social-icons{
margin-top:15px;
display:flex;          /* important */
justify-content:center;
gap:12px;              /* space between icons */
}

.social-icons a{
display:inline-block;
width:38px;
height:38px;
line-height:38px;
text-align:center;
background:#fff;
color:#333;
border-radius:50%;
margin-right:8px;
font-size:16px;
transition:0.3s;
}

.social-icons a:hover{
background:#ff7a00;
color:#fff;
}

.whatsapp-btn{
display:inline-block;
margin-top:12px;
padding:8px 15px;
background:#25D366;
color:#fff !important;
border-radius:5px;
text-decoration:none;
font-size:14px;
}

.whatsapp-btn i{
margin-right:6px;
}
.connect-box{
background:#f5f5f5;
padding:40px 25px;
border-radius:20px;
text-align:center;
max-width:800px;
margin:40px auto;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* MOBILE FIX */

@media(max-width:768px){

.connect-box{
padding:20px 15px;
margin:20px 10px;
border-radius:12px;
}

.connect-box h2{
font-size:20px;
}

.connect-box p{
font-size:14px;
}

.connect-buttons{
flex-direction:column;
gap:10px;
}

}

.connect-icon{
width:80px;
height:80px;
margin:auto;
background:#22c55e;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:35px;
color:white;
margin-bottom:20px;
box-shadow:0 0 20px rgba(34,197,94,0.6);
}

.connect-box h2{
color:#c2185b;
font-size:32px;
margin-bottom:10px;
}

.connect-box p{
color:#555;
font-size:18px;
margin-bottom:30px;
}

.connect-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.connect-box{
display:flex;
align-items:center;
justify-content:space-between;
background:#f5f5f5;
padding:20px 30px;
border-radius:12px;
max-width:900px;
margin:30px auto;
gap:20px;
box-shadow:0 6px 15px rgba(0,0,0,0.1);
}
.tabs{
position:relative;
z-index:1;
}

.connect-box h2{
margin:0;
color:#c2185b;
font-size:24px;
}

.connect-box p{
margin:0;
color:#555;
font-size:14px;
}

.connect-buttons{
display:flex;
gap:15px;
}

.btn-whatsapp{
background:#25D366;
color:#fff;
padding:10px 20px;
border-radius:25px;
text-decoration:none;
font-weight:600;
}

.btn-call{
background:#d81b60;
color:#fff;
padding:10px 20px;
border-radius:25px;
text-decoration:none;
font-weight:600;
}

.btn-whatsapp:hover{
background:#1ebe5d;
}

.btn-call:hover{
background:#b0003a;
}

/* MOBILE */

@media(max-width:768px){

.connect-box{
flex-direction:column;
text-align:center;
}

.connect-buttons{
justify-content:center;
margin-top:10px;
}

}
.tabs{
display:flex;
gap:20px;
justify-content:center;
align-items:center;
margin:10px auto;
flex-wrap:wrap;
max-width:1200px;
padding:0 15px;
}

/* TAB DESIGN */

.tab{
display:flex;
align-items:center;
gap:10px;
padding:16px 32px;
border-radius:14px;
text-decoration:none;
color:#5f6b7a;
font-weight:600;
font-family:'Inter',sans-serif;
transition:all .3s ease;
background:#f5f7fb;
min-width:175px;
height:82px;
justify-content:center;
}

.tab i{
font-size:18px;
}

.tab span{
font-size:15px;
}

.tab:hover{
background:#e8efff;
}

.tab.active{
background:#dbe8ff;
color:#2f6fed;
position:relative;
}

.tab.active::after{
content:"";
position:absolute;
bottom:-10px;
width:80%;
height:4px;
background:#2f6fed;
border-radius:4px;
}

.dropdown-menu li a:active,
.dropdown-menu li a:focus{
    background:#1B0C0C;
    color:#fff;
}
/* MOBILE */

@media (max-width:768px){

.tabs{
overflow-x:auto;
flex-wrap:nowrap;
justify-content:flex-start;
padding-bottom:10px;
}

.tabs::-webkit-scrollbar{
display:none;
}

.tab{
min-width:140px;
padding:14px 22px;
font-size:14px;
}

}
@media (max-width:600px){

.section-card{
text-align:center;
padding:20px;
}

.card{
padding:20px;
}

}
body{
margin:0;
font-family:Arial;
}

.topnav{
background: #ebf4f5;
padding:0 20px;
position:relative;
z-index:1000;
}

.menu{
display:flex;
list-style:none;
margin:0;
padding:0;
}

.menu li{
position:relative;
}

.menu li a{
display:block;
padding:16px 20px;
text-decoration:none;
color:#000;
}

.menu li a:hover{
background:#ddd;
}

/* DROPDOWN */

.dropdown-menu{
     border-radius:12px;
    overflow:hidden;

    /* shadow for depth */
    box-shadow:0 8px 25px rgba(0,0,0,0.15);

    /* smooth animation */
    transition:all 0.3s ease;
position:absolute;
top:100%;
left:0;
background:white;
min-width:200px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
list-style:none;
padding:0;
background: #4e54c8;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8f94fb, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


/* animation settings */
opacity:0;
transform:translateY(-10px);
transition:all 0.5s ease;
pointer-events:none;
z-index:1001;
}

/* show dropdown */
 .dropdown-menu{
    display:none;
    opacity:0;
    transform:translateY(-10px);
    transition:all 0.3s ease;
}
.dropdown-menu li a:hover{
    background-color:#1B0C0C;
    color:#fff;
}
/* Desktop hover working + clickable */
@media (min-width:769px){

.dropdown:hover .dropdown-menu{
    display:block;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;  
}

}
/* ONLY JS CONTROL */
.dropdown.active .dropdown-menu{
    display:block;
    opacity:1;
    transform:translateY(0);
}
.arrow-icon{
    width:12px;
    margin-left:5px;
    transition:0.3s;
}

/* rotate when open */
.dropdown.active .arrow-icon{
    transform: rotate(180deg);
} 

.dropdown-menu li a{
display:block;
padding:12px 16px;
color:#000;
text-decoration:none;
}

.dropdown-menu.open{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
@media (max-width:768px){

.dropdown-menu{
position:relative;
box-shadow:none;
transform:none;
opacity:0;
}

.dropdown-menu.open{
opacity:1;
}

}

.arrow{
margin-left:5px;
font-size:12px;
}

/* MOBILE BUTTON */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
padding:14px;
}

/* MOBILE VIEW */

@media (max-width:768px){

.menu{
display:none;
flex-direction:column;
width:100%;
}

.menu.active{
display:flex;
}

.menu li{
width:100%;
}

/* 🔴 ADD THIS (MOST IMPORTANT) */
.dropdown-menu{
display:none;   /* hide by default */
position:relative;
box-shadow:none;
}

/* 🔴 ADD THIS */
.dropdown.active .dropdown-menu{
display:block;  /* show when clicked */
}

.menu-toggle{
display:block;
}

}
.blue{background:#eef1ff;color:#4e54c8;}
.purple{background:#f2e9ff;color:#6f42c1;}
.orange{background:#fff1e6;color:#fd7e14;}
.green{background:#e9f9ee;color:#28a745;}
.pink{background:#ffe9f3;color:#e83e8c;}