/* ==========================================================================
   1. GLOBAL VARIABLES, RESETS & REUSABLE UTILITIES
   ========================================================================== */
:root{
   --primary-blue:#0A3D91;
   --text-dark:#2C3E50;
   --text-muted:#5A6B7C;
   --accent-orange:#FF6B00;
   --bg-white:#FFFFFF;
   --font-main:'Inter',sans-serif;
   --transition-speed:0.3s;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-main);color:var(--text-dark);background-color:#FAFAFA;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
p{text-align:justify;}
.text-center{text-align:center;}
.header-container,.hero-container,.services-section,.features-section,.footer-container,.page-banner-container{max-width:1280px;margin:0 auto;padding:0 24px;}
.services-section,.features-section{margin:80px auto;}
.services-grid,.features-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.services-grid{gap:24px;}
.features-grid{gap:32px;}
.features-tagline,.section-tagline{color:var(--primary-blue);font-size:18px;margin-bottom:12px;line-height:1.4;display:block;font-weight:700;}
.btn-cta,.btn-primary,.btn-secondary,.service-card{transition:all var(--transition-speed) ease;}
.btn-cta:hover,.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px);}
.btn-arrow{transition:transform var(--transition-speed) ease;}
.btn-cta:hover .btn-arrow,.btn-primary:hover .btn-arrow,.btn-secondary:hover .btn-arrow{transform:translateX(4px);}

/* ==========================================================================
   2. HEADER & NAVIGATION LAYOUT
   ========================================================================== */
.site-header{background-color:var(--bg-white);box-shadow:0 2px 10px rgba(0,0,0,0.03);position:sticky;top:0;z-index:1000;}
.header-container{padding:15px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;}
.logo-area{display:flex;align-items:center;gap:12px;text-decoration:none;z-index:1001;}
.logo-img{height:45px;width:auto;}
.logo-text{font-size:14px;font-weight:700;letter-spacing:1px;color:var(--primary-blue);}
.main-navigation{display:flex;align-items:center;}
.nav-links{display:flex;list-style:none;gap:32px;align-items:center;}
.nav-item{text-decoration:none;font-size:15px;font-weight:500;color:var(--text-muted);padding:8px 0;position:relative;transition:color var(--transition-speed) ease;}
.nav-item:hover,.nav-item.active{color:var(--primary-blue);}
.nav-item.active{font-weight:600;}
.nav-item.active::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:3px;background-color:#0093f4;}
.nav-dropdown-parent{position:relative;display:flex;align-items:center;}
.dropdown-arrow{font-size:20px;margin-left:6px;transition:transform 0.3s ease;display:inline-block;}
.nav-dropdown-parent:hover .dropdown-arrow{transform:rotate(180deg);}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:240px;background:var(--bg-white);box-shadow:0 12px 24px rgba(0,0,0,0.08);border:1px solid #EAEFF5;border-radius:8px;padding:8px 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.3s ease;z-index:1100;}
.nav-dropdown-parent:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown-menu li{border-bottom:1px solid #F0F4FA;}
.nav-dropdown-menu li:last-child{border-bottom:none;}
.nav-dropdown-menu a{display:block;padding:12px 18px;font-size:14px;font-weight:500;color:var(--text-dark);text-decoration:none;transition:all 0.2s ease;}
.nav-dropdown-menu a:hover{background-color:#F0F4FA;color:var(--primary-blue);padding-left:22px;}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:5px;z-index:1001;}
.mobile-toggle span{display:block;width:25px;height:3px;background-color:var(--primary-blue);border-radius:2px;transition:all 0.3s ease;}
.mobile-only-cta{display:none;}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background-color:var(--primary-blue);color:var(--bg-white);text-decoration:none;padding:12px 24px;border-radius:8px;font-size:15px;font-weight:600;box-shadow:0 4px 6px rgba(10,61,145,0.15);}
.btn-cta:hover{background-color:#083275;}
.btn-cta .btn-arrow{color:var(--accent-orange);font-size:18px;line-height:1;}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero-section{background-color:var(--bg-white);overflow:hidden;position:relative;}
.hero-container{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;}
.hero-content{padding:60px 40px 60px 0;display:flex;flex-direction:column;justify-content:center;}
.hero-logo{height:auto;max-height:226px;width:auto;max-width:100%;object-fit:contain;align-self:center;margin:0 auto 24px auto;}
.hero-title{font-size:42px;color:var(--primary-blue);font-weight:700;margin-bottom:8px;line-height:1.2;}
.hero-subtitle{font-size:20px;font-weight:600;color:var(--text-dark);margin-bottom:24px;}
.hero-description{font-size:16px;line-height:1.6;color:var(--text-muted);margin-bottom:32px;}
.hero-buttons{display:flex;flex-wrap:wrap;gap:16px;}
.btn-primary,.btn-secondary{padding:14px 28px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.btn-primary{background-color:var(--primary-blue);color:white;}
.btn-primary:hover{background-color:#083275;box-shadow:0 6px 15px rgba(10,61,145,0.25);}
.btn-secondary{border:1.5px solid var(--primary-blue);color:var(--primary-blue);background-color:transparent;}
.btn-secondary:hover{background-color:var(--primary-blue);color:#FFFFFF;box-shadow:0 6px 15px rgba(10,61,145,0.15);}
.btn-secondary .btn-arrow{color:var(--accent-orange);}
.hero-image-wrapper{position:relative;width:100%;height:100%;min-height:350px;}
.hero-image-wrapper img{position:absolute;top:0;left:0;width:max(100%,60vw);max-width:none;height:100%;object-fit:cover;object-position:20% center;}

/* ==========================================================================
   4. SERVICES & OFFERINGS SECTION
   ========================================================================== */
.section-header{text-align:center;max-width:700px;margin:0 auto 50px auto;}
.section-header h2{color:#0093f4;font-weight:700;font-size:30px;letter-spacing:1px;display:block;margin-bottom:8px;line-height:1.3;}
.section-header p{color:var(--text-muted);line-height:1.5;}
.service-card{background:var(--bg-white);border:1px solid #F0F4FA;padding:32px 24px 44px 24px;border-radius:16px;text-decoration:none;color:inherit;position:relative;display:grid;grid-template-columns:84px 1fr;column-gap:20px;box-shadow:10px 0 20px -5px rgba(255,107,0,0.3),0 12px 20px -5px rgba(130,145,160,0.35),0 4px 12px rgba(0,0,0,0.03);transition:transform 0.3s ease,box-shadow 0.3s ease;}
.service-card:hover{transform:translateY(-4px);}
.card-icon{margin-bottom:0;width:80px;height:80px;display:flex;align-items:flex-start;justify-content:flex-start;grid-column:1;grid-row:1 / span 2;}
.card-icon img{max-height:100%;width:auto;object-fit:contain;}
.service-card h3{font-size:18px;color:var(--primary-blue);margin-bottom:8px;grid-column:2;grid-row:1;align-self:start;}
.service-card p{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:0;grid-column:2;grid-row:2;}
.card-arrow{position:absolute;bottom:16px;right:24px;color:var(--accent-orange);font-weight:bold;}
.category-section{margin-bottom:48px;}
.category-header{font-size:24px;color:var(--primary-blue);border-bottom:2px solid #DCE4F0;padding-bottom:12px;margin-bottom:24px;text-align:center;}
.services-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:992px){.services-grid-2col{grid-template-columns:1fr;gap:20px;}}
@media (max-width:768px){.services-grid-2col{grid-template-columns:1fr;gap:16px;}.services-grid-2col .service-card{padding:32px 24px;grid-template-columns:84px 1fr;column-gap:20px;}.services-grid-2col .card-icon{width:84px;height:84px;padding:18px;}.services-grid-2col h3{font-size:20px;}.services-grid-2col p{font-size:14px;}.services-grid-2col .card-arrow{display:block;}}

/* One-Row Service Cards with Right-Aligned Image */
.services-grid-2col{display:grid;grid-template-columns:1fr !important;gap:24px;}
.services-grid-2col .service-card{display:grid;grid-template-columns:80px 1fr minmax(160px,280px);column-gap:24px;align-items:center;padding:32px 24px;}
.services-grid-2col .service-card .card-icon{grid-column:1;grid-row:1 / span 2;align-self:flex-start;}
.services-grid-2col .service-card h3{grid-column:2;grid-row:1;margin-bottom:8px;}
.services-grid-2col .service-card p{grid-column:2;grid-row:2;}
.service-right-img{grid-column:3;grid-row:1 / span 2;width:100%;height:auto;max-height:220px;border-radius:12px;overflow:hidden;border:1px solid #EAEFF5;}
.service-right-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;}
.service-card:hover .service-right-img img{transform:scale(1.05);}
.services-grid-2col .card-arrow{bottom:16px;right:24px;}

/* Service Pillars */
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.pillar-card{display:flex;flex-direction:column;padding:40px 28px;}
@media (max-width:992px){.pillars-grid{grid-template-columns:repeat(2,1fr);gap:24px;}}
@media (max-width:768px){.pillars-grid{grid-template-columns:1fr;gap:20px;}.pillar-card{padding:32px 24px;}}

/* Services Page: Single-Row Horizontal Cards with Enlarged Right Image */
.category-section .services-grid-2col{display:grid;grid-template-columns:1fr !important;gap:32px;}
.category-section .service-card{display:grid;grid-template-columns:80px 1fr 1.4fr !important;grid-template-rows:auto auto;column-gap:32px;align-items:center;padding:24px 28px !important;overflow:hidden;}
.category-section .card-icon{grid-column:1;grid-row:1 / span 2;margin-bottom:0 !important;}
.category-section .service-card h3{grid-column:2;grid-row:1;margin-bottom:8px !important;align-self:end;}
.category-section .service-card p{grid-column:2;grid-row:2;margin-bottom:0 !important;align-self:start;padding-right:12px;}
.service-img-right{grid-column:3;grid-row:1 / span 2;width:100%;height:100%;min-height:180px;max-height:220px;border-radius:12px;overflow:hidden;position:relative;}
.service-img-right img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.category-section .service-card:hover .service-img-right img{transform:scale(1.06);}
.category-section .card-arrow{bottom:20px;right:20px;z-index:2;background:var(--bg-white);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,0.15);}
@media (max-width:992px){.category-section .service-card{grid-template-columns:70px 1fr !important;grid-template-rows:auto auto auto;gap:16px;}.category-section .service-card h3,.category-section .service-card p{grid-column:2;padding-right:0;}.service-img-right{grid-column:1 / span 2;grid-row:3;margin-top:12px;min-height:200px;}}
@media (max-width:992px){.services-grid-2col .service-card{grid-template-columns:80px 1fr;row-gap:16px;}.service-right-img{grid-column:1 / span 2;grid-row:3;height:200px;margin-top:8px;}.services-grid-2col .card-arrow{right:24px;bottom:232px;}}

/* Homepage: Two-Column Offerings Cards */
.home-offerings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.home-offering-card{background:var(--bg-white);border:1px solid #F0F4FA;padding:32px 24px 44px 24px;border-radius:16px;text-decoration:none;color:inherit;position:relative;display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto auto;column-gap:20px;box-shadow:10px 0 20px -5px rgba(255,107,0,0.3),0 12px 20px -5px rgba(130,145,160,0.35),0 4px 12px rgba(0,0,0,0.03);transition:transform 0.3s ease,box-shadow 0.3s ease;overflow:hidden;}
.home-offering-card:hover{transform:translateY(-4px);box-shadow:10px 0 25px -5px rgba(255,107,0,0.4),0 16px 28px -5px rgba(130,145,160,0.45),0 6px 16px rgba(0,0,0,0.05);}
.home-offering-card .card-icon{width:80px;height:80px;display:flex;align-items:flex-start;justify-content:flex-start;grid-column:1;grid-row:1 / span 2;margin-bottom:0;}
.home-offering-card .card-icon img{max-height:100%;width:auto;object-fit:contain;}
.home-offering-card h3{font-size:18px;color:var(--primary-blue);margin-bottom:8px;grid-column:2;grid-row:1;align-self:start;}
.home-offering-card p{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:0;grid-column:2;grid-row:2;}
.home-offering-card .card-arrow{position:absolute;bottom:16px;right:24px;color:var(--accent-orange);font-weight:bold;transition:transform 0.3s ease;}
.home-offering-card:hover .card-arrow{transform:translateX(4px);}
@media (max-width:992px){.home-offerings-grid{grid-template-columns:1fr;gap:20px;}}
@media (max-width:768px){.home-offerings-grid{gap:16px;}.home-offering-card{padding:28px 20px 40px 20px;grid-template-columns:70px 1fr;column-gap:16px;}.home-offering-card .card-icon{width:70px;height:70px;}.home-offering-card h3{font-size:18px;}}

/* ==========================================================================
   5. PROPERTY INTERMEDIATION, PROJECT SHOWCASES & PARALLAX SECTIONS
   ========================================================================== */
/* Parallax Break Section */
.parallax-section{background-image:url('../img/hero-handshake.jpg');background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;margin:80px 0;overflow:hidden;}
.parallax-overlay{background:linear-gradient(135deg,rgba(10,61,145,0.50) 0%,rgba(5,31,74,0.65) 100%) !important;padding:90px 0;text-align:center;color:#FFFFFF;}
.parallax-container{max-width:800px;margin:0 auto;padding:0 24px;}
.parallax-tagline{color:var(--accent-orange);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:12px;}
.parallax-title{font-size:36px;font-weight:700;line-height:1.25;margin-bottom:20px;color:#FFFFFF;}
.parallax-desc{font-size:17px;line-height:1.6;color:rgba(255,255,255,0.85);margin-bottom:32px;}
.parallax-btn{background-color:var(--accent-orange);color:#FFFFFF;box-shadow:0 6px 18px rgba(255,107,0,0.35);}
.parallax-btn:hover{background-color:#e05e00;box-shadow:0 8px 24px rgba(255,107,0,0.45);}
@media (max-width:992px){.parallax-title{font-size:30px;}.parallax-overlay{padding:70px 0;}}
@media (max-width:768px){.parallax-section{background-attachment:scroll;margin:50px 0;}.parallax-overlay{padding:50px 0;}.parallax-title{font-size:24px;}.parallax-desc{font-size:15px;margin-bottom:24px;}.parallax-btn{width:100%;justify-content:center;}}

/* The Experience Behind Wigu - Light Parallax */
.experience-parallax{background-image:url('../img/light-geometric-bg.jpg');background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;margin:80px 0;overflow:hidden;}
.experience-overlay{background:transparent !important;padding:80px 0 !important;text-align:left !important;color:var(--text-dark);}
.experience-overlay .parallax-title{color:var(--primary-blue) !important;}
.experience-content p{color:var(--text-dark);line-height:1.8;font-size:16px;margin-bottom:20px;text-align:justify;font-weight:500;}
.experience-content p:last-child{margin-bottom:0;}
@media (max-width:768px){.experience-parallax{background-attachment:scroll;margin:50px 0;}.experience-overlay{padding:50px 0 !important;}.experience-content p{font-size:15px;text-align:left;}}

/* Property Intermediation Showcase Grid */
.prop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 32px;margin:40px 0;}
.prop-card{background:var(--bg-white);border:1px solid #EAEFF5;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 25px rgba(0,0,0,0.03);transition:all var(--transition-speed) ease;}
.prop-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(10,61,145,0.12);border-color:var(--accent-orange);}
.prop-img-wrap{width:100%;height:420px;overflow:hidden;position:relative;background:#F0F4FA;}
.prop-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.prop-card:hover .prop-img-wrap img{transform:scale(1.08);}
.prop-badge{position:absolute;top:16px;left:16px;background:var(--primary-blue);color:#FFF;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;letter-spacing:0.5px;z-index:2;box-shadow:0 4px 10px rgba(0,0,0,0.2);}
.prop-body{padding:32px 28px;display:flex;flex-direction:column;flex-grow:1;}
.prop-title{font-size:26px;font-weight:700;color:var(--primary-blue);margin-bottom:6px;line-height:1.25;}
.prop-sub{font-size:14px;font-weight:600;color:var(--accent-orange);margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;}
.prop-desc{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:24px;flex-grow:1;}
.prop-price-box{border-top:1px solid #EAEFF5;padding-top:20px;margin-bottom:24px;display:flex;flex-direction:column;gap:4px;}
.prop-start-label{font-size:13px;color:var(--text-muted);font-weight:500;}
.prop-price{font-size:24px;font-weight:700;color:var(--text-dark);}
.prop-price span{font-size:14px;font-weight:500;color:var(--text-muted);margin-left:4px;}
.btn-prop{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#F0F4FA;color:var(--primary-blue);border:1px solid #DCE4F0;padding:12px 24px;border-radius:30px;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.3s ease;width:fit-content;}
.btn-prop:hover{background:var(--primary-blue);color:#FFF;border-color:var(--primary-blue);box-shadow:0 6px 15px rgba(10,61,145,0.2);}
.btn-prop .btn-arrow{transition:transform 0.3s ease;}
.btn-prop:hover .btn-arrow{transform:translateX(4px);}
@media (max-width:992px){.prop-grid{grid-template-columns:1fr;gap:32px;}.prop-img-wrap{height:260px;}}
@media (max-width:768px){.prop-body{padding:24px 20px;}.prop-title{font-size:22px;}.prop-price{font-size:22px;}.btn-prop{width:100%;}}

/* Property / Project Detail Page Showcase Layout (Version 1) */
.detail-grid{display:grid;grid-template-columns:1.3fr 0.7fr;gap:40px;align-items:start;margin:40px 0;}
.detail-gallery{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
.detail-main-img{width:100%;height:420px;border-radius:16px;overflow:hidden;border:1px solid #EAEFF5;background:#F0F4FA;}
.detail-main-img img{width:100%;height:100%;object-fit:cover;}
.detail-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.detail-thumb-item{height:90px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:#F0F4FA;transition:all var(--transition-speed) ease;}
.detail-thumb-item:hover,.detail-thumb-item.active{border-color:var(--accent-orange);transform:translateY(-2px);}
.detail-thumb-item img{width:100%;height:100%;object-fit:cover;}
.detail-header-wrap{border-bottom:1px solid #EAEFF5;padding-bottom:20px;margin-bottom:24px;}
.detail-title{font-size:32px;font-weight:700;color:var(--primary-blue);margin-bottom:8px;line-height:1.2;}
.detail-sub{font-size:16px;font-weight:600;color:var(--accent-orange);text-transform:uppercase;letter-spacing:0.5px;}
.detail-section-title{font-size:20px;font-weight:700;color:var(--primary-blue);margin:28px 0 16px 0;border-left:4px solid var(--accent-orange);padding-left:12px;}
.detail-desc p{font-size:16px;color:var(--text-muted);line-height:1.8;margin-bottom:16px;}
.detail-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;background:#F0F4FA;padding:24px;border-radius:12px;border:1px solid #EAEFF5;margin-bottom:28px;}
.detail-spec-item{display:flex;flex-direction:column;gap:4px;}
.detail-spec-label{font-size:13px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}
.detail-spec-val{font-size:16px;color:var(--text-dark);font-weight:700;}
.detail-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:32px;}
.detail-feature-pill{display:flex;align-items:center;gap:10px;background:var(--bg-white);border:1px solid #EAEFF5;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-dark);}
.detail-feature-pill span{color:var(--accent-orange);font-weight:700;font-size:16px;}
.detail-sidebar{background:var(--bg-white);border:1px solid #EAEFF5;border-radius:16px;padding:32px;box-shadow:0 15px 30px rgba(0,0,0,0.05);position:sticky;top:100px;}
.sidebar-price-box{background:#F0F4FA;border-left:5px solid var(--accent-orange);padding:20px;border-radius:8px;margin-bottom:24px;}
.sidebar-price-label{font-size:13px;color:var(--text-muted);font-weight:600;text-transform:uppercase;}
.sidebar-price-val{font-size:28px;font-weight:700;color:var(--primary-blue);margin-top:4px;}
.sidebar-price-val span{font-size:14px;color:var(--text-muted);font-weight:500;}
.sidebar-contact-btns{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;border-bottom:1px solid #EAEFF5;padding-bottom:24px;}
.btn-sidebar-call{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--primary-blue);color:#FFF;padding:12px;border-radius:8px;font-weight:600;text-decoration:none;transition:all 0.3s ease;}
.btn-sidebar-call:hover{background:#083275;color:#FFF;transform:translateY(-2px);}
@media (max-width:992px){.detail-grid{grid-template-columns:1fr;gap:32px;}.detail-sidebar{position:static;}}
@media (max-width:768px){.detail-main-img{height:260px;}.detail-thumbs{grid-template-columns:repeat(2,1fr);}.detail-specs-grid,.detail-features-grid{grid-template-columns:1fr;}.detail-title{font-size:24px;}}

/* Project / Property Detail Page Showcase Layout (Version 2) */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin:40px 0;align-items:start;}
.detail-gallery{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
.gallery-main{width:100%;height:400px;border-radius:16px;overflow:hidden;border:1px solid #EAEFF5;background:#F0F4FA;}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.gallery-thumb{height:100px;border-radius:10px;overflow:hidden;border:1px solid #EAEFF5;cursor:pointer;transition:all var(--transition-speed) ease;}
.gallery-thumb:hover{opacity:0.8;border-color:var(--accent-orange);}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;}
.detail-content h2{font-size:26px;color:var(--primary-blue);margin:24px 0 16px 0;line-height:1.3;}
.detail-content p{font-size:16px;color:var(--text-muted);line-height:1.8;margin-bottom:20px;}
.detail-checklist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0;padding:0;}
.detail-checklist li{position:relative;padding-left:28px;font-size:15px;color:var(--text-dark);font-weight:500;}
.detail-checklist li::before{content:'✔';position:absolute;left:0;top:0;color:var(--accent-orange);font-weight:700;}
.detail-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:24px;}
.specs-card{background:var(--bg-white);border:1px solid #EAEFF5;border-top:5px solid var(--primary-blue);border-radius:16px;padding:32px 28px;box-shadow:0 12px 24px rgba(0,0,0,0.04);}
.specs-card h3{font-size:20px;color:var(--primary-blue);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #EAEFF5;}
.specs-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:28px;}
.specs-list li{display:flex;justify-content:space-between;align-items:center;font-size:15px;border-bottom:1px dashed #F0F4FA;padding-bottom:12px;}
.specs-list li span:first-child{color:var(--text-muted);font-weight:500;}
.specs-list li span:last-child{color:var(--text-dark);font-weight:700;text-align:right;}
.specs-price-box{background:#F0F4FA;padding:20px;border-radius:12px;margin-bottom:24px;text-align:center;border:1px solid #DCE4F0;}
.specs-price-label{font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;display:block;margin-bottom:4px;}
.specs-price-val{font-size:26px;font-weight:700;color:var(--primary-blue);}
.btn-detail-cta{width:100%;justify-content:center;padding:16px;font-size:16px;}
@media (max-width:992px){.detail-grid{grid-template-columns:1fr;gap:32px;}.detail-sidebar{position:static;}.gallery-main{height:320px;}}
@media (max-width:768px){.detail-checklist{grid-template-columns:1fr;}.gallery-main{height:240px;}.gallery-thumb{height:70px;}}

/* Projects Done Landing Page Category Cards */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:40px 0;}
.project-cat-card{background:var(--bg-white);border:1px solid #EAEFF5;border-left:6px solid var(--primary-blue);border-radius:16px;padding:40px 28px;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:0 10px 25px rgba(0,0,0,0.03);transition:all var(--transition-speed) ease;}
.project-cat-card:hover{transform:translateY(-6px);border-color:var(--accent-orange);border-left:8px solid var(--accent-orange);box-shadow:0 16px 32px rgba(10,61,145,0.12);}
.cat-icon-wrap{width:72px;height:72px;background:#F0F4FA;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border:1px solid #EAEFF5;transition:transform 0.3s ease;}
.project-cat-card:hover .cat-icon-wrap{transform:scale(1.08);border-color:var(--accent-orange);}
.cat-icon-wrap img{max-height:42px;width:auto;object-fit:contain;}
.project-cat-card h3{font-size:22px;color:var(--primary-blue);margin-bottom:12px;font-weight:700;}
.project-cat-card p{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:32px;flex-grow:1;text-align:left;}
.btn-cat-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--primary-blue);text-transform:uppercase;letter-spacing:0.5px;margin-top:auto;}
.project-cat-card:hover .btn-cat-link{color:var(--accent-orange);}
.btn-cat-link .btn-arrow{transition:transform 0.3s ease;}
.project-cat-card:hover .btn-cat-link .btn-arrow{transform:translateX(6px);}
@media (max-width:992px){.projects-grid{grid-template-columns:repeat(2,1fr);gap:24px;}}
@media (max-width:768px){.projects-grid{grid-template-columns:1fr;gap:20px;}.project-cat-card{padding:32px 24px;}}

/* ==========================================================================
   6. WHY CHOOSE US & ABOUT PAGE UPGRADES
   ========================================================================== */
/* Why Choose Us Section */
.features-box{background-color:#F0F4FA;border-radius:8px;padding:40px 32px;text-align:center;}
.features-title{color:#0093f4;font-size:26px;margin-bottom:40px;}
.feature-item{display:flex;align-items:flex-start;gap:16px;text-align:left;}
.feature-icon-wrapper{flex-shrink:0;width:90px;height:90px;}
.feature-icon-wrapper img{width:100%;height:100%;object-fit:contain;}
.feature-text h3{font-size:16px;color:var(--text-dark);margin-bottom:8px;}
.feature-text p{font-size:14px;color:var(--text-muted);line-height:1.5;}
.why-choose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;}
.why-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.check-mark{color:var(--accent-orange);font-size:20px;font-weight:700;line-height:1;}
.why-text{font-size:15px;margin:0;color:var(--text-dark);font-weight:600;line-height:1.4;}
@media (max-width:992px){.why-choose-grid{grid-template-columns:repeat(2,1fr);gap:20px;}}
@media (max-width:768px){.why-choose-grid{grid-template-columns:1fr;gap:16px;}.features-box{padding:28px 18px;}.why-text{font-size:14px;}}

/* About Page Upgrades: Vision & Mission Showcase */
.who-we-are-intro{max-width:860px;margin:0 auto;text-align:center;}
.lead-text{font-size:18px;line-height:1.7;color:var(--text-dark);margin-top:16px;}
.vision-mission-section{margin:60px 0;padding:60px 0;background-color:#F0F4FA;border-top:1px solid #EAEFF5;border-bottom:1px solid #EAEFF5;}
.vision-mission-container{max-width:1280px;margin:0 auto;padding:0 24px;}
.vision-mission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:stretch;}
.vm-card{padding:48px 40px;border-radius:20px;display:flex;flex-direction:column;justify-content:center;position:relative;transition:transform 0.3s ease,box-shadow 0.3s ease;}
.vm-card:hover{transform:translateY(-6px);}
.vm-vision{background:linear-gradient(135deg,var(--primary-blue) 0%,#051F4A 100%);color:#FFFFFF;box-shadow:8px 0 24px -4px rgba(255,107,0,0.45),0 16px 32px -4px rgba(10,61,145,0.3);border:1px solid rgba(255,255,255,0.1);}
.vm-vision .vm-title{color:#FFFFFF;font-size:24px;margin-bottom:16px;font-weight:700;}
.vm-vision .vm-desc{color:rgba(255,255,255,0.9);font-size:16px;line-height:1.7;margin:0;}
.vm-mission{background:var(--bg-white);color:var(--text-dark);box-shadow:10px 0 20px -5px rgba(255,107,0,0.3),0 12px 20px -5px rgba(130,145,160,0.35);border:1px solid #EAEFF5;}
.vm-mission .vm-title{color:var(--primary-blue);font-size:24px;margin-bottom:16px;font-weight:700;}
.vm-mission .vm-desc{color:var(--text-muted);font-size:16px;line-height:1.7;margin:0;}
.vm-badge{display:inline-block;width:fit-content;background-color:rgba(255,255,255,0.15);color:#FFFFFF;font-size:12px;font-weight:700;letter-spacing:1.5px;padding:6px 14px;border-radius:6px;margin-bottom:20px;}
.vm-badge-orange{background-color:#FFF0E6;color:var(--accent-orange);}
.md-message-box{border-top:4px solid var(--accent-orange);margin-top:20px;}
.md-message-box p{color:var(--text-muted);line-height:1.7;margin-bottom:16px;font-size:16px;}
.md-welcome{color:var(--text-dark) !important;font-weight:700;font-size:18px;}
.md-closing{color:var(--primary-blue) !important;font-weight:700;margin-top:24px;margin-bottom:0 !important;}
.experience-header{max-width:900px;text-align:left;margin:0 auto;}
.experience-header p{margin-bottom:16px;line-height:1.7;font-size:16px;}
.shining-logo-wrapper{display:inline-block;position:relative;overflow:hidden;margin-bottom:20px;padding:8px 16px;border-radius:12px;}
.shining-logo{height:auto;max-height:100px;width:auto;margin:0 auto;display:block;filter:drop-shadow(0 6px 14px rgba(10,61,145,0.18));}
.shining-logo-wrapper::after{content:'';position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0) 70%);transform:skewX(-25deg);animation:logoShineSweep 4.5s infinite ease-in-out;pointer-events:none;}
@keyframes logoShineSweep{0%{left:-150%;}30%{left:150%;}100%{left:150%;}}
@media (max-width:768px){.shining-logo{max-height:75px;}.shining-logo-wrapper{margin-bottom:14px;padding:4px 8px;}}
@media (max-width:992px){.vision-mission-grid{grid-template-columns:1fr;gap:24px;}.vm-card{padding:36px 28px;}}
@media (max-width:768px){.who-we-are-intro{text-align:left;}.lead-text{font-size:16px;}.vm-title{font-size:20px !important;}}

.vm-column{display:flex;flex-direction:column;gap:16px;}
.vm-top-header{display:flex;align-items:center;gap:14px;margin-bottom:4px;padding-left:4px;}
.vm-icon-blue{width:46px;height:46px;background:rgba(0,147,244,0.12);border:1.5px solid rgba(0,147,244,0.35);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(0,147,244,0.1);}
.vm-icon-blue svg,.vm-icon-blue img{width:24px;height:24px;object-fit:contain;}
.vm-top-title{font-size:22px;font-weight:700;color:var(--primary-blue);letter-spacing:1px;margin:0;}
.vm-sub-title{font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.3;}
.vm-vision .vm-sub-title{color:#FFFFFF;}
.vm-mission .vm-sub-title{color:var(--primary-blue);}
@media (max-width:768px){
    .vm-top-header{gap:12px;}
    .vm-icon-blue{width:40px;height:40px;border-radius:10px;}
    .vm-icon-blue svg,.vm-icon-blue img{width:20px;height:20px;}
    .vm-top-title{font-size:18px;}
    .vm-sub-title{font-size:18px;}
}

/* ==========================================================================
   7. INNER PAGE CONTENT, BRANDS & FORM LAYOUTS
   ========================================================================== */
/* Page Banner & Breadcrumbs */
.page-banner{background:linear-gradient(135deg,#0A3D91 0%,#051F4A 100%);color:#FFFFFF;padding:70px 0;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.1);}
.banner-content{max-width:800px;}
.breadcrumbs{display:flex;align-items:center;gap:10px;list-style:none;margin-bottom:16px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#0093f4;}
.breadcrumbs a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color 0.3s ease;}
.breadcrumbs a:hover{color:#FFFFFF;}
.banner-title-wrapper{border-left:5px solid var(--accent-orange);padding-left:20px;margin-bottom:16px;}
.banner-title-wrapper h1{font-size:42px;font-weight:700;color:#FFFFFF;line-height:1.1;letter-spacing:-0.5px;}
.banner-desc{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.6;padding-left:25px;margin:0;}

/* Inner Content & Service Detail Cards */
.inner-grid-2,.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
.inner-text-block h2,.contact-info-panel h2{font-size:32px;color:var(--text-dark);margin-bottom:16px;line-height:1.3;}
.inner-text-block p,.contact-sub{color:var(--text-muted);line-height:1.7;margin-bottom:16px;font-size:16px;}
.inner-highlight-box,.investor-cta-box{background-color:#F0F4FA;border:1px solid #EAEFF5;padding:36px;border-radius:8px;border-top:4px solid var(--accent-orange);}
.inner-highlight-box h3,.investor-cta-box h3{color:var(--primary-blue);font-size:20px;margin-bottom:12px;}
.inner-highlight-box p,.investor-cta-box p{color:var(--text-muted);line-height:1.6;font-size:15px;}
.inner-divider{border:0;height:1px;background-color:#DCE4F0;margin:24px 0;}
.services-list-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.service-detail-card{background:var(--bg-white);border:1px solid #F0F4FA;padding:36px 32px;border-radius:16px;display:grid;grid-template-columns:84px 1fr;column-gap:24px;box-shadow:5px 0 20px -5px rgba(255,107,0,0.3),0 12px 20px -5px rgba(130,145,160,0.35),0 4px 12px rgba(0,0,0,0.03);scroll-margin-top:100px;transition:box-shadow 0.3s ease;}
.service-detail-content h3{font-size:22px;color:var(--primary-blue);margin-bottom:12px;}
.service-detail-content p{color:var(--text-muted);line-height:1.7;font-size:15px;margin:0;}

/* Opportunity Cards & Investor Benefits */
.opportunity-card{display:flex;flex-direction:column;padding:32px 24px;grid-template-columns:1fr;}
.opportunity-card h3,.opportunity-card p{grid-column:auto;grid-row:auto;}
.opportunity-card h3{margin-bottom:12px;}
.opportunity-card p{margin-bottom:24px;flex-grow:1;}
.opp-badge{display:inline-block;width:fit-content;background-color:#E8F1FC;color:var(--primary-blue);font-size:12px;font-weight:700;padding:6px 12px;border-radius:4px;margin-bottom:16px;letter-spacing:0.5px;}
.opp-btn{margin-top:auto;width:fit-content;align-self:flex-start;}
.investor-benefits-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:16px;}
.investor-benefits-list li{position:relative;padding-left:24px;color:var(--text-muted);line-height:1.6;}
.investor-benefits-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent-orange);font-weight:700;}

/* Contact Details & Forms */
.contact-details-list{display:flex;flex-direction:column;gap:24px;margin-top:32px;}
.contact-detail-item{display:flex;align-items:center;gap:18px;}
.contact-icon-large{width:56px;height:56px;background-color:var(--primary-blue);border-radius:50%;padding:14px;object-fit:contain;flex-shrink:0;border:1px solid #EAEFF5;transition:all 0.3s ease;}
.contact-detail-item:hover .contact-icon-large{transform:scale(1.08);border-color:var(--accent-orange);box-shadow:0 8px 16px rgba(255,107,0,0.15);}
.contact-detail-item h4{font-size:14px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
.contact-detail-item p{font-size:18px;color:var(--primary-blue);font-weight:600;margin:0;}
.contact-form-panel{background:var(--bg-white);border:1px solid #EAEFF5;padding:40px;border-radius:8px;box-shadow:0 15px 30px rgba(0,0,0,0.05);}
.contact-form-panel h3{font-size:24px;color:var(--primary-blue);margin-bottom:24px;}
.contact-form{display:flex;flex-direction:column;gap:20px;}
.contact-detail-item a{color:var(--primary-blue);text-decoration:none;transition:color 0.3s ease;}
.contact-detail-item a:hover{color:#083275;text-decoration:underline;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{font-size:14px;font-weight:600;color:var(--text-dark);}
.form-group input,.form-group select,.form-group textarea{padding:14px 16px;border:1px solid #DCE4F0;border-radius:6px;font-family:var(--font-main);font-size:15px;color:var(--text-dark);background-color:#FAFAFA;transition:border-color 0.3s ease,box-shadow 0.3s ease;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(10,61,145,0.1);background-color:#FFFFFF;}
.form-submit-btn{width:100%;justify-content:center;margin-top:8px;border:none;cursor:pointer;}

/* Brands & Collaborations Section */
.brands-section{background-color:#F0F4FA;padding:60px 0;margin:80px 0;border-top:1px solid #EAEFF5;border-bottom:1px solid #EAEFF5;}
.brands-container{max-width:1400px;margin:0 auto;padding:0 24px;text-align:center;}
.brands-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 32px;max-width:100%;margin:0 auto;}
.brand-item{width:180px;height:90px;display:flex;align-items:center;justify-content:center;padding:12px;background:var(--bg-white);border-radius:8px;border:1px solid #EAEFF5;box-shadow:0 4px 10px rgba(0,0,0,0.03);transition:all 0.3s ease;}
.brand-item img{max-height:100%;max-width:100%;object-fit:contain;transition:transform 0.3s ease;}
.brand-item:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(10,61,145,0.1);border-color:var(--primary-blue);}
.brand-item:hover img{transform:scale(1.06);}
@media (max-width:768px){.brands-grid{gap:16px;}.brand-item{width:140px;height:75px;}}

/* ==========================================================================
   8. GLOBAL SEPARATE FOOTER STYLING (BALANCED 4-COLUMN LAYOUT)
   ========================================================================== */
.site-footer{background-color:var(--primary-blue);color:#FFFFFF;font-size:14px;}
.footer-top{padding:60px 0;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-container{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.2fr;gap:40px;align-items:start;}
.footer-logo-area{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;width:fit-content;}
.footer-logo{height:165px;width:auto;margin-bottom:8px;}
.logo-text-white{color:#FFFFFF;font-weight:700;letter-spacing:1.5px;font-size:12px;}
.footer-col h3{font-size:16px;font-weight:600;margin-bottom:20px;position:relative;color:#FFFFFF;}
.footer-links-grid{display:flex;flex-direction:column;gap:14px;list-style:none;}
.footer-links-grid a{color:rgba(255,255,255,0.8);text-decoration:none;transition:color 0.3s;}
.footer-links-grid a:hover{color:#FFFFFF;text-decoration:underline;}
.footer-contact-list{list-style:none;display:flex;flex-direction:column;gap:14px;color:rgba(255,255,255,0.8);}
.footer-contact-list li{display:flex;align-items:center;}
.contact-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0;margin-right:10px;}
.footer-contact-list a{color:rgba(255,255,255,0.8);text-decoration:none;transition:color 0.3s ease;}
.footer-contact-list a:hover{color:#FFFFFF;text-decoration:underline;}
.footer-bottom{background-color:#062863;padding:20px 0;color:rgba(255,255,255,0.6);}
.bottom-flex{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-socials{display:flex;align-items:center;gap:16px;}
.social-icon{display:inline-flex;width:24px;height:24px;text-decoration:none;transition:transform 0.3s ease;}
.social-icon img{width:100%;height:100%;object-fit:contain;}
.social-icon:hover{transform:translateY(-2px);}

/* ==========================================================================
   SCROLL-TRIGGERED BOX ANIMATIONS
   ========================================================================== */
.scroll-animate{opacity:0;transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);will-change:opacity,transform;}
.scroll-animate.fade-up{transform:translateY(40px);}
.scroll-animate.fade-in{transform:translateY(0);}
.scroll-animate.zoom-in{transform:scale(0.92);}
.scroll-animate.slide-left{transform:translateX(-40px);}
.scroll-animate.slide-right{transform:translateX(40px);}
.scroll-animate.show{opacity:1;transform:translateY(0) translateX(0) scale(1);}
.delay-1{transition-delay:0.15s;}
.delay-2{transition-delay:0.30s;}
.delay-3{transition-delay:0.45s;}
@media (prefers-reduced-motion:reduce){.scroll-animate{opacity:1 !important;transform:none !important;transition:none !important;}}

/* ==========================================================================
   9. GLOBAL RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width:992px){
    .hero-container{grid-template-columns:1fr;}
    .hero-content{padding:40px 24px;text-align:center;}
    .hero-buttons{justify-content:center;}
    .hero-logo{margin:0 auto 24px auto;}
    .services-grid,.features-grid,.footer-container{grid-template-columns:repeat(2,1fr);gap:32px;}
    .brand-logo-col,.brand-desc-col{grid-column:span 1;}
    .inner-grid-2,.contact-grid{grid-template-columns:1fr;gap:32px;}
    .service-detail-card{grid-template-columns:1fr;gap:16px;}
    .service-detail-card .card-icon{margin-bottom:0;}
    .form-grid-2{grid-template-columns:1fr;}
}
@media (max-width:768px){
    .mobile-toggle{display:flex;}
    .desktop-only-cta{display:none;}
    .mobile-only-cta{display:block;width:100%;margin-top:16px;}
    .mobile-only-cta .btn-cta{width:100%;justify-content:center;}
    .main-navigation{position:absolute;top:100%;left:0;width:100%;background-color:var(--bg-white);box-shadow:0 10px 20px rgba(0,0,0,0.08);padding:0 24px;max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;flex-direction:column;align-items:flex-start;}
    .main-navigation.open{max-height:500px;padding:20px 24px 30px 24px;}
    .nav-links{flex-direction:column;width:100%;gap:16px;}
    .nav-item{display:block;width:100%;padding:10px 0;border-bottom:1px solid #F0F4FA;}
    .nav-item.active::after{bottom:0;width:50px;}
    .nav-dropdown-parent{flex-direction:column;align-items:flex-start;width:100%;}
    .nav-dropdown-menu{position:static;box-shadow:none;border:none;border-left:2px solid var(--accent-orange);border-radius:0;padding:0 0 0 12px;opacity:1;visibility:visible;transform:none;width:100%;display:none;margin-top:8px;}
    .nav-dropdown-parent:hover .nav-dropdown-menu{display:block;}
    .nav-dropdown-menu a{padding:8px 12px;}
    .hero-title{font-size:32px;}
    .hero-subtitle{font-size:18px;}
    .services-grid,.features-grid,.footer-container{grid-template-columns:1fr;}
    .brand-logo-col,.brand-desc-col{grid-column:span 1;text-align:center;}
    .footer-logo-area{margin:0 auto;}
    .footer-brand-desc{max-width:100%;margin:0 auto;}
    .footer-links-grid{grid-template-columns:1fr;}
    .services-section,.features-section{margin:50px auto;}
    .features-box{padding:30px 20px;}
    .inner-grid-2,.contact-grid{grid-template-columns:1fr;gap:32px;}
    .service-detail-card{grid-template-columns:1fr;gap:16px;}
    .service-detail-card .card-icon{margin-bottom:0;}
    .form-grid-2{grid-template-columns:1fr;}
}
.auto-slider {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 420px;
    overflow: hidden;

    border: 1px solid #ff7a21;
    border-radius: 18px;
}

.auto-slider__track {
    display: flex;
    width: 300%;
    height: 100%;

    animation: autoSlide 12s infinite;
}

.auto-slider__slide {
    flex: 0 0 33.3333%;
    height: 100%;
}

.auto-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auto-slider__tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;

    padding: 9px 18px;

    color: #ffffff;
    background: #064ca5;
    border-radius: 30px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

@keyframes autoSlide {
    0%,
    28% {
        transform: translateX(0);
    }

    33%,
    61% {
        transform: translateX(-33.3333%);
    }

    66%,
    94% {
        transform: translateX(-66.6666%);
    }

    100% {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .auto-slider {
        height: 300px;
        border-radius: 14px;
    }

    .auto-slider__tag {
        top: 14px;
        left: 14px;
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .auto-slider {
        height: 380px;
    }
}