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

/*=============== VARIABLES ===============*/
:root {

    --header-height: 4.5rem;

    /* Colors */

    --first-color: #2563eb;
    --first-color-alt: #1d4ed8;
    --first-color-light: #60a5fa;

    --title-color: #111827;
    --text-color: #6b7280;
    --text-color-light: #9ca3af;

    --body-color: #ffffff;
    --container-color: #ffffff;

    --border-color: #e5e7eb;

    /* Font */

    --body-font: 'Poppins', sans-serif;

    --biggest-font-size: 4rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /* Shadows */

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

    --transition: .4s;
}

/*=============== DARK THEME ===============*/

body.dark-theme {

    --title-color: #ffffff;
    --text-color: #d1d5db;
    --text-color-light: #9ca3af;

    --body-color: #0f172a;
    --container-color: #1e293b;

    --border-color: #334155;
}

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

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: var(--body-font);
    background: var(--body-color);
    color: var(--text-color);

    transition: .4s;

}

h1,
h2,
h3 {
    color: var(--title-color);
    font-weight: 700;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {

    font-family: var(--body-font);
    border: none;
    outline: none;

}

/*=============== REUSABLE CSS ===============*/

.container {

    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;

}

.grid {

    display: grid;
    gap: 2rem;

}

.section {

    padding: 7rem 0 2rem;

}

.section__subtitle {

    display: block;
    text-align: center;
    color: var(--first-color);
    font-weight: 600;
    margin-bottom: .75rem;

}

.section__title {

    text-align: center;
    font-size: var(--h1-font-size);
    margin-bottom: 4rem;

}

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

.button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--first-color);
    color: #fff;

    padding: 1rem 2rem;

    border-radius: .75rem;

    transition: .4s;

    font-weight: 600;

}

.button:hover {

    background: var(--first-color-alt);
    transform: translateY(-4px);

}

.button__ghost {

    background: transparent;

    border: 2px solid var(--first-color);

    color: var(--first-color);

}

.button__ghost:hover {

    background: var(--first-color);
    color: #fff;

}



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

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    background: transparent;

    z-index: 1000;

    transition: .4s;

}

.scroll-header {

    background: var(--container-color);

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

}

/*=============== NAV ===============*/

.nav {

    height: var(--header-height);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--title-color);

}

.logo span {

    color: var(--first-color);

}

.nav__list {

    display: flex;

    gap: 2rem;

}

.nav__link {

    color: var(--title-color);

    font-weight: 500;

    transition: .3s;

}

.nav__link:hover {

    color: var(--first-color);

}

.active-link {

    color: var(--first-color);

}

.nav__buttons {

    display: flex;

    gap: 1rem;

    align-items: center;

}

.change-theme {

    cursor: pointer;

    font-size: 1.3rem;

}

.nav__toggle,

.nav__close {

    display: none;

}



/*=============== HOME ===============*/

.home {
    padding-top: 10rem;
}

.home__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 5rem;
}

.home__subtitle {
    color: var(--first-color);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.home__title {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.home__profession {
    font-size: 1.5rem;
    color: var(--first-color);
    margin-bottom: 1.5rem;
}

.home__description {
    max-width: 520px;
    line-height: 1.9;
    margin-bottom: 2rem;
}

.home__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.home__image {
    display: flex;
    justify-content: center;
    position: relative;
}

.home__blob {

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            var(--first-color),
            #60a5fa);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(37, 99, 235, .25);

    animation: float 5s ease-in-out infinite;

}

.home__blob img {

    width: 360px;

    object-fit: cover;

}

@keyframes float {

    0% {
        transform: translateY(0px);
    }

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

    100% {
        transform: translateY(0px);
    }

}

/* Decorative circles */

.home__image::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    border: 2px dashed rgba(37, 99, 235, .2);

    animation: rotate 18s linear infinite;

}

.home__image::after {

    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    border: 2px solid rgba(37, 99, 235, .1);

}

@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



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

.about__container {

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

    align-items: center;

    gap: 5rem;

}

.about__image {

    display: flex;

    justify-content: center;

}

.about__image img {

    width: 420px;

    border-radius: 30px;

    box-shadow: var(--shadow);

}

.about__description {

    line-height: 2;

    margin-bottom: 2rem;

}

.about__info {

    display: grid;

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

    gap: 1rem;

    margin-bottom: 2rem;

}

.about__box {

    background: var(--container-color);

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

    border-radius: 20px;

    padding: 2rem;

    text-align: center;

    transition: .4s;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .05);

}

.about__box:hover {

    transform: translateY(-10px);

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

}

.about__box h3 {

    color: var(--first-color);

    font-size: 2rem;

    margin-bottom: .5rem;

}

.about__box span {

    font-size: .9rem;

}





/*=============== SKILLS ===============*/

.skills {
    background: var(--container-color);
}

.skills__container {
    max-width: 800px;
    margin: auto;
    gap: 2rem;
}

.skill {
    margin-bottom: 2rem;
}

.skill__info {
    display: flex;
    justify-content: space-between;
    margin-bottom: .8rem;
    font-weight: 600;
}

.skill__bar {
    width: 100%;
    height: 12px;
    background: #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
}

.dark-theme .skill__bar {
    background: #334155;
}

.skill__percentage {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg,
            var(--first-color),
            #60a5fa);
    animation: progress 2s ease forwards;
}

.html {
    width: 95%;
}

.css {
    width: 92%;
}

.js {
    width: 88%;
}

.bootstrap {
    width: 95%;
}

.git {
    width: 85%;
}

.responsive {
    width: 95%;
}

@keyframes progress {

    from {
        width: 0;
    }

}





/*=============== SERVICES ===============*/

.services__container {

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

    gap: 2rem;

}

.service__card {

    background: var(--container-color);

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

    padding: 2.5rem;

    border-radius: 25px;

    text-align: center;

    transition: .4s;

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

}

.service__card:hover {

    transform: translateY(-15px);

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

    box-shadow: 0 20px 40px rgba(37, 99, 235, .15);

}

.service__card i {

    font-size: 3rem;

    color: var(--first-color);

    margin-bottom: 1rem;

}

.service__card h3 {

    margin-bottom: 1rem;

}

.service__card p {

    line-height: 1.8;

}




/*=============== CARD EFFECTS ===============*/

.project__card,
.about__box,
.service__card {

    transition: .4s;

}

.project__card:hover,
.about__box:hover,
.service__card:hover {

    transform: translateY(-10px);

}



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

.hidden {

    opacity: 0;

    transform: translateY(80px);

    transition: 1s;

}

.show {

    opacity: 1;

    transform: translateY(0);

}


/*=============== SCROLLBAR ===============*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: var(--body-color);

}

::-webkit-scrollbar-thumb {

    background: var(--first-color);

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--first-color-alt);

}


/*=============== PROJECTS ===============*/

.projects {
    background: var(--body-color);
}

.projects__container {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.project__card {

    background: var(--container-color);

    border-radius: 25px;

    overflow: hidden;

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

    transition: .4s;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);

}

.project__card:hover {

    transform: translateY(-12px);

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

}

.project__card img {

    width: 100%;

    height: 240px;

    object-fit: cover;

    transition: .5s;

}

.project__card:hover img {

    transform: scale(1.08);

}

.project__content {

    padding: 2rem;

}

.project__content h3 {

    margin-bottom: 1rem;

}

.project__content p {

    line-height: 1.8;

    margin-bottom: 1.5rem;

}

.project__tags {

    display: flex;

    flex-wrap: wrap;

    gap: .6rem;

    margin-bottom: 1.5rem;

}

.project__tags span {

    background: rgba(37, 99, 235, .1);

    color: var(--first-color);

    padding: .45rem 1rem;

    border-radius: 30px;

    font-size: .85rem;

    font-weight: 600;

}

.project__buttons {

    display: flex;

    gap: 1rem;

}


/*=============== STATS ===============*/

.stats {

    background: linear-gradient(135deg,
            var(--first-color),
            #3b82f6);

    color: #fff;

}

.stats__container {

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

    text-align: center;

}

.stat h2 {

    color: #fff;

    font-size: 3rem;

    margin-bottom: .5rem;

}

.stat span {

    color: #dbeafe;

    font-size: 1rem;

}



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

.contact__container {

    grid-template-columns: 350px 1fr;

    gap: 4rem;

}

.contact__info {

    display: grid;

    gap: 1.5rem;

}

.contact__card {

    background: var(--container-color);

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

    padding: 2rem;

    border-radius: 20px;

    transition: .4s;

}

.contact__card:hover {

    transform: translateX(8px);

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

}

.contact__card i {

    font-size: 2rem;

    color: var(--first-color);

    margin-bottom: 1rem;

}

.contact__form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

.contact__form input,

.contact__form textarea {

    width: 100%;

    padding: 1.2rem;

    border-radius: 15px;

    background: var(--container-color);

    color: var(--title-color);

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

    resize: none;

    transition: .3s;

}

.contact__form input:focus,

.contact__form textarea:focus {

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

}




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

.footer {

    background: #0f172a;

    color: #fff;

    text-align: center;

    padding: 5rem 0;

}

.footer h2 {

    color: #fff;

    margin-bottom: .8rem;

}

.footer p {

    color: #cbd5e1;

    margin-bottom: 2rem;

}

.footer__social {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    margin-bottom: 2rem;

}

.footer__social a {

    width: 50px;

    height: 50px;

    background: #1e293b;

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .4s;

    font-size: 1.3rem;

}

.footer__social a:hover {

    background: var(--first-color);

    transform: translateY(-8px);

}

.footer span {

    color: #94a3b8;

}




/*==================== LARGE DEVICES ====================*/

@media screen and (max-width:1200px) {

    .container {
        max-width: 960px;
    }

    .home__container,
    .about__container {
        gap: 3rem;
    }

    .home__title {
        font-size: 3.5rem;
    }

    .home__blob {
        width: 360px;
        height: 360px;
    }

    .home__blob img {
        width: 310px;
    }

}





/*==================== TABLETS ====================*/

@media screen and (max-width:992px) {

    .container {
        max-width: 720px;
    }

    .home__container,
    .about__container,
    .contact__container {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .projects__container {

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

    }

    .services__container {

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

    }

    .stats__container {

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

        row-gap: 2rem;

    }

    .about__info {

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

    }

    .home__buttons {

        justify-content: center;

    }

    .about__image {

        order: -1;

    }

}




/*==================== MOBILE ====================*/

@media screen and (max-width:768px) {

    .section {

        padding: 6rem 0 2rem;

    }

    .section__title {

        font-size: 2rem;

    }

    .home__title {

        font-size: 2.7rem;

    }

    .home__profession {

        font-size: 1.2rem;

    }

    .projects__container,

    .services__container,

    .stats__container,

    .about__info {

        grid-template-columns: 1fr;

    }

    .nav__menu {

        position: fixed;

        right: -100%;

        top: 0;

        width: 280px;

        height: 100%;

        background: var(--container-color);

        padding: 7rem 2rem;

        transition: .4s;

        box-shadow: -10px 0 20px rgba(0, 0, 0, .15);

    }

    .show-menu {

        right: 0;

    }

    .nav__list {

        flex-direction: column;

        row-gap: 2rem;

    }

    .nav__toggle,

    .nav__close {

        display: block;

        cursor: pointer;

        font-size: 1.5rem;

    }

    .nav__close {

        position: absolute;

        top: 1.5rem;

        right: 1.5rem;

    }

}




/*==================== SMALL MOBILE ====================*/

@media screen and (max-width:576px) {

    .container {

        padding-inline: 1rem;

    }

    .home {

        padding-top: 8rem;

    }

    .home__blob {

        width: 260px;

        height: 260px;

    }

    .home__blob img {

        width: 220px;

    }

    .button {

        width: 100%;

    }

    .project__buttons {

        flex-direction: column;

    }

}








/*==================== SCROLL UP ====================*/

.scroll-up {

    position: fixed;

    right: 2rem;

    bottom: -100px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: var(--first-color);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .4s;

    z-index: 999;

    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);

}




/*=============== TESTIMONIALS ===============*/

.testimonial {

    background: var(--container-color);

}

.testimonial__container {

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

    gap: 2rem;

}

.testimonial__card {

    background: var(--body-color);

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

    border-radius: 25px;

    padding: 2rem;

    text-align: center;

    transition: .4s;

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

}

.testimonial__card:hover {

    transform: translateY(-10px);

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

}

.testimonial__card img {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    object-fit: cover;

    margin: 0 auto 1rem;

}

.testimonial__card h3 {

    margin-bottom: .3rem;

}

.testimonial__card span {

    color: var(--first-color);

    font-size: .9rem;

}

.testimonial__card p {

    margin-top: 1rem;

    line-height: 1.8;

}






@media screen and (max-width:992px) {

    .testimonial__container {

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

    }

}

@media screen and (max-width:768px) {

    .testimonial__container {

        grid-template-columns: 1fr;

    }

}









.show-scroll {

    bottom: 2rem;

}

.scroll-up:hover {

    transform: translateY(-6px);

    background: var(--first-color-alt);

}









/*=============== PROJECT FILTER ===============*/

.projects__filter {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 3rem;

}

.filter-btn {

    border: none;

    outline: none;

    cursor: pointer;

    padding: .8rem 1.6rem;

    border-radius: 50px;

    background: var(--container-color);

    color: var(--title-color);

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

    transition: .4s;

    font-weight: 600;

}

.filter-btn:hover {

    background: var(--first-color);

    color: #fff;

}

.filter-btn.active {

    background: var(--first-color);

    color: #fff;

}






.project__card {

    position: relative;

    overflow: hidden;

}

.project__card::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(37, 99, 235, .75);

    left: 0;

    top: 0;

    opacity: 0;

    transition: .4s;

    z-index: 2;

}

.project__card:hover::before {

    opacity: 1;

}

.project__content {

    position: relative;

    z-index: 3;

}






.button {

    position: relative;

    overflow: hidden;

}

.button::before {

    content: "";

    position: absolute;

    width: 0;

    height: 100%;

    left: 0;

    top: 0;

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

    transition: .4s;

}

.button:hover::before {

    width: 100%;

}







/*=============== PROJECT MODAL ===============*/

.project-modal {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .75);

    display: flex;

    justify-content: center;

    align-items: center;

    visibility: hidden;

    opacity: 0;

    transition: .4s;

    z-index: 9999;

}

.project-modal.show {

    visibility: visible;

    opacity: 1;

}

.project-modal__content {

    width: 90%;

    max-width: 800px;

    background: var(--container-color);

    border-radius: 25px;

    padding: 2rem;

    position: relative;

    animation: zoom .4s;

}

.project-modal__content img {

    width: 100%;

    border-radius: 15px;

    margin-bottom: 1.5rem;

}

.project-modal__close {

    position: absolute;

    top: 20px;

    right: 20px;

    font-size: 2rem;

    cursor: pointer;

}

.modal-buttons {

    display: flex;

    gap: 1rem;

    margin-top: 2rem;

}

@keyframes zoom {

    from {

        transform: scale(.8);

        opacity: 0;

    }

    to {

        transform: scale(1);

        opacity: 1;

    }

}






/*=============== CERTIFICATES ===============*/

.certificate {
    background: var(--body-color);
}

.certificate__container {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.certificate__card {

    background: var(--container-color);

    border-radius: 25px;

    padding: 2.5rem;

    text-align: center;

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

    transition: .4s;

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

}

.certificate__card:hover {

    transform: translateY(-10px);

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

}

.certificate__card i {

    font-size: 3rem;

    color: var(--first-color);

    margin-bottom: 1rem;

}

.certificate__card h3 {

    margin-bottom: .5rem;

}

.certificate__card span {

    color: var(--first-color);

    display: block;

    margin-bottom: 1rem;

}

.certificate__card p {

    line-height: 1.8;

    margin-bottom: 1.5rem;

}






@media screen and (max-width:992px) {

    .certificate__container {

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

    }

}

@media screen and (max-width:768px) {

    .certificate__container {

        grid-template-columns: 1fr;

    }

}








/*=============== EXPERIENCE ===============*/

.timeline {

    position: relative;

    max-width: 850px;

    margin: auto;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 25px;

    top: 0;

    width: 4px;

    height: 100%;

    background: var(--first-color);

}

.timeline__item {

    position: relative;

    padding-left: 80px;

    margin-bottom: 4rem;

}

.timeline__dot {

    position: absolute;

    left: 13px;

    top: 10px;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--first-color);

    border: 5px solid var(--body-color);

}

.timeline__content {

    background: var(--container-color);

    padding: 2rem;

    border-radius: 20px;

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

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

    transition: .4s;

}

.timeline__content:hover {

    transform: translateX(10px);

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

}

.timeline__date {

    color: var(--first-color);

    font-weight: 600;

}

.timeline__content h3 {

    margin: 1rem 0 .3rem;

}

.timeline__content h4 {

    margin-bottom: 1rem;

    color: var(--text-color);

    font-weight: 500;

}

.timeline__content p {

    line-height: 1.8;

}










@media screen and (max-width:768px) {

    .timeline::before {

        left: 12px;

    }

    .timeline__dot {

        left: 0;

    }

    .timeline__item {

        padding-left: 55px;

    }

}






.home__social {

    display: flex;

    gap: 1rem;

    margin-top: 2rem;

}

.home__social a {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--container-color);

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

    color: var(--first-color);

    font-size: 1.4rem;

    transition: .4s;

}

.home__social a:hover {

    background: var(--first-color);

    color: #fff;

    transform: translateY(-8px);

}






/*=============== GITHUB ===============*/

.github {

    background: var(--container-color);

}

.github__container {

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

    gap: 2rem;

}

.github__card {

    padding: 1.5rem;

    border-radius: 20px;

    background: var(--body-color);

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

    transition: .4s;

    overflow: hidden;

}

.github__card:hover {

    transform: translateY(-10px);

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

}

.github__card img {

    width: 100%;

    display: block;

}





@media screen and (max-width:768px) {

    .github__container {

        grid-template-columns: 1fr;

    }

}




/*=============== WHATSAPP ===============*/

.whatsapp {

    position: fixed;

    left: 30px;

    bottom: 30px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #25D366;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 2rem;

    z-index: 999;

    transition: .4s;

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

}

.whatsapp:hover {

    transform: scale(1.1);

}







#progress-bar {

    position: fixed;

    top: 0;

    left: 0;

    width: 0;

    height: 4px;

    background: var(--first-color);

    z-index: 99999;

}





/*=============== PROJECT DETAILS ===============*/

.project-hero {

    padding-top: 8rem;

    text-align: center;

}

.project-hero img {

    width: 100%;

    max-width: 900px;

    margin: 3rem auto;

    border-radius: 20px;

    box-shadow: var(--shadow);

}

.project-info {

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

    gap: 3rem;

}

.gallery__container {

    display: grid;

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

    gap: 2rem;

}

.gallery__container img {

    width: 100%;

    border-radius: 20px;

    transition: .4s;

    cursor: pointer;

}

.gallery__container img:hover {

    transform: scale(1.05);

}







/*=============== BRANDS ===============*/

.brands {

    padding: 4rem 0;

}

.brands__container {

    display: grid;

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

    gap: 2rem;

}

.brand {

    height: 120px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--container-color);

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

    transition: .4s;

}

.brand i {

    font-size: 4rem;

    color: var(--first-color);

}

.brand:hover {

    transform: translateY(-10px);

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

}














@media screen and (max-width:768px) {

    .brands__container {

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

    }

}








.achievement__container {

    display: grid;

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

    gap: 2rem;

}

.achievement__container div {

    padding: 2rem;

    border-radius: 20px;

    background: var(--container-color);

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

    transition: .4s;

}

.achievement__container div:hover {

    transform: translateY(-10px);

}

.achievement__container h1 {

    font-size: 3rem;

    color: var(--first-color);

    margin-bottom: 1rem;

}

.achievement__container p {

    line-height: 1.8;

    margin-top: 1rem;

}