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

body{
 font-family:Inter,sans-serif;
 background:#f6f7f9;
 color:#111;
 position:relative;
 overflow-x:hidden;
}

/* Professional Main Background - Realistic Architectural Sketch Texture (Now on White) */
body::before{
 content:'';
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:-1;
 background-image: 
   /* Hand-drawn architectural sketch lines */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M20 20 L180 20 L180 180 L20 180 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.15" stroke-dasharray="5,5"/><path d="M40 40 L160 40 L160 160 L40 160 Z" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.12"/><path d="M60 60 L140 60 L140 140 L60 140 Z" stroke="%23be8946" stroke-width="0.2" fill="none" opacity="0.1"/><circle cx="100" cy="100" r="30" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.12"/><path d="M100 70 L100 130 M70 100 L130 100" stroke="%23be8946" stroke-width="0.3" opacity="0.12"/></svg>'),
   /* Construction blueprint grid */
   repeating-linear-gradient(90deg, rgba(190,137,70,0.08) 0px, rgba(190,137,70,0.08) 1px, transparent 1px, transparent 50px),
   repeating-linear-gradient(0deg, rgba(190,137,70,0.08) 0px, rgba(190,137,70,0.08) 1px, transparent 1px, transparent 50px),
   /* Hand-drawn furniture sketches */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M50 200 L250 200 L250 250 L50 250 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.12" stroke-dasharray="3,3"/><path d="M80 150 L220 150 L220 180 L80 180 Z" stroke="%23be8946" stroke-width="0.4" fill="none" opacity="0.1"/><path d="M120 100 L180 100 L180 130 L120 130 Z" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.1"/><circle cx="150" cy="70" r="15" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.1"/><path d="M30 270 L270 270" stroke="%23be8946" stroke-width="0.5" opacity="0.12"/></svg>'),
   /* Construction site sketch */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M100 300 L300 300 L300 350 L100 350 Z" stroke="%23be8946" stroke-width="1" fill="none" opacity="0.1"/><path d="M150 250 L250 250 L250 280 L150 280 Z" stroke="%23be8946" stroke-width="0.6" fill="none" opacity="0.1"/><path d="M200 200 L200 250 M180 220 L220 220" stroke="%23be8946" stroke-width="0.5" opacity="0.1"/><path d="M50 380 L350 380" stroke="%23be8946" stroke-width="1" opacity="0.1"/><path d="M320 100 L380 160 L350 200 L290 140 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.1"/></svg>'),
   /* Main light background */
   radial-gradient(ellipse at 50% 50%, #ffffff 0%, #f6f7f9 100%);
 background-size: 200px 200px, 50px 50px, 50px 50px, 300px 300px, 400px 400px, cover;
 background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
 background-position: 0 0, 0 0, 0 0, 100px 150px, 200px 300px, 0 0;
 opacity:1;
}

/* Floating construction dust particles (softer on white) */
body::after{
 content:'';
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 pointer-events:none;
 background-image: 
   radial-gradient(circle at 20% 30%, rgba(190,137,70,0.1) 1px, transparent 1px),
   radial-gradient(circle at 80% 70%, rgba(190,137,70,0.1) 1px, transparent 1px),
   radial-gradient(circle at 40% 60%, rgba(190,137,70,0.1) 1px, transparent 1px),
   radial-gradient(circle at 90% 20%, rgba(190,137,70,0.1) 1px, transparent 1px),
   radial-gradient(circle at 10% 80%, rgba(190,137,70,0.1) 1px, transparent 1px);
 background-size: 200px 200px;
 animation: dustFloat 40s linear infinite;
 opacity:0.15;
}

@keyframes dustFloat{
 0%,100%{ transform:translateY(0) translateX(0); }
 25%{ transform:translateY(-20px) translateX(10px); }
 50%{ transform:translateY(10px) translateX(-10px); }
 75%{ transform:translateY(-10px) translateX(20px); }
}

.section-title{
 font-weight:800;
 font-size:clamp(28px, 5vw, 42px);
 letter-spacing:-0.5px;
 color:#be8946;
 position:relative;
 display:inline-block;
 padding-bottom:15px;
 margin-bottom:30px;
}

.section-title::before{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:70px;
 height:3px;
 background:linear-gradient(90deg, #be8946, rgba(190,137,70,0.2));
 border-radius:3px;
}

.section-title::after{
 content:'';
 position:absolute;
 bottom:0;
 left:80px;
 width:30px;
 height:3px;
 background:linear-gradient(90deg, rgba(190,137,70,0.2), transparent);
 border-radius:3px;
}

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

.hero-section{
 position:relative;
}

.hero-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(135deg, rgba(190,137,70,0.08), transparent, rgba(190,137,70,0.05));
 pointer-events:none;
 z-index:1;
}

.hero-section::after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-image: 
   /* Hand-drawn architectural sketch */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M50 350 L350 350 L350 380 L50 380 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.15" stroke-dasharray="10,5"/><path d="M100 300 L300 300 L300 330 L100 330 Z" stroke="%23be8946" stroke-width="0.6" fill="none" opacity="0.12"/><path d="M150 250 L250 250 L250 280 L150 280 Z" stroke="%23be8946" stroke-width="0.4" fill="none" opacity="0.12"/><path d="M200 200 L200 250 M180 220 L220 220" stroke="%23be8946" stroke-width="0.5" opacity="0.12"/><path d="M320 100 L380 160 L350 200 L290 140 Z" stroke="%23be8946" stroke-width="0.4" fill="none" opacity="0.12"/><circle cx="120" cy="120" r="20" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.12"/></svg>'),
   /* Blueprint grid */
   repeating-linear-gradient(90deg, rgba(190,137,70,0.05) 0px, rgba(190,137,70,0.05) 1px, transparent 1px, transparent 40px),
   repeating-linear-gradient(0deg, rgba(190,137,70,0.05) 0px, rgba(190,137,70,0.05) 1px, transparent 1px, transparent 40px);
 background-size: 400px 400px, 40px 40px, 40px 40px;
 background-position: 50px 100px, 0 0, 0 0;
 pointer-events:none;
 z-index:1;
 opacity:0.8;
}

.hero-slide{
 position:relative;
 height:clamp(450px, 85vh, 900px);
 min-height:450px;
 overflow:hidden;
 border-radius:0 0 30px 30px;
}

.hero-img{
 width:100%;
 height:100%;
 object-fit:cover;
 transform:scale(1.05);
 animation:heroZoom 15s ease-in-out infinite;
}

@keyframes heroZoom{
 0%{ transform:scale(1.05); }
 50%{ transform:scale(1.15); }
 100%{ transform:scale(1.05); }
}

.hero-overlay{
 position:absolute;
 inset:0;
 background:linear-gradient(
  135deg,
  rgba(255,255,255,0.85) 0%,
  rgba(255,255,255,0.6) 40%,
  rgba(190,137,70,0.15) 100%
 );
}

.hero-content{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-start;
 color:#111;
 z-index:3;
 padding-left:clamp(20px, 5%, 100px);
 padding-right:20px;
}

.hero-content h1,
.hero-content h2{
 font-weight:900;
 font-size:clamp(32px, 6vw, 58px);
 max-width:800px;
 color:#be8946;
 text-shadow:2px 2px 4px rgba(255,255,255,.8);
 position:relative;
 animation: slideInLeft 1s ease-out;
 line-height:1.2;
}

@keyframes slideInLeft{
 from{
  opacity:0;
  transform:translateX(-50px);
 }
 to{
  opacity:1;
  transform:translateX(0);
 }
}

.hero-content p{
 font-size:clamp(16px, 2vw, 20px);
 opacity:.9;
 margin-bottom:25px;
 color:#333;
 max-width:600px;
 animation: slideInLeft 1s ease-out 0.2s backwards;
 border-left:3px solid #be8946;
 padding-left:20px;
}

.carousel-control-prev,
.carousel-control-next{
 width:clamp(40px, 5vw, 50px);
 height:clamp(40px, 5vw, 50px);
 background:rgba(190,137,70,0.15);
 border:1px solid rgba(190,137,70,0.3);
 backdrop-filter:blur(10px);
 border-radius:50%;
 top:50%;
 transform:translateY(-50%);
 opacity:0.8;
 transition:0.3s;
}

.carousel-control-prev:hover,
.carousel-control-next:hover{
 background:rgba(190,137,70,0.25);
 border-color:#be8946;
 opacity:1;
 transform:translateY(-50%) scale(1.1);
}

/* ================= ABOUT MINI ================= */

.about-mini{
 background:rgba(255,255,255,0.9);
 backdrop-filter:blur(15px);
 border-radius:28px;
 margin-top:-60px;
 position:relative;
 z-index:5;
 box-shadow:0 25px 50px rgba(0,0,0,0.1);
 border:1px solid rgba(190,137,70,0.2);
 overflow:hidden;
}

.about-mini::before{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg, 
   transparent, 
   rgba(190,137,70,0.1), 
   rgba(190,137,70,0.2), 
   rgba(190,137,70,0.1), 
   transparent
 );
 transition:1s;
}

.about-mini:hover::before{
 left:100%;
}

.about-mini::after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:1px;
 background:linear-gradient(90deg, transparent, #be8946, transparent);
}

.about-mini-logo{
 max-width:clamp(200px, 20vw, 260px);
 transition:.4s;
 filter:drop-shadow(0 5px 15px rgba(190,137,70,0.2));
}

.about-mini-logo:hover{
 transform:scale(1.06) rotate(-2deg);
 filter:drop-shadow(0 8px 25px rgba(190,137,70,0.3));
}

.about-mini-text{
 font-size:clamp(14px, 2vw, 18px);
 line-height:1.8;
 color:#444;
 position:relative;
 padding-left:15px;
 border-left:2px solid #be8946;
}

/* ================= SERVICE CARDS ================= */

.service-card{
 background:rgba(255,255,255,0.85);
 backdrop-filter:blur(10px);
 border-radius:22px;
 padding:clamp(25px, 4vw, 40px);
 box-shadow:0 20px 40px rgba(0,0,0,0.05);
 transition:.4s;
 position:relative;
 overflow:hidden;
 border:1px solid rgba(190,137,70,0.15);
 height:100%;
}

.service-card::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:linear-gradient(90deg, #be8946, #e5b87b, #be8946);
 transform:translateX(-100%);
 transition:0.6s;
}

.service-card::after{
 content:'';
 position:absolute;
 inset:0;
 background-image: 
   /* Interior design sketch overlay */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M30 170 L170 170 L170 190 L30 190 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.15"/><path d="M50 140 L150 140 L150 160 L50 160 Z" stroke="%23be8946" stroke-width="0.4" fill="none" opacity="0.12"/><path d="M70 110 L130 110 L130 130 L70 130 Z" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.1"/><circle cx="100" cy="70" r="20" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.1"/><path d="M80 50 L120 50 M100 30 L100 70" stroke="%23be8946" stroke-width="0.3" opacity="0.1"/></svg>');
 background-size: 150px 150px;
 background-position: bottom right;
 background-repeat: no-repeat;
 opacity:0;
 transition:.5s;
 pointer-events:none;
}

.service-card:hover{
 transform:translateY(-12px) scale(1.02);
 box-shadow:0 30px 60px rgba(190,137,70,0.15);
 border-color:#be8946;
}

.service-card:hover::before{
 transform:translateX(0);
}

.service-card:hover::after{
 opacity:1;
}

.service-icon{
 font-size:clamp(40px, 5vw, 52px);
 margin-bottom:20px;
 color:#be8946;
 position:relative;
 display:inline-block;
}

.service-icon::after{
 content:'';
 position:absolute;
 width:80px;
 height:80px;
 background:radial-gradient(circle, rgba(190,137,70,0.15), transparent 70%);
 top:50%;
 left:50%;
 transform:translate(-50%, -50%) scale(0);
 border-radius:50%;
 transition:0.4s;
 z-index:-1;
}

.service-card:hover .service-icon::after{
 transform:translate(-50%, -50%) scale(1.5);
}

.service-card h3{
 color:#be8946;
 margin-bottom:15px;
 font-size:clamp(18px, 3vw, 22px);
}

.service-card p{
 color:#555;
 line-height:1.8;
 font-size:clamp(14px, 1.8vw, 16px);
}

/* ================= FEATURE STRIP ================= */

.feature-strip{
  background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  color:#111;
  padding:clamp(50px, 8vw, 80px) 0;
  margin:clamp(40px, 6vw, 60px) 0;
  position:relative;
  overflow:hidden;
}

.feature-strip::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: 
    /* Construction site sketch */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M100 400 L400 400 L400 450 L100 450 Z" stroke="%23be8946" stroke-width="1" fill="none" opacity="0.15"/><path d="M150 350 L350 350 L350 380 L150 380 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.12"/><path d="M200 300 L300 300 L300 330 L200 330 Z" stroke="%23be8946" stroke-width="0.6" fill="none" opacity="0.1"/><path d="M250 250 L250 300 M230 270 L270 270" stroke="%23be8946" stroke-width="0.5" opacity="0.1"/><path d="M350 150 L450 200 L400 250 L300 200 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.1"/><circle cx="120" cy="200" r="30" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.1"/><path d="M50 470 L450 470" stroke="%23be8946" stroke-width="1" opacity="0.1"/></svg>'),
    /* Blueprint numbers and measurements */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="20" y="30" fill="%23be8946" font-size="12" opacity="0.15">12"</text><text x="150" y="180" fill="%23be8946" font-size="12" opacity="0.15">24"</text><text x="30" y="160" fill="%23be8946" font-size="12" opacity="0.15">36"</text><line x1="40" y1="80" x2="80" y2="80" stroke="%23be8946" stroke-width="0.5" opacity="0.15"/><line x1="60" y1="60" x2="60" y2="100" stroke="%23be8946" stroke-width="0.5" opacity="0.15"/></svg>'),
    /* Construction grid */
    repeating-linear-gradient(90deg, rgba(190,137,70,0.05) 0px, rgba(190,137,70,0.05) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(190,137,70,0.05) 0px, rgba(190,137,70,0.05) 1px, transparent 1px, transparent 60px);
  background-size: 500px 500px, 200px 200px, 60px 60px, 60px 60px;
  background-position: 0 0, 100px 200px, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  pointer-events:none;
  z-index:1;
}

/* --- card base --- */

.stat{
  position:relative;
  padding:clamp(30px, 4vw, 40px) clamp(15px, 3vw, 25px);
  border-radius:18px;
  overflow:hidden;
  transition:.5s;
  cursor:pointer;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.6);
  border:1px solid rgba(190,137,70,0.15);
  z-index:2;
  height:100%;
  text-align:center;
}

/* --- luxury metallic border effect --- */

.stat::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:2px;
  background:linear-gradient(135deg, #be8946, #e5b87b, #be8946, #e5b87b);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:0.5s;
}

.stat:hover::after{
  opacity:1;
}

/* --- moving light beam sweep --- */

.stat::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:-100%;
  background:linear-gradient(90deg, 
    transparent, 
    rgba(190,137,70,0.1), 
    rgba(190,137,70,0.2), 
    rgba(190,137,70,0.1), 
    transparent
  );
  transition:0.8s;
  z-index:1;
}

.stat:hover::before{
  left:100%;
}

/* --- number style --- */

.stat h3{
  font-size:clamp(32px, 5vw, 48px);
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:10px;
  transition:.5s;
  color:#be8946;
  position:relative;
  z-index:2;
  text-shadow:0 0 20px rgba(190,137,70,0.2);
}

/* 3D flip effect */

.stat:hover h3{
  transform:perspective(400px) rotateX(10deg) scale(1.1);
  color:#be8946;
  text-shadow:0 15px 30px rgba(190,137,70,0.3);
}

/* --- label style --- */

.stat p{
  opacity:.9;
  letter-spacing:1px;
  transition:.4s;
  color:#444;
  font-size:clamp(12px, 1.8vw, 14px);
  text-transform:uppercase;
  position:relative;
  z-index:2;
  font-weight:500;
}

.stat:hover p{
  opacity:1;
  letter-spacing:2px;
  color:#be8946;
}

/* --- hover motion --- */

.stat:hover{
  transform:
    translateY(-15px)
    scale(1.03);
  box-shadow:
    0 30px 50px rgba(190,137,70,0.15),
    inset 0 0 30px rgba(190,137,70,0.05);
  background: rgba(255,255,255,0.8);
}

/* --- subtle pulse animation --- */

.stat{
  animation: statPulse 4s ease-in-out infinite;
}

@keyframes statPulse{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* stagger */

.stat:nth-child(1){ animation-delay:.1s; }
.stat:nth-child(2){ animation-delay:.3s; }
.stat:nth-child(3){ animation-delay:.5s; }
.stat:nth-child(4){ animation-delay:.7s; }

/* ================= PROJECTS ================= */

.project-card{
 background:rgba(255,255,255,0.85);
 backdrop-filter:blur(10px);
 border-radius:22px;
 overflow:hidden;
 box-shadow:0 20px 40px rgba(0,0,0,0.05);
 transition:.5s;
 border:1px solid rgba(190,137,70,0.15);
 height:100%;
}

.project-card:hover{
 transform:translateY(-15px) scale(1.02);
 border-color:#be8946;
 box-shadow:0 30px 60px rgba(190,137,70,0.15);
}

.project-img-wrap{
 position:relative;
 overflow:hidden;
 aspect-ratio: 16/10;
}

.project-img-wrap::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg, rgba(190,137,70,0.2), transparent);
 opacity:0;
 transition:0.5s;
 z-index:1;
}

.project-card:hover .project-img-wrap::before{
 opacity:1;
}

.project-img-wrap::after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image: 
   /* Project blueprint overlay */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><path d="M20 20 L280 20 L280 180 L20 180 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.2" stroke-dasharray="5,3"/><path d="M50 50 L250 50 L250 150 L50 150 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.15"/><path d="M80 80 L220 80 L220 120 L80 120 Z" stroke="%23be8946" stroke-width="0.3" fill="none" opacity="0.12"/><line x1="150" y1="50" x2="150" y2="150" stroke="%23be8946" stroke-width="0.3" opacity="0.12"/><line x1="50" y1="100" x2="250" y2="100" stroke="%23be8946" stroke-width="0.3" opacity="0.12"/></svg>');
 background-size: 100% 100%;
 background-position: center;
 background-repeat: no-repeat;
 opacity:0;
 transition:0.5s;
 z-index:1;
 pointer-events:none;
}

.project-card:hover .project-img-wrap::after{
 opacity:1;
}

.project-img-wrap img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:.8s;
}

.project-card:hover img{
 transform:scale(1.15) rotate(2deg);
}

.project-overlay{
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(255,255,255,0.8), rgba(190,137,70,0.2));
 display:flex;
 align-items:center;
 justify-content:center;
 opacity:0;
 transition:.5s;
 z-index:2;
 backdrop-filter:blur(5px);
}

.project-card:hover .project-overlay{
 opacity:1;
}

.project-overlay i{
 color:#be8946;
 font-size:clamp(32px, 5vw, 48px);
 transform:scale(0.8) rotate(-45deg);
 transition:0.5s;
}

.project-card:hover .project-overlay i{
 transform:scale(1.2) rotate(0);
}

.project-body{
 padding:clamp(15px, 3vw, 25px);
}

.project-body h3{
 color:#be8946;
 font-size:clamp(18px, 2.5vw, 20px);
 margin-bottom:8px;
}

.project-body p{
 color:#555;
 font-size:clamp(13px, 1.8vw, 14px);
 line-height:1.7;
}

/* ================= TESTIMONIAL ================= */

.testimonial-section{
 background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
 position:relative;
}

.testimonial-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image: 
   /* Hand-drawn testimonial sketch */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M50 300 L350 300 L350 350 L50 350 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.15"/><circle cx="120" cy="150" r="30" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.12"/><circle cx="280" cy="150" r="30" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.12"/><path d="M150 200 L250 200" stroke="%23be8946" stroke-width="0.5" opacity="0.12"/><path d="M180 230 L220 230" stroke="%23be8946" stroke-width="0.5" opacity="0.12"/><text x="100" y="100" fill="%23be8946" font-size="20" opacity="0.15">"</text><text x="280" y="100" fill="%23be8946" font-size="20" opacity="0.15">"</text></svg>'),
   /* Paper texture */
   repeating-linear-gradient(45deg, rgba(190,137,70,0.03) 0px, rgba(190,137,70,0.03) 2px, transparent 2px, transparent 8px);
 background-size: 400px 400px, 15px 15px;
 background-repeat: repeat, repeat;
 pointer-events:none;
}

.testimonial-card{
 max-width:800px;
 margin:auto;
 background:rgba(255,255,255,0.85);
 backdrop-filter:blur(15px);
 padding:clamp(30px, 5vw, 50px) clamp(25px, 4vw, 40px);
 border-radius:24px;
 box-shadow:0 25px 50px rgba(0,0,0,0.1);
 text-align:center;
 transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1);
 transform: scale(.96);
 opacity:.85;
 border:1px solid rgba(190,137,70,0.2);
 position:relative;
}

.testimonial-card::before{
 content:'❝';
 position:absolute;
 top:-30px;
 left:30px;
 font-size:120px;
 color:#be8946;
 opacity:0.2;
 font-family:serif;
}

.testimonial-card::after{
 content:'';
 position:absolute;
 bottom:20px;
 right:30px;
 width:50px;
 height:50px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23be8946" stroke-width="1" fill="none" opacity="0.15"><path d="M4 4 L20 4 L20 20 L4 20 Z"/><path d="M8 8 L16 8 L16 16 L8 16 Z"/></svg>');
 background-size:contain;
 opacity:0.15;
}

/* active slide effect */
.carousel-item.active .testimonial-card{
 transform: scale(1);
 opacity:1;
}

/* hover interaction */
.testimonial-card:hover{
 transform: translateY(-12px) scale(1.02);
 box-shadow:0 35px 70px rgba(190,137,70,0.15);
 border-color:#be8946;
}

.testimonial-card img{
 width:clamp(80px, 12vw, 100px);
 height:clamp(80px, 12vw, 100px);
 object-fit:cover;
 border-radius:50%;
 margin-bottom:20px;
 transition:.5s;
 border:3px solid #be8946;
 padding:3px;
 background:#fff;
}

.testimonial-card:hover img{
 transform: rotate(8deg) scale(1.1);
 border-color:#e5b87b;
}

.testimonial-card p{
 color:#444;
 font-size:clamp(14px, 2vw, 16px);
 line-height:1.9;
 font-style:italic;
 margin-bottom:20px;
}

.testimonial-card h5{
 color:#be8946;
 font-size:clamp(16px, 2.5vw, 18px);
 margin-bottom:5px;
}

.testimonial-card span{
 color:#666;
 font-size:clamp(12px, 1.8vw, 14px);
}

/* indicators style */
.carousel-indicators{
 bottom:-50px;
}

.carousel-indicators [data-bs-target]{
 width:12px;
 height:12px;
 border-radius:50%;
 background:#be8946;
 opacity:.2;
 border:none;
 margin:0 5px;
 transition:0.3s;
}

.carousel-indicators .active{
 background:#be8946;
 opacity:1;
 transform:scale(1.3);
}

/* =========================
   PARTNERS AUTO SLIDER
========================= */

.partners-section{
 background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
 overflow:hidden;
 position:relative;
 padding:clamp(40px, 6vw, 60px) 0;
}

.partners-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: 
    /* Architectural collaboration sketch */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M50 250 L250 250 L250 280 L50 280 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.15"/><circle cx="100" cy="150" r="20" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.12"/><circle cx="200" cy="150" r="20" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.12"/><path d="M120 150 L180 150" stroke="%23be8946" stroke-width="0.5" opacity="0.12"/><path d="M150 120 L150 180" stroke="%23be8946" stroke-width="0.5" opacity="0.12"/></svg>'),
    /* Hand-drawn logos sketch */
    repeating-linear-gradient(45deg, rgba(190,137,70,0.03) 0px, rgba(190,137,70,0.03) 2px, transparent 2px, transparent 10px);
  background-size: 300px 300px, 20px 20px;
  background-repeat: repeat, repeat;
  pointer-events:none;
}

.partners-slider-wrap{
 position:relative;
 overflow:hidden;
 padding:15px 0;
}

.partners-track{
 display:flex;
 gap:clamp(30px, 5vw, 60px);
 align-items:center;
 width:max-content;
 animation:partnerScroll 40s linear infinite;
}

.partners-slider-wrap:hover .partners-track{
 animation-play-state:paused;
}

/* partner logo box */

.partner-item{
 background:rgba(255,255,255,0.5);
 backdrop-filter:blur(8px);
 padding:clamp(12px, 2vw, 18px) clamp(20px, 3vw, 30px);
 border-radius:16px;
 box-shadow:0 10px 25px rgba(0,0,0,0.05);
 display:flex;
 align-items:center;
 justify-content:center;
 transition:.5s;
 text-decoration:none;
 border:1px solid rgba(190,137,70,0.15);
 position:relative;
 overflow:hidden;
}

.partner-item::before{
 content:'';
 position:absolute;
 top:-100%;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(135deg, 
   transparent, 
   rgba(190,137,70,0.15), 
   rgba(190,137,70,0.1), 
   transparent
 );
 transition:0.6s;
}

.partner-item:hover::before{
 top:100%;
}

.partner-item img{
 height:clamp(35px, 5vw, 50px);
 width:auto;
 filter:grayscale(100%) brightness(0.8);
 opacity:.7;
 transition:.5s;
}

/* hover effect */

.partner-item:hover{
 transform:translateY(-10px) scale(1.05);
 box-shadow:0 25px 40px rgba(190,137,70,0.15);
 border-color:#be8946;
 background:rgba(255,255,255,0.8);
}

.partner-item:hover img{
 filter:none;
 opacity:1;
 transform:scale(1.15);
}

/* scrolling animation */

@keyframes partnerScroll{
 from{
  transform:translateX(0);
 }
 to{
  transform:translateX(-50%);
 }
}

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

.btn{
 border-radius:999px;
 padding:clamp(12px, 2vw, 16px) clamp(25px, 4vw, 35px);
 font-weight:700;
 letter-spacing:0.5px;
 transition:0.4s;
 position:relative;
 overflow:hidden;
 z-index:1;
 font-size:clamp(14px, 1.8vw, 16px);
}

.btn::before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 border-radius:50%;
 background:rgba(190,137,70,0.2);
 transform:translate(-50%, -50%);
 transition:width 0.6s, height 0.6s;
 z-index:-1;
}

.btn:hover::before{
 width:300px;
 height:300px;
}

.btn-primary{
 background:#be8946;
 border-color:#be8946;
 color:#fff;
 box-shadow:0 5px 20px rgba(190,137,70,0.2);
}

.btn-primary:hover{
 background:#e5b87b;
 border-color:#e5b87b;
 color:#fff;
 transform:translateY(-4px);
 box-shadow:0 10px 30px rgba(190,137,70,0.3);
}

.btn-outline{
 background:transparent;
 border:2px solid #be8946;
 color:#be8946;
}

.btn-outline:hover{
 background:#be8946;
 color:#fff;
 transform:translateY(-4px);
 box-shadow:0 10px 30px rgba(190,137,70,0.2);
}

/* ===== PAGE HERO ===== */

.page-hero{
 background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
 color:#111;
 padding:clamp(60px, 10vw, 100px) 0;
 border-bottom:3px solid #be8946;
 position:relative;
 overflow:hidden;
}

.page-hero::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image: 
   /* Page hero sketch */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200"><path d="M50 150 L350 150" stroke="%23be8946" stroke-width="1" opacity="0.15"/><path d="M100 100 L300 100" stroke="%23be8946" stroke-width="0.8" opacity="0.12"/><path d="M150 50 L250 50" stroke="%23be8946" stroke-width="0.5" opacity="0.1"/><circle cx="200" cy="100" r="30" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.1"/></svg>'),
   repeating-linear-gradient(90deg, rgba(190,137,70,0.03) 0px, rgba(190,137,70,0.03) 1px, transparent 1px, transparent 30px);
 background-size: 400px 200px, 30px 30px;
 background-position: bottom, 0 0;
 background-repeat: repeat-x, repeat;
 opacity:0.8;
}

/* ===== ABOUT PAGES ===== */

.about-section{
 position:relative;
}

.about-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image: 
   /* About page interior design sketch */
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M100 400 L400 400 L400 450 L100 450 Z" stroke="%23be8946" stroke-width="1" fill="none" opacity="0.15"/><path d="M150 350 L350 350 L350 380 L150 380 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.12"/><path d="M200 300 L300 300 L300 330 L200 330 Z" stroke="%23be8946" stroke-width="0.6" fill="none" opacity="0.1"/><circle cx="250" cy="200" r="40" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.1"/><path d="M220 170 L280 170 M250 140 L250 200" stroke="%23be8946" stroke-width="0.5" opacity="0.1"/></svg>'),
   repeating-linear-gradient(45deg, rgba(190,137,70,0.02) 0px, rgba(190,137,70,0.02) 2px, transparent 2px, transparent 15px);
 background-size: 500px 500px, 20px 20px;
 background-repeat: repeat, repeat;
 pointer-events:none;
}

.about-logo{
 width:100%;
 max-width:clamp(280px, 30vw, 380px);
 border-radius:20px;
 box-shadow:0 25px 45px rgba(190,137,70,0.1);
 border:2px solid #be8946;
 transition:0.5s;
}

.about-logo:hover{
 transform:scale(1.03) rotate(1deg);
 box-shadow:0 35px 60px rgba(190,137,70,0.15);
}

.about-text{
 font-size:clamp(15px, 2vw, 18px);
 line-height:1.9;
 color:#444;
}

.ceo-img{
 width:clamp(200px, 20vw, 260px);
 height:clamp(200px, 20vw, 260px);
 object-fit:cover;
 border-radius:50%;
 box-shadow:0 25px 50px rgba(190,137,70,0.15);
 border:4px solid #be8946;
 transition:0.5s;
}

.ceo-img:hover{
 transform:scale(1.05) rotate(5deg);
 box-shadow:0 30px 60px rgba(190,137,70,0.2);
}

.ceo-message{
 font-size:clamp(15px, 2vw, 18px);
 line-height:1.9;
 font-style:italic;
 color:#444;
 border-left:4px solid #be8946;
 padding-left:25px;
 background:linear-gradient(90deg, rgba(190,137,70,0.03), transparent);
}

.about-gallery-card{
 overflow:hidden;
 border-radius:18px;
 border:2px solid #be8946;
 box-shadow:0 15px 30px rgba(0,0,0,0.05);
}

.about-gallery-card img{
 width:100%;
 height:clamp(200px, 25vw, 240px);
 object-fit:cover;
 transition:.7s;
}

.about-gallery-card:hover img{
 transform:scale(1.2);
}

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

.footer-pro{
 background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
 color:#444;
 padding:clamp(50px, 8vw, 80px) 0 30px;
 position:relative;
 border-top:3px solid #be8946;
}

.footer-pro::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: 
    /* Footer construction sketch */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M50 350 L350 350 L350 380 L50 380 Z" stroke="%23be8946" stroke-width="1" fill="none" opacity="0.15"/><path d="M100 300 L300 300 L300 330 L100 330 Z" stroke="%23be8946" stroke-width="0.8" fill="none" opacity="0.12"/><path d="M150 250 L250 250 L250 280 L150 280 Z" stroke="%23be8946" stroke-width="0.6" fill="none" opacity="0.1"/><path d="M200 200 L200 250 M180 220 L220 220" stroke="%23be8946" stroke-width="0.5" opacity="0.1"/><path d="M300 100 L350 150 L320 180 L270 130 Z" stroke="%23be8946" stroke-width="0.5" fill="none" opacity="0.1"/></svg>'),
    /* Hand-drawn measurements */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><line x1="20" y1="20" x2="180" y2="20" stroke="%23be8946" stroke-width="0.5" opacity="0.15"/><line x1="20" y1="180" x2="180" y2="180" stroke="%23be8946" stroke-width="0.5" opacity="0.15"/><text x="50" y="40" fill="%23be8946" font-size="10" opacity="0.15">12m</text><text x="120" y="160" fill="%23be8946" font-size="10" opacity="0.15">8m</text></svg>'),
    /* Blueprint grid */
    repeating-linear-gradient(90deg, rgba(190,137,70,0.03) 0px, rgba(190,137,70,0.03) 1px, transparent 1px, transparent 50px),
    repeating-linear-gradient(0deg, rgba(190,137,70,0.03) 0px, rgba(190,137,70,0.03) 1px, transparent 1px, transparent 50px);
  background-size: 400px 400px, 200px 200px, 50px 50px, 50px 50px;
  background-position: 0 0, 100px 200px, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  pointer-events:none;
}

.footer-brand{
 color:#be8946;
 font-weight:800;
 font-size:clamp(20px, 3vw, 24px);
 margin-bottom:16px;
 display:inline-block;
 position:relative;
}

.footer-brand::after{
 content:'';
 position:absolute;
 bottom:-5px;
 left:0;
 width:50%;
 height:2px;
 background:#be8946;
}

.footer-text{
 line-height:1.9;
 opacity:.85;
 margin-bottom:20px;
 font-size:clamp(14px, 1.8vw, 15px);
 color:#555;
}

.footer-pro h6{
 color:#be8946;
 font-weight:700;
 margin-bottom:20px;
 font-size:clamp(16px, 2.2vw, 18px);
 position:relative;
 padding-bottom:10px;
}

.footer-pro h6::after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:40px;
 height:2px;
 background:#be8946;
}

/* links */

.footer-links{
 list-style:none;
 padding:0;
 margin:0;
}

.footer-links li{
 margin-bottom:12px;
}

.footer-links a{
 color:#555;
 text-decoration:none;
 transition:.4s;
 display:inline-block;
 position:relative;
 padding-left:0;
 font-size:clamp(13px, 1.8vw, 14px);
}

.footer-links a::before{
 content:'→';
 position:absolute;
 left:-20px;
 opacity:0;
 transition:0.3s;
 color:#be8946;
}

.footer-links a:hover{
 color:#be8946;
 padding-left:25px;
}

.footer-links a:hover::before{
 opacity:1;
 left:0;
}

/* social icons */

.footer-social{
 display:flex;
 gap:clamp(10px, 2vw, 15px);
 margin-top:25px;
 flex-wrap:wrap;
}

.footer-social a{
 width:clamp(40px, 5vw, 44px);
 height:clamp(40px, 5vw, 44px);
 border-radius:50%;
 background:rgba(255,255,255,0.4);
 backdrop-filter:blur(5px);
 display:flex;
 align-items:center;
 justify-content:center;
 color:#be8946;
 font-size:clamp(16px, 2.2vw, 18px);
 transition:.4s;
 border:1px solid #be8946;
 position:relative;
 overflow:hidden;
}

.footer-social a::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:#be8946;
 transform:translateY(100%);
 transition:0.4s;
 z-index:-1;
}

.footer-social a:hover{
 color:#fff;
 transform:translateY(-6px);
}

.footer-social a:hover::before{
 transform:translateY(0);
}

/* contact */

.footer-contact{
 line-height:2.2;
}

.footer-contact i{
 color:#be8946;
 margin-right:10px;
 width:20px;
 font-size:clamp(14px, 1.8vw, 16px);
}

.footer-contact p{
 font-size:clamp(13px, 1.8vw, 14px);
 color:#555;
}

/* CTA button */

.footer-cta{
 display:inline-block;
 margin-top:15px;
 background:#be8946;
 color:#fff;
 padding:clamp(10px, 1.5vw, 12px) clamp(20px, 3vw, 25px);
 border-radius:999px;
 font-weight:600;
 text-decoration:none;
 transition:.4s;
 border:1px solid #be8946;
 font-size:clamp(13px, 1.8vw, 14px);
}

.footer-cta:hover{
 background:transparent;
 color:#be8946;
 transform:translateY(-4px);
 box-shadow:0 10px 30px rgba(190,137,70,0.15);
}

/* bottom */

.footer-line{
 border-color:#be8946;
 opacity:.15;
 margin:clamp(40px, 6vw, 50px) 0 20px;
}

.footer-bottom{
 opacity:.7;
 font-size:clamp(12px, 1.6vw, 14px);
 text-align:center;
 color:#666;
}

/* ===== NAVBAR GLASS STYLE ===== */

.elite-nav{
 position:sticky;
 top:0;
 z-index:999;
 background:rgba(255,255,255,0.85);
 backdrop-filter: blur(15px);
 border-bottom:1px solid rgba(190,137,70,0.15);
 transition:.4s;
 padding:clamp(10px, 2vw, 15px) 0;
}

.elite-nav.nav-shadow{
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* ===== BRAND ===== */

.brand-wrap{
 display:flex;
 align-items:center;
 gap:clamp(8px, 2vw, 12px);
 text-decoration:none;
 position:relative;
}

.brand-logo{
 height:clamp(35px, 5vw, 45px);
 width:auto;
 transition:.4s;
 filter:brightness(1) drop-shadow(0 2px 5px rgba(190,137,70,0.2));
}

.brand-wrap:hover .brand-logo{
 transform:rotate(-5deg) scale(1.1);
 filter:brightness(1.1) drop-shadow(0 5px 12px rgba(190,137,70,0.3));
}

.brand-title{
 font-weight:800;
 font-size:clamp(18px, 2.5vw, 22px);
 color:#be8946;
 line-height:1.2;
 transition:0.3s;
}

.brand-sub{
 font-size:clamp(10px, 1.4vw, 11px);
 color:#666;
 font-weight:500;
 letter-spacing:1px;
 text-transform:uppercase;
}

/* ===== NAV LINKS ===== */

.nav-link{
 font-weight:600;
 color:#333 !important;
 margin-left:clamp(15px, 2.5vw, 25px);
 position:relative;
 transition:.3s;
 padding:8px 0 !important;
 font-size:clamp(14px, 1.8vw, 16px);
}

/* animated underline */

.nav-link::after{
 content:'';
 position:absolute;
 left:0;
 bottom:0;
 width:0;
 height:2px;
 background:linear-gradient(90deg, #be8946, rgba(190,137,70,0.3));
 transition:.3s;
}

.nav-link:hover{
 color:#be8946 !important;
}

.nav-link:hover::after{
 width:100%;
}

.nav-link.active{
 color:#be8946 !important;
}

.nav-link.active::after{
 width:100%;
}

/* ===== CTA BUTTON ===== */

.elite-btn{
 background:#be8946;
 color:#fff;
 padding:clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 25px);
 border-radius:999px;
 font-weight:600;
 text-decoration:none;
 transition:.4s;
 display:inline-block;
 border:1px solid #be8946;
 position:relative;
 overflow:hidden;
 z-index:1;
 font-size:clamp(13px, 1.8vw, 15px);
}

.elite-btn::before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 border-radius:50%;
 background:rgba(255,255,255,0.25);
 transform:translate(-50%, -50%);
 transition:width 0.6s, height 0.6s;
 z-index:-1;
}

.elite-btn:hover{
 background:transparent;
 color:#be8946;
 transform:translateY(-4px);
 box-shadow:0 10px 30px rgba(190,137,70,0.15);
}

.elite-btn:hover::before{
 width:300px;
 height:300px;
}

/* ===== MODERN HAMBURGER ===== */

.elite-toggler{
 border:none;
 background:none;
 width:clamp(40px, 6vw, 45px);
 height:clamp(40px, 6vw, 45px);
 display:flex;
 flex-direction:column;
 justify-content:center;
 gap:6px;
 padding:0;
 border-radius:8px;
 transition:0.3s;
}

.elite-toggler:hover{
 background:rgba(190,137,70,0.1);
}

.elite-toggler span{
 display:block;
 height:3px;
 width:clamp(24px, 4vw, 28px);
 background:#be8946;
 border-radius:3px;
 transition:.35s ease;
}

/* animate to X */

.elite-toggler.active span:nth-child(1){
 transform:translateY(9px) rotate(45deg);
}

.elite-toggler.active span:nth-child(2){
 opacity:0;
 transform:scaleX(0);
}

.elite-toggler.active span:nth-child(3){
 transform:translateY(-9px) rotate(-45deg);
}

/* hover effect */

.elite-toggler:hover span{
 width:clamp(28px, 4.5vw, 32px);
 background:#e5b87b;
}

/* ===== BLOG DETAILS ===== */

.blog-hero{
 position:relative;
 height:clamp(300px, 45vh, 450px);
 overflow:hidden;
 border-radius:0 0 30px 30px;
}

.blog-hero-img{
 width:100%;
 height:100%;
 object-fit:cover;
 filter:brightness(.9);
 transition:0.6s;
}

.blog-hero:hover .blog-hero-img{
 transform:scale(1.08);
}

.blog-hero-overlay{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 background:linear-gradient(135deg, rgba(255,255,255,0.8), rgba(190,137,70,0.1));
 padding:0 clamp(20px, 5vw, 50px);
}

.blog-hero h1{
 font-size:clamp(28px, 5vw, 42px);
 font-weight:800;
 max-width:800px;
 color:#be8946;
 text-shadow:1px 1px 2px rgba(255,255,255,.8);
 line-height:1.3;
}

.blog-meta{
 margin-top:15px;
 opacity:.9;
 display:flex;
 gap:clamp(15px, 3vw, 25px);
 font-weight:500;
 color:#333;
 flex-wrap:wrap;
}

.blog-meta i{
 color:#be8946;
 margin-right:5px;
}

.blog-content{
 font-size:clamp(15px, 2vw, 17px);
 line-height:1.9;
 color:#444;
}

.blog-content h2, .blog-content h3{
 color:#be8946;
 margin:30px 0 15px;
}

.blog-content img{
 max-width:100%;
 border-radius:14px;
 margin:25px 0;
 border:2px solid #be8946;
 transition:0.5s;
}

.blog-content img:hover{
 transform:scale(1.03);
 box-shadow:0 25px 45px rgba(190,137,70,0.1);
}

.blog-side-link{
 text-decoration:none;
 color:#444;
 transition:.4s;
 display:block;
 padding:10px 0;
 border-bottom:1px solid rgba(190,137,70,0.1);
 font-size:clamp(13px, 1.8vw, 14px);
}

.blog-side-link:hover{
 color:#be8946;
 padding-left:15px;
}

.blog-card{
 transition:.5s;
 background:rgba(255,255,255,0.8);
 backdrop-filter:blur(8px);
 border:1px solid rgba(190,137,70,0.15);
 border-radius:15px;
 overflow:hidden;
 height:100%;
}

.blog-card:hover{
 transform:translateY(-10px);
 box-shadow:0 25px 50px rgba(190,137,70,0.1);
 border-color:#be8946;
}

/* ===== ABOUT CARDS ===== */

.about-card{
 background:rgba(255,255,255,0.8);
 backdrop-filter:blur(8px);
 padding:clamp(25px, 4vw, 35px);
 border-radius:18px;
 box-shadow:0 20px 35px rgba(0,0,0,0.05);
 transition:.5s;
 height:100%;
 border:1px solid rgba(190,137,70,0.15);
 position:relative;
 overflow:hidden;
}

.about-card::before{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:linear-gradient(135deg, 
   transparent, 
   rgba(190,137,70,0.05), 
   rgba(190,137,70,0.08), 
   transparent
 );
 transform:rotate(45deg) translateX(-100%);
 transition:0.8s;
}

.about-card:hover::before{
 transform:rotate(45deg) translateX(100%);
}

.about-card:hover{
 transform:translateY(-12px);
 box-shadow:0 30px 60px rgba(190,137,70,0.1);
 border-color:#be8946;
}

.about-icon{
 font-size:clamp(36px, 5vw, 48px);
 margin-bottom:20px;
 color:#be8946;
 display:inline-block;
 position:relative;
}

.about-icon::after{
 content:'';
 position:absolute;
 width:70px;
 height:70px;
 background:radial-gradient(circle, rgba(190,137,70,0.15), transparent 70%);
 top:50%;
 left:50%;
 transform:translate(-50%, -50%) scale(0);
 border-radius:50%;
 transition:0.5s;
 z-index:-1;
}

.about-card:hover .about-icon::after{
 transform:translate(-50%, -50%) scale(1.3);
}

/* ===== AI BOT STYLING ===== */

#botToggle{
position:fixed;
bottom:clamp(15px, 3vh, 25px);
right:clamp(15px, 3vw, 25px);
background:#be8946;
color:#fff;
border:none;
width:clamp(50px, 7vw, 60px);
height:clamp(50px, 7vw, 60px);
border-radius:50%;
font-size:clamp(20px, 3vw, 24px);
cursor:pointer;
z-index:999;
transition:.4s;
box-shadow:0 5px 25px rgba(190,137,70,0.2);
display:flex;
align-items:center;
justify-content:center;
}

#botToggle:hover{
background:#e5b87b;
transform:scale(1.15) rotate(10deg);
box-shadow:0 10px 35px rgba(190,137,70,0.3);
}

#aiBot{
position:fixed;
bottom:clamp(70px, 12vh, 90px);
right:clamp(15px, 3vw, 25px);
width:clamp(280px, 30vw, 350px);
height:clamp(400px, 50vh, 450px);
background:rgba(255,255,255,0.95);
backdrop-filter:blur(20px);
border-radius:20px;
box-shadow:0 20px 50px rgba(190,137,70,0.15);
display:none;
flex-direction:column;
overflow:hidden;
z-index:999;
border:1px solid rgba(190,137,70,0.3);
animation: slideIn 0.4s ease-out;
}

@keyframes slideIn{
 from{
  opacity:0;
  transform:translateY(30px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

.bot-header{
background:linear-gradient(135deg, #fff, #f8f9fa);
color:#be8946;
padding:clamp(12px, 2vh, 15px) clamp(15px, 2vw, 20px);
font-weight:600;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #be8946;
}

.bot-header span{
 font-size:clamp(14px, 2vw, 16px);
 color:#333;
}

.bot-header button{
 background:none;
 border:none;
 color:#be8946;
 font-size:clamp(18px, 2.5vw, 20px);
 cursor:pointer;
 transition:0.4s;
}

.bot-header button:hover{
 transform:rotate(90deg);
 color:#e5b87b;
}

.bot-body{
flex:1;
padding:clamp(15px, 2vh, 20px);
overflow-y:auto;
background:rgba(255,255,255,0.5);
}

.bot-msg{
background:rgba(248,249,250,0.8);
padding:clamp(10px, 1.5vh, 12px) clamp(12px, 2vw, 15px);
border-radius:15px 15px 15px 5px;
margin-bottom:15px;
white-space:pre-line;
color:#333;
max-width:80%;
font-size:clamp(13px, 1.8vw, 14px);
line-height:1.6;
border:1px solid rgba(190,137,70,0.2);
}

.user-msg{
background:#be8946;
color:#fff;
padding:clamp(10px, 1.5vh, 12px) clamp(12px, 2vw, 15px);
border-radius:15px 15px 5px 15px;
margin-bottom:15px;
text-align:right;
font-weight:500;
margin-left:auto;
max-width:80%;
font-size:clamp(13px, 1.8vw, 14px);
line-height:1.6;
}

.bot-input{
display:flex;
border-top:1px solid rgba(190,137,70,0.3);
padding:clamp(8px, 1.5vh, 10px);
background:rgba(255,255,255,0.5);
}

.bot-input input{
flex:1;
border:none;
padding:clamp(10px, 1.5vh, 12px) clamp(12px, 2vw, 15px);
background:rgba(248,249,250,0.8);
border-radius:25px;
color:#333;
font-size:clamp(13px, 1.8vw, 14px);
outline:none;
border:1px solid rgba(190,137,70,0.2);
transition:0.3s;
}

.bot-input input:focus{
 border-color:#be8946;
 background:rgba(255,255,255,0.9);
}

.bot-input input::placeholder{
color:#999;
}

.bot-input button{
background:#be8946;
color:#fff;
border:none;
width:clamp(40px, 6vw, 45px);
height:clamp(40px, 6vw, 45px);
border-radius:50%;
margin-left:8px;
font-size:clamp(16px, 2.2vw, 18px);
cursor:pointer;
transition:.4s;
display:flex;
align-items:center;
justify-content:center;
}

.bot-input button:hover{
background:#e5b87b;
transform:scale(1.15);
}

.bot-suggestions{
padding:clamp(8px, 1.5vh, 10px);
border-top:1px solid rgba(190,137,70,0.2);
display:flex;
gap:8px;
flex-wrap:wrap;
background:rgba(255,255,255,0.3);
}

.bot-suggestions button{
background:rgba(248,249,250,0.8);
border:1px solid rgba(190,137,70,0.3);
color:#be8946;
padding:clamp(6px, 1.2vh, 8px) clamp(10px, 2vw, 15px);
border-radius:25px;
cursor:pointer;
font-size:clamp(11px, 1.6vw, 12px);
transition:.4s;
font-weight:500;
}

.bot-suggestions button:hover{
background:#be8946;
color:#fff;
border-color:#be8946;
transform:translateY(-3px);
}

/* ===== ADDITIONAL TEXT ELEMENTS ===== */
h1, h2, h3, h4, h5, h6{
 color:#be8946;
}

.text-muted{
 color:#666 !important;
}

.bg-light{
 background:rgba(255,255,255,0.7) !important;
 backdrop-filter:blur(5px);
}

.border-light{
 border-color:rgba(190,137,70,0.2) !important;
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar{
 width:12px;
}

::-webkit-scrollbar-track{
 background:#f6f7f9;
}

::-webkit-scrollbar-thumb{
 background:#be8946;
 border-radius:6px;
 border:2px solid #f6f7f9;
}

::-webkit-scrollbar-thumb:hover{
 background:#e5b87b;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Extra large devices (1400px and up) */
@media (min-width: 1400px) {
 .container {
   max-width: 1320px;
 }
 
 .hero-content h1 {
   font-size: 64px;
 }
}

/* Large devices (1200px to 1399px) */
@media (max-width: 1399px) {
 .container {
   max-width: 1140px;
 }
}

/* Medium devices (992px to 1199px) */
@media (max-width: 1199px) {
 .container {
   max-width: 960px;
 }
 
 .hero-content h1 {
   font-size: 48px;
 }
 
 .service-card {
   padding: 30px;
 }
}

/* Tablet devices (768px to 991px) */
@media (max-width: 991px) {
 .container {
   max-width: 720px;
 }

 .brand-sub {
   display: none;
 }

 .nav-link {
   margin-left: 0;
   padding: 12px 0 !important;
   border-bottom: 1px solid rgba(190,137,70,0.1);
 }

 .nav-link::after {
   display: none;
 }

 .navbar-collapse {
   background: rgba(255,255,255,0.95);
   backdrop-filter: blur(10px);
   padding: 20px;
   border-radius: 15px;
   margin-top: 15px;
   border: 1px solid rgba(190,137,70,0.2);
   max-height: 80vh;
   overflow-y: auto;
 }

 .hero-content h1 {
   font-size: 42px;
 }
 
 .hero-content p {
   font-size: 18px;
 }
 
 .about-mini {
   margin-top: -40px;
 }
 
 .stat h3 {
   font-size: 36px;
 }
 
 .stat p {
   font-size: 12px;
 }
}

/* Mobile landscape (576px to 767px) */
@media (max-width: 767px) {
 .container {
   max-width: 540px;
 }

 .hero-slide {
   min-height: 400px;
 }
 
 .hero-content {
   padding-left: 20px;
   padding-right: 20px;
 }
 
 .hero-content h1 {
   font-size: 36px;
 }
 
 .hero-content p {
   font-size: 16px;
   margin-bottom: 15px;
 }
 
 .section-title {
   font-size: 28px;
 }
 
 .about-mini {
   margin-top: -30px;
   border-radius: 20px;
 }
 
 .about-mini-logo {
   max-width: 180px;
 }
 
 .about-mini-text {
   font-size: 14px;
 }
 
 .service-card {
   padding: 25px;
 }
 
 .service-card h3 {
   font-size: 20px;
 }
 
 .service-card p {
   font-size: 14px;
 }
 
 .stat {
   padding: 25px 15px;
 }
 
 .stat h3 {
   font-size: 32px;
 }
 
 .testimonial-card {
   padding: 25px 20px;
 }
 
 .testimonial-card p {
   font-size: 14px;
 }
 
 .partner-item {
   padding: 10px 15px;
 }
 
 .partner-item img {
   height: 30px;
 }
 
 .footer-pro {
   text-align: center;
 }
 
 .footer-social {
   justify-content: center;
 }
 
 .footer-pro h6::after {
   left: 50%;
   transform: translateX(-50%);
 }
 
 .footer-links a:hover {
   padding-left: 0;
 }
 
 .footer-links a::before {
   display: none;
 }
 
 .blog-hero h1 {
   font-size: 28px;
 }
 
 .ceo-img {
   width: 180px;
   height: 180px;
   margin-bottom: 20px;
 }
 
 .about-logo {
   max-width: 250px;
 }
 
 #aiBot {
   width: 280px;
   height: 380px;
   right: 10px;
   bottom: 75px;
 }
 
 #botToggle {
   width: 45px;
   height: 45px;
   font-size: 18px;
   bottom: 15px;
   right: 15px;
 }
}

/* Mobile portrait (up to 575px) */
@media (max-width: 575px) {
 .hero-slide {
   min-height: 350px;
 }
 
 .hero-content h1 {
   font-size: 28px;
 }
 
 .hero-content p {
   font-size: 14px;
   padding-left: 15px;
 }
 
 .section-title {
   font-size: 24px;
 }
 
 .section-title::before {
   width: 50px;
 }
 
 .section-title::after {
   left: 60px;
   width: 20px;
 }
 
 .btn {
   padding: 10px 20px;
   font-size: 13px;
 }
 
 .about-mini {
   margin-top: -20px;
   padding: 15px !important;
 }
 
 .about-mini-logo {
   max-width: 150px;
 }
 
 .service-card {
   padding: 20px;
 }
 
 .service-icon {
   font-size: 36px;
 }
 
 .service-card h3 {
   font-size: 18px;
 }
 
 .stat {
   padding: 20px 10px;
 }
 
 .stat h3 {
   font-size: 28px;
 }
 
 .stat p {
   font-size: 11px;
   letter-spacing: 0.5px;
 }
 
 .project-body {
   padding: 15px;
 }
 
 .project-body h3 {
   font-size: 16px;
 }
 
 .project-body p {
   font-size: 12px;
 }
 
 .testimonial-card {
   padding: 20px 15px;
 }
 
 .testimonial-card img {
   width: 70px;
   height: 70px;
 }
 
 .testimonial-card h5 {
   font-size: 15px;
 }
 
 .testimonial-card span {
   font-size: 12px;
 }
 
 .partners-track {
   gap: 20px;
 }
 
 .partner-item {
   padding: 8px 12px;
 }
 
 .partner-item img {
   height: 25px;
 }
 
 .footer-brand {
   font-size: 20px;
 }
 
 .footer-text {
   font-size: 13px;
 }
 
 .footer-links a {
   font-size: 13px;
 }
 
 .footer-contact p {
   font-size: 12px;
 }
 
 .footer-cta {
   padding: 8px 16px;
   font-size: 12px;
 }
 
 .blog-meta {
   gap: 10px;
   font-size: 12px;
 }
 
 .blog-content {
   font-size: 14px;
 }
 
 .blog-content h2 {
   font-size: 20px;
 }
 
 .blog-content h3 {
   font-size: 18px;
 }
 
 .about-icon {
   font-size: 32px;
 }
 
 .about-card {
   padding: 20px;
 }
 
 .about-card h3 {
   font-size: 18px;
 }
 
 .ceo-message {
   font-size: 14px;
   padding-left: 15px;
 }
 
 .about-text {
   font-size: 14px;
 }
 
 #aiBot {
   width: 260px;
   height: 350px;
   bottom: 70px;
 }
 
 .bot-header span {
   font-size: 14px;
 }
 
 .bot-msg, .user-msg {
   font-size: 12px;
   padding: 8px 12px;
 }
 
 .bot-suggestions button {
   font-size: 10px;
   padding: 5px 10px;
 }
 
 .bot-input input {
   font-size: 12px;
   padding: 8px 12px;
 }
 
 .bot-input button {
   width: 35px;
   height: 35px;
   font-size: 14px;
 }
}

/* Small mobile (up to 375px) */
@media (max-width: 375px) {
 .hero-content h1 {
   font-size: 24px;
 }
 
 .hero-content p {
   font-size: 13px;
 }
 
 .section-title {
   font-size: 22px;
 }
 
 .btn {
   padding: 8px 16px;
   font-size: 12px;
 }
 
 .about-mini-logo {
   max-width: 120px;
 }
 
 .service-card {
   padding: 15px;
 }
 
 .service-icon {
   font-size: 30px;
 }
 
 .service-card h3 {
   font-size: 16px;
 }
 
 .stat h3 {
   font-size: 24px;
 }
 
 .stat p {
   font-size: 10px;
 }
 
 .testimonial-card {
   padding: 15px 10px;
 }
 
 .testimonial-card p {
   font-size: 12px;
   line-height: 1.6;
 }
 
 .footer-brand {
   font-size: 18px;
 }
 
 .footer-social a {
   width: 35px;
   height: 35px;
   font-size: 14px;
 }
 
 .blog-hero h1 {
   font-size: 22px;
 }
 
 .blog-meta {
   font-size: 11px;
 }
 
 #aiBot {
   width: 240px;
   height: 320px;
 }
 
 .bot-header {
   padding: 8px 12px;
 }
 
 .bot-body {
   padding: 10px;
 }
 
 .bot-suggestions {
   padding: 5px;
 }
}

/* Height-based media queries for better mobile landscape experience */
@media (max-height: 600px) and (orientation: landscape) {
 .hero-slide {
   min-height: 300px;
 }
 
 #aiBot {
   height: 280px;
   bottom: 65px;
 }
 
 .bot-body {
   max-height: 150px;
 }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{
 from{
  opacity:0;
  transform:translateY(40px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

.fadeInUp{
 animation:fadeInUp 0.7s ease-out;
}

@keyframes fadeInRight{
 from{
  opacity:0;
  transform:translateX(40px);
 }
 to{
  opacity:1;
  transform:translateX(0);
 }
}

.fadeInRight{
 animation:fadeInRight 0.7s ease-out;
}

@keyframes pulse{
 0%,100%{ transform:scale(1); }
 50%{ transform:scale(1.05); }
}

.pulse{
 animation:pulse 2.5s infinite;
}

@keyframes shimmer{
 0%{ background-position: -1000px 0; }
 100%{ background-position: 1000px 0; }
}

.shimmer{
 background:linear-gradient(90deg, transparent, rgba(190,137,70,0.1), transparent);
 background-size: 1000px 100%;
 animation: shimmer 3s infinite;
}

/* ===== HOVER EFFECTS ===== */
.hover-lift{
 transition:0.4s;
}

.hover-lift:hover{
 transform:translateY(-8px);
}

.hover-glow{
 transition:0.4s;
}

.hover-glow:hover{
 box-shadow:0 0 30px rgba(190,137,70,0.2);
}

.hover-scale{
 transition:0.4s;
}

.hover-scale:hover{
 transform:scale(1.05);
}

/* ===== LOADING ANIMATION ===== */
.loading-spinner{
 width:clamp(35px, 5vw, 45px);
 height:clamp(35px, 5vw, 45px);
 border:3px solid rgba(190,137,70,0.1);
 border-top-color:#be8946;
 border-right-color:#be8946;
 border-radius:50%;
 animation:spin 1s linear infinite;
}

@keyframes spin{
 to{ transform:rotate(360deg); }
}

/* ===== PRINT STYLES ===== */
@media print {
 .elite-nav, .footer-pro, #botToggle, #aiBot, .carousel-control-prev, .carousel-control-next {
   display: none !important;
 }
 
 body, .about-mini, .service-card, .project-card, .testimonial-card {
   background: white !important;
   color: black !important;
 }
 
 .section-title, h1, h2, h3, h4, h5, h6 {
   color: #be8946 !important;
 }
}