/* ==========================================
   FREE URL SUBMIT MARKETING CENTER
   Custom Styles
========================================== */


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

:root {

    --primary-color: #0d6efd;
    --secondary-color: #0b5ed7;
    --dark-color: #111827;
    --light-bg: #f8f9fa;
    --text-color: #374151;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Inter", "Segoe UI", Arial, sans-serif;

    color: var(--text-color);

    line-height: 1.7;

}



h1,
h2,
h3,
h4,
h5 {

    color: var(--dark-color);

    font-weight: 700;

}



p {

    line-height: 1.8;

}



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


.navbar {

    transition: all .3s ease;

}


.navbar-brand {

    font-size: 1.35rem;

    letter-spacing: -0.5px;

}



.nav-link {

    font-weight: 500;

    margin-left: 10px;

    transition: .3s;

}


.nav-link:hover {

    color: var(--primary-color) !important;

}





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


.hero {

    padding: 100px 0;

    background:

    linear-gradient(
        135deg,
        #ffffff 0%,
        #f1f7ff 100%
    );

    overflow: hidden;

}



.hero h1 {

    letter-spacing: -1px;

    line-height: 1.2;

}



.hero .lead {

    color: #6b7280;

}



.hero-image {

    max-height: 450px;

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

}



@keyframes floating {


    0% {

        transform: translateY(0px);

    }


    50% {

        transform: translateY(-15px);

    }


    100% {

        transform: translateY(0px);

    }


}




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


.btn {

    transition: all .3s ease;

}



.btn-primary {


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

    border-color: var(--primary-color);

}



.btn-primary:hover {


    background-color: var(--secondary-color);

    transform: translateY(-2px);

}



.btn-warning:hover {


    transform: translateY(-2px);

}



/* ==========================================
   TRUST BAR
========================================== */


.border-top,
.border-bottom {

    border-color: #e5e7eb !important;

}



.bi {

    line-height: 1;

}




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


.card {


    transition: all .3s ease;


}



.card:hover {


    transform: translateY(-8px);

}



.service-card {


    border-radius: 20px;

    overflow: hidden;

}



.service-card:hover {


    box-shadow:
    0 20px 40px rgba(0,0,0,.12)!important;


}



.feature-box {


    border-radius: 15px;

    transition: .3s;


}



.feature-box:hover {


    background: #f8faff;

}





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


section {


    position: relative;


}



.display-6 {


    letter-spacing: -0.5px;

}



/* ==========================================
   STATISTICS
========================================== */


.stat-box {


    padding: 20px;

    transition: .3s;


}



.stat-box:hover {


    transform: translateY(-8px);


}



.stat-box i {


    opacity: .9;


}



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


.badge {


    font-weight: 600;

    letter-spacing: .5px;

}



.rounded-5 {


    border-radius: 2rem !important;


}





/* ==========================================
   HOW IT WORKS
========================================== */


.card .display-4 {


    font-weight: 800;


}




/* ==========================================
   FAQ
========================================== */


.accordion-item {


    border: none;

    margin-bottom: 10px;

    border-radius: 15px !important;

    overflow: hidden;


}



.accordion-button {


    font-weight: 600;

    padding: 20px;


}



.accordion-button:not(.collapsed) {


    background-color: #eaf2ff;

    color: var(--primary-color);


}



.accordion-button:focus {


    box-shadow: none;


}





/* ==========================================
   CTA
========================================== */


.bg-primary {


    background:

    linear-gradient(
        135deg,
        #0d6efd,
        #084298
    ) !important;


}





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


footer {


    background:
    linear-gradient(
        135deg,
        #111827,
        #030712
    ) !important;


}



footer a {


    transition: .3s;


}



footer a:hover {


    color: white !important;


}





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


@media(max-width:991px){


    .hero {


        padding: 70px 0;


    }



    .hero h1 {


        font-size: 2.5rem;


    }



}



@media(max-width:576px){


    .hero h1 {


        font-size: 2rem;


    }



    .display-6 {


        font-size: 1.8rem;


    }



    .btn-lg {


        width: 100%;

        margin-bottom:10px;


    }


}