/*=====================================================
  MUDHAI INSTRUMENT SERVICES
  HOME PAGE
  PART 1A - HERO SECTION
======================================================*/


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

.hero-section{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:140px 0 100px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #050816 0%,
        #07111d 45%,
        #0f172a 100%
    );
    min-height:auto;

    padding:110px 0 60px;

}


/*=====================================================
  HERO OVERLAY
======================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top left,
            rgba(0,212,255,.12),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(0,255,153,.10),
            transparent 40%
        );

    pointer-events:none;

    z-index:1;

}


/*=====================================================
  HERO GLOW EFFECT
======================================================*/

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    animation:heroFloat 10s ease-in-out infinite;

    z-index:1;

}

.glow-1{

    width:420px;

    height:420px;

    top:-150px;

    left:-120px;

    background:rgba(0,212,255,.14);

}

.glow-2{

    width:340px;

    height:340px;

    right:-120px;

    bottom:-120px;

    background:rgba(0,255,153,.10);

    animation-delay:3s;

}


/*=====================================================
  HERO CONTAINER
======================================================*/

.hero-section .container{

    position:relative;

    z-index:5;

}


/*=====================================================
  HERO BADGE
======================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 28px;

    margin-bottom:30px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    color:var(--primary);

    font-size:.95rem;

    font-weight:600;

}


/*=====================================================
  HERO TITLE
======================================================*/

.hero-title{

    margin-bottom:28px;

    color:#ffffff;

    font-size:clamp(2.2rem,6vw,4.8rem);

    font-weight:900;

    line-height:1.15;

    letter-spacing:-1px;

    word-break:normal;

    overflow-wrap:break-word;

}
/*=====================================================
  HERO TITLE RESPONSIVE
======================================================*/

@media (max-width:1200px){

    .hero-title{

        font-size:4rem;

    }

}

@media (max-width:992px){

    .hero-title{

        font-size:3.5rem;

        line-height:1.2;

    }

}

@media (max-width:768px){

    .hero-title{

        font-size:2.8rem;

        line-height:1.25;

        text-align:center;

    }

}

@media (max-width:576px){

    .hero-title{

        font-size:2.2rem;

        line-height:1.3;

        letter-spacing:-0.5px;

        text-align:center;

    }

}

@media (max-width:400px){

    .hero-title{

        font-size:1.9rem;

        line-height:1.35;

    }

}


/*=====================================================
  GRADIENT TEXT
======================================================*/

.gradient-text{

    color:var(--primary);

}

.gradient-text-green{

    color:var(--secondary);

}


/*=====================================================
  HERO DESCRIPTION
======================================================*/

.hero-description{

    max-width:650px;

    margin-bottom:35px;

    color:rgba(255,255,255,.82);

    font-size:1.1rem;

    line-height:2;

}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.hero-btn{

    min-width:190px;

    padding:15px 30px;

    border-radius:14px;

    font-weight:600;

}

.hero-btn.btn-primary{

    background:var(--primary);

    border:none;

    color:#000;

}

.hero-btn.btn-primary:hover{

    background:var(--primary-dark);

}

.hero-btn.btn-outline-light{

    border:2px solid rgba(255,255,255,.35);

}

.hero-btn.btn-outline-light:hover{

    background:#ffffff;

    color:#050816;

}


/*=====================================================
  HERO FLOAT ANIMATION
======================================================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}
/*=====================================================
  HOME PAGE
  PART 1B - HERO STATS & HERO CARD
======================================================*/


/*=====================================================
  HERO STATISTICS
======================================================*/
.hero-stats{
    display:flex;
    gap:24px;
    flex-wrap:wrap;
    margin-top:50px;
}

.stat-box{
    flex:1;
    min-width:180px;
    padding:24px;
    border-radius:18px;
    text-align:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(20px);
    transition:all .35s ease;
}

.stat-box:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
    box-shadow:0 15px 35px rgba(0,212,255,.20);
}

.stat-icon{
    width:60px;
    height:60px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,212,255,.15);
    color:var(--primary);
    font-size:24px;
}

.stat-box h3{
    color:#ffffff;
    font-size:2rem;
    font-weight:700;
    margin-bottom:8px;
}

.stat-box p{
    margin:0;
    color:rgba(255,255,255,.75);
    font-size:15px;
    line-height:1.6;
}

@media (max-width:768px){

    .hero-stats{
        justify-content:center;
    }

    .stat-box{
        width:100%;
        max-width:260px;
    }

}

/*=====================================================
  HERO IMAGE WRAPPER
======================================================*/

.hero-image-wrapper{

    position:relative;

    width:100%;

    height:620px;
    

}


/*=====================================================
  MAIN GLASS CARD
======================================================*/

.glass-main-card{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:340px;

    padding:45px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    box-shadow:0 25px 60px rgba(0,0,0,.30);

    transition:all .35s ease;

}

.glass-main-card:hover{

    transform:translate(-50%,-55%);

    border-color:var(--primary);

    box-shadow:0 25px 60px rgba(0,212,255,.18);

}


/*=====================================================
  COMPANY LOGO
======================================================*/

.company-logo{

    width:110px;

    height:110px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,212,255,.12);

    border:2px solid rgba(0,212,255,.20);

}

.company-logo i{

    font-size:3rem;

    color:var(--primary);

}

.glass-main-card h3{

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.8rem;

    font-weight:700;

}

.glass-main-card p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}


/*=====================================================
  FLOATING CARDS
======================================================*/

.floating-card{

    position:absolute;

    width:180px;

    min-height:180px;

    padding:25px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    border-radius:24px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

    transition:all .35s ease;

}

.floating-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,212,255,.18);

}

.floating-card i{

    margin-bottom:16px;

    color:var(--primary);

    font-size:2.4rem;

}

.floating-card h5{

    margin-bottom:8px;

    color:#ffffff;

    font-size:1.1rem;

    font-weight:700;

}

.floating-card small{

    color:rgba(255,255,255,.72);

}


/*=====================================================
  FLOATING CARD POSITIONS
======================================================*/

.card-1{

    top:20px;

    left:0;

}

.card-2{

    top:60px;

    right:0;

}

.card-3{

    left:30px;

    bottom:30px;

}

.card-4{

    right:40px;

    bottom:0;

}


/*=====================================================
  FLOATING ANIMATION
======================================================*/

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.floating-card{

    animation:floating 6s ease-in-out infinite;

}

.card-2{

    animation-delay:1.5s;

}

.card-3{

    animation-delay:3s;

}

.card-4{

    animation-delay:4.5s;

}
/*=====================================================
  HOME PAGE
  PART 2 - ABOUT PREVIEW
======================================================*/


/*=====================================================
  ABOUT PREVIEW SECTION
======================================================*/

.about-preview-section{

    position:relative;

    padding:40px 0;

}


/*=====================================================
  ABOUT CARD
======================================================*/

.about-card{

    padding:55px;

}

.about-card h2{

    margin:22px 0;

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    line-height:1.25;

}

.about-card p{

    margin-bottom:18px;

    color:rgba(255,255,255,.80);

    line-height:1.9;

}


/*=====================================================
  ABOUT BUTTON
======================================================*/

.about-card .btn{

    margin-top:15px;

    min-width:180px;

}


/*=====================================================
  ABOUT IMAGE
======================================================*/

.about-image-box{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:20px;

}


/*=====================================================
  GLASS IMAGE CARD
======================================================*/

.glass-image-card{

    width:100%;

    max-width:420px;

    padding:50px 40px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    transition:all .35s ease;

}

.glass-image-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,212,255,.18);

}


/*=====================================================
  ABOUT ICON
======================================================*/

.glass-image-card i{

    margin-bottom:25px;

    color:var(--primary);

    font-size:4rem;

}


/*=====================================================
  ABOUT TITLE
======================================================*/

.glass-image-card h3{

    margin-bottom:18px;

    color:#ffffff;

    font-size:2rem;

    font-weight:700;

}


/*=====================================================
  ABOUT TEXT
======================================================*/

.glass-image-card p{

    color:rgba(255,255,255,.75);

    line-height:1.9;

}


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

@media(max-width:991px){

    .about-preview-section{

        text-align:center;

    }

    .about-card{

        padding:40px;

    }

    .about-card h2{

        font-size:2.5rem;

    }

    .about-image-box{

        margin-top:20px;

    }

}


@media(max-width:767px){

    .about-card{

        padding:30px;

    }

    .about-card h2{

        font-size:2rem;

    }

    .glass-image-card{

        padding:35px 25px;

    }

    .glass-image-card h3{

        font-size:1.6rem;

    }

}


@media(max-width:480px){

    .about-card{

        padding:25px;

    }

    .about-card h2{

        font-size:1.8rem;

    }

    .glass-image-card{

        padding:30px 20px;

    }

}
/*=====================================================
  HOME PAGE
  PART 3 - WHY CHOOSE US & SERVICES
======================================================*/


/*=====================================================
  COMMON SECTIONS
======================================================*/

.why-us-section,
.services-section{

    position:relative;

    padding:30px 0;

}


/*=====================================================
  SECTION HEADER
======================================================*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

}

.section-tag{

    display:inline-block;

    padding:10px 22px;

    margin-bottom:18px;

    border-radius:50px;

    background:rgba(0,212,255,.12);

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-header h2{

    margin-bottom:20px;

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    line-height:1.25;

}

.section-header p{

    color:rgba(255,255,255,.75);

    font-size:1.05rem;

    line-height:1.9;

}


/*=====================================================
  FEATURE CARD
======================================================*/

.feature-card{

    height:100%;

    padding:45px 35px;

    text-align:center;

    transition:all .35s ease;

}

.feature-card:hover{

    transform:translateY(-10px);

}

.feature-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,212,255,.12);

    color:var(--primary);

    font-size:2.2rem;

    transition:.35s;

}

.feature-card:hover .feature-icon{

    background:var(--primary);

    color:#000;

    transform:rotate(8deg);

}

.feature-card h4{

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.45rem;

    font-weight:700;

}

.feature-card p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}


/*=====================================================
  SERVICE CARD
======================================================*/

.service-card{

    height:100%;

    padding:40px 30px;

    text-align:center;

    transition:all .35s ease;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-icon{

    width:85px;

    height:85px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:rgba(0,255,153,.12);

    color:var(--secondary);

    font-size:2rem;

    transition:.35s;

}

.service-card:hover .service-icon{

    background:var(--secondary);

    color:#000;

    transform:scale(1.08);

}

.service-card h4{

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.35rem;

    font-weight:700;

}

.service-card p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}


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

@media(max-width:991px){

    .why-us-section,
    .services-section{

        padding:30px 0;

    }

    .section-header{

        margin-bottom:55px;

    }

    .section-header h2{

        font-size:2.4rem;

    }

}


@media(max-width:768px){

    .section-header h2{

        font-size:2rem;

    }

    .feature-card,
    .service-card{

        padding:35px 25px;

    }

    .feature-icon{

        width:75px;

        height:75px;

        font-size:2rem;

    }

    .service-icon{

        width:72px;

        height:72px;

        font-size:1.8rem;

    }

}


@media(max-width:576px){

    .section-header h2{

        font-size:1.8rem;

    }

    .section-header p{

        font-size:.95rem;

    }

}
/*=====================================================
  HOME PAGE
  PART 4 - PARTNER & COMPANY HIGHLIGHTS
======================================================*/


/*=====================================================
  PARTNER SECTION
======================================================*/

.partner-section{

    position:relative;

    padding:120px 0;

}

.partner-card{

    height:100%;

    padding:45px 35px;

    text-align:center;

    transition:all .35s ease;

}

.partner-card:hover{

    transform:translateY(-10px);

}

.partner-card i{

    margin-bottom:25px;

    color:var(--primary);

    transition:.35s;

}

.partner-card:hover i{

    transform:scale(1.15);

}

.partner-card h5{

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.4rem;

    font-weight:700;

}

.partner-card p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}


/*=====================================================
  COMPANY HIGHLIGHTS
======================================================*/

.company-highlights-section{

    position:relative;

    padding:40px 0;

}


/*=====================================================
  HIGHLIGHT CARD
======================================================*/

.highlight-card{

    height:100%;

    padding:40px 30px;

    text-align:center;

    border-radius:24px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    transition:all .35s ease;

}

.highlight-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,212,255,.18);

}

.highlight-card i{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:80px;

    height:80px;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(0,212,255,.12);

    color:var(--primary);

    font-size:2rem;

    transition:.35s;

}

.highlight-card:hover i{

    background:var(--primary);

    color:#000;

    transform:rotate(8deg);

}

.highlight-card h4{

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.4rem;

    font-weight:700;

}

.highlight-card p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}


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

@media(max-width:991px){

    .partner-section,
    .company-highlights-section{

        padding:40px 0;

    }

}


@media(max-width:768px){

    .partner-card,
    .highlight-card{

        padding:35px 25px;

    }

    .highlight-card i{

        width:70px;

        height:70px;

        font-size:1.8rem;

    }

}


@media(max-width:576px){

    .partner-card h5{

        font-size:1.2rem;

    }

    .highlight-card h4{

        font-size:1.25rem;

    }

}
/*=====================================================
  HOME PAGE
  PART 5 - TRUST SECTION
======================================================*/


/*=====================================================
  TRUST SECTION
======================================================*/

.trust-section{

    position:relative;

    padding:30px 0;

}


/*=====================================================
  TRUST CARD
======================================================*/

.trust-card{

    padding:70px 50px;

    border-radius:30px;

}

.trust-card h2{

    margin-bottom:25px;

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    line-height:1.3;

}

.trust-card p{

    max-width:850px;

    margin:0 auto;

    color:rgba(255,255,255,.78);

    line-height:1.9;

}


/*=====================================================
  TRUST ITEM
======================================================*/

.trust-item{

    padding:35px 20px;

    transition:all .35s ease;

}

.trust-item:hover{

    transform:translateY(-10px);

}

.trust-item i{

    width:80px;

    height:80px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,212,255,.12);

    color:var(--primary);

    font-size:2rem;

    transition:.35s;

}

.trust-item:hover i{

    background:var(--primary);

    color:#000;

    transform:rotate(10deg);

}

.trust-item h5{

    color:#ffffff;

    font-size:1.25rem;

    font-weight:700;

}


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

@media(max-width:991px){

    .trust-section{

        padding:30px 0;

    }

    .trust-card{

        padding:55px 35px;

    }

    .trust-card h2{

        font-size:2.4rem;

    }

}


@media(max-width:768px){

    .trust-card{

        padding:45px 25px;

    }

    .trust-card h2{

        font-size:2rem;

    }

    .trust-item{

        margin-bottom:25px;

    }

}


@media(max-width:576px){

    .trust-card h2{

        font-size:1.8rem;

    }

}