html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body, html {
    background-color: #182323;
    margin: 0;
    padding: 0;
}

.sticky-top {
    background-color: #182323;
}

@font-face {
    font-family: "Poppins-Medium";
    src: url(Poppins-Medium.ttf);
}

@font-face {
    font-family: "Poppins-Regular";
    src: url(Poppins-Regular.ttf);
}

@font-face {
    font-family: "Poppins-Thin";
    src: url(Poppins-Thin.ttf);
}

@font-face {
    font-family: "Poppins-Light";
    src: url(Poppins-Light.ttf);
}

@media (min-width: 1024px) {



    h1 {
        font-size: 330%;
        color: #182323;

    }

    h2 {
        color: #e9e6e2;
        font-size: 200%;
        font-family: "Poppins-Medium";
        text-align: center;
        letter-spacing: 30%;
    }

    h3 {
        color: #e9e6e2;
        font-size: 130%;
        font-family: "Poppins-Regular";
        text-align: center;
    }

    h4 {
        color: #e9e6e2;
        font-size: 100%;
        font-family: "Poppins-Regular";
        text-align: center;
    }

    h5 {
        color: #182323;
        font-size: 100%;
        font-family: "Poppins-Regular";
        text-align: center;
    }

    a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        text-align: center;
    }

    p {
        color: #E6AEB5;
        font-size: 120%;
        font-family: "Poppins-Regular";
        text-align: start;
    }

    a:hover {
        text-decoration: overline;
        color: #5f8f78;
    }

    .container-fluid {
        border: 0px solid;
        background-color: #182323;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-left: 0px;
        background-repeat: repeat-y;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .containerWeb {
        border: 0px solid;
        background-color: #182323;
        background-repeat: repeat-y;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .containerHeader {
        border: 0px solid;
        margin-top: 1%;
        margin-bottom: 1%;
        background-color: #182323;
    }

    .row {
        border: 0px solid;
    }

    .col {
        border: 0px solid;
        background-color: #e9e6e2;

    }

    .rowHeader {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-top: 1%;
        padding-bottom: 1%;
        background-color: #182323;
        margin-left: 0%;
        margin-right: 0%;
    }

    .colNot {
        border: 0px solid;
        background-color: #182323;
    }

    .colLogo {
        border: 0px solid;
        padding-top: 0.5%;
        padding-bottom: 0.5%;

    }

    .colLogoMenu {
        border: 0px solid;
        padding-top: 1.3%;
        padding-bottom: 0.5%;

    }

    #Titulo {
    scroll-margin-top: 96px;
    }

    #Portfolio {
    scroll-margin-top: 100px;
    }

    .colLogoBtn {
        border: 0px solid;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
        padding-left: 1%
    }

    .btn-primary-custom {
        background-color: #8edfa3;
        border: 0px;
        padding-bottom: 4%;
        padding-top: 4%;
        padding-left: 25%;
        padding-right: 25%;
        font-size: 90%;
        font-family: "Poppins-Regular";
        color: #202020;
        border-bottom-left-radius: 8%;
        border-bottom-right-radius: 8%;
        border-top-left-radius: 4%;
        border-top-right-radius: 4%;
    }

    .btn-primary-custom:hover {
        background-color: #5f8f78;
        color: #202020;
    }

    .btn-primary-custom:active {
        background-color: #5f8f78 !important;
        border-color: #5f8f78 !important;
        /* Optional: If you want to change the border color as well */

    }



    .rowImgLogo {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;

    }

    .colImgLogo {
        border: 0px solid;
        padding-top: 7%;
        padding-bottom: 7%;
        margin-top: 17%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .rowVidLogo {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-top: 0%;
        margin-top: 24%;
    }

    .colVidLogo video {
    transition: none;
}

    .colVidLogo {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .rowStep {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .colStep {
        border: 0px solid;
        padding-top: 1.7%;
        padding-bottom: 1.7%;
        margin-right: 10.1%;
        display: flex;
        flex-wrap: wrap;
    }

    .colOops {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        margin-top: 1%;
        margin-bottom: 4%;
    }

    .rowTime {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 4.6%;
        margin-left: 1%;
        margin-bottom: 2%;
    }

    .colTime {
        border: 0px solid;
        padding-top: 1.5%;
        padding-bottom: 1.5%;
        margin-left: 8.8%;
        margin-bottom: 2%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowExp2 {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -2.5%;
        margin-left: 1%;
        gap: 0;
        row-gap: 0px;
    }

    .rowExp {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-left: 1%;
        margin-bottom: 10%;
        gap: 0;
        row-gap: 0px;
    }
    

    .colExp {
        border: 0px solid;
        padding-bottom: 0%;
        margin-left: 8.8%;
        margin-top: -5%;
        display: flex;
        flex-wrap: wrap;
    }

    .colExp:nth-child(1) { z-index: 10; position: relative; }
    .colExp:nth-child(2) { z-index: 9; position: relative; }
    .colExp:nth-child(3) { z-index: 8; position: relative; }
    .colExp:nth-child(4) { z-index: 7; position: relative; }
    .colExp:nth-child(5) { z-index: 6; position: relative; }
    .colExp:nth-child(6) { z-index: 5; position: relative; }
    .colExp:nth-child(7) { z-index: 4; position: relative; }
    .colExp:nth-child(8) { z-index: 3; position: relative; }
    .colExp:nth-child(9) { z-index: 2; position: relative; }
    .colExp:nth-child(10) { z-index: 1; position: relative; }

    .rowDig {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 4.6%;
        background-color: transparent;
    }

    .colDig {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    #canvas-musica {
    margin-top: -150px;
    }

    .rowMusic {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 5%;

    }

    .colName {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: -10%;
    }


    .rowCards3 {
        display: flex;
        column-gap: 2%;
        width: 90%;
        margin: 0 auto;
        align-items: center;
        overflow: visible;
    }

    .rowCards3 > div {
        display: flex;
        justify-content: center;
    }

    .rowCards3 img {
        width: 96%;
        height: 100%;
        display: block;
    }

    .rowCards4 {
        display: flex;
        column-gap: 2%;
        width: 90%;
        margin: 0 auto;
        align-items: center;
        overflow: visible;
        margin-top: 2%;
        margin-bottom: 10%;
    }

    .rowCards4 > div {
        display: flex;
        justify-content: center;
    }

    .rowCards4 img {
        width: 96%;
        height: 100%;
        display: block;
    }

    .cardI,
    .cardU,
    .card3,
    .cardC,
    .cardF,
    .cardO {
        position: relative;
    }

    .card-link {
        display: block;
        width: 100%;
    }

    .card-link img {
        width: 100%;
        display: block;
    }


    /* Estilo base para el menú desplegable */
    #submenu {
        
        display: none;
        position: absolute;
        background-color: transparent;
        z-index: 10;
        list-style: none;

        top: 101.5%;
        left: 0;
        width: 100%;

        margin: 0;
        padding: 0;
    }


    #submenu li {
        padding: 12px 40px;
        margin-bottom: 4px;
        background-color: #E6AEB5;
    }

    #submenu li a {
        text-decoration: none;
        color: #182323;
        display: block;
        font-family: "Poppins-Regular";
        text-align: left;
    }

    #submenu li:hover {
        background-color: #d98f99;
    }

    /* Clase para mostrar el menú */
    .show-menu #submenu {
        display: block;
    }


   #submenu-web {
    display: none;
    position: absolute;
    background-color: transparent;
    z-index: 10;
    list-style: none;

    top: 101.5%;
    left: 0;
    width: 100%;

    margin: 0;
    padding: 0;
}


   #submenu-web li {
    padding: 12px 40px;
    background-color: #5f8f78;
    margin-bottom: 4px;
    
}

    #submenu-web li a {
        text-decoration: none;
        color: #182323;
        display: block;
        font-family: "Poppins-Regular";
        text-align: left;
    }

    #submenu-web li:hover {
        background-color: #95B49E;
    }

    /* Clase para mostrar el menú */
    .show-menu-web #submenu-web {
        display: block;
    }


    #submenu-3d {
        
        display: none;
        position: absolute;
        background-color: transparent;
        z-index: 10;
        list-style: none;

        top: 101.5%;
        left: 0;
        width: 100%;

        margin: 0;
        padding: 0;
    }


    #submenu-3d li {
        padding: 12px 40px;
        background-color: #AAF8BB;
        margin-bottom: 4px;
    }

    #submenu-3d li a {
        text-decoration: none;
        color: #182323;
        display: block;
        font-family: "Poppins-Regular";
        text-align: left;
    }

    #submenu-3d li:hover {
        background-color: #7aae85;
    }

    /* Clase para mostrar el menú */
    .show-menu-3d #submenu-3d {
        display: block;
    }

     #submenu-code {
        
        display: none;
        position: absolute;
        background-color: transparent;
        z-index: 10;
        list-style: none;

        top: 101.5%;
        left: 0;
        width: 100%;

        margin: 0;
        padding: 0;
    }

    #submenu-code li {
        padding: 12px 40px;
        background-color: #AAF8BB;
        margin-bottom: 4px;
    }

    #submenu-code li a {
        text-decoration: none;
        color: #182323;
        display: block;
        font-family: "Poppins-Regular";
        text-align: left;
    }

    #submenu-code li:hover {
        background-color: #7aae85;
    }

    /* Clase para mostrar el menú */
    .show-menu-code #submenu-code {
        display: block;
    }

     #submenu-film {
        
        display: none;
        position: absolute;
        background-color: transparent;
        z-index: 10;
        list-style: none;

        top: 101.5%;
        left: 0;
        width: 100%;

        margin: 0;
        padding: 0;
    }

    #submenu-film li {
        padding: 12px 40px;
        background-color: #E6AEB5;
        margin-bottom: 4px;
    }

    #submenu-film li a {
        text-decoration: none;
        color: #182323;
        display: block;
        font-family: "Poppins-Regular";
        text-align: left;
    }

    #submenu-film li:hover {
        background-color: #d98f99;
    }


    /* Clase para mostrar el menú */
    .show-menu-film #submenu-film {
        display: block;
    }

     #submenu-others {
        
        display: none;
        position: absolute;
        background-color: transparent;
        z-index: 10;
        list-style: none;

        top: 101.5%;
        left: 0;
        width: 100%;

        margin: 0;
        padding: 0;
    }

    #submenu-others li {
        padding: 12px 40px;
        background-color: #5f8f78;
        margin-bottom: 4px;
    }

    #submenu-others li a {
        text-decoration: none;
        color: #182323;
        display: block;
        font-family: "Poppins-Regular";
        text-align: left;
    }

    #submenu-others li:hover {
        background-color: #95B49E;
    }    

    /* Clase para mostrar el menú */
    .show-menu-others #submenu-others {
        display: block;
    }

    .rowInteraction {
        display: flex;
        column-gap: 2%;
        width: 92%;
        margin: 0 auto;
        align-items: center;
        overflow: visible;
        margin-top: 2%;
    }

    .rowInteraction > div {
        display: flex;
        justify-content: center;
    }

    .rowInteraction img {
        width: 100%;
        height: 100%;
        display: block;
    }

   

    .rowDMK {
        border: 0px solid;
        margin-top: 1.9%;
        display: flex;
        flex-wrap: wrap;
    }

    .colDMK {
        border: 0px solid;
        margin-right: 2%;
        padding-top: 2.3%;
        padding-bottom: 1.3%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowFooter {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        background-color: #5f8f78;
        padding-bottom: 0%;
        padding-top: 0%;
    }

    .colData {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 0%;
        margin-left: 4%;
        display: flex;
        flex-wrap: wrap;
    }

    .colData1 {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-top: 15%;
        padding-bottom: 0%;
    }

    .colData2 {
        border: 0px solid;
        padding-top: %;
        margin-top: 0%;
        padding-bottom: 10%;
        display: flex;
        flex-wrap: wrap;
    }

    .colLogoF {
        border: 0px solid;
        padding: 2.5%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8%;
        margin-bottom: 0%;
    }

    .colIcons {
        border: 0px solid;
        padding-top: 2.5%;
        padding-bottom: 2.5%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 18.1%;
        margin-bottom: 0%;
    }

    .colI {
        border: 0px solid;
        padding: 12%;
        display: flex;
        flex-wrap: wrap;

    }

    .rowImDAbout {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-left: 9%;
        margin-right: 0%;
    }

    .rowImD {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-left: 9%;
        margin-right: 0%;
    }

    .colMe {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 0%;
        display: flex;
        flex-wrap: wrap;
        padding-left: 8%;
        
    }

    .colImD {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 0%;
        margin-bottom: 0%;
        margin-top: 28%;
        padding-left: 20%;
        display: flex;
        flex-wrap: wrap;
    }

    .colCh {
        border: 0px solid;
        padding-bottom: 4.5%;
        margin-bottom: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .colBarras {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 4.5%;
        display: flex;
        flex-wrap: wrap;
        margin-top: -3%;
    }

    .rowImLog {
        border: 0px solid;
        margin-top: 1.9%;
        margin-bottom: 0%;
        padding-bottom: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .colImLog {
        border: 0px solid;
        padding-top: 2.5%;
        padding-bottom: 3%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowText {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 1.5%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .colText {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowImLog2 {
        border: 0px solid;
        margin-top: 0%;
        padding-bottom: 5%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowEE {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 3%;
        margin-right: 2%;
        margin-bottom: 4%;
    }

    .colEdu {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .colBarra {
        border: 0px solid;
        background-color: #e9e6e2;
        display: flex;
        flex-wrap: wrap;
    }

    .colEducation {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;

    }

    .colTitleE {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 5.1%;
        padding-top: 5.1%;
    }

    .colEduInfo {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-top: 50%;
        padding-bottom: 50%;
    }

    .colExpe {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .colExperience {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .colTitleX {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 5.1%;
        padding-top: 5.1%;
    }

    .colExpInfo {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-top: 40%;
        padding-bottom: 40%;
    }

    .colCom {
        border: 0px solid;
        margin-top: 0%;
        padding-top: 20%;
        padding-bottom: 0%;
        margin-left: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .colCompo {
        border: 0px solid;
        padding-top: 0%;
        padding-bottom: 0%;
        margin-bottom: 0%;
        margin-top: 0%;
        padding-left: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .colFormB {
        border: 0px solid;
        margin-top: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .colForm {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 0%;
        padding-top: 20%;
    }

    form {
        width: 80%;

    }

    .btn-primary.btn-primary-form {
        background-color: #8edfa3;
        border: 0px;
        padding-bottom: 2%;
        padding-top: 2%;
        padding-left: 8%;
        padding-right: 8%;
        font-size: 90%;
        font-family: "Poppins-Regular";
        color: #202020;
        border-bottom-left-radius: 8%;
        border-bottom-right-radius: 8%;
        border-top-left-radius: 4%;
        border-top-right-radius: 4%;
    }

    .btn-primary.btn-primary-form:hover {
        background-color: #5f8f78;
        color: #202020;
    }

    .colButton {
        margin-top: 2%;
        display: flex;
        flex-wrap: wrap;
    }

    .form-control {
        background-color: #182323;
        box-shadow: none !important;
        border: none;
        border-bottom: 2px solid #5f8f78;
        border-radius: 0;
        color:#e9e6e2
        
    }


    .form-label {
        color: #73ab84a8;
        font-size: 100%;
        font-family: "Poppins-Regular";
        text-align: center;
    }


    .colSend {
        border: 0px solid;
        margin-top: 8.5%;
        margin-bottom: 8.5%;
        margin-right: 20%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowPro {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-left: 5%;
        padding-top: 3%;
    }

    .rowRelleno {
        background-color: #5f8f78;
    }

    .colRelleno {
        border: 0px solid;
        padding-top: 7.5%;
        padding-bottom: 1.5%;
        margin-left: 8.8%;
        margin-top: -16.7%;
        margin-bottom: 0%;
        display: flex;
        flex-wrap: wrap;
    }

    .colImPro {
        border: 0px solid;
        margin-top: 0%;
        padding-top: 0%;
        padding-bottom: %;
        margin-left: 5%;
        display: flex;
        flex-wrap: wrap;
    }

    .colTexPro {
        border: 0px solid;
        margin-top: 0%;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
    }

    .colCourse {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 1%;
        padding-top: 1%;
    }

    .colAbPro {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 15%;
        padding-top: 5%;
        margin-top: 5%;
        text-align: start;
    }

    .rowNamePro {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0%;
        background-color: #5f8f78;
    }

    .colNamePro {
        border: 0px solid;
        padding-top: 3.5%;
        padding-bottom: 3.5%;
        padding-left: 2%;
        display: flex;
        flex-wrap: wrap;
    }

    .rowPics {
        border: 0px solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 4.6%;
        margin-left: 7%;
        margin-right: 1%;
    }

    .colPics {
        border: 0px solid;
        padding-left: 15.5%;
        padding-right: 15.5%;
        padding-top: 12%;
        padding-bottom: 12%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        display: flex;
        flex-wrap: wrap;
    }

    .colPics2 {
        border: 0px solid;
        padding: 10%;
        display: flex;
        flex-wrap: wrap;
        margin: -0.5%;
    }

}


@media (max-width: 1023px) {

}



@media (max-width: 767px) {

}