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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
    background:#f5f7fa;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ================= TOP HEADER ================= */

.top-header{
    width:100%;
    min-height:42px;
    background:#1CBBD5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 40px;
    flex-wrap:wrap;
}

.social-icons{
    display:flex;
    align-items:center;
}

.social-icons a{
    width:55px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    border-right:1px solid rgb(147 156 174 / 65%);
    transition:0.3s;
}

.social-icons a:hover{
    background:#0047C7;
}

.contact-info{
    display:flex;
    align-items:center;
    gap:35px;
    color:#fff;
    font-size:14px;
}

.contact-info div{
    display:flex;
    align-items:center;
    gap:8px;
}

/* ================= NAVBAR ================= */

.navbar{
    width:100%;
    height:80px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

/* ================= LOGO BOX ================= */

.logo-box{
    width:320px;
    height:80px;
    background:#041c4a;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
}

/* ================= HEADER LOGO ================= */

.header-logo{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-logo img{
    width:210px;
    height:auto;
    object-fit:contain;
    display:block;
}

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

.nav-links{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
}

.nav-links a{
    text-decoration:none;
    color:#0b1d46;
    font-size:16px;
    font-weight:500;
    transition:0.3s;
    position:relative;
}

.nav-links a:hover{
    color:#1CBBD5;
}

/* ================= RIGHT SIDE ================= */

.nav-right{
    display:flex;
    align-items:center;
    gap:20px;
    padding-right:25px;
}

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

.nav-btn{
    padding:14px 30px;
    background:#1CBBD5;
    color:#fff;
    border:none;
    outline:none;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:0.4s ease;
    white-space:nowrap;
}

.nav-btn:hover{
    background:#041c4a;
}

/* ================= MENU BUTTON ================= */

.menu-btn{
    width:55px;
    height:55px;
    border:none;
    outline:none;
    background:#041c4a;
    color:#fff;
    border-radius:6px;
    font-size:22px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.4s;
}

.menu-btn:hover{
    background:#1CBBD5;
}

/* ================= DROPDOWN ================= */

.dropdown{
    position:relative;
}

.dropdown > a{
    display:flex;
    align-items:center;
    gap:6px;
}

/* ================= DROPDOWN MENU ================= */

.dropdown-menu{
    position:absolute;
    top:180%;
    left:0;

    width:240px;
    background:#ffffff;

    display:flex;
    flex-direction:column;

    padding:15px 0;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:0.4s ease;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    border-top:3px solid #1CBBD5;

    z-index:999;
}

/* ================= DROPDOWN LINKS ================= */

.dropdown-menu a{
    padding:14px 25px;
    color:#0b1d46;
    font-size:15px;
    text-decoration:none;
    transition:0.3s ease;
}

.dropdown-menu a:hover{
    background:#f5f7fa;
    color:#1CBBD5;
    padding-left:35px;
}

/* ================= SHOW MENU ================= */

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

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

@media(max-width:991px){

.top-header{
    padding:10px 20px;
    justify-content:center;
    gap:10px;
}

.contact-info{
    gap:20px;
    font-size:13px;
    flex-wrap:wrap;
    justify-content:center;
}

.navbar{
    height:75px;
}

.logo-box{
    width:240px;
    height:75px;
}

.header-logo img{
    width:170px;
}

.nav-links{

    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;

    z-index:9999;

    display:flex;
    flex-direction:column;

    padding:20px;

}


.nav-right{
    padding-right:15px;
    gap:12px;
}

.nav-btn{
    padding:12px 22px;
    font-size:14px;
}

.menu-btn{
    width:50px;
    height:50px;
    font-size:18px;
}

}

@media(max-width:600px){

.top-header{
    display:none;
}

.navbar{
    height:70px;
}

.logo-box{
    width:190px;
    height:70px;
    padding:10px;
}

.header-logo img{
    width:135px;
}

.nav-right{
    gap:10px;
    padding-right:10px;
}

.nav-btn{
    padding:10px 16px;
    font-size:13px;
}

.menu-btn{
    width:45px;
    height:45px;
    font-size:16px;
}

}

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

.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#222;
}

/*==========================
1200px
==========================*/

@media(max-width:1200px){

.navbar{
    padding:15px 40px;
}

.nav-links{
    gap:25px;
}

}

/*==========================
992px
==========================*/

@media(max-width:992px){

.top-header{
    display:none;
}

.navbar{
    padding:15px 25px;
}

.menu-toggle{
    display:block;
    z-index:1001;
}

.nav-right{
    display:none;
}

.nav-links{

    position:absolute;
    top:100%;
    left:-100%;

    width:100%;

    background:#fff;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    padding:30px;

    gap:18px;

    transition:.4s;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.nav-links.active{

    left:0;

}

.nav-links a{

    width:100%;

    font-size:17px;

}

.dropdown{

    width:100%;

}

.dropdown-menu{

    position:static;

    display:none;

    box-shadow:none;

    opacity:1;

    visibility:visible;

    transform:none;

    padding-left:20px;

}

.dropdown:hover .dropdown-menu{

    display:block;

}

}

/*==========================
768px
==========================*/

@media(max-width:768px){

.navbar{

    padding:15px 20px;

}

.header-logo img{

    width:150px;

}

.nav-links{

    padding:25px;

}

}

/*==========================
576px
==========================*/

@media(max-width:576px){

.header-logo img{

    width:130px;

}

.navbar{

    padding:12px 15px;

}

.menu-toggle{

    font-size:24px;

}

.nav-links{

    padding:20px;

}

}
/* ================= HERO SLIDER ================= */

.hero-slider{
    width:100%;
    height:100vh;
}

.swiper-slide{
    position:relative;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.slide-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgb(70 79 99 / 65%);
}

.hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:750px;
    padding-left:80px;
}

.hero-content h5{
    color:#ffffff;
    font-size:24px;
    margin-bottom:20px;
    font-weight:600;
}

.hero-content h1{
    font-size:52px;
    line-height:1.1;
    margin-bottom:25px;
    font-weight:700;
}

.hero-content p{
    font-size:18px;
    line-height:1.8;
    margin-bottom:35px;
    color:#f2f2f2;
}

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

.btn{
    padding:16px 38px;
    text-decoration:none;
    border-radius:5px;
    font-size:17px;
    font-weight:600;
    transition:0.4s;
}

.btn-primary{
    background:#07245d;
    color:#fff;
}

.btn-primary:hover{
    background:#fff;
    color:#07245d;
}

.btn-outline{
    border:2px solid #fff;
    color:#fff;
}

.btn-outline:hover{
    background:#fff;
    color:#02245b;
}

.nav-btn{
    padding:14px 30px;
    border:none;
    outline:none;
    background:#041c4a;
    color:#fff;
    font-size:16px;
    font-weight:600;
    border-radius:6px;
    cursor:pointer;
    transition:0.4s;
}

.nav-btn:hover{
    background:#002768;
}

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

.about-section{
    width:100%;
    padding:80px 6%;
    background:#f5f7fa;
    overflow:hidden;
}

.about-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

/* ================= LEFT CONTENT ================= */

.about-content{
    width:52%;
    position:relative;
}

.bg-text{
    position:absolute;
    top:-35px;
    left:0;
    font-size:90px;
    font-weight:800;
    color:#ececec;
    z-index:-1;
    line-height:1;
}

.small-title{
    color:#0047C7;
    font-size:18px;
    font-weight:600;
    margin-bottom:15px;
}

.main-title{
    font-size:39px;
    line-height:1.3;
    color:#07245d;
    font-weight:700;
    margin-bottom:22px;
}

.about-text{
    font-size:16px;
    line-height:1.9;
    color:#666;
    margin-bottom:28px;
}

.about-list{
    list-style:none;
    margin-bottom:35px;
}

.about-list li{
    font-size:16px;
    color:#16315f;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    line-height:1.7;
}

.about-list li::before{
    content:"✓";
    color:#0047C7;
    font-size:20px;
    font-weight:700;
    margin-right:14px;
}

.about-btn{
    display:inline-flex;
    align-items:center;
    gap:15px;
    background:#07245d;
    color:#fff;
    padding:16px 34px;
    text-decoration:none;
    font-size:17px;
    font-weight:500;
    transition:0.4s;
}

.about-btn:hover{
    background:#1CBBD5;
}

.about-btn span{
    font-size:20px;
}

/* ================= RIGHT IMAGES ================= */

.about-images{
    width:48%;
    position:relative;
    display:flex;
    justify-content:center;
    gap:25px;
}

/* IMAGE BOX */

.img-box{
    overflow:hidden;
    position:relative;
    opacity:0;
    transform:translateY(80px) scale(0.85);
    transition:1.2s ease;
}

/* SHOW EFFECT */

.img-box.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* IMAGE */

.img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:0.6s ease;
}

/* HOVER EFFECT */

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

/* LEFT IMAGE */

.left-img{
    width:240px;
    height:500px;
    margin-top:-20px;
}

/* RIGHT IMAGE */

.right-img{
    width:230px;
    height:560px;
    margin-top:40px;
}
/* EXPERIENCE BOX */

.experience-box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:180px;
    height:160px;
    background:#1CBBD5;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:5;
}

.experience-box h2{
    font-size:52px;
    line-height:1;
    font-weight:800;
}

.experience-box p{
    font-size:16px;
    margin-top:8px;
    line-height:1.4;
}

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

@media(max-width:991px){

    .about-wrapper{
        flex-direction:column;
    }

    .about-content,
    .about-images{
        width:100%;
    }

    .about-images{
        margin-top:40px;
    }
}

@media(max-width:768px){

    .about-section{
        padding:70px 5%;
    }

    .bg-text{
        font-size:60px;
    }

    .main-title{
        font-size:34px;
    }

    .about-images{
        flex-direction:column;
        align-items:center;
    }

    .left-img,
    .right-img{
        width:100%;
        max-width:320px;
        height:420px;
        margin-top:0;
    }

    .experience-box{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        margin-top:20px;
    }
}
/* EXPERIENCE BOX */

.experience-box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:180px;
    height:160px;
    background:#1CBBD5;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:5;
    animation:pulseBox 3s infinite ease-in-out;
}

/* PULSE EFFECT */

@keyframes pulseBox{

    0%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.05);
    }

    100%{
        transform:translate(-50%,-50%) scale(1);
    }

}


/* ================= WHAT WE DO SECTION ================= */

.commitment-section{
    width:100%;
    padding:90px 7%;
    background:#f4f4f4;
    overflow:hidden;
    position:relative;
}

.commitment-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

/* ================= LEFT IMAGE ================= */

.commitment-image{
    width:45%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.bg-shape{
    position:absolute;
    left:-60px;
    top:-20px;
    width:420px;
    opacity:0.35;
    z-index:1;
}
.bg-shape{
    position:absolute;
    left:-60px;
    top:-20px;
    width:420px;
    opacity:0.35;
    z-index:1;
    animation:shapeRotate 10s linear infinite;
}

/* ANIMATION */

@keyframes shapeRotate{

    0%{
        transform:rotate(0deg) scale(1);
    }

    25%{
        transform:rotate(3deg) scale(1.03);
    }

    50%{
        transform:rotate(0deg) scale(1.06);
    }

    75%{
        transform:rotate(-3deg) scale(1.03);
    }

    100%{
        transform:rotate(0deg) scale(1);
    }

}
/* IMAGE FRAME */

.image-frame{
    width:600px;
    height:410px;
    background:#fff;
    border-radius:30px;
    padding:28px;
    position:relative;
    z-index:2;
    box-shadow:0 10px 40px rgba(0,0,0,0.05);

    /* ANIMATION */

    opacity:0;
    transform:translateY(120px) scale(0.85);
    transition:1.2s ease;
}

/* SHOW EFFECT */

.image-frame.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* IMAGE */

.image-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:6px;
    display:block;
    transition:0.6s ease;
}

/* HOVER EFFECT */

.image-frame:hover img{
    transform:scale(1.06);
}

/* ================= RIGHT CONTENT ================= */

.commitment-content{
    width:45%;
}

.small-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.small-heading span{
    width:3px;
    height:28px;
    background:#1CBBD5;
}

.small-heading h5{
    color:#1CBBD5;
    font-size:24px;
    font-weight:600;
}

.commitment-content h2{
    font-size:30px;
    line-height:1.2;
    color:#07245d;
    margin-bottom:30px;
    font-weight:600;
}

.commitment-content p{
    font-size:16px;
    line-height:2;
    color:#6c7280;
    margin-bottom:45px;
}

/* BUTTON */

.commitment-btn{
    display:inline-flex;
    align-items:center;
    gap:20px;
    padding:22px 42px;
    background:#07245d;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    font-weight:500;
    transition:0.4s;
}

.commitment-btn:hover{
    background:#0047C7;
}

.commitment-btn span{
    width:65px;
    height:1px;
    background:#fff;
    position:relative;
    display:inline-block;
}

.commitment-btn span::after{
    content:"";
    position:absolute;
    right:0;
    top:-4px;
    width:10px;
    height:10px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform:rotate(45deg);
}

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

@media(max-width:1100px){

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

    .commitment-image,
    .commitment-content{
        width:100%;
    }

    .commitment-content h2{
        font-size:48px;
    }
}

@media(max-width:768px){

    .commitment-section{
        padding:70px 5%;
    }

    .image-frame{
        width:100%;
        height:auto;
        padding:18px;
    }

    .image-frame img{
        height:auto;
    }

    .commitment-content h2{
        font-size:36px;
    }

    .commitment-content p{
        font-size:16px;
        line-height:1.8;
    }

    .small-heading h5{
        font-size:18px;
    }

    .commitment-btn{
        padding:16px 30px;
        font-size:16px;
    }

}
/* ==================== ABOUT SECTION ================ */

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

.testimonial{
    padding:100px 0;
    background:#fff;
}

.testimonial-box{
    max-width:800px;
    margin:auto;
    background:#f5f7fa;
    padding:50px;
    border-radius:20px;
    text-align:center;
}

.testimonial-box img{
    width:90px;
    height:90px;
    border-radius:50%;
    margin-bottom:20px;
}

.testimonial-box p{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}

.testimonial-box h4{
    color:#02245b;
}

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

.footer{
    position: relative;
    background: url("./images/bg.webp") center center/cover no-repeat;
    color: #fff;
    padding: 80px 0 20px;
    overflow: hidden;
    z-index: 1;
}

/* Dark Overlay */
.footer::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: -1;
}

/* Footer Grid */
.footer-grid{
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    z-index: 2;
}

/* Logo */
.footer-logo{
    display: inline-block;
    margin-bottom: 20px;
}

.footer-logo img{
    width: 280px;
    height: auto;
    display: block;
}

/* Headings */
.footer h3{
    font-size: 24px;
    margin-bottom: 20px;
    color: #fff;
}

/* Paragraph */
.footer p{
    color: rgba(255,255,255,.75);
    line-height: 1.8;
    margin-bottom: 12px;
}

/* Links */
.footer-links{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a{
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: .3s;
}

.footer-links a:hover{
    color: #1CBBD5;
    padding-left: 8px;
}

/* Copyright */
.copy{
    position: relative;
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    z-index: 2;
}

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

@media(max-width:992px){

    .contact-info{
        display:none;
    }

    .nav-links{
        display:none;
    }

    .about-grid,
    .course-grid,
    .counter-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .hero-content{
        padding-left:30px;
    }

    .hero-content h1{
        font-size:52px;
    }
}

@media(max-width:768px){

    .top-header{
        padding:0 10px;
    }

    .social-icons a{
        width:42px;
    }

    .logo-box{
        width:230px;
        padding-left:25px;
    }

    .nav-icon{
        width:65px;
    }

    .hero-slider{
        height:90vh;
    }

    .hero-content{
        padding:20px;
    }

    .hero-content h5{
        font-size:18px;
    }

    .hero-content h1{
        font-size:38px;
    }

    .hero-content p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }

    .heading h2,
    .about-content h2{
        font-size:35px;
    }
}

/* ==================================================OUR PROCESS PAGE====================================== */
/* SECTION */

.work-process{
    width:100%;
    padding:90px 0 120px;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.container{
    width:1200px;
    margin:auto;
    position:relative;
}

/* TOP HEADING */

.process-heading{
    text-align:center;
    position:relative;
    margin-bottom:100px;
}

.process-heading .bg-text{
    position:absolute;
    top:-35px;
    left:50%;
    transform:translateX(-50%);
    font-size:90px;
    font-weight:800;
    color:#ececec;
    letter-spacing:4px;
    z-index:0;
    text-transform:uppercase;
}

.process-subtitle{
    color:#041c4a;
    font-size:18px;
    font-weight:600;
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.process-subtitle::before{
    content:"";
    width:3px;
    height:24px;
    background:#1CBBD5;
    display:block;
}

.process-title{
    font-size:60px;
    font-weight:700;
    color:#072b66;
    margin-bottom:18px;
    position:relative;
    z-index:2;
    line-height:1.2;
}

.process-desc{
    font-size:18px;
    color:#6e6e6e;
    line-height:1.9;
    position:relative;
    z-index:2;
}

/* PROCESS ROW */

.process-row{
    display:flex;
    align-items:flex-start;
    position:relative;
    z-index:2;
}

/* BOX */

.process-box{
    width:31%;
    text-align:center;
    position:relative;
}

/* ICON BOX */

/* ICON BOX */

.icon-box{
    width:135px;
    height:135px;
    margin:auto;
    border:2px dashed #1CBBD5;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    margin-bottom:35px;
    background:#f5f5f5;
    transition:0.5s ease;
}

/* HOVER EFFECT */

.process-box:hover .icon-box{
    background:#041c4a;
    transform:scale(1.08);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.icon-box i{
    font-size:48px;
    color:#1CBBD5;
    transition:0.5s ease;
}

/* ICON HOVER */

.process-box:hover .icon-box i{
    color:#fff;
    transform:rotateY(360deg);
}


/* NUMBER */


.process-number{
    position:absolute;
    top:-22px;
    right:-22px;
    width:52px;
    height:52px;
    background:#1CBBD5;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:600;
    transition:0.5s ease;
}

/* NUMBER HOVER */

.process-box:hover .process-number{
    transform:rotate(360deg) scale(1.15);
    background:#fff;
    color:#041c4a;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* TITLE */

.process-box h3{
    font-size:28px;
    color:#072b66;
    margin-bottom:22px;
    font-weight:700;
    transition:0.4s;
}

.process-box:hover h3{
    color:#1CBBD5;
}

/* TEXT */

.process-box p{
    color:#777;
    font-size:16px;
    line-height:2;
    width:90%;
    margin:auto;
}
.process-box a{
    text-decoration: none;
}

/* ARROWS */

/* PROCESS BOX */

.process-box{
    width:31%;
    text-align:center;
    position:relative;
    transition:0.5s ease;
    cursor:pointer;
}

/* BOX HOVER */

.process-box:hover{
    transform:translateY(-15px);
}

/* ARROW IMAGE */

.arrow-img{
    position:absolute;
    right:-103px;
    width:180px;
    z-index:2;
}

.arrow-top{
    top:40px;
}

.arrow-bottom{
    top:35px;
}

.arrow-img img{
    width:100%;
    display:block;
}
/* MACHINE IMAGE */

.machine-img{
    position:absolute;
    right:-120px;
    bottom:-55px;
    width:420px;
}

.machine-img img{
    width:100%;
}

/* RESPONSIVE */

@media(max-width:1200px){

.container{
    width:95%;
}

.machine-img{
    width:320px;
    right:-70px;
}

.process-title{
    font-size:48px;
}

}

@media(max-width:991px){

.process-row{
    flex-direction:column;
    gap:70px;
}

.process-box{
    width:100%;
}

.arrow{
    display:none;
}

.machine-img{
    display:none;
}

.process-title{
    font-size:40px;
}

.process-heading .bg-text{
    font-size:70px;
}

}

@media(max-width:600px){

.process-title{
    font-size:32px;
}

.process-heading .bg-text{
    font-size:48px;
    top:-10px;
}

.process-desc{
    font-size:16px;
}

.process-box h3{
    font-size:24px;
}

.process-box p{
    font-size:16px;
}

}
/* MACHINE IMAGE */

.machine-img{
    position:absolute;
    right:-120px;
    bottom:-55px;
    width:420px;
    animation:jcpMove 4s ease-in-out infinite;
}

.machine-img img{
    width:100%;
    display:block;
}

/* ANIMATION */

@keyframes jcpMove{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =================================================about page========================================= */

/*==============================
    BREADCUMB SECTION
==============================*/

.breadcumb-wrapper{
    position:relative;
    padding:170px 0;
    overflow:hidden;
    z-index:1;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

/* DARK OVERLAY */

.breadcumb-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.65) 50%,
        rgba(0,0,0,0.45) 100%
    );
    z-index:-1;
}

/* OPTIONAL OVERLAY IMAGE */

.breadcumb-overlay{
    position:absolute;
    inset:0;
    /* background:url('./images/breadcumb-bg-overlay.png'); */
    background-size:cover;
    background-position:center;
    opacity:0.2;
    z-index:-1;
}

/* CONTENT */

.breadcumb-content{
    text-align:left;
}

.breadcumb-title{
    font-size:52px;
    font-weight:700;
    color:#fff;
    margin-bottom:18px;
    line-height:1.2;
}

/*==============================
    MENU
==============================*/

.breadcumb-menu{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    list-style:none;
}

.breadcumb-menu li{
    position:relative;
    color:#fff;
    font-size:18px;
    font-weight:500;
}

/* ARROW */

.breadcumb-menu li:not(:last-child)::after{
    content:"→";
    margin-left:12px;
    color:#fff;
    font-size:15px;
}

/* LINKS */

.breadcumb-menu li a{
    color:#fff;
    text-decoration:none;
    transition:0.3s;
}

.breadcumb-menu li a:hover{
    color:#00b4d8;
}

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

/* LAPTOP */

@media(max-width:1199px){

    .breadcumb-title{
        font-size:44px;
    }

    .breadcumb-menu li{
        font-size:17px;
    }

}

/* TABLET */

@media(max-width:991px){

    .breadcumb-wrapper{
        padding:140px 0;
    }

    .breadcumb-title{
        font-size:40px;
    }

}

/* MOBILE */

@media(max-width:575px){

    .breadcumb-wrapper{
        padding:110px 0;
    }

    .breadcumb-title{
        font-size:32px;
    }

    .breadcumb-menu{
        gap:8px;
    }

    .breadcumb-menu li{
        font-size:15px;
    }

}

.buildex-wrapper{
    width:100%;
    padding:130px 60px;
    background:#f5f5f5;
    overflow:hidden;
}

.buildex-container{
    max-width:1500px;
    margin:auto;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
}

.buildex-image-side{
    width:48%;
    height:620px;
    overflow:hidden;
    animation:buildexLeft 1s ease;
}

.buildex-image-side img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.buildex-content-side{
    width:52%;
    position:relative;
    padding-top:10px;
    animation:buildexRight 1s ease;
}

.buildex-mini-title{
    color:#1CBBD5;
    font-size:16px;
    font-weight:600;
    margin-bottom:20px;
    position:relative;
    padding-left:20px;
}

.buildex-mini-title::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    width:3px;
    height:20px;
    background:#1CBBD5;
}

.buildex-main-heading{
    font-size:42px;
    line-height:1.28;
    color:#05245b;
    font-weight:700;
    margin-bottom:30px;
    max-width:760px;
}

.buildex-description{
    color:#6d6d6d;
    font-size:18px;
    line-height:2;
    max-width:780px;
    margin-bottom:38px;
}

.buildex-feature-list{
    list-style:none;
    margin-bottom:45px;
}

.buildex-feature-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:24px;
    color:#2d4777;
    font-size:18px;
    font-weight:400;
}

.buildex-feature-item i{
    color:#1CBBD5;
    margin-top:5px;
    font-size:18px;
}

.buildex-author-box{
    display:flex;
    align-items:center;
    gap:25px;
}

.buildex-signature{
    width:90px;
}

.buildex-signature img{
    width:100%;
}

.buildex-author-info h3{
    font-size:44px;
    color:#05245b;
    font-weight:700;
    line-height:1;
    margin-bottom:10px;
}

.buildex-author-info span{
    color:#666;
    font-size:21px;
}

.buildex-machine-image{
    position:absolute;
    right:-70px;
    bottom:-170px;
    width:420px;
    animation:buildexFloat 4s ease-in-out infinite;
}

.buildex-machine-image img{
    width:100%;
}

/* ANIMATIONS */

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

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

@keyframes buildexFloat{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0px);
    }
}

/* RESPONSIVE */

@media(max-width:1200px){

    .buildex-main-heading{
        font-size:48px;
    }

    .buildex-machine-image{
        width:300px;
        right:0;
        bottom:-120px;
    }
}

@media(max-width:992px){

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

    .buildex-image-side,
    .buildex-content-side{
        width:100%;
    }

    .buildex-image-side{
        height:500px;
    }

    .buildex-machine-image{
        position:relative;
        bottom:auto;
        right:auto;
        margin-top:40px;
    }
}

@media(max-width:768px){

    .buildex-wrapper{
        padding:60px 20px;
    }

    .buildex-image-side{
        height:350px;
    }

    .buildex-main-heading{
        font-size:36px;
    }

    .buildex-description{
        font-size:16px;
    }

    .buildex-feature-item{
        font-size:16px;
    }

    .buildex-author-info h3{
        font-size:30px;
    }

    .buildex-author-info span{
        font-size:16px;
    }
}

/* ======================youtube section========================= */


/* =========================
   VIDEO SECTION
========================= */

.fixvid-section{
    width:100%;
    padding:0 100px;
    background:#1CBBD5;
}

/* =========================
   FIXED BACKGROUND
========================= */

.fixvid-bg{
    position:relative;
    width:100%;
    height:320px;

    background-image:url('./images/bg.webp');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    /* FIXED SCROLL EFFECT */
    background-attachment:fixed;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

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

.fixvid-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(2,34,84,0.82);
}

/* =========================
   CONTENT
========================= */

.fixvid-content{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

/* =========================
   PLAY BUTTON
========================= */

.fixvid-play-btn{
    width:78px;
    height:78px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px dashed #ffffff;

    color:#ffffff;
    font-size:28px;
    text-decoration:none;

    margin-bottom:28px;

    transition:0.4s ease;

    animation:fixvidPulse 2s infinite;
}

/* HOVER EFFECT */

.fixvid-play-btn:hover{
    background:#1CBBD5;
    border-color:#1CBBD5;
    transform:scale(1.08);
}

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

.fixvid-title{
    font-size:90px;
    font-weight:800;
    line-height:1;

    color:rgba(255,255,255,0.12);

    text-transform:uppercase;
    letter-spacing:2px;
}

/* =========================
   PULSE ANIMATION
========================= */

@keyframes fixvidPulse{

    0%{
        box-shadow:0 0 0 0 rgba(255,255,255,0.5);
    }

    70%{
        box-shadow:0 0 0 22px rgba(255,255,255,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }
}

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

@media(max-width:1400px){

    .fixvid-title{
        font-size:72px;
    }
}

@media(max-width:992px){

    .fixvid-section{
        padding:0 40px;
    }

    .fixvid-bg{
        height:260px;

        /* PARALLAX FIX */
        background-attachment:scroll;
    }

    .fixvid-title{
        font-size:55px;
    }

    .fixvid-play-btn{
        width:70px;
        height:70px;
        font-size:24px;
    }
}

@media(max-width:768px){

    .fixvid-section{
        padding:0 20px;
    }

    .fixvid-bg{
        height:220px;
    }

    .fixvid-title{
        font-size:32px;
        letter-spacing:1px;
    }

    .fixvid-play-btn{
        width:60px;
        height:60px;
        font-size:20px;

        margin-bottom:20px;
    }
}


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

.servex-section{
    width:100%;
    padding:80px 50px;
    background:#f5f5f5;
}

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

.servex-container{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

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

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

.servex-card{
    position:relative;
    overflow:hidden;

    opacity:0;
    transform:translateY(70px);
    animation:servexFadeUp 1s ease forwards;

    transition:0.5s ease;
}

/* ANIMATION DELAY */

.servex-card:nth-child(1){
    animation-delay:0.2s;
}

.servex-card:nth-child(2){
    animation-delay:0.5s;
}

.servex-card:nth-child(3){
    animation-delay:0.8s;
}

/* CARD ENTRY */

@keyframes servexFadeUp{

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

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

/* CARD HOVER */

.servex-card:hover{
    transform:translateY(-12px);
}

/* =========================
   IMAGE BOX
========================= */

.servex-image-box{
    position:relative;
    width:100%;
    height:272px;
    overflow:hidden;
}

/* OVERLAY */

.servex-image-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(4,28,74,0.35);

    opacity:0;
    transition:0.5s ease;
    z-index:1;
}

/* SHOW OVERLAY */

.servex-card:hover .servex-image-box::before{
    opacity:1;
}

/* IMAGE */

.servex-image-box img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:1s ease;
}

/* IMAGE MOVE */

.servex-card:hover .servex-image-box img{
    transform:scale(1.1) rotate(2deg);
}

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

.servex-icon{
    position:absolute;
    left:0;
    bottom:0;

    width:78px;
    height:74px;

    background:#1CBBD5;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:5;

    transition:0.5s ease;
}

.servex-icon i{
    color:#ffffff;
    font-size:28px;

    transition:0.5s ease;
}

/* ICON HOVER */

.servex-card:hover .servex-icon{
    background:#041c4a;
    transform:rotate(360deg) scale(1.08);
}

/* =========================
   CONTENT
========================= */

.servex-content{
    padding-top:30px;
}

.servex-content h2{
    font-size:34px;
    color:#05245b;
    font-weight:700;
    margin-bottom:18px;

    transition:0.5s ease;
}

.servex-content p{
    color:#6e6e6e;
    font-size:18px;
    line-height:2;
    margin-bottom:35px;

    transition:0.5s ease;
}

/* TEXT HOVER */

.servex-card:hover h2{
    color:#1CBBD5;
}

.servex-card:hover p{
    color:#444;
}

/* =========================
   READ MORE
========================= */

.servex-readmore{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:#1CBBD5;
    font-size:20px;
    font-weight:600;

    transition:0.5s ease;
}

/* TEXT */

.servex-readmore span{
    position:relative;
    transition:0.5s ease;
}

/* ARROW */

.servex-arrow{
    position:relative;
    width:45px;
    height:45px;

    border:2px solid #1CBBD5;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    transition:0.5s ease;
}

/* ICON */

.servex-arrow i{
    font-size:15px;
    color:#1CBBD5;

    transition:0.5s ease;
}

/* HOVER EFFECT */

.servex-readmore:hover{
    gap:22px;
}

/* TEXT MOVE */

.servex-readmore:hover span{
    letter-spacing:1px;
}

/* CIRCLE EFFECT */

.servex-readmore:hover .servex-arrow{
    background:#041c4a;
    transform:rotate(45deg) scale(1.1);
}

/* ICON ROTATE */

.servex-readmore:hover .servex-arrow i{
    color:#ffffff;
    transform:rotate(-45deg) scale(1.2);
}

/* UNDERLINE */

.servex-readmore::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;

    width:0;
    height:2px;

    background:#1CBBD5;

    transition:0.5s ease;
}

.servex-readmore:hover::after{
    width:100%;
}

/* ======================================================minning page============================ */

/* =========================
   minning start
========================= */

.welcome-section{
    width:100%;
    padding:100px 7%;
    overflow:hidden;
}

.welcome-container{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:80px;
}

/* =========================
   LEFT CONTENT
========================= */

.welcome-subtitle{
    display:flex;
    align-items:center;
    gap:12px;

    color:#1CBBD5;
    font-size:18px;
    font-weight:600;

    margin-bottom:25px;
}

.welcome-subtitle span{
    width:3px;
    height:24px;
    background:#1CBBD5;
    display:block;
    animation:growLine 1s ease forwards;
}

.welcome-content h1{
    font-size:35px;
    line-height:1.25;
    color:#05245b;
    font-weight:700;
    margin-bottom:30px;

     opacity:0;
    animation:fadeUp 1s ease forwards;
    animation-delay:0.2s;
}

.welcome-content p{
    font-size:18px;
    line-height:2;
    color:#6b7280;
    margin-bottom:45px;

    opacity:0;
    animation:fadeUp 1s ease forwards;
    animation-delay:0.4s;
}

/* =========================
   LIST
========================= */

.welcome-list{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.welcome-item{
    display:flex;
    align-items:center;
    gap:18px;
    opacity:0;
    transform:translateX(-40px);
    animation:slideLeft 0.8s ease forwards;
}

.welcome-item:nth-child(1){
    animation-delay:0.6s;
}

.welcome-item:nth-child(2){
    animation-delay:0.8s;
}

.welcome-item:nth-child(3){
    animation-delay:1s;
}

.welcome-item i{
    color:#1CBBD5;
    font-size:18px;
    transition:0.4s;
}

.welcome-item:hover i{
    transform:rotate(360deg) scale(1.2);
}

.welcome-item span{
    color:#1e3a70;
    font-size:18px;
    font-weight:500;
}

/* =========================
   RIGHT IMAGE
========================= */

.welcome-image{
    position:relative;

    opacity:0;
    transform:translateX(80px);
    animation:fadeRight 1.2s ease forwards;
    animation-delay:0.5s;
}

.welcome-image img{
    width:100%;
    height:720px;
    object-fit:cover;
    display:block;

    transition:0.6s ease;
}

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

/* EXPERIENCE BOX */

.experience-box-minning{
    position:absolute;
    right:-60px;
    bottom:-25px;

    width:185px;
    height:145px;

    background:#1CBBD5;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    animation:floatBox 3s ease-in-out infinite;
}

.experience-box-minning h2{
    color:#fff;
    font-size:70px;
    line-height:1;
    font-weight:800;
}

.experience-box-minning p{
    color:#fff;
    font-size:15px;
    font-weight:500;
    letter-spacing:1px;
}

/* =========================
   KEYFRAMES
========================= */

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

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

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

@keyframes floatBox{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0px);
    }
}

@keyframes growLine{
    from{
        height:0;
    }
    to{
        height:24px;
    }
}

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

@media(max-width:1200px){

    .welcome-content h1{
        font-size:48px;
    }

    .welcome-image img{
        height:620px;
    }
}

@media(max-width:991px){

    .welcome-container{
        grid-template-columns:1fr;
    }

    .welcome-image{
        margin-top:40px;
    }

    .experience-box-minning{
        right:20px;
        bottom:20px;
    }
}

@media(max-width:768px){

    .welcome-section{
        padding:70px 20px;
    }

    .welcome-content h1{
        font-size:38px;
    }

    .welcome-content p{
        font-size:16px;
    }

    .welcome-item span{
        font-size:16px;
    }

    .welcome-image img{
        height:500px;
    }

    .experience-box-minning{
        width:150px;
        height:120px;
    }

    .experience-box-minning h2{
        font-size:52px;
    }
}
/* =========================
   SCROLL ANIMATION
========================= */

.scroll-animate{
    opacity:0;
    transform:translateY(70px);
    transition:all 1s ease;
}

.scroll-animate.active{
    opacity:1;
    transform:translateY(0);
}
/* ===================minning end==================== */

/* ===========================================================================Ongoing Project================================== */

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

.work-process{
    position:relative;
    padding:100px 0;
    overflow:hidden;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================
   HEADING
========================= */

.process-heading{
    text-align:center;
    margin-bottom:70px;
}

.process-subtitle{
    color:#041c4a;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
}

.process-title{
    font-size:52px;
    color:#1CBBD5;
    margin-bottom:18px;
    font-weight:700;
}

.process-desc{
    color:#7a7a7a;
    max-width:750px;
    margin:auto;
    line-height:1.8;
}

/* =========================
   PROCESS LIST
========================= */

.process-wrapper{
    position:relative;
}

.process-item{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px 0;
    border-top:1px solid rgba(255,255,255,0.15);
    cursor:pointer;
}

.process-left{
    display:flex;
    align-items:flex-start;
    gap:25px;
    width:60%;
}

.process-icon{
    min-width:70px;
    height:70px;
    border:2px solid #1CBBD5;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1CBBD5;
    font-size:28px;
    transition:0.4s;
}

.process-item:hover .process-icon{
    background:#1CBBD5;
    color:#041c4a;
    border:2px solid #041c4a;
}

.process-content h3{
    color:#041c4a;
    font-size:30px;
    margin-bottom:10px;
    transition:0.4s;
}

.process-item:hover .process-content h3{
    color:#1CBBD5;
}

.process-content p{
    color:#7a7a7a;
    line-height:1.8;
    max-width:450px;
}

.process-plus{
    color:#fff;
    font-size:32px;
    font-weight:300;
}

/* =========================
   HOVER IMAGE
========================= */

.hover-image{
    position:absolute;
    top:50%;
    right:120px;
    width:260px;
    height:260px;
    opacity:0;
    visibility:hidden;
    transform:
    translateY(-50%)
    rotate(18deg)
    scale(0.8);

    transition:0.5s ease;
    pointer-events:none;
}

.hover-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
}

/* SHOW IMAGE ON HOVER */

.process-item:hover .hover-image{
    opacity:1;
    visibility:visible;

    transform:
    translateY(-50%)
    rotate(18deg)
    scale(1);
}

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

@media(max-width:991px){

    .hover-image{
        display:none;
    }

    .process-left{
        width:85%;
    }

}

@media(max-width:768px){

    .process-title{
        font-size:38px;
    }

    .process-item{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

    .process-left{
        width:100%;
    }

    .process-content h3{
        font-size:24px;
    }

}



/* ===========================================================================ongoing Project================================== */

/* ===========================================================================equipment section start========================== */

/* =========================
   EQUIPMENT GALLERY
========================= */

.equipment-gallery{
    padding:50px 0;
    background:#f5f7fa;
}

.container-equip{
    width:90%;
    max-width:1300px;
    margin:auto;
}

/* =========================
   SECTION HEADING
========================= */

.section-heading{
    text-align:center;
    margin-bottom:70px;
}

.section-subtitle{
    display:inline-block;
    color:#1CBBD5;
    font-size:15px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:18px;
}

.section-title{
    font-size:48px;
    color:#041c4a;
    font-weight:800;
    margin-bottom:20px;
}

.section-text{
    max-width:750px;
    margin:auto;
    color:#666;
    line-height:1.9;
    font-size:16px;
}

/* =========================
   GRID
========================= */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

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

.gallery-item{
    text-align:center;
}

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

.gallery-card{
    position:relative;
    height:320px;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
    box-shadow:0 12px 35px rgba(0,0,0,0.08);
}

/* IMAGE */

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s ease;
}

/* HOVER */

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

/* =========================
   EQUIPMENT NAME
========================= */

.equipment-name{
    margin-top:22px;
    font-size:24px;
    color:#041c4a;
    font-weight:700;
    transition:0.4s;
}

.gallery-item:hover .equipment-name{
    color:#1CBBD5;
}

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

@media(max-width:991px){

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

.section-title{
    font-size:40px;
}

}

@media(max-width:768px){

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

.gallery-card{
    height:280px;
}

.section-title{
    font-size:32px;
}

.section-text{
    font-size:15px;
}

.equipment-name{
    font-size:22px;
}

}

/* ===========================================================================equipment section end============================ */

/* ===========================================================================Gallery Section Start============================= */

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

.minex-projects{
    padding:100px 0;
}

.minex-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================
   HEADING
========================= */

.minex-heading{
    text-align:center;
    margin-bottom:50px;
}

.minex-heading span{
    color:#1CBBD5;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.minex-heading h2{
    font-size:48px;
    color:#0b2d5c;
    margin:15px 0;
}

.minex-heading p{
    max-width:650px;
    margin:auto;
    color:#666;
    line-height:28px;
}

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

.minex-filter-wrap{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:50px;
}

.minex-filter-btn{
    padding:12px 28px;
    border:none;
    border-radius:50px;
    background:#fff;
    color:#0b2d5c;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.4s ease;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.minex-filter-btn:hover{
    transform:translateY(-3px);
}

.minex-filter-btn.active{
    background:#1CBBD5;
    color:#fff;
}

/* =========================
   GALLERY
========================= */

.minex-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.minex-gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.minex-gallery-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:.8s ease;
}

.minex-gallery-card:hover img{
    transform:scale(1.1);
}

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

.minex-overlay{
    position:absolute;
    inset:0;
    background:rgba(11,45,92,.85);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.4s ease;
}

.minex-overlay h3{
    color:#fff;
    font-size:24px;
    font-weight:600;
}

.minex-gallery-card:hover .minex-overlay{
    opacity:1;
}

/* =========================
   FILTER ANIMATION
========================= */

.minex-hide{
    display:none;
}

.minex-show{
    animation:minexFade .7s ease forwards;
}

@keyframes minexFade{

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

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

}

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

@media(max-width:991px){

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

    .minex-heading h2{
        font-size:38px;
    }

}

@media(max-width:576px){

    .minex-gallery{
        grid-template-columns:1fr;
    }

    .minex-heading h2{
        font-size:30px;
    }

    .minex-gallery-card img{
        height:250px;
    }

}


/* ===========================================================================Gallery Section End=============================== */

/* ===========================================================================Contact Section start============================= */

.contact-section{
    background:#f5f5f5;
    padding:80px 0;
    overflow:hidden;
}

.contact-container{
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    position:relative;
}

.contact-box{
    width:305px;
    height:235px;
    background:#ececec;
    text-align:center;
    padding:19px 25px;
    transition:0.3s;
    animation: fadeUp 1s ease forwards;
    opacity: 0;
}

.contact-box:hover{
    transform:translateY(-5px);
}

.contact-box i{
    font-size:42px;
    color:#1CBBD5;
    margin-bottom:20px;
}

.contact-box h3{
    font-size:22px;
    color:#002c6b;
    margin-bottom:15px;
}

.contact-box p{
    color:#666;
    font-size:15px;
    line-height:28px;
}

/* JCB Image */
.machine-imgcon{
    position:absolute;
    right:-80px;
    bottom:-70px;
    width:420px;
}

.machine-imgcon img{
    width:100%;
    display:block;
    margin-bottom: -66px;
}

/* Responsive */
@media(max-width:1200px){

    .contact-container{
        flex-wrap:wrap;
    }

    .machine-imgcon{
        position:relative;
        right:auto;
        bottom:auto;
        width:350px;
        margin-top:30px;
    }
}

@media(max-width:768px){

    .contact-box{
        width:100%;
        max-width:350px;
    }

    .machine-imgcon{
        width:280px;
    }
}

/* form and map */

.quote-section{
    display:flex;
    width:100%;
    min-height:600px;
}

.quote-left{
    width:52%;
    background:#f5f5f5;
    padding:70px 45px;
    position:relative;

    background-image:url('https://architeck.peacefulqode.co.in/wp-content/uploads/2020/05/bg-pattern.png');
    background-size:cover;
    background-position:center;
}

.sub-title{
    color:#1CBBD5;
    font-size:16px;
    font-weight:600;
    position:relative;
    padding-left:15px;
}

.sub-title:before{
    content:'';
    width:3px;
    height:20px;
    background:#1CBBD5;
    position:absolute;
    left:0;
    top:1px;
}

.quote-left h2{
    font-size:58px;
    color:#002c6b;
    margin:15px 0 35px;
    font-weight:700;
}

.row{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

.row input{
    width:50%;
}

.quote-left input,
.quote-left textarea{
    width:100%;
    border:none;
    background:#fff;
    padding:18px;
    font-size:14px;
    margin-bottom:20px;
}

.quote-left textarea{
    height:160px;
    resize:none;
}

.quote-left button{
    background:#1CBBD5;
    color:#fff;
    border:none;
    padding:16px 35px;
    float:right;
    cursor:pointer;
    font-weight:600;
}

.quote-right{
    width:48%;
}

.quote-right iframe{
    width:100%;
    height:100%;
    border:none;
}

/* ============================
   ANIMATIONS
============================ */

/* Contact Cards */
.contact-box{
    animation: fadeUp 1s ease forwards;
    opacity:0;
}

.contact-box:nth-child(1){
    animation-delay:0.2s;
}

.contact-box:nth-child(2){
    animation-delay:0.4s;
}

.contact-box:nth-child(3){
    animation-delay:0.6s;
}

/* JCB Animation */
.machine-imgcon{
    animation: slideRight 1.5s ease forwards;
    opacity:0;
}

.machine-imgcon img{
    animation: floatMachine 4s ease-in-out infinite;
}

/* Form Animation */
.quote-left{
    animation: slideLeft 1.2s ease forwards;
    opacity:0;
}

/* Map Animation */
.quote-right{
    animation: zoomIn 1.2s ease forwards;
    opacity:0;
}

/* Heading Animation */
.quote-left h2{
    animation: fadeDown 1s ease forwards;
}

/* Input Hover & Focus */
.quote-left input,
.quote-left textarea{
    transition:all 0.3s ease;
}

.quote-left input:hover,
.quote-left textarea:hover{
    transform:translateY(-2px);
}

.quote-left input:focus,
.quote-left textarea:focus{
    box-shadow:0 0 15px rgba(255,107,26,0.25);
    transform:translateY(-3px);
    outline:none;
}

/* Button Animation */
.quote-left button{
    transition:all 0.4s ease;
}

.quote-left button:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(255,107,26,0.35);
}

/* Contact Box Hover */
.contact-box:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

/* Icon Animation */
.contact-box i{
    transition:all 0.4s ease;
}

.contact-box:hover i{
    transform:scale(1.15) rotate(8deg);
}

/* ============================
   KEYFRAMES
============================ */

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

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

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

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(0.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes floatMachine{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0);
    }
}
/* ===========================================================================Contact Section end============================= */