@charset "UTF-8";

/* ==================================================
   Katheria Group – Premium Corporate & Technology Website CSS

   Template Name: Katheria Group
   Author Name: Sunny Chanda 
   Version: 1.0.0
   License: Copyright Commercial

/**************** TABLE OF CONTENTS *******************

1.  Root Variables & Global Settings
2.  Reset & Base Styles
3.  Utility Classes
4.  Custom Cursor
5.  Header & Navigation
6.  Hero Section
7.  Button Effects
8.  Hero Visual & Globe Animation
9.  Scroll Reveal Animations
10. Custom Scrollbar
11. Heading Reveal Effects
12. Section Layouts
13. Statistics Section
14. Vision Section
15. VISION INFOGRAPHICS SECTION
16. Industries Section
17. Icon Flip Effects
18. Why Choose Us Section
19. Chairman Section
20. Call To Action Section
21. Footer Section
22. Breadcrumb Section
23. Contact Section
24. CONTACT CARD HOVER
25. Responsive Layout (Tablet)
26. Responsive Layout (Mobile)

*****************************************************/

/* =========================================
   1. ROOT VARIABLES & GLOBAL SETTINGS
========================================= */

:root{
    --bg:#000;
    --white:#f5f5f7;
    --text:#b0b0b5;
    --muted:#86868b;
    --gold:#b89a5f;
    --line:rgba(255,255,255,0.08);
    --container:1400px;
    --section-space:180px;
}

/* =========================================
   2. RESET & BASE STYLES
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
    background:var(--bg);
    color:var(--white);
    overflow-x:hidden;
}

/* =========================================
   3. UTILITY CLASSES
========================================= */

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:min(92%, var(--container));
    margin:auto;
}

.text-black {
    color:#000;
}

.mb-20 {
    margin-bottom: 20px;
}

.wid-60 {
    width: 60%;
}

.wid-40 {
    width: 40%;
}

/* =========================================
   4. CUSTOM CURSOR
========================================= */

body {
    cursor: none;
}

.mouseCursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
}

.cursor-inner {
    width: 10px;
    height: 10px;
    background: #c6a654;
    border-radius: 50%;
}

.cursor-outer {
    width: 40px;
    height: 40px;
    border: 1px solid #c6a65473;
    background: #c6a65473;
    border-radius: 50%;
    transition:
        width 0.3s ease,
        height 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

/* Hover Effect */

.cursor-hover {
    width: 70px !important;
    height: 70px !important;
    border-color: #fff;
    background: rgba(198,166,84,0.15);
    backdrop-filter: blur(2px);
}

/* =========================================
   5. HEADER & NAVIGATION
========================================= */

.header{
    position:fixed;
    width:100%;
    top:0;
    z-index:999;
    backdrop-filter:blur(20px);
    background:rgba(0,0,0,0.75);
    border-bottom:1px solid rgba(255,255,255,0.04);
}

.nav-container{
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{
    width:200px;
}

.nav{
    display:flex;
    gap:42px;
}

.nav a{
    color:#c7c7cc;
    transition:0.3s;
}

.nav a:hover{
    color:white;
}

.menu-btn{
    display:none;
    font-size:2rem;
    cursor:pointer;
}

.mobile-menu{
    display:none;
}

/* =========================================
   6. HERO SECTION
========================================= */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.hero-bg-grid{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:80px 80px;
}

.hero-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}

.eyebrow{
    display:block;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:20px;
    font-size:0.75rem;
}

.dark{
    color:#8f6e35;
}

.hero h1{
    font-size:4.8rem;
    line-height:0.95;
    letter-spacing:-3px;
    margin-bottom:40px;
}

.hero p{
    color:var(--text);
    font-size:1.2rem;
    line-height:1.9;
    margin-bottom:48px;
    max-width:700px;
}

.hero-buttons{
    display:flex;
    gap:18px;
}

/* =========================================
   7. BUTTON EFFECTS
========================================= */

.btn{
    position: relative;
    overflow: hidden;
    height: 58px;
    padding: 0 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform .4s cubic-bezier(.23,1,.32,1),
        box-shadow .4s ease,
        color .4s ease;
    z-index: 1;
}

/* Glow Border */
.btn::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:linear-gradient(
        120deg,
        rgba(198,166,84,.2),
        rgba(198,166,84,.9),
        rgba(255,255,255,.2),
        rgba(198,166,84,.9)
    );
    background-size:300% 300%;
    opacity:0;
    z-index:-2;
    transition:.4s;
    animation:borderMove 4s linear infinite;
}

/* Background Layer */
.btn::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:inherit;
    background:#0f0f10;
    z-index:-1;
}

/* Light Sweep */
.btn span{
    position:relative;
    z-index:2;
}

.btn span::before{
    content:"";
    position:absolute;
    top:-30px;
    left:-100%;
    width:60px;
    height:140px;
    background:rgba(255,255,255,.25);
    transform:rotate(25deg);
    filter:blur(8px);
    transition:1s;
}

.btn:hover span::before{
    left:180%;
}

/* Hover */
.btn:hover{
    transform:translateY(-5px) scale(1.05);
    box-shadow:
        0 10px 30px rgba(198,166,84,.25),
        0 0 40px rgba(198,166,84,.15);
}

.btn:hover::before{
    opacity:1;
}

.btn-primary{
    background:#c6a654;
    color:#000;
}

.btn-primary::after{
    background:#c6a654;
}

.btn-primary:hover{
    animation:pulseGlow 1.5s infinite;
}

@keyframes pulseGlow{
    0%,100%{
        box-shadow:
        0 0 20px rgba(198,166,84,.4);
    }
    50%{
        box-shadow:
        0 0 45px rgba(198,166,84,.8);
    }
}

.btn-secondary{
    color:#fff;
    border:1px solid rgba(255,255,255,0.1);
}

@keyframes borderMove{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:300% 50%;
    }
}

/* =========================================
   8. HERO VISUAL & GLOBE ANIMATION
========================================= */

.hero-visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:650px;
}

.earth{
    position:relative;
    width:480px;
    height:480px;
    border-radius:50%;
    overflow:hidden;
    z-index:2;
    animation: earthFloat 8s ease-in-out infinite;
    background:
    radial-gradient( circle at 30% 30%, rgba(198,166,84,.14), rgba(198,166,84,.03) 40%, rgba(0,0,0,.7) 100%);
    box-shadow:
        inset -50px -30px 100px rgba(0,0,0,.9),
        inset 15px 10px 20px rgba(198,166,84,.08),
        0 0 60px rgba(198,166,84,.15),
        0 0 200px rgba(198,166,84,.08);
}

/* WORLD MAP ROTATION */

.map-track{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    display:flex;
    animation: earthRotate 35s linear infinite;
}

.map-track img{
    height:100%;
    width:auto;
    flex-shrink:0;
    opacity:.95;
    filter:
        brightness(0)
        sepia(1)
        saturate(10)
        hue-rotate(5deg)
        brightness(1.7)
        contrast(1.2);
}

/* LIGHT REFLECTION */

.highlight{
    position:absolute;
    top:70px;
    left:85px;
    width:120px;
    height:120px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
    filter:blur(25px);
    pointer-events:none;
}

/* SHADOWS */

.shadow-layer{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 40%),
        radial-gradient(circle at 85% 50%, rgba(0,0,0,0), rgba(0,0,0,.55) 60%, rgba(0,0,0,.95) 100%);
}

/* OUTER RINGS */

.earth::before{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;
    background: conic-gradient(from 0deg, rgb(198 166 84 / 44%), rgb(198 166 84 / 68%), rgb(198 166 84 / 45%), #c6a65469, rgb(198 166 84 / 44%));
    animation: ringSpin 12s linear infinite;
}

.earth::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:1px solid rgba(198,166,84,.25);
    box-shadow:
        0 0 20px rgba(198,166,84,.5),
        0 0 80px rgba(198,166,84,.25);
}

/* HERO GLOW */

.hero-visual::before{
    content:"";
    position:absolute;
    width:800px;
    height:800px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(198,166,84,.12), transparent 70%);
     filter:blur(80px);
    animation:glowPulse 8s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes earthRotate{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-33.333%);
    }
}

@keyframes ringSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes earthFloat{
    0%,100%{
        transform:
        translateY(0)
        rotate(-2deg);
    }
    50%{
        transform:
        translateY(-18px)
        rotate(2deg);
    }
}

@keyframes glowPulse{
    0%,100%{
        transform:scale(1);
        opacity:.7;
    }
    50%{
        transform:scale(1.15);
        opacity:1;
    }
}

/* =========================================
   9. SCROLL REVEAL ANIMATIONS
========================================= */

.reveal-text,
.reveal-card,
.reveal-image,
.slide-left,
.slide-right{
    opacity:0;
    transition:
        transform 1s cubic-bezier(.23,1,.32,1),
        opacity 1s ease;
}

/* Text */

.reveal-text{
    opacity:0;
    transform:translateY(60px);
    filter:blur(8px);
}

.reveal-text.reveal-active{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

/* Cards */

.reveal-card{
    transform:translateY(80px);
    transition-delay:var(--delay);
}

/* Images */

.reveal-image{
    transform:scale(.85);
}

/* Side reveal */

.slide-left{
    transform:translateX(-100px);
}

.slide-right{
    transform:translateX(100px);
}

/* Active */

.reveal-active{
    opacity:1;
    transform:none;
}

.hero-content > *{
    opacity:0;
    transform:translateY(50px);
    animation:heroReveal 1s forwards;
}

.hero-content > *:nth-child(1){
    animation-delay:.2s;
}

.hero-content > *:nth-child(2){
    animation-delay:.4s;
}

.hero-content > *:nth-child(3){
    animation-delay:.6s;
}

.hero-content > *:nth-child(4){
    animation-delay:.8s;
}

@keyframes heroReveal{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================================
   10. CUSTOM SCROLLBAR
========================================= */

/* Chrome, Edge, Safari, Opera */

::-webkit-scrollbar{
    width:12px;
}

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

::-webkit-scrollbar-thumb{
    border-radius:100px;
    border:2px solid #050505;
    background:linear-gradient(180deg, #c6a654, #e8d4a0, #c6a654);
    background-size:100% 300%;
    animation:scrollbarGlow 4s linear infinite;
    transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

::-webkit-scrollbar-thumb:hover{
    box-shadow:
        0 0 15px rgba(198,166,84,.8),
        0 0 30px rgba(198,166,84,.5);
    transform:scale(1.1);
}

::-webkit-scrollbar-corner{
    background:#050505;
}

/* Firefox */

html{
    scrollbar-width:thin;
    scrollbar-color:
    #c6a654
    #050505;
}

/* Animated Gradient */

@keyframes scrollbarGlow{

    0%{
        background-position:0% 0%;
    }

    100%{
        background-position:0% 300%;
    }

}

::-webkit-scrollbar-thumb{
    background:
    linear-gradient(180deg, #8f6e35, #c6a654, #f4e2b3, #c6a654, #8f6e35);
    background-size:100% 400%;
    animation: scrollbarGlow 5s linear infinite;
    box-shadow: 0 0 10px rgba(198,166,84,.3);
}

/* =========================================
   11. HEADING REVEAL EFFECTS
========================================= */

.reveal-title{
    overflow:hidden;
}

.reveal-title .word{
    display:inline-block;
    opacity:0;
    transform:translateY(120%);
    filter:blur(10px);
}

.reveal-title.active .word{
    animation:wordReveal .9s cubic-bezier(.23,1,.32,1) forwards;
}

@keyframes wordReveal{

    0%{
        opacity:0;
        transform:translateY(120%);
        filter:blur(10px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }

}

/* =========================================
   12. SECTION LAYOUTS
========================================= */

.section{
    padding:var(--section-space) 0;
}

.section-light{
    background:#f5f5f7;
}

.split-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:120px;
}

.section-title{
    font-size:5rem;
    line-height:0.95;
    letter-spacing:-4px;
    margin-bottom:36px;
}

.dark-text{
    color:#444;
}

.section-text{
    font-size:1.15rem;
    line-height:1.9;
    font-weight: 400;
    max-width:780px;
}

/* =========================================
   13. STATISTICS SECTION
========================================= */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:60px;
}

.stat-card{
    padding:34px;
    background:white;
    border-radius:24px;
    color: #000;
    box-shadow: -3px -3px 0 0 #ddd7d7;
}

.stat-card:hover {
    box-shadow: 3px 3px 0 0 #c6a654;
}

.stat-card h3{
    margin-bottom:12px;
}

/* =========================================
   14. VISION SECTION
========================================= */

.fixed-img{
    right: 90px;
    position: absolute;
    margin-top: -700px;
    width: 500px;
}

.high-quote {
    padding: 20px;
    margin-top: 100px;
    border-left: 2px solid #c6a654;
    color: #c6a654;
    font-size: 28px;
    font-style: italic;
}

.socials {
    border-top: 1px solid #c6a654;
    border-bottom: 1px solid #c6a654;
    margin-top: 20px;
    display: flex;
    padding: 10px;
    width: 170px;
}

.socials a img {
    width: auto;
    height: 25px;
    padding-left: 5px;
    padding-right: 5px;
}

.vision-diagram{
    display:flex;
    gap:24px;
    margin-top:70px;
    flex-wrap:wrap;
}

.vision-node{
    width:180px;
    height:180px;
    border-radius:50%;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================================
   15. VISION INFOGRAPHICS SECTION
========================================= */

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.values-wrapper{
    margin-top: 7rem;
    position:relative;
    width:470px;
    height:470px;
}

.value-box{
    position:absolute;
    width:230px;
    height:230px;
    background:#fff;
    border:8px solid #d2d2d2a8;
    border-radius:45px;
    padding:30px;
    color:#d2af4c;
    transition:.4s ease;
}

.value-box:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.15);
    border:8px solid #c6a654;
}

.value-box i{
    font-size:50px;
    margin-bottom:45px;
}

.value-box h3{
    font-size:20px;
    font-weight:700;
}

.top-left{
    top:0;
    left:0;
    text-align: left;
}

.top-right{
    top:0;
    right:0;
    text-align: right;
}

.bottom-left{
    bottom:0;
    left:0;
    text-align: left;
}

.bottom-right{
    bottom:0;
    right:0;
    text-align: right;
}

.center-circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:180px;
    height:180px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #c79f2f 0%,
        #f4df91 50%,
        #c79f2f 100%
    );
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.center-circle::before{
    content:"";
    width:150px;
    height:150px;
    background:#fff;
    border-radius:50%;
    position:absolute;
}

.center-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#c79f2f;
}

.center-content h2{
    font-size:24px;
    line-height:1.2;
    font-weight:700;
}

@media(max-width:600px){

    .values-wrapper{
        width:350px;
        height:350px;
    }

    .value-box{
        width:165px;
        height:165px;
        padding:20px;
        border-width:6px;
        border-radius:30px;
    }

    .value-box i{
        font-size:32px;
        margin-bottom:25px;
    }

    .value-box h3{
        font-size:13px;
    }

    .center-circle{
        width:135px;
        height:135px;
    }

    .center-circle::before{
        width:105px;
        height:105px;
    }

    .center-content h2{
        font-size:17px;
    }
}


/* =========================================
   16. INDUSTRIES SECTION
========================================= */

.industries-image{
    height:500px;
    object-fit:cover;
    border-radius:34px;
    margin:60px 0;
}

.industries-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.industry-card{
    padding: 15px 38px;
    border-radius:28px;
    background:white;
    text-align: center;
}

.industry-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(184,154,95,0.12);
    margin-bottom:24px;
}

/* =========================================
   17. ICON FLIP EFFECTS
========================================= */

.icon-wrap{
    position:relative;
    width:250px;
    height:200px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1000px;
}

.icon-wrap:hover .flip-icon{
    transform:rotateY(180deg) scale(1.15);
}

.icon-wrap::before{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(198,166,84,.25),
        transparent 70%
    );
    transform:scale(.5);
    opacity:0;
    transition:.5s;
}

.flip-icon{
    width:120px;
    height:120px;
    object-fit:contain;
    transition:
        transform .8s cubic-bezier(.23,1,.32,1),
        filter .5s ease;
    transform-style:preserve-3d;
}

.industry-card:hover .flip-icon{
    transform:
        rotateY(180deg)
        translateY(-6px)
        scale(1.15);
    filter:
        drop-shadow(0 0 25px rgba(198,166,84,.8));
}

.industry-card{
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.industry-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.15);
}

.industry-card:hover .flip-icon,
.why-card:hover .flip-icon,
.stat-card:hover .flip-icon{
    transform:
        rotateY(180deg)
        scale(1.15);
    filter:
        drop-shadow(0 0 20px rgba(198,166,84,.7));
}

.industry-card:hover .flip-icon{
    animation:iconFlip .9s ease forwards;
}

.industry-card:hover .icon-wrap::before{
    opacity:1;
    transform:scale(1.4);
}

@keyframes iconFlip{

    0%{
        transform:rotateY(0deg);
    }

    50%{
        transform:
            rotateY(90deg)
            scale(1.2);
    }

    100%{
        transform:
            rotateY(180deg)
            scale(1.1);
    }
}

/* =========================================
   18. WHY CHOOSE US SECTION
========================================= */

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

.why-card{
    padding:50px;
    border-radius:30px;
    background:#0f0f10;
    border:1px solid rgba(255,255,255,0.06);
}

.why-card h3{
    margin-bottom:18px;
}

.why-animation-img {
    margin-bottom: 30px;
    border-radius: 50%;
    background-color: #000;
    width: 120px;
}

.why-animation-img img {
    padding: 30px;
}

.why-card:hover {
    border-bottom: 3px solid #c6a654;
    border-right: 1px solid #c6a654;
}

.why-card:hover .why-animation-img {
    background-color: #ffffff33;
    animation:pulseGloww 1.5s infinite;
}

@keyframes pulseGloww{
    0%,100%{
        box-shadow:
        0 0 20px #ffffff33;
    }
    50%{
        box-shadow:
        0 0 45px #ffffff70;
    }
}

/* =========================================
   19. CHAIRMAN SECTION
========================================= */

.chairman-image{
    height:650px;
    object-fit:cover;
    border-radius:36px;
    margin-bottom:70px;
    filter:grayscale(100%);
}

.signature{
    margin-top:50px;
}

.signature span{
    color:var(--muted);
}

/* =========================================
   20. CALL TO ACTION SECTION
========================================= */

.cta{
    padding:180px 0;
    text-align:center;
}

.center{
    margin-inline:auto;
    margin-bottom:50px;
}

/* =========================================
   21. FOOTER SECTION
========================================= */

.footer{
    padding:100px 0 40px;
    border-top:1px solid rgba(255,255,255,0.05);
}

.footer-container{
    display:flex;
    justify-content:space-between;
    gap:80px;
}

.footer-title{
    font-size:2rem;
    line-height:1.3;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(2,160px);
    gap:18px;
}

/* =========================================
   22. BREADCRUMB SECTION
========================================= */

.breadcrumb-section{
    background:#04060b;
    color:#fff;
    padding:140px 0 80px;
    text-align:center;
    position:relative;
}

.breadcrumb-section h1{
    font-size:52px;
    margin:15px 0;
}

.breadcrumb{
    margin:20px 0;
    display:flex;
    justify-content:center;
    gap:10px;
    font-size:14px;
}

.breadcrumb a{
    color:#c6a654;
    text-decoration:none;
}

.breadcrumb-content p{
    max-width:700px;
    margin:auto;
    color:#d1d5db;
}

.breadcrumb-content > *{

    opacity:0;

    transform:translateY(40px);

    animation:breadcrumbReveal 1s forwards;
}

.breadcrumb-content > *:nth-child(1){
    animation-delay:.2s;
}

.breadcrumb-content > *:nth-child(2){
    animation-delay:.4s;
}

.breadcrumb-content > *:nth-child(3){
    animation-delay:.6s;
}

@keyframes breadcrumbReveal{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================================
   23. CONTACT SECTION
========================================= */

.contact-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:start;
}

.contact-form{
    margin-top:30px;
}

.form-group{
    margin-bottom:18px;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:15px 18px;
    border:1px solid #dcdcdc;
    border-radius:8px;
    font-size:15px;
    outline:none;
    transition:
        border-color .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#c6a654;
    box-shadow: 0 0 20px rgba(198,166,84,.15);
    transform: translateY(-2px);
}

.form-group textarea{
    resize:none;
}

.contact-card{
    background:#fff;
    padding:22px;
    border-radius:12px;
    margin-top:18px;
    box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

.contact-card h3{
    margin-bottom:10px;
    color:#111827;
}

.contact-card p{
    color:#4b5563;
    line-height:1.8;
}

.contact-card a{
    color:#c6a654;
    text-decoration:none;
}

.map-section iframe{
    display:block;
}

/* =========================================
   24. CONTACT CARD HOVER
========================================= */

.contact-card{
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.contact-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);
}

/* =========================================
   25. RESPONSIVE LAYOUT (TABLET)
========================================= */

@media(max-width:1100px){
    .cursor-inner,
    .cursor-outer {
        display: none;
    }

    body {
        cursor: auto;
    }
    
    .contact-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .breadcrumb-section h1{
        font-size:38px;
    }
    
    .hero-container,
    .split-layout{
        grid-template-columns:1fr;
    }

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

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

    .hero h1{
        font-size:5rem;
    }
    
    .wid-60 {
        width: 100%;
    }
    
    .wid-40 {
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .flex-container {
        display: block;
    }
    
}

/* =========================================
   26. RESPONSIVE LAYOUT (MOBILE)
========================================= */

@media(max-width:768px){

    :root{
        --section-space:100px;
    }

    .nav{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    .mobile-menu{
        position:fixed;
        top:88px;
        width:100%;
        background:#0f0f10;
        display:flex;
        flex-direction:column;
        padding:30px;
        gap:20px;
        transform:translateY(-150%);
        transition:0.4s;
        z-index:999;
    }

    .mobile-menu.active{
        transform:translateY(0);
    }

    .hero{
        padding-top:180px;
        min-height:auto;
    }

    .hero h1{
        font-size:3.5rem;
        letter-spacing:-2px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .industries-grid,
    .why-grid{
        grid-template-columns:1fr;
    }

    .section-title{
        font-size:2.8rem;
    }

    .footer-container{
        flex-direction:column;
    }

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

    .chairman-image{
        height:400px;
    }
  
    .fixed-img{
        margin-top: 0px;
        left: 0;
        right: 0;
        position: relative;
        width: 100%;
    }
    .hero-visual{
        height:350px;
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-bottom: 3rem;
        margin-left: 0.3rem;
    }
    
    .hero-visual::before{
        width:350px;
        height:350px;
    }
    
    .earth{
        width:300px;
        height:300px;
    }
}