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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root {
    --primary-color: #F17511;
    --secondary-color: #111827;
    --light-bg: #f8fafc;
    --text-color: #4b5563;
}


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


html {
    scroll-behavior:smooth;
}


body {

    font-family:'Inter', sans-serif;
    color:var(--text-color);
    overflow-x:hidden;

}


h1,h2,h3,h4,h5 {

    color:var(--secondary-color);
    font-weight:700;

}


a {

    text-decoration:none;

}


section {

    padding:80px 0;

}

.navbar-brand img {
    width: 270px;
}


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


.header .navbar {

    padding:18px 0;

}


.navbar-brand span {

    color:var(--primary-color);

}

.hero-buttons .btn-primary:hover{
    background: #111827;
}



.hero-buttons .btn-primary2{
    background: #111827;
}

.hero-buttons .btn-primary2:hover{
    background: #F17511;
}

.nav-link {

    font-weight:500;
    margin:0 10px;
    color:#374151;

}


.nav-link:hover {

    color:var(--primary-color);

}



.btn-primary {

    background:var(--primary-color);
    border:none;
    padding:12px 28px;
    border-radius:30px;
    font-weight:600;

}


 .btn-primary:hover{
    background: #111827;
}


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


.hero-section {

    padding-top:150px;
    background:
    linear-gradient(135deg,#eff6ff,#ffffff);

}



.hero-section h1 {

    font-size:58px;
    line-height:1.15;
    font-weight:800;

}


.hero-section p {

    font-size:18px;
    margin:25px 0;
    max-width:550px;

}


.hero-image img {

    width:100%;
    animation:float 4s infinite ease-in-out;

}


@keyframes float {
    0%,100%{
        transform:translateY(0);
    }

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



.counter-box {
    display:flex;
    gap:40px;
}


.counter-box h3 {

    color:var(--primary-color);
    font-size:35px;

}


.counter-box p {

    font-size:14px;
    margin:0;

}





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


.section-title {

    margin-bottom:50px;

}


.section-title h2 {

    font-size:40px;

}


.section-title p {

    color:#6b7280;

}




/* =========================
FEATURE CARDS
========================= */


.feature-card,
.service-card {

    background:white;
    padding:35px 25px;
    text-align:center;
    border-radius:15px;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;

}


.feature-card:hover,
.service-card:hover {

    transform:translateY(-10px);

}



.feature-card i,
.service-card i {

    font-size:40px;
    color:var(--primary-color);
    margin-bottom:20px;

}



.service-card h3 {

    font-size:22px;

}



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


.about-list {

    list-style:none;
    padding:0;

}


.about-list li {

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

}


.about-list i {

    color:#22c55e;
    margin-right:10px;

}





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


.process-box {

    background:white;
    padding:25px 10px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);

}


.process-box i {

    font-size:35px;
    color:var(--primary-color);

}


.process-box h5 {

    color:var(--primary-color);
    margin-top:15px;

}




/* =========================
PORTFOLIO
========================= */


.portfolio-card {

    position:relative;
    overflow:hidden;
    border-radius:15px;

}


.portfolio-card img {

    width:100%;
    height:300px;
    object-fit:cover;

}




.portfolio-overlay {

    position:absolute;
    bottom:-100%;
    left:0;
    width:100%;
    padding:30px;
    background:rgba(37,99,235,.9);
    color:white;
    transition:.4s;

}


.portfolio-overlay h4 {

    color:white;

}


.portfolio-card:hover .portfolio-overlay {

    bottom:0;

}




/* =========================
PRICING
========================= */


.price-card {

    background:white;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.08);

}


.price-card.active {

    border:3px solid var(--primary-color);

}


.price-card h2 {

    color:var(--primary-color);
    margin:20px 0;

}


.price-card ul {

    list-style:none;
    padding:0;

}


.price-card li {

    padding:10px 0;

}





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


.testimonial-card {

    background:white;
    padding:40px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.testimonial-card p {

    font-size:18px;
    font-style:italic;

}




/* =========================
CONTACT
========================= */


.contact-form input,
.contact-form textarea {

    margin-bottom:20px;
    padding:15px;

}


.contact-info {

    padding:30px;

}


.contact-info i {

    color:var(--primary-color);
    margin-right:10px;

}





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


.footer {

    background:#111827;
    color:white;
    padding:50px 0;

}


.footer h3 {

    color:white;

}


.footer p {

    color:#cbd5e1;

}


.social-icons a {

    color:white;
    font-size:22px;
    margin:0 10px;

}


.copyright {

    margin-top:20px;

}




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


.feature-card,
.service-card,
.price-card,
.process-box {

    transition:all .3s ease;

}