/* =========================================================
   HIKMATULLAH SIRAJ
   Software Developer & IT Instructor
   Main Website Stylesheet
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */

   :root {

    --brand: #e0912f;
    --brand-dark: #bd7220;
    --brand-light: #fff3e5;

    --navy: #101b30;
    --navy-2: #1c2a43;
    --navy-3: #243653;

    --text: #172033;
    --text-light: #dbe3ef;
    --muted: #687386;

    --bg: #f7f9fc;
    --white: #ffffff;

    --border: #e7ebf1;

    --success: #25d366;
    --danger: #dc3545;

    --shadow-sm:
        0 8px 25px rgba(16, 27, 48, .05);

    --shadow:
        0 12px 35px rgba(16, 27, 48, .07);

    --shadow-lg:
        0 20px 50px rgba(16, 27, 48, .12);

    --radius: 16px;
    --transition: .25s ease;

}


/* =========================================================
   2. RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {

    margin: 0;

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

    color: var(--text);

    background: var(--bg);

    line-height: 1.7;

    overflow-x: hidden;
}

img {

    max-width: 100%;

    height: auto;

    display: block;
}

a {

    text-decoration: none;

    transition: var(--transition);
}

button,
input,
textarea,
select {

    font-family: inherit;
}


/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    color: var(--text);

    font-weight: 700;

    line-height: 1.25;

    margin-top: 0;
}

h1 {

    font-size: clamp(
        2.7rem,
        6vw,
        5rem
    );

    font-weight: 800;

    letter-spacing: -2px;
}

h2 {

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight: 800;
}

h3 {

    font-size: 1.7rem;

    font-weight: 700;
}

h4 {

    font-size: 1.35rem;

    font-weight: 700;
}

p {

    color: var(--muted);

    margin-bottom: 1rem;
}

.lead {

    font-size: 1.15rem;

    line-height: 1.8;
}


/* =========================================================
   4. CONTAINER
   ========================================================= */

.container {

    width: 100%;

}


/* =========================================================
   5. NAVBAR
   ========================================================= */

.site-navbar {

    background: var(--navy) !important;

    padding: 14px 0;

    position: sticky;

    top: 0;

    width: 100%;

    z-index: 1050;

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

}

.site-navbar .navbar-brand {

    color: #fff !important;

    font-weight: 800;

    font-size: 1.15rem;

    display: flex;

    align-items: center;

}

.brand-mark {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--brand);

    color: #fff;

    border-radius: 10px;

    margin-right: 9px;

    font-weight: 800;

    font-size: 15px;

}

.site-navbar .navbar-nav {

    gap: 2px;

}

.site-navbar .nav-link {

    position: relative;

    color: #dfe5ef !important;

    padding: 9px 11px;

    font-size: .95rem;

    font-weight: 500;

}

.site-navbar .nav-link:hover {

    color: var(--brand) !important;

}


/* =========================================================
   ACTIVE MENU
   ========================================================= */

.site-navbar .nav-link.active {

    color: var(--brand) !important;

    font-weight: 700;

}

.site-navbar .nav-link.active::after {

    content: "";

    position: absolute;

    left: 11px;

    right: 11px;

    bottom: 1px;

    height: 2px;

    background: var(--brand);

    border-radius: 20px;

}


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

.site-navbar .navbar-toggler {

    border-color:
        rgba(255, 255, 255, .3);

    padding: 7px 10px;

}

.site-navbar .navbar-toggler:focus {

    box-shadow:
        0 0 0 .2rem
        rgba(224, 145, 47, .25);

}


/* =========================================================
   6. BUTTONS
   ========================================================= */

.btn {

    transition: var(--transition);

}

.btn-brand {

    background: var(--brand) !important;

    border: 1px solid var(--brand) !important;

    color: #fff !important;

    font-weight: 700;

    border-radius: 9px;

    padding: 11px 22px;

}

.btn-brand:hover {

    background: var(--brand-dark) !important;

    border-color: var(--brand-dark) !important;

    color: #fff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(224, 145, 47, .25);

}

.btn-outline-light {

    color: #fff !important;

    border-color:
        rgba(255,255,255,.7) !important;

}

.btn-outline-light:hover {

    background: #fff !important;

    color: var(--navy) !important;

    border-color: #fff !important;

}

.btn-lg {

    padding: 13px 26px;

}


/* =========================================================
   7. HERO
   ========================================================= */

.hero {

    position: relative;

    padding: 110px 0;

    background:

        radial-gradient(
            circle at 85% 20%,
            #30486e 0%,
            #1c2a43 35%,
            #101b30 75%
        ) !important;

    color: #fff;

    overflow: hidden;

}

.hero::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background:
        rgba(224, 145, 47, .06);

    top: -180px;

    right: -120px;

}

.hero::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

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

    bottom: -120px;

    left: -80px;

}

.hero .container {

    position: relative;

    z-index: 2;

}

.hero h1 {

    color: #fff;

    font-size:
        clamp(2.7rem, 6vw, 5rem);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

    margin: 18px 0;

}

.hero p {

    color: #dbe3ef;

    font-size: 1.15rem;

    max-width: 720px;

}

.hero .card {

    background: #fff !important;

    color: var(--text) !important;

}

.hero .card h3,
.hero .card h4 {

    color: var(--text);

}

.hero .card p {

    color: var(--muted);

}


/* =========================================================
   8. EYEBROW
   ========================================================= */

.eyebrow {

    color: var(--brand);

    font-weight: 800;

    letter-spacing: 2px;

    font-size: .82rem;

    text-transform: uppercase;

}


/* =========================================================
   9. HERO TRUST
   ========================================================= */

.hero-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    color: #dbe3ef;

    font-size: .9rem;

}

.hero-trust span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}

.hero-trust i {

    color: var(--brand);

}


/* =========================================================
   10. SECTIONS
   ========================================================= */

.section {

    padding: 85px 0;

}

.section h2 {

    font-weight: 800;

    color: var(--text);

}

.section-dark {

    background: var(--navy);

    color: #fff;

}

.section-dark h2,
.section-dark h3,
.section-dark h4 {

    color: #fff;

}


/* =========================================================
   11. CARDS
   ========================================================= */

.card {

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition: .3s ease;

    background: #fff;

}

.card:hover {

    transform:
        translateY(-5px);

    box-shadow: var(--shadow-lg);

}

.card h3,
.card h4,
.card h5 {

    color: var(--text);

}


/* =========================================================
   12. SERVICE CARDS
   ========================================================= */

.service-card {

    height: 100%;

    padding: 30px;

}

.icon {

    width: 52px;

    height: 52px;

    border-radius: 13px;

    background:
        var(--brand-light);

    color: var(--brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    margin-bottom: 18px;

}

.service-link {

    display: inline-block;

    color: var(--brand);

    font-weight: 600;

    margin-top: 8px;

}

.service-link:hover {

    color: var(--brand-dark);

}


/* =========================================================
   13. STATS
   ========================================================= */

.stat {

    font-weight: 800;

    font-size: 2rem;

    color: var(--brand);

}


/* =========================================================
   14. BUSINESS AUTOMATION
   ========================================================= */

.automation-section {

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-2)
        );

    color: #fff;

}

.automation-section h2 {

    color: #fff;

}

.automation-section p {

    color: #dbe3ef;

}


/* Bootstrap bg-dark override */

.bg-dark {

    background-color:
        var(--navy) !important;

}


/* =========================================================
   15. PRICING
   ========================================================= */

.pricing-card {

    height: 100%;

    padding: 30px;

    position: relative;

}

.pricing-card .price {

    color: var(--brand);

    font-size: 2.5rem;

    font-weight: 800;

}

.pricing-card .period {

    color: var(--muted);

    font-size: .9rem;

}

.pricing-card.featured {

    border: 2px solid var(--brand);

    transform:
        translateY(-8px);

}

.pricing-card.featured:hover {

    transform:
        translateY(-13px);

}

.pricing-badge {

    position: absolute;

    top: -13px;

    right: 20px;

    background: var(--brand);

    color: #fff;

    padding: 5px 14px;

    border-radius: 50px;

    font-size: .8rem;

    font-weight: 700;

}


/* =========================================================
   16. FORMS
   ========================================================= */

.form-label {

    font-weight: 600;

    color: var(--text);

}

.form-control,
.form-select {

    padding: .75rem;

    border-radius: 10px;

    border: 1px solid #dce1e8;

}

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

    border-color: var(--brand);

    box-shadow:
        0 0 0 .2rem
        rgba(224, 145, 47, .15);

}


/* =========================================================
   17. BLOG
   ========================================================= */

.blog-card {

    overflow: hidden;

    height: 100%;

}

.blog-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}

.blog-card-body {

    padding: 25px;

}

.blog-category {

    color: var(--brand);

    font-size: .8rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}


/* =========================================================
   18. PROJECTS
   ========================================================= */

.project-card {

    overflow: hidden;

    height: 100%;

}

.project-card img {

    width: 100%;

    height: 240px;

    object-fit: cover;

    transition: .4s ease;

}

.project-card:hover img {

    transform: scale(1.04);

}

.project-card-body {

    padding: 25px;

}

.project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}

.project-tech span {

    background:
        var(--brand-light);

    color:
        var(--brand-dark);

    padding: 4px 10px;

    border-radius: 50px;

    font-size: .75rem;

    font-weight: 600;

}


/* =========================================================
   19. COURSES
   ========================================================= */

.course-card {

    height: 100%;

    padding: 28px;

}

.course-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--brand-light);

    color:
        var(--brand);

    border-radius: 14px;

    font-size: 1.5rem;

    margin-bottom: 18px;

}

.course-price {

    color: var(--brand);

    font-size: 1.4rem;

    font-weight: 800;

}


/* =========================================================
   20. TESTIMONIALS
   ========================================================= */

.testimonial-card {

    height: 100%;

    padding: 30px;

}

.testimonial-stars {

    color: var(--brand);

    letter-spacing: 2px;

}

.testimonial-author {

    font-weight: 700;

    color: var(--text);

}


/* =========================================================
   21. ABOUT
   ========================================================= */

.about-image {

    border-radius: 20px;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

}

.about-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.skill-item {

    margin-bottom: 18px;

}

.skill-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 7px;

    font-weight: 600;

}

.skill-bar {

    height: 8px;

    background: #e9edf2;

    border-radius: 50px;

    overflow: hidden;

}

.skill-progress {

    height: 100%;

    background: var(--brand);

    border-radius: 50px;

}


/* =========================================================
   22. CONTACT
   ========================================================= */

.contact-card {

    padding: 30px;

    height: 100%;

}

.contact-icon {

    width: 50px;

    height: 50px;

    border-radius: 12px;

    background: var(--brand-light);

    color: var(--brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;

}


/* =========================================================
   23. WHATSAPP
   ========================================================= */

.floating-wa {

    position: fixed;

    right: 22px;

    bottom: 22px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: var(--success);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    z-index: 1100;

    box-shadow:
        0 8px 25px rgba(0,0,0,.2);

}

.floating-wa:hover {

    color: #fff;

    transform:
        translateY(-4px)
        scale(1.05);

}


/* =========================================================
   24. FOOTER
   ========================================================= */

.site-footer,
.footer {

    background:
        var(--navy) !important;

    color: #fff;

    padding: 60px 0 25px;

}

.site-footer h5,
.site-footer h6 {

    color: #fff;

}

.site-footer p {

    color: #aeb9ca;

}

.site-footer a,
.footer a {

    color: #aeb9ca;

}

.site-footer a:hover,
.footer a:hover {

    color: var(--brand);

}


/* =========================================================
   25. BREADCRUMB
   ========================================================= */

.breadcrumb {

    margin-bottom: 0;

}

.breadcrumb-item a {

    color: var(--brand);

}

.breadcrumb-item.active {

    color: var(--muted);

}


/* =========================================================
   26. ALERTS
   ========================================================= */

.alert {

    border-radius: 10px;

    border: none;

}


/* =========================================================
   27. PAGINATION
   ========================================================= */

.pagination .page-link {

    color: var(--brand);

}

.pagination .page-item.active .page-link {

    background:
        var(--brand);

    border-color:
        var(--brand);

    color: #fff;

}


/* =========================================================
   28. ADMIN PANEL
   ========================================================= */

.admin-sidebar {

    min-height: 100vh;

    background:
        var(--navy);

    padding: 20px 12px;

}

.admin-sidebar h4 {

    color: #fff;

    padding: 10px 16px;

}

.admin-sidebar a {

    color: #dbe3ef;

    display: block;

    padding: 10px 16px;

    border-radius: 8px;

    margin-bottom: 3px;

}

.admin-sidebar a:hover {

    background:
        var(--navy-3);

    color: #fff;

}

.admin-sidebar a.active {

    background:
        var(--brand);

    color: #fff;

}

.admin-content {

    padding: 30px;

}

.admin-card {

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 25px;

    box-shadow: var(--shadow-sm);

}

.dashboard-stat {

    padding: 25px;

    border-radius: 15px;

    background: #fff;

    border: 1px solid var(--border);

}

.dashboard-stat h3 {

    font-size: 2rem;

    color: var(--brand);

    font-weight: 800;

}


/* =========================================================
   29. TABLES
   ========================================================= */

.table {

    vertical-align: middle;

}

.table thead th {

    color: var(--text);

    font-weight: 700;

    background: #f7f9fc;

    border-bottom:
        2px solid var(--border);

}

.table tbody tr:hover {

    background:
        #fafbfc;

}


/* =========================================================
   30. BADGES
   ========================================================= */

.badge-brand {

    background:
        var(--brand-light);

    color:
        var(--brand-dark);

}


/* =========================================================
   31. LOGIN
   ========================================================= */

.login-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-2)
        );

}

.login-card {

    width: 100%;

    max-width: 430px;

    background: #fff;

    border-radius: 18px;

    padding: 35px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

}


/* =========================================================
   32. FILE UPLOAD
   ========================================================= */

.upload-box {

    border: 2px dashed #dce1e8;

    border-radius: 15px;

    padding: 40px;

    text-align: center;

    background: #fafbfc;

    transition: var(--transition);

}

.upload-box:hover {

    border-color:
        var(--brand);

    background:
        var(--brand-light);

}


/* =========================================================
   33. SEARCH
   ========================================================= */

.search-box {

    position: relative;

}

.search-box i {

    position: absolute;

    left: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    color: var(--muted);

}

.search-box input {

    padding-left: 42px;

}


/* =========================================================
   34. PAGINATION / LOADERS
   ========================================================= */

.spinner-brand {

    width: 2rem;

    height: 2rem;

    border:
        .25em solid
        rgba(224,145,47,.2);

    border-right-color:
        var(--brand);

    border-radius: 50%;

    animation:
        spinner .75s linear infinite;

}

@keyframes spinner {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   35. ANIMATIONS
   ========================================================= */

.fade-up {

    animation:
        fadeUp .7s ease both;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

.float-animation {

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

}

@keyframes floating {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* =========================================================
   36. RTL SUPPORT
   ========================================================= */

html[dir="rtl"] body {

    text-align: right;

}

html[dir="rtl"] .site-navbar .nav-link.active::after {

    left: 11px;

    right: 11px;

}

html[dir="rtl"] .brand-mark {

    margin-right: 0;

    margin-left: 9px;

}

html[dir="rtl"] .hero-trust {

    direction: rtl;

}

html[dir="rtl"] .floating-wa {

    right: auto;

    left: 22px;

}


/* =========================================================
   37. MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .site-navbar .navbar-nav {

        padding-top: 12px;

        gap: 2px;

    }

    .site-navbar .nav-link {

        padding: 9px 12px;

    }

    .site-navbar .nav-link.active {

        background:
            rgba(224,145,47,.10);

        border-radius: 8px;

        padding-left: 15px;

    }

    .site-navbar .nav-link.active::after {

        display: none;

    }

    .hero {

        padding: 75px 0;

    }

    .hero h1 {

        font-size:
            clamp(2.5rem, 9vw, 4rem);

    }

    .section {

        padding: 65px 0;

    }

    .pricing-card.featured {

        transform: none;

    }

}


/* =========================================================
   38. TABLET
   ========================================================= */

@media (max-width: 768px) {

    .hero {

        text-align: center;

    }

    .hero p {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-trust {

        justify-content: center;

    }

    .hero .btn {

        margin-bottom: 8px;

    }

    .section {

        padding: 55px 0;

    }

}


/* =========================================================
   39. MOBILE PHONE
   ========================================================= */

@media (max-width: 576px) {

    h1 {

        letter-spacing: -1px;

    }

    .hero {

        padding: 60px 0;

    }

    .hero h1 {

        font-size: 2.5rem;

    }

    .hero p {

        font-size: 1rem;

    }

    .hero .btn-lg {

        width: 100%;

        margin-right: 0 !important;

    }

    .hero-trust {

        display: grid;

        gap: 10px;

        justify-content: center;

    }

    .section {

        padding: 50px 0;

    }

    .floating-wa {

        width: 52px;

        height: 52px;

        right: 15px;

        bottom: 15px;

        font-size: 23px;

    }

    html[dir="rtl"] .floating-wa {

        right: auto;

        left: 15px;

    }

}


/* =========================================================
   40. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}


/* =========================================================
   41. PRINT
   ========================================================= */

@media print {

    .site-navbar,
    .floating-wa,
    .btn,
    .site-footer {

        display: none !important;

    }

    body {

        background: #fff;

    }

}


/* =========================================================
   END
========================================================= */



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

.site-footer {
    background: linear-gradient(135deg, #101b30, #172641);
    color: #fff;
    padding: 65px 0 20px;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(224, 145, 47, .08);
    border-radius: 50%;
    top: -100px;
    right: -80px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0912f;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 8px 25px rgba(224, 145, 47, .25);
}

.footer-brand h4 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

.footer-brand span {
    display: block;
    color: #aeb8c8;
    font-size: 13px;
    margin-top: 3px;
}

.footer-text {
    max-width: 470px;
    color: #aeb8c8;
    line-height: 1.8;
}

.footer-title {
    position: relative;
    display: inline-block;
    margin-bottom: 22px;
    font-size: 16px;
    font-weight: 700;
}

.footer-title::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 3px;
    background: #e0912f;
    border-radius: 10px;
    left: 0;
    bottom: -9px;
}

.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #aeb8c8;
    text-decoration: none;
    transition: .25s;
}

.footer-links a i {
    color: #e0912f;
    font-size: 11px;
    margin-right: 6px;
}

.footer-links a:hover {
    color: #e0912f;
    padding-left: 5px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    color: #aeb8c8;
}

.footer-contact i {
    color: #e0912f;
    font-size: 17px;
    margin-top: 2px;
}

.footer-contact a {
    color: #aeb8c8;
    text-decoration: none;
    word-break: break-word;
    transition: .25s;
}

.footer-contact a:hover {
    color: #e0912f;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.footer-socials a:hover {
    background: #e0912f;
    color: #fff;
    transform: translateY(-4px);
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 18px;
    border-radius: 9px;
    background: #e0912f;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.footer-cta:hover {
    background: #bd7220;
    color: #fff;
    transform: translateY(-2px);
}

.footer-line {
    border-color: rgba(255,255,255,.12);
    margin: 45px 0 20px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.footer-bottom p {
    margin: 0;
    color: #8995a8;
    font-size: 14px;
}

.footer-bottom strong {
    color: #e0912f;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: #8995a8;
    text-decoration: none;
    font-size: 14px;
    transition: .25s;
}

.footer-bottom-links a:hover {
    color: #e0912f;
}


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

@media (max-width: 767px) {

    .site-footer {
        padding: 50px 0 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }

}

@media (max-width: 575px) {

    .footer-brand h4 {
        font-size: 19px;
    }

    .footer-text {
        font-size: 14px;
    }

    .footer-socials {
        margin-bottom: 15px;
    }

    .footer-title {
        margin-top: 15px;
    }

}