@media (max-width: 1600px) {
    .container-links{
        width: 50%;
    }

    .hero-section{
        background-size: 106%;
    }

    .text-intro{
        font-size: 100px;
    }

    .text-small{
        font-size: 26px;
    }

    .content-section{
        padding: 140px 0 80px;
    }

    .title-small{
        font-size: 23px;
    }

    .title-big{
        font-size: 60px;
    }

    .text-content{
        font-size: 26px;
    }

    .board-item{
        width: 400px;
    }

    .board,
    .custom_label,
    .custom_label_2,
    .custom_label_3{
        width: 400px;
        height: 560px;
    }

    .custom_label_3{
        transform: translateY(-24px);
    }

    .contact-text{
        font-size: 250px;
    }

    .phone-bg img{
        height: 75vh;
    }

    .right-bottom-btns{
        width: 35%;
    }

    .right-bottom-btns a{
        font-size: 18px;
    }

    .warning-text{
        font-size: 18px;
    }

    .bottom-btns{
        padding: 80px 0px;
    }

    .subtext{
        font-size: 18px;
    }

}

@media (max-width: 1368px) {
    .container-links{
        justify-content: flex-end;
        width: 70%;
    }

    .hero-section{
        background-size: 120%;
        background-position: center 95%;
    }

    .text-intro{
        font-size: 80px;
    }

    .text-small{
        font-size: 22px;
    }

    .content-section{
        padding: 110px 0 70px;
        gap: 80px;
    }

    .title-small{
        font-size: 20px;
    }

    .title-big{
        font-size: 40px;
    }

    .text-content{
        font-size: 20px;
    }

    .board-item{
        width: 280px;
    }

    .board,
    .custom_label,
    .custom_label_2,
    .custom_label_3{
        width: 280px;
        height: 392px;
    }

    .custom_label_3{
        transform: translateY(-17px);
    }

    .board-title{
        font-size: 20px;
    }

    .contact-section{
        margin-top: 20px;
        height: auto;
    }

    .contact-text{
        font-size: 200px;
    }

    .phone-bg img{
        height: 60vh;
    }

    .right-bottom-btns{
        width: 35%;
    }

    .right-bottom-btns a{
        font-size: 14px;
    }

    .warning-text{
        font-size: 14px;
    }

    .container-bottom-btns{
        margin-top: 100px;
    }

    .bottom-btns{
        padding: 50px 0px;
    }

    .subtext{
        font-size: 16px;
    }

    .brand{
        font-size: 24px;
    }

    .list-links li{
        font-size: 14px;
    }

    .btn-contact{
        font-size: 14px;
    }
}

@media (max-width: 1000px) {
    .container-links{
        justify-content: flex-end;
        width: 70%;
    }

    .list-links li{
        font-size: 14px;
    }

    .btn-contact{
        font-size: 20px;
        padding: 6px 20px;
        border: 2px solid white;
    }

    .list-links{
        display: none;
    }

    .brand{
        font-size: 34px;
    }

    .hero-section{
        background-size: 200%;
    }

    .text-intro{
        font-size: 70px;
    }

    .text-small{
        font-size: 22px;
    }

    .content-section{
        padding: 90px 0 60px;
        gap: 80px;
    }

    .title-small{
        font-size: 18px;
    }

    .title-big{
        font-size: 30px;
    }

    .text-content{
        font-size: 18px;
    }

    .board-item{
        width: 210px;
    }

    .board,
    .custom_label,
    .custom_label_2,
    .custom_label_3{
        width: 210px;
        height: 294px;
    }

    .custom_label_3{
        transform: translateY(-13px);
    }

    .container-boards{
        gap: 40px;
    }

    .board-title{
        font-size: 18px;
    }

    .contact-section{
        margin-top: 20px;
        height: auto;
    }

    .contact-text{
        font-size: 140px;
    }

    .phone-bg img{
        height: 35vh;
    }

    .right-bottom-btns{
        width: 35%;
        gap: 10px;
        flex-direction: column;
        align-items: flex-end;
    }

    .right-bottom-btns a{
        font-size: 14px;
        padding: 5px 10px;
    }

    .warning-text{
        font-size: 14px;
    }

    .left-bottom-btns{
        width: 40%;
    }

    .container-bottom-btns{
        margin-top: 100px;
    }

    .bottom-btns{
        padding: 50px 0px;
    }

    .subtext{
        font-size: 16px;
    }

    .see-example,
    .see-example-2,
    .see-example-3{
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .container-links{
        justify-content: flex-end;
        width: 70%;
    }

    .list-links{
        display: none;
    }

    .brand{
        font-size: 28px;
    }

    .btn-contact{
        font-size: 16px;
        padding: 6px 14px;
        border: 0;
    }

    .hero-section{
        background-size: 200%;
        background-position: 55% bottom;
    }

    .text-intro{
        font-size: 60px;
    }

    .text-small{
        display: none;
    }

    .content-section{
        padding: 70px 0 50px;
        gap: 60px;
    }

    .title-small{
        font-size: 16px;
    }

    .title-big{
        font-size: 22px;
    }

    .text-content{
        font-size: 14px;
    }

    .container-boards{
        display: grid;
        grid-template-columns: repeat(2, 220px);
        justify-content: center;
        column-gap: 20px;
        row-gap: 28px;
    }

    .board-item{
        width: 220px;
    }

    .board,
    .custom_label,
    .custom_label_2,
    .custom_label_3{
        width: 220px;
        height: 308px;
    }

    .custom_label_3{
        transform: translateY(-13px);
    }

    .board-item:nth-child(3){
        grid-column: 1 / -1;
        justify-self: center;
    }

    .board-title{
        margin-left: 8px;
        font-size: 16px;
    }

    .contact-section{
        margin-top: 20px;
        height: auto;
    }

    .contact-text{
        font-size: 100px;
    }

    .phone-bg{
        bottom: 70%;
    }

    .phone-bg img{
        height: 28vh;
    }

    .bottom-btns{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 45px 0;
    }

    .left-bottom-btns,
    .right-bottom-btns{
        width: 100%;
    }

    .right-bottom-btns{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .right-bottom-btns a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        padding: 5px 10px;
        font-size: 12px;
    }

    .warning-text,
    .subtext{
        font-size: 12px;
    }

    .see-example,
    .see-example-2,
    .see-example-3,
    .see-example i,
    .see-example-2 i,
    .see-example-3 i{
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .container-links{
        justify-content: flex-end;
        width: 70%;
    }

    .list-links li{
        font-size: 14px;
    }

    .btn-contact{
        font-size: 14px;
        padding: 6px 12px;
        border: 0px solid white;
    }

    .list-links{
        display: none;
    }

    .brand{
        font-size: 24px;
    }

    .hero-section{
        background-size: 150%;
        background-position: 55% bottom;
        height: 500px;
    }

    .text-intro{
        font-size: 50px;
    }

    .text-small{
        font-size: 14px;
        display: none;
    }

    .content-section{
        padding: 60px 0 40px;
        gap: 60px;
    }

    .title-small{
        font-size: 14px;
    }

    .title-big{
        font-size: 16px;
    }

    .text-content{
        font-size: 12px;
    }

    .board-item{
        width: 179px;
    }

    .board,
    .custom_label,
    .custom_label_2,
    .custom_label_3{
        width: 179px;
        height: 250px;
    }

    .custom_label_3{
        transform: translateY(-6px);
    }

    .container-boards{
        display: grid;
        grid-template-columns: repeat(2, 179px);
        justify-content: center;
        column-gap: 12px;
        row-gap: 24px;
    }

    .board-item:nth-child(3){
        grid-column: 1 / -1;
        justify-self: center;
    }

    .board-title{
        font-size: 12px;
        margin-left: 6px;
    }

    .contact-section{
        margin-top: 20px;
        height: auto;
    }

    .contact-text{
        font-size: 70px;
    }

    .phone-bg{
        bottom: 90%;
    }

    .phone-bg img{
        height: 32vh;
    }

    .bottom-btns{
        flex-direction: column;
        align-items: flex-start;
    }

    .right-bottom-btns{
        width: 100%;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .bottom-btns{
        gap: 20px;
    }

    .right-bottom-btns a{
        font-size: 12px;
        padding: 5px 10px;
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .right-bottom-btns i{
        font-size: 12px;
    }

    .left-bottom-btns{
        width: 100%;
    }

    .warning-text{
        font-size: 12px;
        width: 100%;
    }

    .container-top-btns{
        padding-top: 40px;
    }

    .container-bottom-btns{
        margin-top: 300px;
    }

    .bottom-btns{
        padding: 50px 0px;
    }

    .subtext{
        font-size: 10px;
    }

    .subtext i{
        font-size: 10px;
    }

    .see-example,
    .see-example-2,
    .see-example-3{
        font-size: 12px;
    }

    .see-example i,
    .see-example-2 i,
    .see-example-3 i{
        font-size: 12px;
    }

    .contact-top-container{
        padding-top: 40px;
    }

    .subtext-top{
        left: auto;
    }

    .subtext-bottom{
        bottom: -5px;
        right: -22px;
    }

    .subtext-3{
        left: 110%;
    }

    .subtext-4{
        left: auto;
        bottom: -5px;
    }
}
