body{
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
    background:#fff;
    color:#222;
}

/* SMOOTH EFFECT */

a,
button,
img,
.vision-card,
.counter-box,
.gallery-img,
.quality-box{
    transition:all 0.5s ease;
}

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

.about-hero{
    min-height:72vh;

    /* PURE WHITE BACKGROUND */

    background:#fff;

    position:relative;

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

    text-align:center;

    overflow:hidden;
}

/* REMOVE DARK OVERLAY */

.overlay{
    display:none;
}

/* ROYAL BLUE GLOW */

.about-hero::before{
    content:'';

    position:absolute;

    top:-180px;
    right:-180px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    rgba(65,105,225,0.08);

    filter:blur(60px);
}

/* YELLOW GLOW */

.about-hero::after{
    content:'';

    position:absolute;

    bottom:-180px;
    left:-180px;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    rgba(255, 255, 255, 0.08);

    filter:blur(60px);
}
/* CONTENT */

.about-hero-content{
    position:relative;
    z-index:2;
}

.about-hero-content h1{
    font-size:72px;
    font-weight:900;
    letter-spacing:1px;
    margin-bottom:18px;

    color:rgba(0,0,128,1 );

    text-shadow:
    0 8px 20px rgba(65,105,225,0.08);
}

.about-hero-content p{
    font-size:21px;

    color:rgba(0,0,128,1 );

    line-height:34px;
}

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

.section-padding{
    padding:110px 0;
}

.section-subtitle{
    color:rgba(207, 181, 59, 1);
    font-weight:800;
    letter-spacing:2px;
    font-size:14px;
    position:relative;
    display:inline-block;
}

.section-subtitle::after{
    content:'';
    width:45px;
    height:2px;
    background:rgba(207, 181, 59, 1);
    position:absolute;
    top:50%;
    margin-left:12px;
}

.section-title{
    font-size:48px;
    font-weight:800;
    color:rgba(0,0,128,1 );
    margin:18px 0;
    line-height:60px;
}

.section-description{
    color:rgba(0,0,128,1 );
    font-size:18px;
    line-height:32px;
    font-size:17px;
}

/* =========================
   COMPANY IMAGE
========================= */

.company-section img{
    border-radius:22px;

    box-shadow:
    0 18px 45px rgba(0,0,0,0.12);

    transition:0.6s ease;
}

.company-section img:hover{

    transform:
    scale(1.04)
    rotate(1deg);

    box-shadow:
    0 25px 55px rgba(0,0,0,0.18);

}

/* =========================
   FEATURES
========================= */

.company-features{
    margin-top:30px;
}

.feature-box{
    margin-top:18px;
    font-weight:600;
    font-size:17px;

    display:flex;
    align-items:center;

    padding:15px 18px;

    border-radius:12px;

    background:#fff;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.05);

    transition:0.4s ease;
}

.feature-box:hover{

    transform:translateX(10px);

    background:rgba(207, 181, 59, 1);
    color:#000;

    box-shadow:
    0 10px 25px rgba(207, 181, 59, 1);

}

.feature-box i{
    color:rgba(0,0,128,1 );
    margin-right:12px;
    font-size:18px;
    transition:0.4s;
}

.feature-box:hover i{
    color:rgba(0,0,128,1 );
    transform:scale(1.2);
}

/* =========================
   VISION
========================= */

.vision-section{
    background:#fff;
}

.vision-card{
    background:rgba(207, 181, 59, 1);
    padding:60px 35px;
    border-radius:24px;
    text-align:center;
    transition:0.5s ease;
    position:relative;
    overflow:hidden;

    border:1px solid rgba(0,0,0,0.05);

    box-shadow:
    0 10px 35px rgba(0,0,0,0.06);
}

/* LIGHT EFFECT */

.vision-card::before{
    content:'';
    position:absolute;
    top:-120%;
    left:-40%;
    width:180%;
    height:250%;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.18),
        transparent,
        transparent
    );

    transform:rotate(25deg);
    transition:0.8s ease;
}

.vision-card:hover::before{
    top:-40%;
    left:-10%;
}

/* HOVER */

.vision-card:hover{

    transform:
    translateY(-15px)
    scale(1.03);

    box-shadow:
    0 25px 55px rgba(0,0,0,0.12),
    0 15px 30px rgba(207, 181, 59, 1);

}

/* ICON */

.vision-icon{
    width:100px;
    height:100px;
    background:rgba(0,0,128,1 );
    border-radius:50%;

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

    margin:auto auto 28px;

    box-shadow:
    0 12px 28px rgba(207, 181, 59, 1);

    transition:0.5s ease;
}

.vision-card:hover .vision-icon{

    transform:
    rotate(8deg)
    scale(1.1);

}

.vision-icon i{
    font-size:38px;
    color:rgba(207, 181, 59, 1);
}

/* TITLE */

.vision-card h3{
    font-size:30px;
    font-weight:800;
    margin-bottom:18px;
}

/* DESCRIPTION */

.vision-card p{
    color:#666;
    line-height:30px;
    font-size:16px;
}

/* =========================
   QUALITY
========================= */

.quality-box{
    background:
    linear-gradient(
        135deg,
       rgba(207, 181, 59, 1),
        rgba(207, 181, 59, 1)
    );

    color:#fff;

    padding:60px;

    border-radius:24px;

    text-align:center;

    line-height:36px;

    font-size:18px;

    position:relative;
    overflow:hidden;

    box-shadow:
    0 18px 45px rgba(0,0,128,1 );
}

/* GLOW */

.quality-box::before{
    content:'';
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(207, 181, 59, 1);
    border-radius:50%;
    top:-80px;
    right:-80px;
    filter:blur(40px);
}

/* HOVER */

.quality-box:hover{

    transform:
    translateY(-8px)
    scale(1.01);

}

/* =========================
   COUNTERS
========================= */

.experience-section{
    background:#fff;
}

.counter-box{
    background:#fff;

    padding:50px 25px;

    border-radius:22px;

    text-align:center;

    transition:0.5s ease;

    position:relative;
    overflow:hidden;

    border:1px solid rgba(0,0,0,0.05);

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

/* HOVER */

.counter-box:hover{

    transform:
    translateY(-15px)
    scale(1.03);

    box-shadow:
    0 25px 55px rgba(207, 181, 59, 1),
    0 12px 25px rgba(244,180,0,0.18);

}

/* TOP BORDER */

.counter-box::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:rgba(207, 181, 59, 1);
}

/* COUNTER */

.counter-box h2{
    color:rgba(207, 181, 59, 1);
    font-size:58px;
    font-weight:900;
    margin-bottom:12px;
}

/* TEXT */

.counter-box p{
    color:rgba(0,0,128,1 );
    font-weight:600;
    font-size:18px;
}

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

.gallery-img{
    border-radius:20px;
    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,0.08);

    transition:0.6s ease;
}

/* HOVER */

.gallery-img:hover{

    transform:
    scale(1.06)
    rotate(1deg);

    box-shadow:
    0 25px 55px rgba(0,0,0,0.15);

}

/* =========================
   SCROLL DOWN
========================= */

.scroll-down{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
}
.scroll-down a{
    color:rgba(0,0,128,1 );

    font-size:30px;

    animation:scrollDown 2s infinite;
}
/* =========================
   ANIMATION
========================= */

@keyframes scrollDown{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(12px);
    }

    100%{
        transform:translateY(0);
    }

}

/* =========================
   SCROLLBAR
========================= */

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

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

::-webkit-scrollbar-thumb{
    background:rgba(207, 181, 59, 1);
    border-radius:10px;
}

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

@media(max-width:991px){

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

    .section-title{
        font-size:38px;
        line-height:50px;
    }

}

@media(max-width:768px){

    .section-padding{
        padding:80px 0;
    }

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

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

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

    .quality-box{
        padding:40px 25px;
    }

}
    /* =========================
   CUSTOMERS SECTION
========================= */

.customers-section{

    background:#ffffff;
}

/* CUSTOMER CARD */

.customer-card{

    background:#ffffff;

    padding:35px 25px;

    border-radius:22px;

    text-align:center;

    height:100%;

    transition:0.4s ease;

    border:1px solid rgba(0,0,128,1 );

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

.customer-card:hover{

    transform:
    translateY(-8px)
    scale(1.03);

    box-shadow:
    0 18px 40px rgba(207, 181, 59, 1);
}

/* LOGO CIRCLE */

.customer-logo{

    width:140px;
    height:140px;

    border-radius:50%;

    background:#ffffff;

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

    margin:auto auto 25px;

    overflow:hidden;

    border:4px solid rgba(0,0,128,1 );

    box-shadow:
    0 0 25px rgba(65,105,225,0.18);
}

/* LOGO IMAGE */

.customer-logo img{

    width:75%;
    height:75%;

    object-fit:contain;

    transition:0.4s ease;
}

.customer-card:hover .customer-logo img{

    transform:scale(1.08);
}

/* CUSTOMER NAME */

.customer-card h5{

    color:rgba(0,0,128,1 );

    font-weight:700;

    font-size:18px;

    line-height:30px;
}

/* RESPONSIVE */

@media(max-width:768px){

    .customer-logo{

        width:110px;
        height:110px;
    }

    .customer-card h5{

        font-size:16px;

        line-height:26px;
    }
}