:root {

    --primary: #2F74B5;
    --secondary: #F39C3D;
    --dark: #1E293B;
    --light: #F8FAFC;
    --white: #ffffff;

}

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

body {

    font-family: 'Poppins', sans-serif;
    background: var(--light);
    color: var(--dark);
    overflow-x: hidden;

}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

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

/* ==========================
   PRELOADER
========================== */

#preloader {

    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 99999;

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

    transition: all .6s ease;

}

.loader-wrapper {

    position: relative;
    width: 240px;
    height: 240px;

}

.loader-logo {

    width: 200px;
    height: 200px;

    position: absolute;
    top: 20px;
    left: 20px;

    background: #fff;
    border-radius: 50%;

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

    overflow: hidden;

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

}

.loader-logo img {

    width: 85%;
    height: auto;
    object-fit: contain;

}

.loader-ring {

    width: 240px;
    height: 240px;

    border-radius: 50%;

    border: 4px solid rgba(47,116,181,.15);

    border-top-color: #2F74B5;
    border-right-color: #F39C3D;

    animation: spinLoader 1s linear infinite;

}

@keyframes spinLoader {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Hide */

body.loaded #preloader {

    opacity: 0;
    visibility: hidden;

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

.custom-navbar {

    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(15px);
    padding: 2px 0;
    transition: .4s;
    border-bottom: 1px solid rgba(0,0,0,.04);

}

.navbar-brand img {

    max-height: 55px;

}

.nav-link {

    color: var(--dark);
    font-weight: 500;
    margin: 0 12px;
    transition: .3s;

}

.nav-link:hover {

    color: var(--primary);

}

.navbar-toggler i {

    font-size: 2rem;
    color: var(--primary);

}


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

.btn-theme {

    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    transition: .4s;
    border: none;

}

.btn-theme:hover {

    background: var(--secondary);
    color: #fff;
    transform: translateY(-3px);

}

.btn-outline-theme {

    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    transition: .4s;

}

.btn-outline-theme:hover {

    background: var(--primary);
    color: #fff;

}


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

.hero-section {

    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 95px;
    padding-bottom: 95px;
    overflow: hidden;

}

.hero-badge {

    background: rgba(47,116,181,.10);
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;

}

.hero-title {

    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    /* margin-bottom: 25px; */

}

.hero-desc {

    font-size: 1.1rem;
    line-height: 1.8;
    /* margin-bottom: 35px; */

}

.hero-btns {
    padding-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;

}

.hero-features {

    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* margin-top: 35px; */

}

.hero-features div {

    font-weight: 500;

}

.hero-features i {

    color: #28a745;
    margin-right: 6px;

}


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

.hero-image-wrapper {

    position: relative;

}

.hero-image {

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

}

.hero-shape-1 {

    width: 350px;
    height: 350px;
    background: rgba(243,156,61,.15);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    right: -100px;
    filter: blur(60px);

}

.hero-shape-2 {

    width: 250px;
    height: 250px;
    background: rgba(47,116,181,.15);
    border-radius: 50%;
    position: absolute;
    bottom: -100px;
    left: -100px;
    filter: blur(60px);

}


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

@media(max-width:991px){

    .hero-section{
        padding-bottom: 50px;
        min-height:auto;
        text-align:center;

    }
    .cta-section{
        padding: 50px 0;
    }
.section-padding{
    padding: 50px 0 !important;
}
    .hero-btns{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-title{

        font-size:2.5rem;

    }

    .navbar-collapse{

        background:#fff;
        padding:25px;
        border-radius:20px;
        margin-top:15px;
        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }
    .footer-section{
        padding: 50px 0 20px !important;
    }

}

@media(max-width:576px){
 .cta-section{
        padding: 50px 0 !important;
    }
    .hero-title{

        font-size:2rem;

    }

    .hero-desc{

        font-size:1rem;

    }
    .footer-section{
        padding: 50px 0 20px !important;
    }

}
@media(max-width:991px){

    .navbar-collapse{

        margin-top:20px;
        padding:30px;
        border-radius:25px;

    }

    .navbar-nav{

        gap:10px;
    }

    .nav-link{

        padding:12px 0;
    }

}
/* ==========================
   COMMON SECTION
========================== */

.section-badge {

    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(47,116,181,.08);
    color: var(--primary);
    font-weight: 600;

}

.section-title {

    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;

}

.section-desc {

    color: #64748B;
    line-height: 1.8;

}


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

.about-section {

    background: #fff;

}

.about-image-wrapper {

    position: relative;

}

.about-main-image {

    border-radius: 30px;

    box-shadow: 0 20px 60px rgba(0,0,0,.08);

}

.experience-card {

    position: absolute;

    right: 15px;
    bottom: 15px;

    background: white;

    padding: 25px;

    border-radius: 25px;

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

}

.experience-card h3 {

    margin: 0;
    color: var(--primary);
    font-size: 2rem;
    font-weight: 700;

}

.about-feature {

    background: #fff;

    border-radius: 20px;

    padding: 18px;

    display: flex;

    gap: 15px;

    align-items: center;

    transition: .4s;

    border: 1px solid #eef2f7;

}

.about-feature:hover {

    transform: translateY(-5px);

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

}

.about-feature i {

    width: 55px;
    height: 55px;

    border-radius: 15px;

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

    background: rgba(47,116,181,.10);

    color: var(--primary);

    font-size: 1.3rem;

}

.about-feature h6 {

    margin-bottom: 3px;
    font-weight: 600;

}

.about-feature p {

    margin: 0;
    font-size: 14px;
    color: #64748B;

}


/* ==========================
   WHY US
========================== */

.why-us-section {

    background: #f8fbff;

}

.why-card {

    background: #fff;

    border-radius: 25px;

    padding: 35px 25px;

    text-align: center;

    height: 100%;

    transition: .4s;

    border: 1px solid #eef2f7;

}

.why-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(47,116,181,.12);

}

.why-icon {

    width: 75px;
    height: 75px;

    margin: auto;

    border-radius: 20px;

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

    background: rgba(47,116,181,.08);

    color: var(--primary);

    font-size: 1.8rem;

    margin-bottom: 20px;

}

.why-card h5 {

    font-weight: 600;
    margin-bottom: 15px;

}

.why-card p {

    color: #64748B;
    margin: 0;

}


/* ==========================
   MOBILE
========================== */

@media(max-width:991px){

    .section-title{

        font-size:2.2rem;

    }

    .experience-card{

        position:relative;

        right:-105px;
        bottom:75px;

        margin-top:20px;

        display:inline-block;

    }

}

@media(max-width:576px){

    .section-title{

        font-size:1.8rem;

    }

}

/* ==========================
   SERVICES
========================== */

.services-section{
    background:#fff;
}

.service-card{

    background:#fff;
    padding:35px;
    border-radius:28px;

    border:1px solid #eef2f7;

    height:100%;

    transition:.4s;

    position:relative;
    overflow:hidden;
}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 60px rgba(47,116,181,.12);

}

.service-icon{

    width:75px;
    height:75px;

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

    border-radius:20px;

    background:rgba(47,116,181,.08);

    margin-bottom:20px;

    font-size:28px;

    color:var(--primary);

}

.service-card h4{

    font-weight:600;
    margin-bottom:15px;

}

.service-card p{

    color:#64748B;
    margin:0;
    line-height:1.8;

}



/* ==========================
   INDUSTRIES
========================== */

.industries-section{

    background:#f8fbff;

}

.industry-card{

    background:#fff;

    text-align:center;

    padding:35px 20px;

    border-radius:25px;

    transition:.4s;

    border:1px solid #eef2f7;

}

.industry-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 50px rgba(47,116,181,.12);

}

.industry-card i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:15px;

    display:block;

}

.industry-card h5{

    margin:0;
    font-weight:600;

}



/* ==========================
   COUNTER
========================== */

.counter-section{

    padding:80px 0;

    background:
    linear-gradient(
    135deg,
    #2F74B5,
    #4f93d1
    );

}

.counter-box{

    text-align:center;
    color:#fff;

}

.counter-box h2{

    font-size:3rem;
    font-weight:700;
    margin-bottom:10px;

}

.counter-box p{

    margin:0;
    opacity:.9;

}

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

.process-section{
    background:#fff;
}

.process-card{

    background:#fff;
    padding:30px;
    border-radius:25px;

    border:1px solid #eef2f7;

    text-align:center;

    height:100%;

    transition:.4s;
}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(47,116,181,.12);

}

.process-number{

    width:70px;
    height:70px;

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

    margin:auto auto 20px;

    border-radius:50%;

    background:rgba(47,116,181,.08);

    color:var(--primary);

    font-size:22px;
    font-weight:700;
}

/* CTA */

.cta-section{

    padding:100px 0;

}

.cta-box{

    background:linear-gradient(135deg,#2F74B5,#4a8ac8);

    border-radius:35px;

    padding:60px;

    color:#fff;
}

/* FAQ */

.accordion-item{

    border:none;
    margin-bottom:15px;

    border-radius:20px !important;

    overflow:hidden;

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

.accordion-button{

    padding:20px;

    font-weight:600;
}

.accordion-button:not(.collapsed){

    background:#2F74B5;
    color:#fff;
}

/* CONTACT */

.contact-section{

    background:#f8fbff;
}

.contact-form-box{

    background:#fff;

    padding:35px;

    border-radius:30px;

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

.contact-item{

    display:flex;

    gap:20px;

    margin-bottom:25px;
}

.contact-item i{

    width:55px;
    height:55px;

    border-radius:15px;

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

    background:rgba(47,116,181,.08);

    color:var(--primary);

    font-size:20px;
}

.form-control{

    border-radius:15px;
    min-height:55px;
}

textarea.form-control{

    min-height:150px;
}
.faq-section{
    background: white;
}

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

.footer-section{

    background:#0f172a;

    color:#fff;

    padding:80px 0 20px;
}

.footer-logo{
    background: white;
    padding: 10px;
    border-radius: 15px;
    max-width:220px;

    margin-bottom:20px;
}

.footer-text{

    color:#cbd5e1;

    line-height:1.8;
}

.footer-section h5{

    margin-bottom:25px;

    font-weight:600;
}

.footer-links{

    padding:0;
    margin:0;

    list-style:none;
}

.footer-links li{

    margin-bottom:12px;
}

.footer-links a{

    color:#cbd5e1;

    transition:.3s;
}

.footer-links a:hover{

    color:#fff;

    padding-left:5px;
}

.footer-contact{

    list-style:none;

    padding:0;
}

.footer-contact li{

    margin-bottom:15px;

    color:#cbd5e1;
}

.footer-contact i{

    color:var(--secondary);

    margin-right:10px;
}

.social-links{

    display:flex;

    gap:12px;

    margin-top:20px;
}

.social-links a{

    width:45px;
    height:45px;

    border-radius:50%;

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

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

    color:#fff;

    transition:.4s;
}

.social-links a:hover{

    background:var(--secondary);

    transform:translateY(-5px);
}

.copyright-area{

    text-align:center;

    color:#94a3b8;
}

/* ==========================
WHATSAPP
========================== */

.whatsapp-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#25D366;

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

    color:#fff;

    font-size:28px;

    z-index:999;

    box-shadow:
    0 10px 30px rgba(37,211,102,.4);

    transition:.4s;
}

.whatsapp-btn:hover{

    transform:translateY(-5px);

    color:#fff;
}

/* ==========================
SCROLL TOP
========================== */

#scrollTopBtn{

    position:fixed;

    bottom:100px;
    right:25px;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:20px;

    display:none;

    z-index:999;

    transition:.4s;
}

#scrollTopBtn:hover{

    transform:translateY(-5px);

}
.custom-navbar.scrolled{

    background:#fff;

    box-shadow:
    0 10px 40px rgba(0,0,0,.08);

}