/* =========================================================
   TABLE OF CONTENTS
   =========================================================

   1. General
   2. Navbar
   3. Banner
   4. About
   5. Competencies
   6. Education
   7. Languages
   8. Contact
   9. Footer
   10. Responsive Design

========================================================= */


/* =========================================================
   1. GENERAL
========================================================= */

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


:root {

    /* Background Colors */

    --primary-color: #4458dc;
    --secondary-color: #854fee;

    --bg-white: #ffffff;
    --bg-light: #faf8ff;
    --bg-black: #000000;
    --bg-gray: #eeeeee;

    --gradient:
        linear-gradient(
            to right,
            #4458dc 0%,
            #854fee 100%
        );


    /* Text Colors */

    --primary-text: #4458dc;
    --secondary-text: #854fee;

    --text-white: #ffffff;
    --text-black: #000000;
    --text-gray: #777777;


    /* Fonts */

    --primary-font: 'Rubik', sans-serif;
    --secondary-font: 'Roboto', sans-serif;

}


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--secondary-font);

    width: 100%;

    background-image: url('../images/body-bg.png.webp');

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

}


a {
    text-decoration: none;
}


ul {
    padding-left: 0;
}


img {
    max-width: 100%;
}


/* Scrollbar */

::-webkit-scrollbar {
    width: 0.45rem;
}


::-webkit-scrollbar-track {
    background: var(--bg-gray);
}


::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}


section {
    padding: 5rem 0;
}


/* Headings */

h1 {

    font-size: 3.375rem;

    line-height: 1.2;

    font-weight: 400;

    color: var(--text-black);

    margin-bottom: 1.25rem;

    font-family: var(--primary-font);

}


h2 {

    font-weight: 500;

    font-size: 2.5rem;

    line-height: 1.3;

    margin-bottom: 1.5625rem;

    color: var(--text-black);

    font-family: var(--primary-font);

}


h3 {

    font-weight: 700;

    font-size: 2.25rem;

    line-height: 1.3;

    margin-bottom: 0.9375rem;

    color: var(--text-black);

    font-family: var(--primary-font);

    text-transform: uppercase;

}


h5 {

    font-weight: 500;

    font-size: 1.5rem;

    margin-bottom: 2.1875rem;

    color: var(--text-black);

}


p {

    color: var(--text-gray);

    font-size: 0.9375rem;

    line-height: 1.625rem;

    font-weight: 400;

}


/* =========================================================
   2. NAVBAR
========================================================= */

.header_wrapper .navbar {

    padding: 0.9375rem 0;

    transition: all 0.2s linear;

}


.header_wrapper .navbar-brand img {

    max-width: 10rem;

    height: auto;

}


.header_wrapper .navbar-toggler {

    border: 0;

}


.header_wrapper .navbar-toggler:focus {

    box-shadow: none;

}


.header_wrapper .navbar-toggler-icon {

    color: var(--primary-color);

    font-size: 1.4rem;

}


.header_wrapper .nav-item {

    margin: 0 0.625rem;

}


.header_wrapper .nav-item .nav-link {

    font-family: var(--primary-font);

    font-size: 0.9375rem;

    font-weight: 500;

    text-transform: uppercase;

    color: var(--text-black);

    display: inline-block;

    transition: all 0.3s ease;

}


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

    color: var(--primary-text);

}


.header-scrolled {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: var(--bg-white);

    box-shadow:
        0 0.45rem 0.575rem
        rgba(66, 13, 211, 0.05);

}


/* =========================================================
   3. BANNER
========================================================= */

.banner_wrapper {

    padding-top: 8rem;

    min-height: 100vh;

    display: flex;

    align-items: center;

    z-index: 1;

    background-image: url('home-banner.png');

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}


.banner_wrapper .col-lg-7 {

    vertical-align: middle;

    align-self: center;

}




.banner_wrapper .banner-content h5 {

    color: var(--primary-color);

    font-weight: 400;

}


/* =========================================================
   4. ABOUT
========================================================= */

.about_wrapper {

    position: relative;

}


.about_wrapper img {

    max-height: 500px;

    object-fit: contain;

}


.about_wrapper p {

    margin-bottom: 1rem;

}


.about_wrapper .card:hover {

    border: 0.0625rem solid transparent;

    box-shadow:
        0 0.5rem 1.875rem
        rgb(118 85 225 / 65%);

}


/* =========================================================
   5. COMPETENCIES
========================================================= */

.services_wrapper .card {

    background-color: var(--bg-light);

    cursor: pointer;

    transition: all 0.5s ease;

    min-height: 480px;

}


.services_wrapper .card:hover {

    box-shadow:
        0 0.9375rem 1.875rem
        rgb(77 87 222 / 30%);

    background: var(--bg-white);

    transform: translateY(-5px);

}


.services_wrapper .card img {

    width: 80px;

    height: 80px;

    object-fit: contain;

}


.services_wrapper .card h5 {

    font-size: 1.15rem;

    font-weight: 600;

}


.services_wrapper .card ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


.services_wrapper .card ul li {

    color: var(--text-gray);

    font-size: 0.88rem;

    line-height: 1.8rem;

}


/* =========================================================
   6. EDUCATION
========================================================= */

.portfolio_wrapper .card {

    background-color: var(--bg-light);

    cursor: pointer;

    border: 1px solid transparent;

    transition: all 0.4s ease;

}


.portfolio_wrapper .card:hover {

    border: 1px solid transparent;

    box-shadow:
        0 0.5rem 1.875rem
        rgb(118 85 225 / 30%);

    transform: translateY(-3px);

}


.portfolio_wrapper .card-title {

    font-family: var(--primary-font);

    font-size: 1.3rem;

    font-weight: 500;

}


.portfolio_wrapper .card-text {

    margin-bottom: 0.4rem;

}


/* =========================================================
   7. LANGUAGES
========================================================= */

.blog_wrapper {

    position: relative;

}


.blog_wrapper ul li .nav-link {

    border-radius: 50px;

    font-size: 15px;

    font-weight: 500;

    display: inline-block;

    color: var(--text-gray);

    border: 0;

    transition: all 0.3s ease;

}


.blog_wrapper ul li .nav-link.active {

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

    color: var(--text-white);

}


.blog_wrapper .single-progress {

    margin-top: 29px;

    position: relative;

    overflow: hidden;

}


.blog_wrapper .single-progress h6 {

    font-size: 1rem;

    font-weight: 500;

    margin-bottom: 0.6rem;

    text-transform: uppercase;

}


.blog_wrapper .single-progress .progress {

    height: 4px;

    border-radius: 4px;

    box-shadow: none;

    background-color: var(--text-gray);

    overflow: visible;

}


.blog_wrapper .progress-bar {

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

    background-image: var(--gradient);

}


.blog_wrapper .single-progress .label {

    position: absolute;

    right: 0;

    top: 0;

    color: var(--primary-text);

    font-size: 15px;

}


/* =========================================================
   8. CONTACT
========================================================= */

.contact_wrapper {

    position: relative;

    overflow: hidden;

    padding: 5rem 0 3rem;

}


.contact_wrapper > .container > .row:first-child p {

    max-width: 650px;

    margin: 0 auto;

}


/* Contact Cards */

.contact-card {

    background-color: var(--bg-light);

    min-height: 230px;

    padding: 2.5rem 1.2rem;

    border: 1px solid transparent;

    transition: all 0.4s ease;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}


.contact-card:hover {

    background-color: var(--bg-white);

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

    box-shadow:
        0 0.5rem 1.875rem
        rgb(118 85 225 / 30%);

    transform: translateY(-5px);

}


/* Contact Icons */

.contact-icon {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: var(--gradient);

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 1.25rem;

}


.contact-icon i {

    font-size: 1.5rem;

    color: var(--text-white);

}


/* Contact Card Title */

.contact-card h5 {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 0.75rem;

    color: var(--text-black);

}


/* Contact Information */

.contact-card p {

    margin-bottom: 0;

    font-size: 0.9rem;

    line-height: 1.6;

    word-break: break-word;

}


.contact-card p a {

    color: var(--primary-text);

    transition: all 0.3s ease;

}


.contact-card p a:hover {

    color: var(--secondary-text);

}


/* =========================================================
   9. FOOTER
========================================================= */

.footer_wrapper .footer-logo img {

    max-width: 12.5rem;

    height: auto;

}


.contact_wrapper .social-icons h5 {

    font-size: 1.25rem;

    margin-bottom: 0;

    color: var(--text-black);

}


.contact_wrapper .footer-text {

    color: var(--text-gray);

    font-size: 0.875rem;

}


.contact_wrapper .footer-text a {

    color: var(--primary-color);

    font-weight: 500;

}


.contact_wrapper .footer-text a:hover {

    color: var(--secondary-text);

}


/* =========================================================
   10. RESPONSIVE DESIGN
========================================================= */


/* Tablets */

@media (max-width: 991px) {

    section {

        padding: 4rem 0;

    }


    .header_wrapper .navbar {

        background-color: var(--bg-white);

    }


    .header_wrapper .navbar-collapse {

        background-color: var(--bg-white);

        padding: 1rem;

        margin-top: 0.5rem;

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

    }


    .header_wrapper .nav-item {

        margin: 0.3rem 0;

        text-align: center;

    }


    .banner_wrapper {

        min-height: auto;

        padding-top: 10rem;

        padding-bottom: 5rem;

    }


    .banner_wrapper .banner-content {

        text-align: center;

    }


    .banner_wrapper .banner-content h2::after {

        display: none;

    }


    .services_wrapper .card {

        min-height: 450px;

    }


    .contact-card {

        min-height: 220px;

    }

}


/* Mobile */

@media (max-width: 767px) {

    section {

        padding: 3.5rem 0;

    }


    h1 {

        font-size: 2.3rem;

    }


    h2 {

        font-size: 2rem;

    }


    h3 {

        font-size: 1.8rem;

    }


    .header_wrapper .navbar-brand img {

        max-width: 8rem;

    }


    .banner_wrapper {

        padding-top: 8rem;

        text-align: center;

    }


    .banner_wrapper .top-right-img {

        margin-bottom: 2rem;

    }


    .banner_wrapper .banner-content h1 {

        line-height: 1.2;

    }


    .services_wrapper .card {

        min-height: auto;

    }


    .portfolio_wrapper .card {

        margin-left: 5px;

        margin-right: 5px;

    }


    .blog_wrapper .nav {

        gap: 0.4rem;

    }


    .contact_wrapper {

        padding: 4rem 0 2rem;

    }


    .contact_wrapper h2 {

        font-size: 2rem;

    }


    .contact-card {

        min-height: auto;

        padding: 2rem 1rem;

        margin: 0 10px;

    }


    .contact_wrapper .footer-logo img {

        max-width: 10rem;

    }


    .contact_wrapper .footer-text {

        padding: 0 15px;

    }

}


/* Small Mobile */

@media (max-width: 480px) {

    h1 {

        font-size: 2rem;

    }


    h2 {

        font-size: 1.8rem;

    }


    .banner_wrapper {

        padding-top: 7rem;

    }


    .contact_wrapper > .container > .row:first-child p {

        padding: 0 15px;

    }


    .contact-card {

        margin: 0 5px;

    }


    .contact-icon {

        width: 58px;

        height: 58px;

    }


    .contact-icon i {

        font-size: 1.3rem;

    }

}