*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif;
}

body{
background:#0f172a;
color:#fff;
}

/* HEADER */
.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
position:sticky;
top:0;
z-index:1000;
}

.header nav{
display:flex;
gap:15px;
}

.header a{
color:#fff;
text-decoration:none;
font-size:14px;
}

/* HERO */
.hero{
position:relative;
min-height:100vh;
background:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c') center/cover;
display:flex;
justify-content:space-between;
align-items:center;
padding:40px;
flex-wrap:wrap;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.hero-content{
position:relative;
z-index:2;
max-width:500px;
}

.hero-content h1{
font-size:42px;
line-height:1.2;
}

.hero-content p{
margin:10px 0;
}

/* FORM */
.glass-form{
position:relative;
z-index:2;
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:15px;
backdrop-filter:blur(15px);
width:320px;
}

.glass-form input{
width:100%;
padding:10px;
margin:8px 0;
border:none;
outline:none;
}

.glass-form button{
width:100%;
padding:10px;
background:#0d6efd;
border:none;
color:#fff;
cursor:pointer;
}

/* SERVICES */
.services{
padding:50px 20px;
text-align:center;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:30px;
}

.card{
padding:20px;
background:rgba(37, 94, 168, 0.1);
border-radius:15px;
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
background:#0d6efd;
}

/* WHY */
.why{
padding:50px 20px;
text-align:center;
background:#020617;
}

.box{
background:#111;
padding:20px;
border-radius:10px;
}

/* WHATSAPP */
.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
padding:15px;
border-radius:50%;
color:#fff;
text-decoration:none;
font-size:20px;
}

/* ========================= */
/* 🔥 RESPONSIVE MEDIA QUERY */
/* ========================= */

/* TABLET */
@media (max-width: 992px){

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

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

.glass-form{
margin-top:20px;
width:100%;
max-width:400px;
}

.hero-content h1{
font-size:32px;
}
}

/* MOBILE */
@media (max-width: 600px){

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

.header nav{
flex-wrap:wrap;
justify-content:center;
}

.hero{
padding:20px;
}

.hero-content h1{
font-size:26px;
}

.grid{
grid-template-columns:1fr;
}

.glass-form{
width:100%;
}

.card{
padding:15px;
}
}

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

.container{
width:100%;
max-width:1200px;
margin:auto;
padding:0 15px;
}

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

.hero{
flex-wrap:wrap;
padding:20px;
}

.hero-content{
width:100%;
text-align:center;
}

.glass-form{
width:100%;
max-width:400px;
margin:auto;
margin-top:20px;
}

.header{
flex-wrap:wrap;
text-align:center;
}

.header nav{
width:100%;
margin-top:10px;
display:flex;
justify-content:center;
flex-wrap:wrap;
}

/* MOBILE */
@media (max-width: 768px){

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

.hero-content h1{
font-size:26px;
}

.grid{
grid-template-columns:1fr;
}

.glass-form{
width:100%;
}

}

/* TABLET */
@media (max-width: 992px){

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

.hero-content h1{
font-size:32px;
}

}


/* footer */
.footer{
background:#020617;
color:#fff;
padding-top:50px;
}

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

.footer-col h2,
.footer-col h3{
margin-bottom:15px;
}

.footer-col p{
font-size:14px;
line-height:1.6;
}

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

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

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

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

/* SOCIAL */
.social a{
display:inline-block;
margin-right:10px;
font-size:18px;
transition:.3s;
}

.social a:hover{
transform:scale(1.2);
}

/* BOTTOM */
.footer-bottom{
text-align:center;
padding:15px;
background:#000;
margin-top:30px;
font-size:14px;
}

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

/* TABLET */
@media(max-width:992px){
.footer-container{
grid-template-columns:repeat(2,1fr);
}
}

/* MOBILE */
@media(max-width:600px){
.footer-container{
grid-template-columns:1fr;
text-align:center;
}

.social{
margin-top:10px;
}
}




/* footer */




.services{
padding:60px 20px;
background:#020617;
text-align:center;
}

.section-title{
font-size:32px;
margin-bottom:40px;
}

/* GRID */
.services-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
max-width:1200px;
margin:auto;
}

/* CARD */
.service-card{
background:rgba(255,255,255,0.08);
padding:25px;
border-radius:15px;
backdrop-filter:blur(10px);
transition:0.4s;
position:relative;
overflow:hidden;
}

.service-card::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(120deg,#0d6efd,transparent);
top:0;
left:-100%;
transition:0.5s;
}

.service-card:hover::before{
left:100%;
}

.service-card:hover{
transform:translateY(-10px) scale(1.03);
background:#0d6efd;
}

.service-card h3{
margin:15px 0;
}

.service-card p{
font-size:14px;
color:#ccc;
}

.service-card a{
display:inline-block;
margin-top:10px;
color:#fff;
text-decoration:none;
font-weight:bold;
}

/* ICON */
.icon{
font-size:40px;
background:#0d6efd;
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
margin:auto;
}

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

/* TABLET */
@media(max-width:992px){
.services-container{
grid-template-columns:repeat(2,1fr);
}
}

/* MOBILE */
@media(max-width:600px){
.services-container{
grid-template-columns:1fr;
}

.section-title{
font-size:24px;
}
}


/* whychose us */

.why-us{
padding:60px 20px;
background:linear-gradient(135deg,#1e55ce,#0f172a);
text-align:center;
}

.section-title{
font-size:32px;
margin-bottom:40px;
}

/* GRID */
.why-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
max-width:1200px;
margin:auto;
}

/* CARD */
.why-card{
background:rgba(255,255,255,0.08);
padding:25px;
border-radius:15px;
backdrop-filter:blur(10px);
transition:0.4s;
position:relative;
overflow:hidden;
}

/* HOVER EFFECT */
.why-card:hover{
transform:translateY(-10px) scale(1.03);
background:#0d6efd;
}

/* ICON */
.why-icon{
font-size:35px;
margin-bottom:10px;
}

/* TEXT */
.why-card h3{
margin:10px 0;
}

.why-card p{
font-size:14px;
color:#ccc;
}

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

/* TABLET */
@media(max-width:992px){
.why-container{
grid-template-columns:repeat(2,1fr);
}
}

/* MOBILE */
@media(max-width:600px){
.why-container{
grid-template-columns:1fr;
}

.section-title{
font-size:24px;
}
}


/* business partner */



.partners{
padding:60px 20px;
background:#23306b;
text-align:center;
overflow:hidden;
}

.section-title{
font-size:30px;
margin-bottom:30px;
}

/* SLIDER */
.slider{
position:relative;
width:100%;
overflow:hidden;
}

.slide-track{
display:flex;
width:calc(250px * 12);
animation:scroll 20s linear infinite;
}

.slide{
width:250px;
display:flex;
justify-content:center;
align-items:center;
padding:10px;
}

.slide img{
width:150px;
filter:(100%);
transition:0.3s;
}

.slide img:hover{
filter:(0%);
transform:scale(1.1);
}

/* ANIMATION */
@keyframes scroll{
0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }
}

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

@media(max-width:768px){
.slide{
width:180px;
}
.slide img{
width:120px;
}
}

@media(max-width:480px){
.slide{
width:140px;
}
.slide img{
width:100px;
}
.section-title{
font-size:22px;
}
}



/* 🔥 about us */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif;
}

body{
overflow-x:hidden;
}

/* HERO */
.about-hero{
background:#0d6efd;
color:#fff;
text-align:center;
padding:50px 15px;
}

.about-hero h1{
font-size:32px;
}

/* ABOUT SECTION */
.about-section{
display:flex;
align-items:center;
gap:30px;
padding:40px 20px;
flex-wrap:wrap;
}

.about-image{
flex:1;
text-align:center;
}

.about-image img{
width:100%;
max-width:350px;
border-radius:10px;
}

.about-content{
flex:1;
}

/* SERVICES */
.services{
padding:40px 20px;
text-align:center;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}

.card{
background:#f4f4f4;
padding:20px;
border-radius:10px;
transition:0.3s;
}

.card:hover{
background:#0d6efd;
color:#fff;
}

/* FAQ */
.faq{
padding:40px 20px;
background:#020617;
color:#fff;
}

.faq-question{
width:100%;
padding:15px;
background:#111;
border:none;
color:#fff;
cursor:pointer;
}

.faq-answer{
display:none;
padding:10px;
background:#222;
}

/* BRANCHES */
.branches{
padding:40px 20px;
text-align:center;
}

.branch-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;
margin-top:20px;
}

.branch-grid div{
background:#307fc9;
padding:12px;
border-radius:8px;
}

/* FOOTER */
.footer{
background:#000;
color:#fff;
text-align:center;
padding:15px;
}

/* ===================== */
/* 🔥 MOBILE RESPONSIVE */
/* ===================== */

@media (max-width:768px){

.about-section{
flex-direction:column;
text-align:center;
}

.about-content h2{
font-size:22px;
}

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

}

/* EXTRA SMALL MOBILE */
@media (max-width:480px){

.about-hero{
padding:40px 10px;
}

.about-hero h1{
font-size:20px;
}

.card{
padding:15px;
}

.faq-question{
font-size:14px;
}

}






.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
}

.menu-toggle span{
height:3px;
width:25px;
background:#fff;
margin:4px;
transition:0.3s;
}

/* MOBILE MENU */
@media(max-width:768px){

.menu-toggle{
display:flex;
}

nav{
position:absolute;
top:60px;
left:0;
width:100%;
background:#000;
display:none;
flex-direction:column;
text-align:center;
}

nav a{
padding:15px;
display:block;
border-top:1px solid #333;
}

nav.active{
display:flex;
}
}




.about{
display:flex;
gap:40px;
padding:50px 20px;
max-width:1200px;
margin:auto;
align-items:center;
flex-wrap:wrap;
}

.about-image{
flex:1;
text-align:center;
}

.about-image img{
width:100%;
max-width:400px;
border-radius:15px;
}

.about-content{
flex:1;
}

.about-content h2{
margin-bottom:15px;
font-size:28px;
}

.about-content p{
margin-bottom:15px;
line-height:1.7;
color:#ccc;
}

.about-content ul{
margin-top:10px;
}

.about-content ul li{
margin-bottom:8px;
}

/* MOBILE */
@media(max-width:768px){
.about{
flex-direction:column;
text-align:center;
}
}



/*header new*/
*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}

body{background:#ffffff;color:#fff;}

/* TOP HEADER */
.top-header{
display:flex;
justify-content:space-between;
padding:10px 20px;
background:#0d6efd;
flex-wrap:wrap;
}

.top-header a{color:#fff;text-decoration:none;margin-left:10px;}

.right a{
padding:6px 12px;
border-radius:5px;
margin-left:10px;
}

/* BUTTONS */
.call-btn{background:#000;}
.quote-btn{background:#ff9800;}

/* MAIN HEADER */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  flex-wrap: wrap;
}

.logo span {
  font-size: 20px;
  font-weight: 600;
  margin-left: 10px;
}

@media (max-width: 576px) {
  .logo span {
    font-size: 16px;
  }
}



/* NAV */
nav{
display:flex;
align-items:center;
gap:20px;
}

nav a{
color:#000000;
text-decoration:none;
}

/* DROPDOWN */
.dropdown{
position:relative;
}

.dropdown-menu{
display:none;
position:absolute;
top:30px;
background:#1e293b;
padding:10px;
border-radius:5px;
min-width:180px;
}

.dropdown-menu a{
display:block;
padding:8px;
}

.dropdown:hover .dropdown-menu{
display:block;
}

/* HAMBURGER */
.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
}

.menu-toggle span{
height:3px;
width:25px;
background:#fff;
margin:4px;
}

/* MOBILE */
@media(max-width:768px){

.top-header{
flex-direction:column;
text-align:center;
gap:8px;
}

/* MENU */
.menu-toggle{
display:flex;
}

nav{
display:none;
flex-direction:column;
position:absolute;
top:60px;
left:0;
width:100%;
background:#000;
text-align:center;
}

nav a{
padding:15px;
border-top:1px solid #333;
}

/* DROPDOWN MOBILE */
.dropdown-menu{
position:static;
display:none;
background:#111;
}

.dropdown.active .dropdown-menu{
display:block;
}

nav.active{
display:flex;
}
}

/* NAV FIX */
nav{
display:flex;
gap:20px;
}

/* MOBILE */
@media(max-width:768px){

nav{
display:none;
flex-direction:column;
position:absolute;
top:60px;
left:0;
width:100%;
background:#000;
z-index:999;
}

/* ✅ FIX */
nav.active{
display:flex !important;
}

/* DROPDOWN FIX */
.dropdown-menu{
display:none;
flex-direction:column;
}

.dropdown.active .dropdown-menu{
display:flex;
}
}




.home-about{
padding:60px 20px;
background:#ffffff;
color:#645050;
}

.about-container{
display:flex;
align-items:center;
gap:40px;
max-width:1200px;
margin:auto;
flex-wrap:wrap;
}

/* IMAGE */
.about-img{
flex:1;
text-align:center;
}

.about-img img{
width:100%;
max-width:450px;
border-radius:15px;
}

/* CONTENT */
.about-content{
flex:1;
}

.about-content h2{
font-size:28px;
margin-bottom:15px;
}

.about-content p{
margin-bottom:15px;
line-height:1.7;
color:#000000;
}

.about-content ul{
margin-top:10px;
}

.about-content ul li{
margin-bottom:8px;
}

/* MOBILE */
@media(max-width:768px){
.about-container{
flex-direction:column;
text-align:center;
}

.about-content h2{
font-size:24px;
}
}






.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 992px) {
  .logo img {
    height: 50px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .logo img {
    height: 40px;
  }
}