/* =========================================================
   EMARKET24
   COMMON WEBSITE CSS
   File: assets/css/style.css
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --primary: #793A85;

    --primary-dark: #5e2d68;

    --secondary: #FFC107;

    --dark: #1a1a2e;

    --gray: #6c757d;

    --light: #f5f6fa;

    --white: #ffffff;

    --border: #eeeeee;

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

    --shadow-sm:
        0 4px 18px rgba(0,0,0,.06);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        'Inter',
        sans-serif;

    color:
        var(--dark);

    background:
        var(--light);

    line-height:
        1.6;

}


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

a {

    text-decoration: none;

}


img {

    max-width: 100%;

}


/* =========================================================
   TOP BAR
========================================================= */

.topnav {

    background:
        linear-gradient(
            135deg,
            #6a11cb,
            #2575fc
        );

    color:
        #fff;

    font-size:
        13px;

    padding:
        8px 0;

}


.topnav-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.topnav-left,
.topnav-right {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.topnav-right {

    gap:
        18px;

}


.topnav a {

    color:
        #fff;

    transition:
        .2s;

}


.topnav a:hover {

    color:
        var(--secondary);

}


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

.navbar {

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

    box-shadow:
        0 2px 12px rgba(0,0,0,.06);

    padding:
        12px 0;

    position:
        relative;

    z-index:
        1000;

}


.navbar-brand img {

    height:
        48px;

    width:
        auto;

}


.nav-link {

    color:
        var(--dark) !important;

    font-weight:
        600;

    margin:
        0 4px;

    transition:
        .2s;

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--primary) !important;

}


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

.navbar-toggler {

    border:
        1px solid #ddd;

    padding:
        7px 10px;

}


.navbar-toggler:focus {

    box-shadow:
        0 0 0 3px rgba(121,58,133,.12);

}


.navbar-toggler-icon {

    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23793A85' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}


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

.login-btn {

    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        8px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:
        #fff !important;

    border-radius:
        30px;

    padding:
        9px 17px !important;

    font-size:
        13px;

    font-weight:
        700;

    box-shadow:
        0 5px 15px
        rgba(121,58,133,.25);

    transition:
        .2s;

}


.login-btn i {

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    font-size:
        12px;

}


.login-btn:hover {

    color:
        #fff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(121,58,133,.35);

}


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

.section {

    padding:
        60px 0;

}


.section-title {

    text-align:
        center;

    font-size:
        28px;

    font-weight:
        800;

    margin-bottom:
        35px;

}


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

.btn-primary-custom {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:
        #fff;

    border:
        none;

    border-radius:
        30px;

    padding:
        11px 20px;

    font-weight:
        700;

    transition:
        .2s;

}


.btn-primary-custom:hover {

    color:
        #fff;

    transform:
        translateY(-2px);

}


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

.footer {

    background:
        #171426;

    color:
        #fff;

    padding:
        55px 0 0;

}


.footer-top {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1.2fr;

    gap:
        40px;

    padding-bottom:
        40px;

}


.footer-brand img {

    height:
        45px;

    width:
        auto;

    margin-bottom:
        15px;

}


.footer-brand p {

    color:
        rgba(255,255,255,.65);

    font-size:
        13px;

    line-height:
        1.7;

    max-width:
        320px;

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.footer-column h5 {

    color:
        #fff;

    font-size:
        15px;

    font-weight:
        800;

    margin-bottom:
        8px;

}


.footer-column a {

    color:
        rgba(255,255,255,.68);

    font-size:
        13px;

    transition:
        .2s;

}


.footer-column a:hover {

    color:
        var(--secondary);

    transform:
        translateX(3px);

}


.footer-column a i {

    width:
        18px;

}


.footer-social {

    display:
        flex;

    gap:
        9px;

    margin-top:
        10px;

}


.footer-social a {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    color:
        #fff !important;

    transition:
        .2s;

}


.footer-social a:hover {

    background:
        var(--primary);

    transform:
        translateY(-3px);

}


.copyright {

    border-top:
        1px solid
        rgba(255,255,255,.10);

    padding:
        18px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        rgba(255,255,255,.45);

    font-size:
        12px;

}


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

.form-control,
.form-select {

    border:
        1px solid #ddd;

    border-radius:
        10px;

    padding:
        11px 13px;

}


.form-control:focus,
.form-select:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(121,58,133,.10);

}


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

@media(max-width:991px) {

    .topnav-right {

        display:
            none;

    }


    .navbar-nav {

        padding-top:
            12px;

    }


    .nav-link {

        padding:
            10px 4px !important;

    }


    .login-btn {

        display:
            inline-flex !important;

        width:
            max-content;

    }


    .footer-top {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media(max-width:576px) {

    .topnav {

        display:
            none;

    }


    .navbar {

        padding:
            9px 0;

    }


    .navbar-brand img {

        height:
            42px;

    }


    .section {

        padding:
            45px 0;

    }


    .section-title {

        font-size:
            23px;

    }


    .footer {

        padding-top:
            40px;

    }


    .footer-top {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .copyright {

        flex-direction:
            column;

        text-align:
            center;

    }

}