/* ==========================================================================
   MHI Design & Contracting LLC - Main Style
   Light Corporate Interior Design Theme
   ========================================================================== */
:root{--color-primary:#D32F2F;--color-primary-dark:#B71C1C;--color-primary-light:#FFEBEE;--color-secondary:#0D1B2A;--color-accent-blue:#1B4965;--color-text-main:#1A1A1A;--color-text-muted:#666;--color-text-light:#9E9E9E;--color-bg-white:#FFF;--color-bg-light:#F8F9FA;--color-bg-alt:#F3F4F6;--color-bg-dark:#111317;--color-border:#E5E7EB;--color-border-dark:#2A2E35;--font-heading:Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--container-width:1240px;--header-height:80px;--transition:all .3s cubic-bezier(0.25,0.8,0.25,1);--shadow-sm:0 2px 8px #0000000a;--shadow-md:0 10px 30px #00000014;--shadow-lg:0 20px 40px #0000001f;--radius-sm:4px;--radius-md:8px;--radius-full:9999px}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--color-text-main);background-color:var(--color-bg-white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:var(--transition)}
ul{list-style:none}
.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 24px}
.text-red{color:var(--color-primary)!important}
.text-center{text-align:center}
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--color-text-muted);margin-bottom:12px}
.section-label::before{content:'';display:inline-block;width:24px;height:2px;background-color:var(--color-primary)}
.section-title,.section-title-small{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;line-height:1.25;color:var(--color-text-main);letter-spacing:-.5px;padding-bottom:15px}
.section-title-small{font-size:1.8rem}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px}
.view-all-link{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--color-text-main);transition:var(--transition);white-space:nowrap}
.view-all-link:hover{color:var(--color-primary);transform:translateX(4px)}
.view-all-link svg{transition:transform .2s ease}
.view-all-link:hover svg{transform:translateX(3px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 28px;font-size:.9rem;font-weight:600;border-radius:var(--radius-full);cursor:pointer;border:none;transition:var(--transition);text-decoration:none;line-height:1}
.btn-primary{background-color:var(--color-primary);color:#FFF}
.btn-primary:hover{background-color:var(--color-primary-dark);box-shadow:0 4px 15px #d32f2f59;transform:translateY(-1px)}
.btn-outline{background-color:transparent;color:var(--color-text-main);border:1px solid var(--color-border)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.welSwip-btns { position: absolute; width: 110px; right: 0; bottom: 25px;}
.swiper-pagination-feature { position: absolute; right: 50px; bottom:-10px; padding: 0; margin: 0;}
.projVisualOver { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 60px;}
.proMain-imag { border-radius: var(--radius-md); overflow: hidden; height: 460px; box-shadow: var(--shadow-sm); }
.prjGallImg { height: 220px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);}
/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header{position:sticky;top:0;left:0;width:100%;height:var(--header-height);background-color:var(--color-bg-white);border-bottom:1px solid var(--color-border);z-index:1000;transition:var(--transition)}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);height:72px}
.header-container{display:flex;align-items:center;justify-content:space-between;height:100%}
.header-logo{display:flex;align-items:center;text-decoration:none}
.header-logo img{height:48px;width:auto;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:32px}
.nav-link{position:relative;font-size:.95rem;font-weight:500;color:var(--color-text-main);padding:8px 0}
.nav-link:hover,.nav-link.active{color:var(--color-primary)}
.nav-link.active::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:var(--color-primary)}
.nav-item-dropdown{position:relative}
.nav-item-dropdown > a{display:flex;align-items:center;gap:6px}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:200px;background-color:var(--color-bg-white);box-shadow:var(--shadow-md);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);z-index:100}
.nav-item-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:block;padding:10px 20px;font-size:.9rem;font-weight:500;color:var(--color-text-main);transition:var(--transition)}
.dropdown-item:hover{background-color:var(--color-bg-light);color:var(--color-primary);padding-left:24px}
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--color-text-main)}
/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section{position:relative;background-color:#F7F8FA;height:100dvh}
.banner-caption{width:100%;position:relative;z-index:2;display:flex;align-items:center;background-image:linear-gradient(to right,#ffffffeb 0%,#ffffffbf 45%,#ffffff1a 100%);height:100%}
#myVideo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-content{max-width:580px}
.hero-subtitle{font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:20px;display:block}
.hero-title{font-family:var(--font-heading);font-size:3.8rem;font-weight:700;line-height:1.1;color:var(--color-text-main);margin-bottom:24px;letter-spacing:-1px}
.hero-description{font-size:1.1rem;color:var(--color-text-muted);line-height:1.6;margin-bottom:36px;max-width:480px}
.hero-actions{display:flex;align-items:center;gap:28px}
.btn-watch-story{display:inline-flex;align-items:center;gap:12px;font-size:.95rem;font-weight:600;color:var(--color-text-main);transition:var(--transition)}
.btn-watch-story:hover{color:var(--color-primary)}
.play-icon-circle{width:44px;height:44px;border-radius:50%;border:1px solid var(--color-primary);display:flex;align-items:center;justify-content:center;color:var(--color-primary);transition:var(--transition)}
.btn-watch-story:hover .play-icon-circle{background-color:var(--color-primary);color:#FFF;transform:scale(1.05)}
.hero-bottom-bar{position:absolute;bottom:30px;left:0;width:100%}
.hero-bottom-inner{display:flex;justify-content:space-between;align-items:center}
.hero-scroll-indicator{display:flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--color-text-muted)}
.hero-scroll-indicator::before{content:'';width:2px;height:30px;background-color:var(--color-text-muted)}
.hero-slider-info{display:flex;align-items:center;gap:20px;font-size:.85rem;color:var(--color-text-main)}
.slider-location{font-weight:600}
.slider-location span{font-weight:400;color:var(--color-text-muted)}
.slider-controls{display:flex;align-items:center;gap:12px}
.slider-btn{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--color-text-main);transition:var(--transition)}
.slider-btn:hover{color:var(--color-primary)}
/* ==========================================================================
   About Section
   ========================================================================== */
.about-section{background-color:var(--color-bg-white)}
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center}
.about-left .section-title{margin-bottom:24px}
.about-text{color:var(--color-text-muted);font-size:1.05rem;line-height:1.7;margin-bottom:32px}
.about-images-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.about-card{position:relative;border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-bg-light)}
.about-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.about-card:hover img{transform:scale(1.04)}
.about-card-featured{height:340px}
.about-card-sub-column{display:flex;flex-direction:column;gap:20px}
.about-card-small{height:160px}
.about-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,#000000d9 0%,#0000 100%);color:#FFF;display:flex;justify-content:space-between;align-items:flex-end}
.about-card-title{font-size:1.1rem;font-weight:600;margin-bottom:4px}
.about-card-subtitle{font-size:.8rem;color:#fffc}
.about-bottom{padding-top:40px}
/* ==========================================================================
   Mission Section
   ========================================================================== */
.mission-section{padding:90px 20px;background:linear-gradient(180deg,#fff 0%,#f2f5fa 100%)}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#c8963e;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;padding:38px 32px;border-radius:18px;border:1px solid #e5eaf1;box-shadow:0 12px 30px #0f172a0f;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-6px);border-color:#d7b26a;box-shadow:0 18px 40px #0f172a1f}
.card h3{font-size:22px;margin:18px 0 12px;color:#101828}
.card p{color:#556070;font-size:15.5px}
.icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:#fff6e6;color:#b67d27}
.icon svg{width:30px;height:30px}
.value-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.value-tags li{background:#f3f6fb;border:1px solid #e2e8f0;color:#334155;font-size:13px;font-weight:600;padding:6px 13px;border-radius:999px}
@media (max-width: 980px) {
.cards{grid-template-columns:1fr}
.mission-section{padding:70px 18px}
.card{padding:32px 26px}
}

/* ==========================================================================
   20 years experiences Section
   ========================================================================== */
.hme-experience-section {  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; 
/* The image used */
  background-image: url("../images/experience-banner.webp");

  /* Set a specific height */
  min-height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/*
.experince-hme-content { position: absolute; left: 0; width: 100%; z-index: 100;}
*/
.experince-hme-content { width: 100%;}
.experince-hme-content article { width: 100%; max-width: 600px; color: #ffffff;}
.experince-hme-content h2 { font-size: 3rem; padding-bottom: 30px;}
.experince-hme-content h2  span { color: #dfbc88 }


/* ==========================================================================
mision vison section
   ========================================================================== */
.mision-vison-section{background-image:url(../images/mision-vison-bg.webp);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover}
.mision-vison-section .align{position:relative;z-index:100;min-height:500px;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;background-image:linear-gradient(to right,#ffffffeb 0%,#ffffffbf 45%,#ffffff1a 100%)}
.mison-vison-content{width:calc(50% - 0px);display:flex;flex-wrap:wrap;flex-direction:column;row-gap:30px}
/* ==========================================================================
   Services Section
   ========================================================================== */
.services-section{background-color:var(--color-bg-light);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:24px}
.service-card{background-color:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:36px 28px;display:flex;flex-direction:column;justify-content:space-between;transition:var(--transition)}
.service-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.service-icon{width:48px;height:48px;margin-bottom:24px;color:var(--color-primary);display:flex;align-items:center}
.service-icon svg{width:36px;height:36px;stroke:var(--color-primary)}
.service-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;color:var(--color-text-main);margin-bottom:12px}
.service-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background-color:var(--color-primary-light);color:var(--color-primary);border:1px solid #d32f2f33;padding:3px 10px;border-radius:var(--radius-full);margin-bottom:12px}
.service-desc{color:var(--color-text-muted);font-size:.92rem;line-height:1.6;margin-bottom:24px;flex-grow:1}
.service-link{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--color-primary)}
.service-link:hover{color:var(--color-primary-dark);gap:9px}
/* ==========================================================================
   Instagram Video Showcase Section (Inside MHI Design)
   ========================================================================== */
.insta-showcase-section{padding:90px 0;background-color:var(--color-bg-white);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);position:relative}
.insta-showcase-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:24px}
.insta-showcase-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.insta-showcase-header-desc{color:var(--color-text-muted);font-size:.92rem;max-width:440px;text-align:right;line-height:1.6}
.insta-showcase-subtitle{color:var(--color-text-muted);font-size:1.05rem;line-height:1.6;margin-top:8px}
.insta-video-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:22px !important;width:100% !important;margin:0 auto !important}
.insta-video-card{display:block !important;position:relative !important;border-radius:16px !important;overflow:hidden !important;background-color:#12151b !important;border:1px solid #1f242d !important;box-shadow:0 10px 30px rgba(0,0,0,0.12) !important;transition:transform .4s cubic-bezier(0.25,0.8,0.25,1),box-shadow .4s ease,border-color .3s ease !important;text-decoration:none !important;color:#fff !important;aspect-ratio:9/16 !important;min-height:380px !important}
.insta-video-card:hover{transform:translateY(-6px) !important;box-shadow:0 18px 45px rgba(0,0,0,0.25) !important;border-color:rgba(211,47,47,0.5) !important}
.insta-video-media-wrapper{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;background-color:#12151b !important}
.insta-video-player{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;transition:transform .6s cubic-bezier(0.25,0.8,0.25,1) !important}
.insta-video-card:hover .insta-video-player{transform:scale(1.05) !important}
.insta-video-overlay{position:absolute !important;inset:0 !important;z-index:2 !important;background:linear-gradient(to top,rgba(13,27,42,0.88) 0%,rgba(13,27,42,0.4) 40%,rgba(13,27,42,0.25) 70%,rgba(13,27,42,0.45) 100%) !important;transition:background .3s ease !important}
.insta-video-card:hover .insta-video-overlay{background:linear-gradient(to top,rgba(13,27,42,0.94) 0%,rgba(13,27,42,0.5) 40%,rgba(13,27,42,0.2) 70%,rgba(13,27,42,0.35) 100%) !important}
.insta-center-content{position:absolute !important;inset:0 !important;z-index:3 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;padding:24px 18px !important;pointer-events:none !important}
.insta-play-btn{width:52px !important;height:52px !important;border-radius:50% !important;background:rgba(255,255,255,0.88) !important;backdrop-filter:blur(8px) !important;color:#12151b !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:14px !important;box-shadow:0 4px 20px rgba(0,0,0,0.4) !important;transition:transform .3s cubic-bezier(0.25,0.8,0.25,1),background .3s ease,color .3s ease !important}
.insta-play-btn svg{width:18px !important;height:18px !important;margin-left:2px !important;fill:currentColor !important}
.insta-video-card:hover .insta-play-btn{transform:scale(1.14) !important;background:var(--color-primary,#d32f2f) !important;color:#fff !important}
.insta-center-title{font-family:var(--font-heading) !important;font-size:1.05rem !important;font-weight:600 !important;color:#fff !important;line-height:1.35 !important;text-shadow:0 2px 10px rgba(0,0,0,0.8) !important;max-width:95% !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}
.insta-video-badge{position:absolute !important;top:14px !important;left:14px !important;z-index:4 !important;display:inline-flex !important;align-items:center !important;gap:6px !important;padding:4px 10px !important;background:rgba(13,27,42,0.72) !important;backdrop-filter:blur(8px) !important;border-radius:var(--radius-full,999px) !important;color:#fff !important;font-size:.68rem !important;font-weight:700 !important;letter-spacing:1px !important;border:1px solid rgba(255,255,255,0.2) !important}
.insta-video-badge svg{color:#ffcdd2 !important}
.insta-video-bottom{position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;z-index:4 !important;padding:14px 16px !important;display:flex !important;justify-content:flex-end !important;align-items:center !important}
.insta-video-cta{display:inline-flex !important;align-items:center !important;gap:5px !important;font-size:.75rem !important;font-weight:700 !important;color:#ffcdd2 !important;letter-spacing:.5px !important;text-transform:uppercase !important;transition:color .3s ease,transform .3s ease !important}
.insta-video-card:hover .insta-video-cta{color:#fff !important;transform:translateX(3px) !important}
/* ==========================================================================
   Featured Projects Section
   ========================================================================== */
.projects-section{padding:100px 0;background-color:var(--color-bg-white)}
.projects-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.project-card{position:relative;border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-bg-light);display:block}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(0.25,0.8,0.25,1)}
.project-card:hover img{transform:scale(1.06)}
.blog-img-wrapper{height:260px}
.project-card-large{height:480px}
.projects-subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.project-card-small{height:228px}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,#000000d9 0%,#0003 60%,#0000 100%);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;color:#FFF;transition:var(--transition)}
.project-card:hover .project-overlay{background:linear-gradient(to top,#000000eb 0%,#0006 70%,#0000001a 100%)}
.project-card-info{display:flex;justify-content:space-between;align-items:flex-end}
.project-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;color:#FFF;margin-bottom:4px}
.project-location{font-size:.85rem;color:#fffc}
.project-card-arrow{width:36px;height:36px;border-radius:50%;background-color:#fff3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#FFF;transition:var(--transition)}
.project-card:hover .project-card-arrow{background-color:var(--color-primary);transform:translateX(4px)}
/* ==========================================================================
   Statistics Counter Bar
   ========================================================================== */
.stats-section{background-color:var(--color-bg-dark);color:#FFF;padding:48px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stat-item{display:flex;align-items:center;gap:16px;border-right:1px solid var(--color-border-dark);padding-right:16px}
.stat-item:last-child{border-right:none;padding-right:0}
.stat-icon{width:40px;height:40px;color:var(--color-primary);flex-shrink:0}
.stat-number{font-family:var(--font-heading);font-size:2rem;font-weight:700;line-height:1.1;color:#FFF}
.stat-label{font-size:.85rem;color:#ffffffb3;margin-top:2px}
/* ==========================================================================
   Why Choose Us Section
   ========================================================================== */
.why-us-section{padding:100px 0;background-color:var(--color-bg-white)}
.why-us-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:60px;align-items:center}
.why-us-intro .section-title{margin-bottom:20px}
.why-us-desc{font-size:1.05rem;color:var(--color-text-muted);line-height:1.7;margin-bottom:32px}
.why-us-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why-card{background-color:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:32px 24px;transition:var(--transition)}
.why-card:hover{border-color:var(--color-primary);background-color:#FFF;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.why-icon{width:44px;height:44px;border-radius:var(--radius-md);background-color:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.why-title{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;color:var(--color-text-main);margin-bottom:10px}
.why-card-text{font-size:.9rem;color:var(--color-text-muted);line-height:1.6}
/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.testimonials-section{padding:100px 0;background-color:#12151B;color:#FFF;background-image:url(../images/testimonials-bg.webp);background-repeat:no-repeat;background-position:center top}
.testimonials-section .section-title{color:#FFF}
.testimonials-section .view-all-link{color:#FFF}
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.testimonial-card{background-color:#ffffff0a;border:1px solid #ffffff14;border-radius:var(--radius-md);padding:40px;position:relative;backdrop-filter:blur(8px)}
.quote-icon{font-size:2.5rem;color:var(--color-primary);line-height:1;margin-bottom:16px;font-family:Georgia,serif}
.testimonial-text{font-size:1.05rem;line-height:1.7;color:#ffffffe6;margin-bottom:28px;font-style:italic}
.client-meta{display:flex;align-items:center;gap:16px}
.client-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--color-primary)}
.client-name{font-weight:600;font-size:1rem;color:#FFF}
.client-role{font-size:.85rem;color:#fff9}
/* ==========================================================================
   Blog / Insights Section
   ========================================================================== */
.blog-section{padding:100px 0;background-color:var(--color-bg-white)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.blog-card{display:flex;flex-direction:column;text-decoration:none;group:hover}
.blog-img-wrapper{position:relative;border-radius:var(--radius-md);overflow:hidden;height:180px;margin-bottom:16px;background-color:var(--color-bg-light)}
.blog-img-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-card:hover .blog-img-wrapper img{transform:scale(1.05)}
.blog-title{font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--color-text-main);line-height:1.4;margin-bottom:8px;transition:var(--transition)}
.blog-card:hover .blog-title{color:var(--color-primary)}
.blog-date{font-size:.8rem;color:var(--color-text-light)}
/* ==========================================================================
   Final CTA Section
   ========================================================================== */
.cta-section{position:relative;background-color:#0E1015;background-image:linear-gradient(#0e1015d9,#0e1015d9),url(../images/cta-bg.webp);background-size:cover;background-position:center;padding:80px 0;color:#FFF;background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.cta-title{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;color:#FFF;margin-bottom:8px}
.cta-subtitle{font-size:1.05rem;color:#ffffffb3}
/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background-color:var(--color-bg-white);border-top:1px solid var(--color-border);padding:60px 0 30px}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--color-border)}
.footer-logo img{height:65px;width:auto}
.footer-nav{display:flex;gap:28px}
.footer-nav a{font-size:.9rem;font-weight:500;color:var(--color-text-main)}
.footer-nav a:hover{color:var(--color-primary)}
.footer-contact-info{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--color-text-muted)}
.footer-contact-item{display:flex;align-items:center;gap:8px}
.footer-socials{display:flex;gap:16px}
.social-link{color:var(--color-text-main);transition:var(--transition)}
.social-link:hover{color:var(--color-primary);transform:translateY(-2px);transform:scale(1.3)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;font-size:.85rem;color:var(--color-text-muted);flex-wrap:wrap;gap:16px}
.footer-links{display:flex;gap:20px}
.footer-links a:hover{color:var(--color-primary)}
.form-row{display:flex;gap:1.5rem;margin-bottom:1.25rem}
.form-group{flex:1;display:flex;flex-direction:column;margin-bottom:1.25rem}
.form-row .form-group{margin-bottom:0}
.form-label{font-size:.875rem;font-weight:600;color:#334155;margin-bottom:.5rem}
.form-control{width:100%;padding:.75rem 1rem;font-size:1rem;line-height:1.5;color:#0f172a;background-color:#fff;border:1px solid #cbd5e1;border-radius:.375rem;box-sizing:border-box;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out;appearance:none}
select.form-control{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.25em 1.25em;padding-right:2.5rem}
.form-control::placeholder{color:#94a3b8;opacity:1}
.form-control:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}
textarea.form-control{resize:vertical;min-height:120px}
.mobile-bottom{position:fixed;left:0;bottom:0;width:100%;z-index:9999;display:none;transform:translateY(100%);transition:transform .4s ease}
.mobile-bottom.show{transform:translateY(0)}
.mobile-bottom a{display:block;padding:15px 20px;background:#111;color:#fff;text-align:center;text-decoration:none;font-weight:600}
@media (max-width: 640px) {
.form-row{flex-direction:column;gap:1.25rem}
.footer-bottom{padding-bottom:50px}
.mobile-bottom{display:block}
}
/* ==========================================================================
   Page Headers (Inner Pages)
   ========================================================================== */
.page-banner{background-color:var(--color-bg-light);border-bottom:1px solid var(--color-border);padding:90px 0}
.page-banner-title{font-family:var(--font-heading);font-size:2.75rem;font-weight:700;color:var(--color-text-main);margin-bottom:12px}
.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--color-text-muted)}
.breadcrumbs a:hover{color:var(--color-primary)}
.filter-bar{display:flex;gap:12px;margin-bottom:40px;flex-wrap:wrap}
.filter-btn{padding:8px 20px;border-radius:var(--radius-full);font-size:.85rem;font-weight:600;background-color:var(--color-bg-light);border:1px solid var(--color-border);color:var(--color-text-main);cursor:pointer;transition:var(--transition)}
.filter-btn:hover,.filter-btn.active{background-color:var(--color-primary);color:#FFF;border-color:var(--color-primary)}
.ongoing-card{background:#FFF;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column}
.ongoing-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary);transform:translateY(-4px)}
.ongoing-image-box{position:relative;height:240px;overflow:hidden}
.ongoing-image-box img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ongoing-card:hover .ongoing-image-box img{transform:scale(1.05)}
.status-badge{position:absolute;top:16px;right:16px;padding:6px 14px;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(8px)}
.badge-ongoing{background-color:#1b4965e6;color:#FFF}
.badge-in-progress{background-color:#d32f2fe6;color:#FFF}
.badge-nearing-completion{background-color:#2e7d32e6;color:#FFF}
.ongoing-body{padding:24px;display:flex;flex-direction:column;flex-grow:1}
.ongoing-category{font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--color-primary);margin-bottom:6px}
.ongoing-title{font-family:var(--font-heading);font-size:1.35rem;font-weight:600;color:var(--color-text-main);margin-bottom:8px}
.ongoing-location{font-size:.85rem;color:var(--color-text-muted);display:flex;align-items:center;gap:4px;margin-bottom:16px}
.progress-container{margin:16px 0}
.progress-header{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;margin-bottom:6px;color:var(--color-text-main)}
.progress-bar-bg{width:100%;height:8px;background-color:var(--color-bg-alt);border-radius:4px;overflow:hidden}
.progress-bar-fill{height:100%;background-color:var(--color-primary);border-radius:4px;transition:width .8s ease}
.ongoing-dates{display:flex;justify-content:space-between;font-size:.8rem;color:var(--color-text-muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border)}
.two-colmun-wrapp{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:60px}
.page-block-main{padding:100px 0}
.projects-section,.blog-page-wrapp{padding:60px 0 100px}
.page-banner-blog-single{padding:50px 0}
.blog-main-image{border-radius:var(--radius-md);height:380px;overflow:hidden;margin-bottom:40px;box-shadow:var(--shadow-sm)}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
.services-grid{grid-template-columns:repeat(2,1fr)}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
.stat-item{border-right:none}
.why-us-grid{grid-template-columns:1fr;gap:40px}
.projects-grid{grid-template-columns:1fr}
.project-card-large{height:360px}
.blog-grid{grid-template-columns:repeat(2,1fr)}
.mobile-menu-toggle{display:block}
.main-nav{position:fixed;top:var(--header-height);left:0;width:100%;height:calc(100vh - var(--header-height));background-color:var(--color-bg-white);flex-direction:column;align-items:flex-start;padding:30px 24px;gap:20px;overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease;box-shadow:var(--shadow-md)}
.main-nav.is-open{transform:translateX(0)}
.nav-item-dropdown .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:16px;display:none}
.nav-item-dropdown.is-open .dropdown-menu{display:block}
}
@media (max-width: 768px) {
:root{--header-height:70px}
.hero-title{font-size:2.6rem}
.hero-actions{flex-direction:column;align-items:flex-start;gap:16px}
.about-grid{grid-template-columns:1fr}
.testimonials-grid{grid-template-columns:1fr}
.cta-inner{flex-direction:column;text-align:center}
.footer-top{flex-direction:column;align-items:flex-start}
.footer-nav{flex-wrap:wrap;gap:12px}
}
.animate-up,.animate-left,.animate-right,.animate-scale{opacity:0}
.logo-slider{overflow:hidden;width:100%;background:#fff;padding:20px 0;position:relative}
.logo-slider::before,.logo-slider::after{content:"";position:absolute;top:0;width:100px;height:100%;z-index:2;pointer-events:none}
.logo-slider::before{left:0;background:linear-gradient(to right,#ffff,#fff0)}
.logo-slider::after{right:0;background:linear-gradient(to left,#ffff,#fff0)}
.logo-track{display:flex;width:calc(200% + 0px);animation:scroll 20s linear infinite}
.logo-track:hover{animation-play-state:paused}
.logo-slide{flex:0 0 12.5%;display:flex;justify-content:center;align-items:center;padding:0 15px;box-sizing:border-box}
.logo-slide img{max-width:100%;height:auto;transition:all .3s ease}
.logo-slide img:hover{filter:grayscale(0%);opacity:1}
@keyframes scroll {
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.testimonials-page{position:relative;padding:80px 0;background:#f4f2ee;overflow:hidden}
.testimonials-heading{max-width:760px;margin-bottom:80px}
.testimonials-heading .eyebrow{display:inline-block;margin-bottom:20px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#777}
.testimonials-heading h1{margin:0 0 25px;font-family:"DM Sans",sans-serif;font-size:clamp(48px,6vw,88px);font-weight:500;line-height:.95;letter-spacing:-4px;color:#171717}
.testimonials-heading h1 span{font-style:italic;font-weight:400}
.testimonials-heading p{max-width:620px;margin:0;font-size:17px;line-height:1.7;color:#666}
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.testimonial-card{position:relative;min-height:390px;padding:50px;display:flex;flex-direction:column;background:#fff;border:1px solid #00000012;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.testimonial-card:hover{transform:translateY(-8px);box-shadow:0 25px 70px #00000014}
.quote-icon{font-family:Georgia,serif;font-size:90px;line-height:.5;color:#b59b76;margin-bottom:35px}
.testimonial-text{max-width:620px;margin:0;font-family:"DM Sans",sans-serif;font-size:19px;line-height:1.7;color:#303030}
.testimonial-client{margin-top:auto;padding-top:40px;display:flex;align-items:center;gap:15px}
.client-avatar{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#171717;color:#fff;font-size:13px;font-weight:600}
.testimonial-client h3{margin:0 0 4px;font-size:15px;font-weight:600;color:#171717}
.testimonial-client span{font-size:12px;color:#888}
.testimonial-number{position:absolute;right:35px;top:35px;font-size:11px;letter-spacing:2px;color:#aaa}
.testimonial-card.featured{background:#171717;color:#fff}
.testimonial-card.featured .quote-icon{color:#c5a878}
.testimonial-card.featured .testimonial-text{color:#e5e5e5}
.testimonial-card.featured .testimonial-client h3{color:#fff}
.testimonial-card.featured .testimonial-client span{color:#999}
.testimonial-card.featured .client-avatar{background:#c5a878;color:#171717}
.testimonial-card.featured .testimonial-number{color:#777}
.contact-top-section{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}
.contact-form{background-color:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:36px}
@media (max-width: 900px) {
.testimonials-page{padding:100px 30px}
.testimonials-heading{margin-bottom:55px}
.testimonials-grid{grid-template-columns:1fr}
.testimonial-card{min-height:350px}
}
@media (max-width: 628px) {
.testimonials-page{padding:80px 20px}
.testimonials-heading{margin-bottom:45px}
.testimonials-heading h1{font-size:48px;letter-spacing:-2px}
.testimonials-heading p{font-size:15px}
.testimonials-grid{grid-template-columns:1fr;gap:15px}
.testimonial-card{min-height:360px;padding:35px 28px}
.quote-icon{font-size:70px;margin-bottom:25px}
.testimonial-text{font-size:17px;line-height:1.65}
.testimonial-client{padding-top:30px}
.testimonial-number{right:25px;top:25px}
}
@media (max-width: 1280px) {
.page-block-main{padding:80px 0}
.projects-section,.blog-page-wrapp{padding:60px 0 90px}
.page-banner-blog-single{padding:50px 0}
.blog-main-image{height:auto}
.proMain-imag,.prjGallImg,.blog-img-wrapper{height:auto}
.projects-subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.contact-top-section{display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
.about-images-grid{grid-template-columns:1fr}
.about-card-sub-column{flex-direction:row}
.hero-title{font-size:3rem}
.page-banner-title{font-size:2rem;line-height:1.2}
.two-colmun-wrapp{gap:25px}
.projVisualOver{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:60px}
}
@media (max-width: 992px) {
.logo-slide{flex:0 0 16.666%}
.mison-vison-content{width:calc(100% - 0px)}
.two-colmun-wrapp{grid-template-columns:repeat(1,1fr);align-items:center;row-gap:30px}
.services-grid,.why-us-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hero-title{font-size:2.8rem}
.hero-description{font-size:1rem}
.about-image{display:none}
.contact-top-section{display:block}
}
@media (max-width: 800px) {
.hme-experience-section{background-image:url(../images/experience-banner-800.webp)}
.projects-subgrid{gap:15px}
.projVisualOver{display:block;margin-bottom:60px}
}
@media (max-width: 628px) {
.top-book-btn,.banner-caption{display:none}
.hme-experience-section{min-height:350px}
.about-section,.hme-experience-section,.services-section,.projects-section,.why-us-section,.blog-section,.mision-vison-section .align,.mission-section{padding:50px 0!important}
.about-text{margin-bottom:0}
.projVisualOver{display:block;margin-bottom:30px}
.page-banner{padding:60px 0}
.section-header{flex-direction:column;row-gap:0}
.services-grid,.why-us-cards-grid{grid-template-columns:repeat(1,1fr)}
.about-images-grid{grid-template-columns:1fr;width:100%}
.about-card-featured{height:auto}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.stat-item,.section-header{gap:5px;flex-direction:column;text-align:center}
.section-header{justify-content:center;align-items:center}
.experince-hme-content h2,.cta-title{font-size:1.8rem}
.hero-description{font-size:1.1rem}
.blog-grid{grid-template-columns:repeat(1,1fr);gap:40px}
.header-container{padding:0 10px}
.about-grid{gap:30px}
.projects-subgrid{grid-template-columns:repeat(1,1fr);gap:30px}
.page-banner-title{font-size:1.4rem;line-height:1.2}
.breadcrumbs{font-size:.78rem}
.page-block-main{padding:50px 0}
.projects-section,.blog-page-wrapp{padding:40px 0}
.page-banner-blog-single{padding:40px 0}
.section-title,.section-title-small{font-size:1.8rem}
}
@media (max-width: 576px) {
.logo-slide{flex:0 0 25%}
.projects-subgrid{display:grid;grid-template-columns:repeat(1,1fr);row-gap:20px}
.about-card-sub-column{flex-direction:column}
.hme-experience-section{background-image:url(../images/experience-banner-480.webp)}
.contact-form{padding:16px}
}
.swiper-pagination-feature{color:#fff!important;z-index:100;width:40px;font-size:.8rem;right:32px;left:auto}
.swiper-pagination-feature .swiper-pagination-current{color:#fff!important}
.swiper-button-next svg,.swiper-button-prev svg{display:none}
.swiper-button-next,.swiper-button-prev{color:#fff!important;font-size:1.1rem}
.swiper-pagination-testi{text-align:center;position:relative;padding-top:40px!important}
.swiper-pagination-testi .swiper-pagination-bullet{width:15px;height:15px;background-color:#fff}
.swiper-pagination-testi .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:.8}
.contact-banner,.about-banner{background-image:url(../images/about-banner.webp);background-position:bottom center}
.contact-banner .page-banner-title,.about-banner .page-banner-title,.contact-banner .breadcrumbs,.about-banner .breadcrumbs{color:#fff!important}
.contact-banner{background-image:url(../images/contact-banner.webp);background-position:top center}
.services-banner{background-image:url(../images/services-banner.webp)}
.projects-banner{background-image:url(../images/projects-banner.webp)}
.projects-banner-ongoing{background-image:url(../images/projects-banner-ongoing.webp)}
.blog-banner{background-image:url(../images/blog-banner.webp)}
.testimonial-banner{background-image:url(../images/banner-testimonial.webp)}
.floating-btns{position:fixed;bottom:70px;right:30px;z-index:12000;opacity:0;visibility:hidden;transform:translateY(30px);transition:opacity .4s ease,transform .4s ease,visibility .4s ease}
.f-call,.bbtn{margin-bottom:15px}
.float-fix{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.3s}
.float-fix-book{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.3s}
.fab.call{background:linear-gradient(135deg,#fffdf1,#fff)}
.fab.whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);animation-delay:1.2s}
.tooltip{position:absolute;right:70px;background:#111;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none;transition:all .25s ease}
.tooltip::after{content:"";position:absolute;top:50%;right:-6px;transform:translateY(-50%);border:6px solid transparent;border-left-color:#111}
.fab:hover .tooltip,.bbtnLink:hover .tooltip{opacity:1;transform:translateX(0)}
@keyframes pulse {
0%{box-shadow:0 0 0 0 #0006}
70%{box-shadow:0 0 0 14px #0000}
100%{box-shadow:0 0 0 0 #0000}
}
.grecaptcha-badge{visibility:hidden!important}
.fab{position:relative;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px #00000040;animation:pulse 2.5s infinite;transition:transform .3s ease,box-shadow .3s ease;display:flex!important;justify-content:center;align-items:center}
.f-whats img{width:25px}
/* ------------------------ Reset all ---------------------------- */

.about-section,.services-section,.projects-section,.why-us-section,.testimonials-section,.blog-section,.mission-section,.about-values-section,.about-section-pag,.services-section-page,.projects-section-page, .projects-section-page-dtails, .blog-page-wrapp {padding:100px 0!important}
.cta-section{padding:80px 0!important}
.client-logo-section,.logo-slider{padding:20px 0!important}
.site-footer{padding:60px 0 30px!important}
.about-values-section{background-color:var(--color-bg-light);border-top:1px solid var(--color-border)}
.services-grid-page{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.prj-details-blocks { background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px;}
.pro-inf-title { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); padding-bottom: 12px;}
.prj-scop-exce, .prj-gall-wrapp { padding-bottom: 60px;}
.prj-scop-exce .section-title { font-size: 1.8rem; margin-bottom: 20px;} 
.prj-gall-wrapp .section-title { font-size: 1.5rem; margin-bottom: 24px;} 
.prj-details-blocks { }
.proj-detils-grp { display: flex; flex-direction: column; gap: 16px; font-size: 0.95rem;}
.proj-detils-item span { color: var(--color-text-muted); display: block; font-size: 0.8rem; text-transform: uppercase;}
.prj-gall-grp { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.related-wrapp { border-top: 1px solid var(--color-border); padding-top: 60px; }
.project-card-info-sp .project-title { font-size: 1.1rem;}
.blog-menu { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center;}
.blog-sml-title { text-align: center; padding: 60px 20px; color: var(--color-text-muted);}
.blog-title-land {font-size: 1.3rem; margin-bottom: 12px; }
.blog-land-text { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 20px;}
.blog-land-rfa { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px;}
.blog-dtail-text { font-size: 1.1rem; line-height: 1.8; color: var(--color-text-main);} 
.blog-page-btm { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.contact-wrapp .section-title { padding-bottom: 20px;}
.cnt-pg-top { color: var(--color-text-muted); margin-bottom: 32px; font-size: 1rem; }
.contact-wrapp .alert-success { padding: 20px; font-size: 1rem; margin-bottom: 30px;}
.contact-wrapp .alert-danger { padding: 16px; margin-bottom: 24px;}
.contact-wrapp  .btn { padding: 14px 36px; font-size: 1rem; }
.addrss-area-cnt { background-color: var(--color-bg-dark); color: #FFFFFF; border-radius: var(--radius-md); padding: 40px; margin-bottom: 30px;}
.addrss-title { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 24px; color: #FFFFFF;}
.cnt-addres-areas-wrapp { display: flex; flex-direction: column; gap: 24px;}
.cnt-addres-area {display: flex; gap: 16px; align-items: flex-start;}
.cnt-icon { color: var(--color-primary); margin-top: 4px;}
.cnt-wrk-hors { background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px;}