@media (min-width: 320px) and (max-width: 480px) {
    html {
        overflow-x: hidden !important;
    }

    body {
        background: #000000;
        overflow-x: hidden !important;
    }

    /* navbar */



    .secondnav {

        top: 70px;
        width: 100%;



    }

    .main-nav {
        padding: 15px 15px 10px 15px !important;
        background: #000 !important;
        min-height: 70px;
        /* display: none; */
    }

    .navbar-toggler {

        border: 0px !important;


    }

    .navbar-nav {
        flex-direction: row !important;
        width: 100% !important;
        background: #000 !important;
        justify-content: center;


    }



    .navbar-nav .nav-item {
        font-size: 10pt;
        writing-mode: horizontal-tb;
        /* padding: 10px 15px !important; */
        margin-right: 10px !important;
        margin-left: 10px !important;

        font-weight: 600;
        text-shadow: 2px 2px 4px #000000;


    }

    .navbar-nav .about-link {
        display: none !important;


    }

    .navbar-nav .about-link-mobile {
        display: flex !important;


    }

    .navbar-nav .portfolio-mobile {
        display: flex !important;


    }

    .navbar-nav .portfolio-desk {
        display: none !important;


    }

    .loader-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #b94181;
        /* Change the background color to match your design */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        /* Ensure the loader appears on top of other content */
    }

    .loader {
        width: 60px;
        height: 60px;
        animation: spin 2s linear infinite;
        object-fit: cover;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .navbar-nav .nav-item {

        padding-right: 5px !important;
        justify-content: center;
        margin-top: 0px !important;

    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0 !important;
    }

    .fixed-top .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        width: 40px !important;
        height: 40px !important;

    }





    /* SECTION-1 HOMEPAGE */

    .avatar img {
        border-radius: 50%;
        width: 230px;
        height: 230px;
        object-fit: cover;


    }

    .hero-mobile {
        min-height: 80vh;
    }

    .box .text-content {

        margin-top: 100px !important;
        margin-left: 7% !important;

    }



    .text-content .hola-1 {
        font-size: 22pt;
        line-height: 2.2rem;
        letter-spacing: 1.5px;
    }

    .text-content .hola {
        font-size: 38pt;
        line-height: 3.5rem;

    }



    .text-content .p-title {

        font-size: 11pt;
        line-height: 1.5rem;
        width: 75% !important;


    }

    .p-pad {
        padding-top: 9px !important;
    }

    .boxes .box {
        height: 100% !important;
        padding: 60px 5px 10px 15px !important;

    }



    .boxes {

        position: static
    }

    .boxes .avatar-box {

        border-top: rgba(255, 105, 180, .20) 1px solid;
        border-bottom: rgba(255, 105, 180, .20) 1px solid;
        background: #000;


    }



    .btn-mobile {

        color: #fff;
        font-size: 14pt;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }

    a {

        text-decoration: none;

    }

    .btn-desktop {

        display: none;

    }

    .btn-mobile {
        display: block;
        margin-left: 7% !important;
        padding: 20px 30px !important;
        overflow: hidden;
        margin-top: 60px !important;
        margin-bottom: 60px !important;
        background: #b94181;
        border-radius: 5px;
        border: none;
        width: 261px;
        text-align: center;

    }

    .btn-mobile .i-1 {
        color: #000;
        letter-spacing: 0px !important;
        border: none;
    }

    .contact-btn {

        margin-top: 60px !important;
        margin-bottom: 60px !important;

    }

    .btn-home .contact-btn a {

        font-size: 14pt;

    }

    /* TOOLS SECTION */

    .boxes {

        height: 100%;

    }

    #wrapper h1 {
        font-size: 26pt;
        padding: 55PX 0px !important;

    }

    #wrapper-p h1 {
        font-size: 24pt;
        padding: 55px 0px 75px 0px !important;

    }

    .tools-card-body {

        font-size: 16pt;


    }

    .card h3 img {

        height: 135px;


    }

    .reveal {
        position: relative;
        transform: translateX(50px);
        opacity: 0;
        transition: 1s all ease;
    }

    .revealr {
        position: relative;
        transform: translateX(-50px);
        opacity: 0;
        transition: 1s all ease;
    }



    /* some of my skills section*/

    .new-section-2 .home-section-skills {
        height: 100% !important;
    }


    .new-section-2 h1 {

        font-size: 26pt;
        padding: 55px 0px 75px 0px !important;
    }

    .text-box h2 {

        padding: 10px 0px !important;
        font-size: 16pt;
    }

    .box-skills-1 {
        padding: 0px 20px 50px 20px !important;
        margin: 0px 0px !important;
    }

    .text-box .sec-2p {
        font-size: 12pt;

    }

    .box-skills-2 {
        padding: 0px 20px 50px 20px !important;
        margin: 0px !important;
    }

    /* some of my projects section */


    #wrapper .projects-h1 {
        font-size: 23pt;
        padding: 55PX 6px !important;

    }

    .card-body h5 {

        font-weight: 400;
        font-size: 11.5pt;

    }

    .card-body p {


        font-size: 10pt;
    }


    /* MOBILE ACCORDION */



    .accordion-section-mobile {
        height: inherit;
        display: flex;
        border-bottom: rgba(255, 105, 180, .20) 1px solid;

    }


    #accordion-desk {
        display: none;
    }

    #accordion h1 {

        font-size: 22pt;
        padding: 15PX 0px 50px 0px !important;


    }

    .accordion-section-mobile {

        background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%) !important;
        padding: 30px 20px 40px 20px !important;
    }

    .card-body img {
        object-fit: cover;
        width: 315px;
        height: 200px;
        box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.652);
        margin-bottom: 25px;
    }

    .card-body video {
        object-fit: cover;
        width: 315px;
        height: 200px;
        box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.652);
        margin-bottom: 25px;
    }



    .card-header-mobile .fa-html5 {
        color: rgb(192, 55, 21) !important;
        font-size: 18pt;
    }

    .card-header-mobile .fa-css3-alt {
        color: rgb(59, 59, 228) !important;
        font-size: 18pt;
    }

    .card-header-mobile .fa-align-justify {
        background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;

        font-size: 18pt;
    }



    .card-header-mobile .fa-bootstrap {
        color: rgb(133, 41, 133) !important;
        font-size: 18pt;

    }

    .card-header-mobile .fa-js {
        color: goldenrod !important;
        font-size: 18pt;
    }
    .card-header-mobile .fa-github{
        color: #969393 !important;
        font-size: 18pt;
    }


    .card-header-mobile .fa-wordpress {
        color: #0c638b;
        font-size: 18pt;
    }



    .card-body h2 {
        font-weight: 600;
        padding-left: 0px;
        font-size: 26px;

    }

    .card-header button {


        text-decoration: none;
        color: #fff !important;
        padding: 10px 15px !important;
    }

    .process-h1 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 2.5rem;
        text-shadow: 1px 1px 1px #000;
    }

    .p-mobile {
        margin-bottom: 2.5rem;
        font-size: 11.5pt;
        text-shadow: 1px 1px 1px #000;
        padding-left: 20px;
        padding-right: 20px;

    }


    .card-mobile {
        background: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #797878;
        border-radius: 0;

    }

    .card-header-mobile {

        border-top: 3px solid #b94181;
    }

    .btn-link {
        text-decoration: none !important;
    }

    .panel-title>.btn:before {
        float: right !important;
        font-family: FontAwesome;
        content: "\f068";
        padding-right: 5px;
        color: #b94181;
    }

    .panel-title>.btn.collapsed:before {
        float: right !important;
        font-family: FontAwesome;
        content: "\f067";
        color: #b94181;

    }

    .panel-title>.btn:hover,
    .panel-title>.btn:active,
    .panel-title>.btn:focus {
        text-decoration: none;
    }

    .btn.focus,
    .btn:focus {
        outline: 0 !important;
        box-shadow: none !important;
    }


    /* contact form */

    .wrapper .projects-wrapper {
        /* padding-bottom: 150px !important; */
        border-bottom: rgba(255, 105, 180, .20) 1px solid;
        padding-bottom: 80px !important;
    }




    .quote-area {
        padding: 10px 0px 30px 0px !important;
        width: 100%;


    }

    .quote-area h2 {
        font-size: 11pt;
        font-weight: 400 !important;
        line-height: 1;
    }

    .p-quote {
        display: none;

    }

    .mobile-q {
        font-size: 9pt;
        font-weight: 300;
        padding-left: 0px !important;


    }

    .main-form label {

        font-weight: 400;
        font-size: 11pt;
    }

    /* .quote-area .mobile-q {
        flex-direction: column;
        display: flex;
    } */


    .main-form {
        width: 100%;
        height: 100%;
        /* padding: 10px 20px 20px 20px !important; */

    }

    .container-box-2 {
        padding: 10px !important;
        box-shadow: none;
        background-color: #000;
        margin: 0px !important;
        width: 100%;
    }



    .form {
        padding: 20px 20px !important;
        width: 100%;

    }

    #new-section-contact {
        padding: 0px !important;
    }





    .contact-form {

        width: 100%;

    }

    .h1s {

        font-size: 26pt;
        padding-top: 30px !important;
    }


    .main-form input {
        width: 100%;
    }

    .main-form textarea {
        width: 100%;
    }

    .main-form h1 {
        font-size: 22pt;

    }


    #form .quote-h1 {
        margin-top: 40px !important;


    }


    /* footer social media icons */


    .flex-footer .thanks-hr h1 {
        font-size: 14pt;

    }

    .flex-footer .thanks-hr {

        height: 100%;
        padding-top: 150px !important;

    }

    #footer {
        width: 100%;
        height: 500px;
        background-color: #000;


    }

    #footer img {

        height: 100%;
        object-fit: cover;


    }

    hr {
        width: 55%;
        height: 1px;

    }

    .social {
        font-size: 7pt;
    }

    .social p {
        font-size: 8pt;
    }

}




@media (min-width: 481px) and (max-width: 767px) {


    .secondnav {

        top: 70px;
        width: 100%;



    }

    .main-nav {
        padding: 15px 15px 10px 15px !important;
        background: #000 !important;
        min-height: 70px;
        /* display: none; */
    }

    .navbar-toggler {

        border: 0px !important;


    }

    .navbar-nav {
        flex-direction: row !important;
        width: 100% !important;
        background: #000 !important;
        justify-content: center;


    }



    .navbar-nav .nav-item {
        font-size: 10pt;
        writing-mode: horizontal-tb;
        /* padding: 10px 15px !important; */
        margin-right: 10px !important;
        margin-left: 10px !important;

        font-weight: 600;
        text-shadow: 2px 2px 4px #000000;


    }

    .navbar-nav .about-link {
        display: none !important;


    }

    .navbar-nav .about-link-mobile {
        display: flex !important;


    }

    .navbar-nav .portfolio-mobile {
        display: flex !important;


    }

    .navbar-nav .portfolio-desk {
        display: none !important;


    }

    .navbar-nav .nav-item {

        padding-right: 5px !important;
        justify-content: center;
        margin-top: 0px !important;

    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0 !important;
    }

    .fixed-top .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        width: 40px !important;
        height: 40px !important;

    }




    /* SECTION-1 HOMEPAGE */

    .box .text-content {

        padding: 30px 0px 0px 0px !important;

    }



    .text-content .hola-1 {
        font-size: 28pt;
        line-height: 2.7rem;
        letter-spacing: 1.5px;
    }

    .text-content .hola {
        font-size: 42pt;
        line-height: 3.2rem;

    }

    .text-content .p-title {
        font-size: 3vw;
        width: 75% !important;
    }

    .box .text-content {

        margin-top: 35px !important;

    }

    .boxes .box {
        height: 100% !important;
        padding: 60px 45px 10px 40px !important;
        width: 100% !important;


    }

    .boxes {
        height: 100% !important;
        position: inherit;
        display: flex !important;
        flex-direction: column !important;
        align-content: center !important;
        width: 100% !important;
    }

    .boxes .avatar-box {

        border-top: rgba(255, 105, 180, .20) 1px solid;


    }



    .btn-mobile a {

        color: #fff;
        font-size: 14pt;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }

    .btn-desktop {

        display: none;

    }

    .btn-mobile {
        display: block;
        margin-left: 14% !important;
        padding: 20px 30px !important;
        overflow: hidden;
        margin-top: 60px !important;
        margin-bottom: 60px !important;
        background: #b94181;
        border-radius: 5px;
        border: none;
        width: 261px;
        text-align: center;

    }

    .contact-btn {

        margin-top: 60px !important;
        margin-bottom: 60px !important;

    }

    .btn-home .contact-btn a {

        font-size: 14pt;

    }

    /* TOOLS SECTION */

    .boxes {

        height: 100%;

    }

    #wrapper h1 {
        font-size: 36pt;
        padding: 75PX 0px !important;

    }

    #wrapper-p h1 {
        font-size: 36pt;
        padding: 75PX 0px !important;

    }

    .tools-card-body {

        font-size: 16pt;


    }



    /* some of my skills section*/



    .new-section-2 .home-section-skills {
        height: 100% !important;
    }

    .home-section-skills .section-skills {
        flex-direction: column;
        align-items: center;
    }

    .new-section-2 h1 {

        font-size: 36pt;
        padding: 85px 0px !important;
    }

    .text-box h2 {

        padding: 10px 0px !important;
        font-size: 16pt;
    }

    .box-skills-1 {
        padding: 0px 5px 50px 5px !important;
        margin: 0px 0px !important;
    }

    .text-box .sec-2p {
        font-size: 12pt;

    }

    .box-skills-2 {
        padding: 0px 20px 50px 20px !important;
        margin: 0px !important;
    }


    /* NEW HOMEPAGE ICONS */

    .new-section-2 {
        background-color: #000;
        padding-bottom: 0px !important;
        border-top: rgb(43, 36, 36) 1px solid;
    }





    .container-2 {
        width: 100%;
        background-color: #000;
    }

    .container-2 .text-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .new-section-2 .text-container .text-box {
        margin: 0px !important;
        padding: 50px 10px !important;

    }

    .text-container .black {
        background-color: #000;

    }

    .text-container .gold {
        background-color: rgb(252, 112, 31);

    }

    .new-section-2 .text-container-1 {
        margin-top: 0px !important;
    }

    .new-section-2 .mobile-h1 {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 45px 35px 55px 35px !important;
        font-size: 25pt;
        font-weight: bold;
        color: #fff;


        color: black;
        --webkit-text-stroke: 1px black;
        color: white;
        text-shadow:
            3px 3px 0 #000,
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
        font-weight: 900;
        /* width: 100%;
    margin: 0; */
    }

    .new-section-2 .me-h1 {
        display: none;
    }

    .text-box .sec-2p,
    .text-box .skills-p {
        font-size: 14pt;
    }

    .new-section-2 h2 {
        font-size: 19pt;
    }

    .text-box .sec-2i {
        font-size: 40px;
    }

    .text-box .fa-buromobelexperte,
    .text-box .fa-align-justify {
        font-size: 40px;

    }


    /* SECTION-2 HOMEPAGE  */





    .btn-black button {
        padding: 20px 117px !important;
        margin-bottom: 90px !important;



    }

    .avatar {

        justify-content: center !important;

    }



    /*  NEW ICONS SECTION*/


    .new-section-2 {
        display: flex;
        flex-direction: column;
    }


    /* ABOUT PAGE */


    .about-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 160px !important;
        background-color: #000;
    }

    .me-h1 {
        font-size: 38pt;
        padding-top: 45px !important;
        color: #000;
        text-shadow: 4px 4px 0px rgb(252, 112, 31);


    }

    .me-h1 .me {
        color: #000;
        text-shadow: 4px 4px 0px rgb(252, 112, 31);
    }

    .info-1 {

        margin-top: 40px !important;
        padding: 20px !important;
        margin-bottom: 70px !important;

    }

    .info-1 .about-icons {
        padding: 8px !important;
    }

    .info-about p {
        font-size: 13pt;

    }

    .info-about .pic-1 {
        display: none;
    }

    .info-about .pic-2 {
        display: block;
        border-radius: 60%;
        width: 200px;
        height: 205px;
        object-fit: cover;
        /* box-shadow: 5px 5px 5px 2px rgba(14, 13, 13, 0.952); */
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.45);
        margin-top: 5px !important;
        transform: scaleX(1);

    }




    /* contact form */



    .quote-area {
        padding: 10px 0px 30px 10px !important;
        width: 100%;


    }

    .quote-area h2 {
        font-size: 10pt;
    }

    .p-quote {
        font-size: 8pt;

    }

    .mobile-q {
        display: none;
    }

    .main-form {
        width: 100%;
        height: 100%;
        padding: 10px 20px 20px 20px !important;

    }

    .container-box-2 {
        padding: 10px !important;
        box-shadow: none;
        background-color: #000;
        margin: 0px !important;
        width: 100%;
    }


    .form {
        padding: 50px 40px !important;
        width: 100%;

    }


    #new-section-contact {
        padding: 0px 100px !important;

    }





    .contact-form {

        width: 100%;
        /* margin-bottom: 100px !important;
        margin-top: 100px !important; */

    }

    .h1s {

        font-size: 36pt;
        padding: 75px 0px !important;

    }

    .main-form {
        width: 100%;
        height: 100%;
        padding: 10px 20px 20px 20px !important;
        align-items: center;
    }

    .main-form input {
        width: 100%;
    }

    .main-form textarea {
        width: 100%;
    }



    #form .quote-h1 {
        margin-top: 40px !important;


    }

    .quote {
        font-size: 10pt;



    }


    /* projects section accordion mobile */

    #accordion {
        width: 100% !important;
    }

    .card-header-mobile {
        display: flex;
        justify-items: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-header-mobile p {
        font-size: 13pt;
        padding: 10px 60px !important;
    }

    .accordion-section-mobile {
        height: inherit;
        display: flex;
        border-bottom: rgba(255, 105, 180, .20) 1px solid;

    }


    #accordion-desk {
        display: none;
    }

    #accordion h1 {

        font-size: 28pt;
        padding: 15PX 6px 50px 6px !important;


    }

    .accordion-section-mobile {

        background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%) !important;
        padding: 30px 60px 40px 60px !important;
    }

    .card-body img {
        object-fit: cover;
        width: 350px;
        height: 250px;
        box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.652);
        margin-bottom: 25px;
    }

    .card-body video {
        object-fit: cover;
        width: 350px;
        height: 250px;
        box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.652);
        margin-bottom: 25px;
    }



    .card-header-mobile .fa-html5 {
        color: rgb(192, 55, 21) !important;
        font-size: 18pt;
    }

    .card-header-mobile .fa-css3-alt {
        color: rgb(59, 59, 228) !important;
        font-size: 18pt;
    }

    .card-header-mobile .fa-align-justify {
        background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;

        font-size: 18pt;
    }



    .card-header-mobile .fa-bootstrap {
        color: rgb(133, 41, 133) !important;
        font-size: 18pt;

    }

    .card-header-mobile .fa-js {
        color: goldenrod !important;
        font-size: 18pt;
    }


    .card-header-mobile .fa-wordpress {
        color: #0c638b;
        font-size: 18pt;
    }



    .card-body h2 {
        font-weight: 600;
        padding-left: 0px;
        font-size: 30px;

    }

    .card-header button {


        text-decoration: none;
        color: #fff !important;
        padding: 10px 15px !important;
    }

    .process-h1 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 2.5rem;
        text-shadow: 1px 1px 1px #000;
    }

    .p-mobile {
        margin-bottom: 2.5rem;
        font-size: 11.5pt;
        text-shadow: 1px 1px 1px #000;
        padding-left: 20px;
        padding-right: 20px;

    }


    .card-mobile {
        background: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #797878;
        border-radius: 0;

    }

    .card-header-mobile {

        border-top: 3px solid #03e9f4;
    }

    .btn-link {
        text-decoration: none !important;
    }

    .panel-title>.btn:before {
        float: right !important;
        font-family: FontAwesome;
        content: "\f068";
        padding-right: 5px;
        color: #b94181;
    }

    .panel-title>.btn.collapsed:before {
        float: right !important;
        font-family: FontAwesome;
        content: "\f067";
        color: #b94181;

    }

    .panel-title>.btn:hover,
    .panel-title>.btn:active,
    .panel-title>.btn:focus {
        text-decoration: none;
    }

    .btn.focus,
    .btn:focus {
        outline: 0 !important;
        box-shadow: none !important;
    }



    /* footer social media icons */
    #footer {
        width: 100%;
        height: 425px;
    }


    .social {
        font-size: 8pt;
    }

    .line hr {
        display: none !important;
    }




}


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

    .navbar-nav .nav-item {

        font-weight: 700;
        font-size: 11pt;

    }


    .navbar-nav .about-link {
        display: none !important;


    }

    .navbar-nav .about-link-mobile {
        display: flex !important;


    }

    .navbar-nav .portfolio-mobile {
        display: flex !important;


    }

    .navbar-nav .portfolio-desk {
        display: none !important;


    }




    /* SECTION-1 HOMEPAGE */

    .box .text-content {

        padding: 90px 0px 0px 0px !important;
        margin-top: 40px !important;

    }



    .text-content .hola {
        font-size: 65pt;
        line-height: 5.5rem;



    }

    .text-content .hola-1 {
        font-size: 42pt;
        line-height: 3.5rem;


    }


    .text-content .p-title {

        font-size: 20pt;
        /* line-height: 1.65; */
        font-weight: 700;
        width: 75% !important;

    }

    .boxes .box {
        height: 100% !important;
        padding: 60px 55px 10px 50px !important;
        width: 100% !important;


    }

    .boxes {
        height: 100% !important;
        position: inherit;
        display: flex !important;
        flex-direction: column !important;
        align-content: center !important;
        width: 100% !important;
    }

    .boxes .avatar-box {

        border-top: rgba(255, 105, 180, .20) 1px solid;


    }



    .btn-mobile a {

        color: #fff;
        font-size: 14pt;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }

    .btn-desktop {

        display: none;

    }

    .btn-mobile {
        display: block;
        margin-left: 14% !important;
        padding: 20px 30px !important;
        overflow: hidden;
        margin-top: 60px !important;
        margin-bottom: 60px !important;
        background: #b94181;
        border-radius: 5px;
        border: none;
        width: 261px;
        text-align: center;

    }

    .contact-btn {

        margin-top: 60px !important;
        margin-bottom: 60px !important;

    }

    .btn-home .contact-btn a {

        font-size: 14pt;

    }

    /* TOOLS SECTION */

    .boxes {

        height: 100%;

    }

    #wrapper h1 {
        font-size: 36pt;
        padding: 75PX 0px !important;

    }

    #wrapper-p h1 {
        font-size: 36pt;
        padding: 75PX 0px !important;

    }

    .tools-card-body {

        font-size: 16pt;


    }

    .tools-section .card {
        width: 16rem !important;
        margin: 15px 15px !important;
    }

    /* some of my skills section*/

    .new-section-2 h1 {

        font-size: 36pt;
        padding: 75PX 0px !important;
    }



    .new-section-2 .home-section-skills {
        height: 100% !important;
        width: 100% !important;
    }


    .box-skills-2 {
        width: 100%;
        padding: 20px 80px !important;
        margin: 20px 30px !important;
    }

    .box-skills-1 {
        width: 100%;
        padding: 20px 80px !important;
        margin: 20px 30px !important;

    }

    .text-box .sec-2p {

        font-size: 17pt !important;
        padding: 0px 50px !important;

    }


    /* ABOUT PAGE */

    .about-container::before {
        height: 70vh;
    }

    .me-h1 {
        position: absolute;
        font-size: 32pt;

    }



    .box .text-content-about {
        font-size: 14pt;
        line-height: 1.5rem;
        height: 70%;



    }


    .btn-about {
        margin: 35px 0px 25px 0px !important;
        height: 25% !important;
    }

    .btn-home a {

        font-size: 10pt;

    }

    .box .text-content-about {

        padding: 0px 60px 0px 0px !important;

    }

    /* contact form */


    .quote-area {
        padding: 10px 0px 30px 10px !important;
        width: 100%;


    }

    .quote-area h2 {
        font-size: 11.5pt;
    }

    .p-quote {
        display: none;
    }



    .main-form {
        width: 100%;
        height: 100%;
        padding: 10px 20px 20px 20px !important;

    }

    .container-box-2 {
        padding: 10px !important;
        box-shadow: none;
        background-color: #000;
        margin: 0px !important;
        width: 100%;
    }

    .form {
        width: 70%;
        margin-bottom: 100px !important;
        padding: 30px 30px 60px 30px !important;
        border: #fff solid 10px;
    }



    #new-section-contact {
        padding: 0px !important;
    }





    .contact-form {

        width: 80%;
        /* margin-bottom: 100px !important;
        margin-top: 100px !important; */

    }

    .h1s {

        font-size: 36pt;
        margin-top: -25px !important;

        /* padding-bottom: 60px !important; */

    }


    .main-form input {
        width: 100%;
    }

    .main-form textarea {
        width: 100%;
    }

    .main-form h1 {
        font-size: 18pt;

    }


    #form .quote-h1 {
        margin-top: 40px !important;


    }

    .quote {
        font-size: 10pt;



    }




    /* projects page */

    #accordion {
        width: 100% !important;
    }

    .card-header-mobile {
        display: flex;
        justify-items: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-header-mobile p {
        font-size: 16pt;
        padding: 10px 60px !important;
    }

    .accordion-section-mobile {
        height: inherit;
        display: flex;
        border-bottom: rgba(255, 105, 180, .20) 1px solid;

    }

    #accordion-desk {
        display: none;
    }

    #accordion h1 {

        font-size: 28pt;
        padding: 15PX 6px 50px 6px !important;


    }

    .accordion-section-mobile {

        background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%) !important;
        padding: 30px 80px 40px 80px !important;
    }

    .card-body img {
        object-fit: cover;
        width: 350px;
        height: 250px;
        box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.652);
        margin-bottom: 25px;
    }

    .card-body video {
        object-fit: cover;
        width: 350px;
        height: 250px;
        box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.652);
        margin-bottom: 25px;
    }



    .card-header-mobile .fa-html5 {
        color: rgb(192, 55, 21) !important;
        font-size: 18pt;
    }

    .card-header-mobile .fa-css3-alt {
        color: rgb(59, 59, 228) !important;
        font-size: 18pt;
    }

    .card-header-mobile .fa-align-justify {
        background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;

        font-size: 18pt;
    }



    .card-header-mobile .fa-bootstrap {
        color: rgb(133, 41, 133) !important;
        font-size: 18pt;

    }

    .card-header-mobile .fa-js {
        color: goldenrod !important;
        font-size: 18pt;
    }


    .card-header-mobile .fa-wordpress {
        color: #0c638b;
        font-size: 18pt;
    }



    .card-body h2 {
        font-weight: 600;
        padding-left: 0px;
        font-size: 30px;

    }

    .card-header button {


        text-decoration: none;
        color: #fff !important;
        padding: 10px 15px !important;
    }

    .process-h1 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 2.5rem;
        text-shadow: 1px 1px 1px #000;
    }

    .p-mobile {
        margin-bottom: 2.5rem;
        font-size: 11.5pt;
        text-shadow: 1px 1px 1px #000;
        padding-left: 20px;
        padding-right: 20px;

    }


    .card-mobile {
        background: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #797878;
        border-radius: 0;

    }

    .card-header-mobile {

        border-top: 3px solid #b94181;
    }

    .btn-link {
        text-decoration: none !important;
    }

    .panel-title>.btn:before {
        float: right !important;
        font-family: FontAwesome;
        content: "\f068";
        padding-right: 5px;
        color: #b94181;
    }

    .panel-title>.btn.collapsed:before {
        float: right !important;
        font-family: FontAwesome;
        content: "\f067";
        color: #b94181;

    }

    .panel-title>.btn:hover,
    .panel-title>.btn:active,
    .panel-title>.btn:focus {
        text-decoration: none;
    }

    .btn.focus,
    .btn:focus {
        outline: 0 !important;
        box-shadow: none !important;
    }



    /* footer social media icons */

    .social {
        font-size: 8pt;
    }

    .line hr {
        display: none !important;
    }

    .flex-footer {
        background-color: #000;
    }

    .fa-envelope {
        color: #fff;
    }

    .fa-github {
        color: #fff;
    }

    .fa-codepen {

        -webkit-text-fill-color: #fff;
    }


}



@media (min-width: 1025px) and (max-width: 1367px) {



    .navbar-nav .nav-item {

        font-size: 12pt;
        margin-bottom: 10px !important;
        margin-top: 25px !important;

    }



    .btn-home a:hover {

        padding-left: 6px !important;
        transition: padding-left .2s ease;
    }

    .box .text-content {

        padding: 0px 0px 0px 0px !important;

    }

    .text-content .hola-1 {
        font-size: 35pt;
        line-height: 3.2rem;

    }

    .text-content .hola {
        font-size: 48pt;
        line-height: 3.8rem;

    }

    .contact-btn {

        margin-top: 60px !important;

    }

    .text-content .p-title {
        font-size: 12pt;
        line-height: 1.2rem;


    }

    .avatar img {
        width: 300px;
        height: 280px;
        margin-top: 60px !important;
    }

    /* about page */

    .box .text-content-about {
        height: initial;

        margin: 0px 80px 0px 50px !important;
        margin-bottom: 40px !important;

    }




    .box .text-content-about p {
        font-size: 14pt;
        line-height: 1.5rem;

    }


    .me-h1 {
        font-size: 40pt;

    }

    /* some of my tools section  */
    .tools-section .card {
        width: 13rem !important;
    }

    .tools-card-body {
        font-size: 16pt;
    }

    #wrapper h1 {
        font-size: 40pt;
        padding-top: 80px !important;

    }

    .tools-section .card:hover {
        animation: wiggle 2s linear infinite;

    }

    .tools-card-body .description:hover {
        color: #b94181;
    }

    /* some of my skills section */

    .box-skills-2 {
        padding: 15px !important;
        margin: 20px !important;
    }

    .box-skills-1 {
        padding: 15px !important;
        margin: 20px !important;
    }

    .new-section-2 h1 {

        font-size: 40pt;
        padding-top: 50px !important;

    }

    .text-box h2 {
        font-size: 14pt;


    }

    .text-box .sec-2p {

        font-size: 12pt;

    }

    /* some of my projects */


    .wrapper h1 {
        font-size: 40pt;
    }

    .card-header-desk button {
        margin: 0px 15px !important;
        padding: 0px 0px !important;

    }

    .col-sm-4 video {
        width: 450px !important;
        height: 230px !important;

    }

    .card-body-a p {
        width: 400px;
        height: 300px;
    }

    .card-body h2 {

        font-size: 30px;

    }

    .card-body .collap-text {
        padding-top: 0px !important;
    }

    .card-body .m-p-2 {
        padding-bottom: 30px !important;
    }

    .work-section-img .img-work img {
        height: 300px;
        width: 300px !important;


    }

    .h2-work {
        width: 300px;
        height: 300px;
        top: 0;
        left: 8%;

    }

    .h2-work h2 {

        font-size: 20px;

    }

    .work-pics:hover .img-work {

        transform: scale(.4);
        transition: 1.8s ease;
        filter: brightness(40%);
    }

    .work-pics:hover .h2-work {
        opacity: 1;


    }

    .h2-work button:hover {

        background-color: #b94181;
        transition: .2s ease-in;

    }

    .fancybox-container {
        max-width: 100%;
        /* Desired container width */
        max-height: 100%;
        /* Optional height limit */
        position: fixed !important;
        /* Fix the container in place */
        top: 50% !important;
        /* Center vertically */
        left: 50% !important;
        /* Center horizontally */
        transform: translate(-50%, -50%) !important;
        /* Shift to center */
        margin: 0 !important;
        /* Remove default margins */
        padding: 0 !important;
        /* Remove padding, if any */
        box-sizing: border-box;
        /* Ensure proper sizing */

    }

    .fancybox-content {
        display: block;
        /* Default block layout to avoid unexpected behavior */
        text-align: center;
        /* Center the content horizontally */
        max-width: 100%;
        /* Ensure content respects container width */
        max-height: 100%;
        /* Prevent overflow */

    }
    .fancybox-caption {
  
      
        padding-bottom: 25px !important;
        padding-top: 25px !important;
     
  
      }
      

    .fancybox-content img {
        max-width: 100%;
        /* Scale image properly */
        max-height: 90%;
        /* Fit within container */
        object-fit: contain;
        /* Maintain aspect ratio */
    }

    /* contact form */

    .h1s {

        font-size: 36pt;
    }

    .quote {
        font-size: 11pt;
    }

    .mobile-q {
        display: none;
    }

    .p-quote {
        font-size: 9pt;

    }

    .form {

        padding: 30px 30px 60px 30px !important;
    }

    #message {
        font-size: 10pt;
    }

    .main-form .btn:hover {

        background: #b94181
    }

    /* footer */

    .social i:hover {
        color: #b94181 !important;


    }

    #footer {

        height: 675px;

    }
}



@media (min-width: 1368px) and (max-width: 1536px) {

    /* hover effects */

    .navbar-nav .nav-item {

        margin-top: 25px !important;
        font-size: 14pt;


    }

    .social i:hover {
        color: #b94181 !important;


    }




    .main-form .btn:hover {

        background: #b94181;


    }




    .social i:hover {
        color: #b94181 !important;
        z-index: 999;

    }

    .main-form .btn:hover {

        background: #b94181;


    }

    /* avatar section */
    .avatar img {
        border-radius: 50%;
        width: 340px;
        height: 280px;
        margin-top: 100px !important;
    }

    .text-content .hola-1 {
        font-size: 40pt;
        line-height: 3.3rem;

    }

    .text-content .hola {
        font-size: 60pt;
        line-height: 5rem;

    }

    .text-content .p-title {

        font-size: 14pt;
        line-height: inherit;


    }

    .box .text-content {
        height: initial;


    }

    .contact-btn {

        margin-top: 68px !important;

    }



    /* Tools homepage section */

    .wrapper h1 {
        font-size: 42pt;
        padding-bottom: 20px !important;
        padding-top: 80px !important;
    }


    .tools-card-body .skill {

        font-size: 18pt;

    }


    .tools-card-body .description {
        font-size: 11pt;


    }

    .tools-section .card:hover {
        animation: wiggle 2s linear infinite;

    }

    .tools-card-body .description:hover {
        color: #b94181;
    }



    .tools-section {
        padding: 40px 10px 25px 10px !important;
    }

    /* SOME OF MY SKILLS */


    .skills-container {
        min-height: initial !important;

    }

    .new-section-2 .home-section-skills {
        height: initial !important;
    }

    .new-section-2 h1 {
        font-size: 42pt;
        padding-bottom: 0px !important;
        padding-top: 80px !important;

    }

    .text-box .sec-2p {

        font-size: 16pt;
        line-height: 1.7rem;

    }

    .text-box .sec-2i {
        font-size: 50px;

    }

    .text-box h2 {
        font-size: 22pt;
    }

    /* .box-skills-1 {
        padding: 40px 50px !important;
        margin-top: -60px !important;


    } */

    /* .box-skills-2 {
        padding: 20px 50px !important;

    } */

    .box-skills-2 {

        margin: 30px 30px 75px 30px !important;
    }

    .box-skills-1 {
        margin-bottom: 15px !important;
        margin-top: 0px !important;
        padding: 90px 30px 20px 30px !important;
    }

    /* some of my projects */

    .work-section {
        padding-top: 60px !important;
    }

    .card-body .m-p-2 {
        padding-bottom: 30px !important;
    }

    .work-section-img .img-work img {
        height: 280px;
        width: 280px !important;


    }

    .work-section-img .img-moon img {
        height: 280px;
        width: 280px !important;


    }

    .h2-work {
        width: 280px;
        height: 280px;
        top: 0;
        left: 8%;

    }


    .work-pics:hover .img-work {

        transform: scale(.4);
        transition: 1.8s ease;
        filter: brightness(40%);
    }

    .work-pics:hover .h2-work {
        opacity: 1;


    }

    .h2-work button:hover {

        background-color: #b94181;
        transition: .2s ease-in;

    }

    .fancybox-container {
        max-width: 90%;
        /* Desired container width */
        max-height: 100%;
        /* Optional height limit */
        position: fixed !important;
        /* Fix the container in place */
        top: 50% !important;
        /* Center vertically */
        left: 50% !important;
        /* Center horizontally */
        transform: translate(-50%, -50%) !important;
        /* Shift to center */
        margin: 0 !important;
        /* Remove default margins */
        padding: 0 !important;
        /* Remove padding, if any */
        box-sizing: border-box;
        /* Ensure proper sizing */

    }

    /* ABOUT */
    .info-1 .about-icons {
        padding-top: 30px !important;


    }

    .info-1 .about-icons i {
        color: #fff;
        padding: 16px !important;

    }

    .info-1 .about-icons i:hover {
        color: #b94181;

    }


    .info-1 {


        padding: 60px !important;


    }


    .info-about p {
        font-size: 20pt;

    }

    .box .text-content-about {
        font-size: 18pt;
        line-height: 1.6rem;
        height: 280px;

    }

    .me-h1 {

        font-size: 42pt;

    }

    /* NEW CONTACT SECTION */
    #message {
        font-size: 10pt;
    }

    .mobile-q {
        display: none;
    }

    .h1s {

        font-size: 42pt;
        padding: 90px 0px 60px 0px !important;

    }

    .quote {
        font-size: 14pt;

    }

    .p-quote {
        font-size: 10pt;

    }

    .form {

        padding: 30px 60px 60px 60px !important;
    }

    .main-form h1 {
        font-size: 24pt;
    }

    /* PORTFOLIO */


    .header-portfolio {
        margin-bottom: 0px !important;
    }

    .img-area {

        padding-top: 50px !important;
        padding-bottom: 0px !important;
    }

    .p-hr {
        margin-top: 70px !important;
    }

    .main-h1 {

        font-size: 55pt;
    }



    #wrapper-p {
        /* min-height: 100vh; */
        border-bottom: rgba(255, 105, 180, .20) 1px solid;
    }

    /* footer */

    .flex-footer h1 {
        font-size: 12pt;
    }

    .social {
        font-size: 10pt;
    }

    #footer {
        width: 100%;
        height: 725px;

    }

    .flex-footer .thanks-hr {

        padding-top: 140px !important;
    }
}

@media (min-width: 1537px) and (max-width: 1920px) {





    .social i:hover {
        color: #b94181 !important;


    }




    .main-form .btn:hover {

        background: rgb(11, 12, 27, 0.75);


    }

    /* 
    .navbar a:hover {
        color: #000 !important;
        text-shadow: 1px 1px 2px #000000;



    } */





    .social i:hover {
        color: #b94181 !important;
        z-index: 999;

    }


    .alpaca img:hover {
        width: 300px;
        height: 250px;

    }

    .main-form .btn:hover {

        background: rgba(185, 65, 129, 0.7);


    }

    .btn-home .contact-btn:hover {

        padding-left: 3px !important;
        transition: padding-left .2s ease;
    }

    .btn-home .btn-desktop:hover {

        padding-left: 2px !important;
        transition: padding-left .2s ease;
    }



    /* avatar section */

    .avatar img {

        width: 300px;
        height: 300px;
        margin-top: 90px !important;

    }

    /* tools cards */


    .tools-section .card:hover {
        animation: wiggle 2s linear infinite;

    }

    .tools-card-body .description:hover {
        color: #b94181;
    }


    /* Tools homepage section */



    .info-1 .about-icons {
        padding-top: 30px !important;


    }

    .info-1 .about-icons i {
        color: #fff;
        padding: 16px !important;

    }

    .info-1 .about-icons i:hover {
        color: #b94181;

    }


    .info-1 {


        padding: 60px !important;


    }


    .info-about p {
        font-size: 20pt;

    }

    /*  some of my projects */


    .card-body .m-p-2 {
        padding-bottom: 30px !important;
    }



    .projects-btn button:hover {

        color: #b94181;
        transform: scale(1.3);
        transition: .5s all ease;


    }

    .work-pics:hover .h2-work {
        opacity: 1;


    }

    .h2-work button:hover {

        background: rgb(11, 12, 27, 0.75);
        transition: .2s ease-in;

    }




    /* NEW CONTACT SECTION */
    #message {
        font-size: 10pt;
    }

    .mobile-q {
        display: none;
    }

    /* PORTFOLIO */


    .header-portfolio {
        margin-bottom: 0px !important;
    }

    .img-area {

        padding-top: 50px !important;
        padding-bottom: 0px !important;
    }

    .p-hr {
        margin-top: 70px !important;
    }

    .main-h1 {

        font-size: 55pt;
    }

    /* #wrapper {
        min-height: 100vh;
    } */

    #wrapper-p {
        /* min-height: 100vh; */
        border-bottom: rgba(255, 105, 180, .20) 1px solid;
    }


}