/* ===================================
   RESPONSIVE BREAKPOINTS
   Consolidated Media Queries
   =================================== */

/* ========== BREAKPOINT: 1400px ========== */
@media (max-width: 1400px) {
    /* span {
        color: yellowgreen;
    } */

    .logo {
        color: white;
        font-size: 27px;
        letter-spacing: 1px;
        cursor: pointer;
    }

    nav ul li {
        padding: 10px;
    }

    nav ul li a {
        font-size: 15px;
    }

    .btn.switch-container {
        transform: scale(0.85);
    }
}

/* ========== BREAKPOINT: 1280px ========== */
@media (max-width: 1280px) {

    .logo {
        color: white;
        font-size: 25px;
        letter-spacing: 1px;
        cursor: pointer;
    }

    nav ul li {
        list-style-type: none;
        display: inline-block;
        padding: 8px;
    }

    nav ul li a {
        color: white;
        text-decoration: none;
        font-weight: normal;
        text-transform: capitalize;
        font-size: 14px;
    }

    .btn.switch-container {
        transform: scale(0.8);
    }

    .content {
        position: absolute;
        top: 65%;
        left: 8%;
        transform: translateY(-50%);
    }

    .about img {
        height: auto;
        width: 330px;
    }

    .about-text h2 {
        color: white;
        font-size: 65px;
        text-transform: capitalize;
        margin-bottom: 20px;
    }

}

/* ========== BREAKPOINT: 1180px ========== */
@media (max-width: 1180px) {

    .logo {
        color: white;
        font-size: 23px;
        letter-spacing: 1px;
        cursor: pointer;
        max-width: 200px;
    }

    nav ul li {
        padding: 6px;
    }

    nav ul li a {
        font-size: 13px;
    }

    .btn.switch-container {
        transform: scale(0.75);
    }

}

/* ========== BREAKPOINT: 1000px ========== */
@media (max-width: 1000px) {

    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40px;
        padding-left: 5%;
        padding-right: 1%;
    }

    .logo {
        font-size: 22px;
        max-width: 180px;
    }

    nav ul li {
        list-style-type: none;
        display: inline-block;
        /* padding: 8px; */
    }

    nav ul li a {
        font-size: 13px;
    }

    .btn.switch-container {
        transform: scale(0.7);
    }

    .about img {
        height: auto;
        width: 285px;
    }

    .about-text p {
        font-size: 16px;
    }

    .main {
        width: auto;
        max-width: 95%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .title h2 {
        font-size: 55px;
    }

    .card {
        height: 440px;
        width: auto;
        padding: 15px 30px;
        background: #191919;
        border-radius: 20px;
        margin: 10px;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .services {
        padding: 100px 10px;
    }

    /* PORTFOLIO SECTION */
    .portfolio-wrap-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .portfolio-wrap-grid > div {
        max-width: 100%;
        padding: 15px;
    }

    .tec-used {
        bottom: 30px;
        right: 30px;
    }
}

/* ========== BREAKPOINT: 880px ========== */
@media (max-width: 880px) {

    nav {
        flex-wrap: wrap;
        position: relative;
    }

    .menu-i {
        position: fixed;
        top: -600%;
        right: 3%;
        width: 200px;
        background: cornflowerblue;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px;
        border-radius: 4px;
        transition: all .55s ease;
        z-index: 100001;
    }

    nav ul li {
        padding: 15px 0;
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        width: 100%;
    }

    nav ul li a:hover {
        color: black;
        font-weight: bold;
        transition: .4s;
    }

    .btn.switch-container {
        position: absolute;
        top: 15px;
        right: 10px;
        transform: scale(0.8);
    }

    #menu-icon {
        font-size: 35px;
        color: white;
        z-index: 10001;
        cursor: pointer;
        position: relative;
        top: 0;
    }

    .logo {
        width: auto;
    }

    /* .main {
        max-width: 80%;
    } */

    .about-text {
        width: 45%;
    }

    .about img {
        width: 45%;
    }

    .about-text h2 {
        font-size: 45px;
    }

    .box {
        display: block;
    }

    .card {
        height: auto;
        margin: 3%;
    }

    .title h2 {
        font-size: 45px;
    }

}

/* ========== BREAKPOINT: 768px ========== */
@media (max-width: 768px) {

    /* Glassmorphism adjustments for mobile */
    :root {
        --blur-amount: 8px;
        --blur-heavy: 12px;
    }

    .card:hover {
        transform: translateY(-5px) scale(1.01);
    }

    nav {
        backdrop-filter: blur(8px);
    }
}

/* ========== BREAKPOINT: 740px ========== */
@media (max-width: 740px) {
    .content {
        top: 77%;
    }

    .content h3 {
        margin-bottom: 90px;
    }

    /* .newsletter {
        position: absolute;
        top: 90%;
    } */

    .newsletter form {
        width: 340px;
        position: absolute;
        top: 80%;
    }

    .about img {
        display: none;
    }

    .about-text {
        width: 90%;
    }

}

/* ========== BREAKPOINT: 640px ========== */
@media (max-width: 640px) {

    .logo {
        width: 180px;
        font-size: 18px;
    }

    nav {
        padding-top: 30px;
    }

    .content {
        top: 63%;
        left: 5%;
        right: 3%
    }

    .btn.switch-container {
        position: fixed;
        top: 90px;
        right: -30px;
        transform: scale(0.7);
        z-index: 10000;
    }

    .box-skills i {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .contact p {
        font-size: 18px;
    }

    footer p:nth-child(1) {
        font-size: 18px;
    }

    footer p:nth-child(2) {
        font-size: 14px;
    }

    .aviso-cookies {
        max-width: 256px;
    }

    .aviso-cookies .titulo,
    .aviso-cookies .parrafo {
        font-size: 18px;
    }

    .parrafo-cookie {
        font-size: 13px;
    }
}

/* ========== ACCESSIBILITY: REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}