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


/*===== VARIABLES CSS =====*/
:root {
    --header-height: 4.5rem;

    /*===== Colores =====*/
    --first-color: #3664F4;
    --dark-color: #070D1F;
    --navy-blue: #293241;
    --dark-color-alt: #282B3A;
    --white-color: #F5F9FF;

    /*===== Fuente y tipografia =====*/
    --body-font: 'Poppins', sans-serif;
    --second-font: 'Nunito ';
    --normal-font-size: .938rem;
    --small-font-size: .813rem;

    /*===== z index =====*/
    --z-fixed: 100;
}

.nav {
    display: none;
    /* Initially hidden */
}

.nav__perfil img {
    width: 100px;
    /* Default width */
    height: auto;
    /* Maintain aspect ratio */
}

.nav.show {
    display: block;
    /* Display when the 'show' class is added */
}

.nav__listed--active {
    display: block;
}

.header__logo {
    caret-color: transparent;
}


#hero-image {
    width: 100%;
    height: 100vh;
    padding: 10%;
    margin: 0;
    background-color: #ecf3fe;
    overflow: hidden;
}

#role,
#role1,
#name {
    text-align: start;
    caret-color: transparent;
}

#role {
    font-size: 0.9em;
    color: #070D1F;
    font-family: var(--body-font);
    font-weight: lighter;

}

#role1 {
    font-size: 0.9em;
    color: #070D1F;
    font-family: var(--body-font);
    font-weight: lighter;


}

#name {
    font-family: var(--body-font);
    font-size: 30px;
    font-weight: bold;
    color: #070D1F;
    margin-bottom: 10px;
    margin-top: 20%;
}

#role-btn {
    font-size: 0.8em;
    font-family: var(--body-font);
    width: 22%;
    height: 10%;
}


/* blog-wrapper */
.blog-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    caret-color: transparent;


}

.blog-wrapper::before {
    content: "";
    position: absolute;
    /* background: rgba(80, 80, 80, 0.503); */
    width: 25rem;
    height: 50px;
    bottom: 170px;
    filter: blur(20px);
    border-radius: 50%;
}

.blog-wrapper img {
    width: 200px;
    clip-path: polygon(25% 10%, 100% 0%, 75% 100%, 0% 100%);
    transition: 0.5s ease-out 100ms;
    cursor: pointer;
    margin-top: 20px;


}


.blog-wrapper img:hover {
    transform: scale(1.05);
}

.blog-wrapper .img1 {
    height: 20rem;
    margin-right: -30px;

}

.blog-wrapper .img2 {
    height: 20rem;
    margin-right: -30px;
}

.blog-wrapper .img3 {
    height: 25rem;
    width: 15rem;

}

/* image-wrapper */

.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    caret-color: transparent;
}

.image-wrapper::before {
    content: "";
    position: absolute;
    background: rgba(80, 80, 80, 0.503);
    width: 25rem;
    height: 50px;
    bottom: 170px;
    filter: blur(20px);
    border-radius: 50%;
}

.image-wrapper img {
    width: 200px;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    transition: 0.5s ease-out 100ms;
    cursor: pointer;
    margin-top: 20px;

}


.image-wrapper img:hover {
    transform: scale(1.05);
}

.image-wrapper .img1 {
    height: 18rem;
    margin-right: -30px;

}

.image-wrapper .img2 {
    height: 20rem;
    margin-right: -30px;
}

.image-wrapper .img3 {
    height: 18rem;
}

/* WHAT I DO */
#about {
    height: 90vh;
    width: 100%;
    overflow: hidden;
}

#whoiam {
    height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0%;
    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 15%;
    overflow: hidden;
    caret-color: transparent;
}

.card-body img {
    height: 70px;
    width: 70px;
}


.textto {
    height: 20%;
    /* padding: 10%; */
    caret-color: transparent;
}

/* web */

#web {
    margin: 0 auto;
    padding: 5%;
    height: 120vh;
    width: 100%;
    background-color: #ecf3fe;
    caret-color: transparent;
}

#clothing {
    margin: 0 auto;
    padding: 5%;
    height: auto;
    width: 100%;
    background-color: #ecf3fe;
    caret-color: transparent;
}


#pdy {
    margin: 0 auto;
    padding: 5%;
    height: auto;
    width: 100%;
    caret-color: transparent;
}

#web-design {
    margin: 0 auto;
    padding: 0;
    caret-color: transparent;
}

#uicard{
    width: 22rem;
    height: auto;
}
.carousel-item {
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slicks {
    height: 450px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dental {
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-item img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Ensures the image covers the container without stretching */
}



#webText {
    font-family: var(--body-font);
    font-size: 100%;
    column-gap: 1;
    font-weight: lighter;
    letter-spacing: 5px;
    color: #3c3c3c;
    margin: 0;
    caret-color: transparent;
    text-align: center;
}

#webTitle {
    font-family: var(--body-font);
    font-size: 2rem;
    column-gap: 2px;
    font-weight: bold;
    color: #3c3c3c;
    margin: 0;
    caret-color: transparent;
    text-align: center;
}



/* blog */

#blog {
    width: 100%;
    height: 100vh;
    padding: 5%;
    background-color: #ecf3fe;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
}


#blogtext1 {
    padding: 0%;
    font-size: 0.9em;
    color: var(--dark-color-alt);
    font-family: var(--body-font);
    font-weight: lighter;
    caret-color: transparent;
    margin-top: 30px;
}






#centerText {

    font-family: var(--body-font);
    font-size: 80%;
    column-gap: 1;
    font-weight: lighter;
    letter-spacing: 5px;
    color: #686868;
    margin: 0;
    caret-color: transparent;
}

#centerText20 {

    font-family: var(--body-font);
    font-size: 80%;
    column-gap: 1;
    font-weight: lighter;
    letter-spacing: 5px;
    color: #686868;
    margin: 0;
    caret-color: transparent;
}

#centerText10 {
    margin-top: 100px;
    font-family: var(--body-font);
    font-size: 80%;
    column-gap: 1;
    font-weight: lighter;
    letter-spacing: 5px;
    color: #686868;
    caret-color: transparent;
}



#centerText2 {
    font-family: var(--body-font);
    font-size: 2.5rem;
    font-weight: bolder;
    color: #3c3c3c;
    margin: 0;
    caret-color: transparent;
}


.card {
    width: 21rem;
    height: 14.5rem;
    /* background-color: #eaf3ff; */
    border: none;
    border-width: none;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    caret-color: transparent;
}


.card h5 {
    margin-top: 15px;
    font-family: var(--body-font);
    font-weight: bold;
    font-size: 13px;
    caret-color: transparent;
}

.card-body {
    background-color: #e9ecef;
    justify-content: center;
    align-items: center;
    text-align: center;
    caret-color: transparent;
    height: auto;
}

.card-body p {
    text-align: center;
    font-family: var(--body-font);
    font-weight: lighter;
    color: #686868;
    font-size: 12px;
    caret-color: transparent;
}

.tech {
    height: 5rem;
    padding: 2.5%;
}

.tech p {
    font-family: var(--body-font);
    font-size: medium;
}


#tooling {
    height: auto;
    margin: 0;
    padding: 6rem;

}

.technologies {
    max-width: 100%;
    height: 50vh;
    justify-content: center;
    align-items: center;

}

#tech-row {
    padding-left: 15%;
    padding-right: 15%;
    margin: 0;
    justify-content: center;
    align-items: center;
    display: flex;

}

#tech-col {
    border: 1px solid #293241;
    background-color: #293241;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ecf3fe;
    caret-color: transparent;
}

#tech-col img {
    height: 200%;
    width: auto;
}



#tech-hover :hover {
    background-color: #070D1F;
    border-color: #070D1F;
    color: #ecf3fe;
    caret-color: transparent;
}

#tech-hover span {
    margin-left: 5%;
}

.carousel-caption h5 {
    font-family: var(--body-font);
    caret-color: transparent;
}

.name {
    font-size: 5rem;
    letter-spacing: 10px;
}

.btn-class {

    background-color: #e9ecef;
    border: none;
    border-radius: 20px;
    width: 8rem;
    padding: 10px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
}

/* PROJECTS FOOTER */

#proj {
    height: 150vh;
    /* margin-top: 10%; */
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-x: hidden;
    overflow-y: hidden;
    caret-color: transparent;
    background-color: #ecf3fe;
}

.modal-body img {
    transition: transform 0s;
    transform: none;
}

#proj .col {
    padding: 0 15px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    caret-color: transparent;
}

#proj .project-content {
    position: relative;

}

#proj img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* transition: transform 1s ease; */
    transition: transform 0.3s ease;
    display: block;
    caret-color: transparent;
}

#proj img:hover {
    transform: scale(1.2);
    cursor: pointer;
    z-index: 1;
    position: relative;
}

#proj .project-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease, background-color 0.5s ease;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 15%;
    border-radius: 5px;
    width: 100%;
}

#proj .project-info h3 {
    margin-bottom: 10px;
    font-family: var(--body-font);
    font-weight: bold;
    font-size: 18px;
    caret-color: transparent;
}

#proj .project-info p {
    margin-bottom: 10px;
    font-family: var(--body-font);
    font-weight: lighter;
    font-size: 12px;
}

#proj .project-info a {
    display: inline-block;
    margin-top: 10px;
    background-color: #282B3A;
    border-radius: 10px;
    width: 8rem;
    height: 2.5rem;

}

#proj .project-content:hover .project-info {
    opacity: 1;
}

#proj .project-content:hover img {
    transform: scale(1.1);

}

/* FOOTER */

.abovethefooter {
    height: 20rem;
    width: 100%;
    background-color: #313131;
    overflow: hidden;
}

.abovethefooter img {
    height: 4rem;
    width: 20rem;
    margin-bottom: 10px;

}

.section {
    width: 100%;
    height: 0;
    padding: 5%;
    margin-left: 9rem;
}

.abovethefooter p {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    caret-color: transparent;
}





.footer {
    height: 5rem;
    width: 100%;
    background-color: #353535;
    padding: 20px;
    caret-color: transparent;
}

#f-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

#f-col {
    flex: 1;
    /* Each column takes up equal space */
    padding: 0 10px;
    /* Optional: Add padding between columns */
}

#f-col ion-icon {
    color: var(--white-color);
    width: 15px;

}

.footer p {
    color: #777777;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    margin: 0;
    text-align: center;
    caret-color: transparent;
}

.f-nav__social-icons ion-icon {
    color: #fff;
}

.f-contact {
    font-weight: normal;
}

.f-name,
.f-email,
.f-number {
    margin-bottom: 5px;
    /* Adjust spacing between paragraphs */
    caret-color: transparent;
}

/* Button UP */
#myBtn {

    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #000;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#myBtn:hover {
    background-color: #232323;

}

/* loader */
/* 
    .loader {
        height: 45px;
        --c: no-repeat linear-gradient(#514b82 0 0);
        background:
            var(--c) left,
            var(--c) center,
            var(--c) right;
        background-size: 16px 100%;
        animation:
            l33-1 1.5s infinite,
            l33-2 1.5s infinite;
    }

    @keyframes l33-1 {

        0%,
        100% {
            width: 45px
        }

        35%,
        65% {
            width: 65px
        }
    }

    @keyframes l33-2 {

        0%,
        40% {
            transform: rotate(0)
        }

        60%,
        100% {
            transform: rotate(90deg)
        }
    } */