/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-Light.eot);
  src: url(fonts/GothamPro-Light.woff2) format("woff2"),url(fonts/GothamPro-Light.woff) format("woff"),url(fonts/GothamPro-Light.ttf) format("truetype"),url(fonts/GothamPro-Light.svg#GothamPro-Light) format("svg"),url(fonts/GothamPro-Light.eot?#iefix) format("embedded-opentype");
  font-weight: 100;
  font-style: normal
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-LightItalic.eot);
  src: url(fonts/GothamPro-LightItalic.woff2) format("woff2"),url(fonts/GothamPro-LightItalic.woff) format("woff"),url(fonts/GothamPro-LightItalic.ttf) format("truetype"),url(fonts/GothamPro-LightItalic.svg#GothamPro-LightItalic) format("svg"),url(fonts/GothamPro-LightItalic.eot?#iefix) format("embedded-opentype");
  font-weight: 100;
  font-style: italic
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro.eot);
  src: url(fonts/GothamPro.woff2) format("woff2"),url(fonts/GothamPro.woff) format("woff"),url(fonts/GothamPro.ttf) format("truetype"),url(fonts/GothamPro.svg#GothamPro) format("svg"),url(fonts/GothamPro.eot?#iefix) format("embedded-opentype");
  font-weight: 200;
  font-style: normal
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-Italic.eot);
  src: url(fonts/GothamPro-Italic.woff2) format("woff2"),url(fonts/GothamPro-Italic.woff) format("woff"),url(fonts/GothamPro-Italic.ttf) format("truetype"),url(fonts/GothamPro-Italic.svg#GothamPro-Italic) format("svg"),url(fonts/GothamPro-Italic.eot?#iefix) format("embedded-opentype");
  font-weight: 200;
  font-style: italic
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-Medium.eot);
  src: url(fonts/GothamPro-Medium.woff2) format("woff2"),url(fonts/GothamPro-Medium.woff) format("woff"),url(fonts/GothamPro-Medium.ttf) format("truetype"),url(fonts/GothamPro-Medium.svg#GothamPro-Medium) format("svg"),url(fonts/GothamPro-Medium.eot?#iefix) format("embedded-opentype");
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-MediumItalic.eot);
  src: url(fonts/GothamPro-MediumItalic.woff2) format("woff2"),url(fonts/GothamPro-MediumItalic.woff) format("woff"),url(fonts/GothamPro-MediumItalic.ttf) format("truetype"),url(fonts/GothamPro-MediumItalic.svg#GothamPro-MediumItalic) format("svg"),url(fonts/GothamPro-MediumItalic.eot?#iefix) format("embedded-opentype");
  font-weight: 400;
  font-style: italic
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-Bold.eot);
  src: url(fonts/GothamPro-Bold.woff2) format("woff2"),url(fonts/GothamPro-Bold.woff) format("woff"),url(fonts/GothamPro-Bold.ttf) format("truetype"),url(fonts/GothamPro-Bold.svg#GothamPro-Bold) format("svg"),url(fonts/GothamPro-Bold.eot?#iefix) format("embedded-opentype");
  font-weight: 600;
  font-style: normal
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-BoldItalic.eot);
  src: url(fonts/GothamPro-BoldItalic.woff2) format("woff2"),url(fonts/GothamPro-BoldItalic.woff) format("woff"),url(fonts/GothamPro-BoldItalic.ttf) format("truetype"),url(fonts/GothamPro-BoldItalic.svg#GothamPro-BoldItalic) format("svg"),url(fonts/GothamPro-BoldItalic.eot?#iefix) format("embedded-opentype");
  font-weight: 600;
  font-style: italic
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-Black.eot);
  src: url(fonts/GothamPro-Black.woff2) format("woff2"),url(fonts/GothamPro-Black.woff) format("woff"),url(fonts/GothamPro-Black.ttf) format("truetype"),url(fonts/GothamPro-Black.svg#GothamPro-Black) format("svg"),url(fonts/GothamPro-Black.eot?#iefix) format("embedded-opentype");
  font-weight: 800;
  font-style: normal
}

@font-face {
  font-family: GothamPro;
  src: url(fonts/GothamPro-BlackItalic.eot);
  src: url(fonts/GothamPro-BlackItalic.woff2) format("woff2"),url(fonts/GothamPro-BlackItalic.woff) format("woff"),url(fonts/GothamPro-BlackItalic.ttf) format("truetype"),url(fonts/GothamPro-BlackItalic.svg#GothamPro-BlackItalic) format("svg"),url(fonts/GothamPro-BlackItalic.eot?#iefix) format("embedded-opentype");
  font-weight: 800;
  font-style: italic
}


body {
    font-family: 'GothamPro', sans-serif;
    font-weight: 200;
    color: #333;
    line-height: 1.6;
    background-color: #f9f9f9;
    margin: 0;
}

/* Banner */
/* Estilo para el banner principal */
.banner {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #D9D2C7, #FFFDF9, #E0D9CE, #CCC4B9);
    width: 100%;
    align-items: center; /* Centra todo el contenido del banner */
    padding: 0; /* Eliminar padding del banner */
}

.banner-content {
    display: flex;
    justify-content: flex-end; /* Alinea las columnas hacia la parte de la derecha */
    align-items: flex-end; /* Alinea los elementos al fondo */
    width: 100%;
    gap: 20px; /* Agrega un pequeño espacio entre las columnas */
}

.banner-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye los elementos dentro del contenedor */
}

.banner-logo {
    padding-left: 290px; /* Espacio a la izquierda del logo */
    padding-top: 20px; /* Espacio arriba del logo */
}

.banner-text-container {
    background-color: #9E8779;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 20px;
    width: 550px;
}

.banner-text h1 {
    font-size: 2.5rem;
    font-weight: 500;
    color: white;
    margin: 0;
}

.banner-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 200px;
}

.banner-image .main-image {
    width: 800px; /* O el tamaño que prefieras */
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}


.banner-text-bottom,
.banner-second-image {
    margin-left: 270px; /* Espacio a la izquierda de las imágenes inferiores */
}

.banner-text-bottom .bottom-image,
.banner-second-image .second-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.banner-button {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 50px; /* Agregado para evitar que el botón se pegue */
    margin-left: 270px; /* Espacio a la izquierda del botón */
}

.cta-button {
    background-color: #EE7623;
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
    align-items: center;
    transition: background-color 0.3s ease;
}

.cta-button i {
    margin-right: 10px;
}

.cta-button:hover {
    background-color: #D45C1F;
}

.sello-image{
    width: 160px;
}
/* Diseño de la sección derecha */
.banner-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* Alinea la imagen al fondo */
    width: 100%;
}



/* Beneficios */
.benefits {
    background: #fff;
    padding: 50px 20px;
    text-align: center;
}

.benefits h2 {
    font-size: 28px;
    margin-bottom: 0px;
    color: #EE7623;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cvs-logo {
    margin: 6px;
    width: 140px; /* Ajusta el tamaño del logo según sea necesario */
}
.walmartpr-logo {
    margin: 6px 40px;
    width: 160px; /* Ajusta el tamaño del logo según sea necesario */
}
.navarro-logo {
    margin: 6px;
    width: 160px; /* Ajusta el tamaño del logo según sea necesario */
}

.benefits .benefit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
}

.benefit-item {
    text-align: center;
    max-width: 360px; /* Ajustado para mayor espacio */
}

.benefit-item img {
    max-width: 208px; /* Ajusta el tamaño de la imagen */
    height: auto;
    margin-bottom: 15px;
}

.benefit-item h3 {
    font-size: 1.25rem;
    color: #9E8779;
    margin-bottom: 10px;
}

.benefit-item p {
    font-size: 1rem;
    color: #555;
}

.highlight {
    color: #EE7623;
}

/* NanoBond Section */
.nanobond {
    background: linear-gradient(180deg, #D9D2C7, #FFFDF9, #E0D9CE, #CCC4B9);

}

.nanobond-content {
    display: flex;
    justify-content: space-between; 
    align-items: flex-end;
    width: 1200px;
    gap: 20px; 
    margin: 0 auto;
}

.nanobond-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nanobond-image{
    display: flex;
}

.nanobond-logo img {
    width: 370px;
    padding-top: 40px;
}

.nanobond-text-bottom img {
    max-width: 420px;
}

.nanobond-second-image img {
    width: 230px;
    position: relative;
    bottom: 20px;
}

.nano-button{
    padding-bottom: 40px;
}
.nanobond-button .cta-button {
    display: inline-block;
    background-color: #0073e6;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
}

.nanobond-button .cta-button:hover {
    background-color: #005bb5;
}

.nanobond-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* Alinea la imagen al fondo */
    width: 100%;
}

.nanobond-image img {
    width: 740px;
}


/* Productos */

.highlightproducts {
    color: #68331E;
    font-weight: 500;
}
.products-logo p{
    color: #68331E;
    padding-top: 10px;
}
.products-sellos{
    padding: 15px 0;
}
.products {
    background: #F5EFE6;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: -webkit-center;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-items: center;
    width: 1200px;
}

.product-item {
    background-color: #FFFBF4;
    padding: 20px;
    border-radius: 10px;
    text-align: center; /* Centrado de texto */
    width: 100%;
}

.product-item img {
    max-width: 80%; /* Ajusta el tamaño de la imagen */
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto; /* Centrado horizontal de la imagen */
}

h3 {
    font-size: 22px;
    margin-bottom: 10px;
    text-align: center; /* Centrado del título */
    color: #68331E;
    font-weight: 600;
}

p {
    font-size: 1rem;
    margin-bottom: 10px;
}

.dropdown-container {
    margin-top: 20px;
}

.dropdown-btn {
    background-color: #fffbf4;
    color: #64350B;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #9E8779;
    font-family: 'GothamPro', sans-serif;
    font-weight: 500;
}

.dropdown-btn:hover {
    background-color: #ee7623;
}

.arrow {
    font-size: 1.2rem;
}

.dropdown-content {
    display: none;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    text-align: left;
    font-size: 0.9rem;
}

.dropdown-content p {
    font-size: 0.9rem;
    color: #64350B;
}

.product-item:hover .dropdown-content {
    display: none;
}

/* Instagram Section */
.instagram-section {
    background: url('img/curls-bg.jpg') no-repeat center center/cover;
    text-align: center;
    padding: 60px 20px;
    color: white;
}

.logo-defines{
    margin-bottom: 15px;
}

.highlight {
    color: #FF8139;
    font-weight: 500;
}

.cta-button {
    display: inline-block;
    background-color: #FF8139;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease-in-out;
    margin-top: 10px;
}

.cta-button:hover {
    background-color: #D46329;
}

.instagram-title {
    margin-top: 30px;
    font-size: 24px;
}

.instagram-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.instagram-post {
    width: 250px;
    height: 250px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.instagram-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram-post:hover {
    transform: scale(1.05);
}


/* YouTube Video */
.video-container {
    margin-top: 40px;
}

.video-container iframe {
    width: 100%;
    max-width: 800px;
    height: 451px;
    border-radius: 10px;
}



/* Footer */

.kativa-content{
    display: inline-grid;
    justify-items: center;
}
.kativa-section {
    text-align: center;
    background-color: #ece5db;
    padding: 30px 0 10px 0;
}

.kativa-logo {
    width: 220px;
}


.follow-us {
    margin-top: 10px;
    font-size: 16px;
    color: #9E8779;
    display: inline-flex;
}

.follow-us a img {
    width: 30px;
    margin: 0 10px;

}



footer {
    background: #9E8779;
    color: #fff;
    text-align: center;
    padding: 15px 0 5px 0;
}

footer p {
    font-size: 0.9rem;
}

/* Responsivo */
@media (max-width: 1300px) {
    header .container {
        flex-direction: column;
        text-align: center;
    }

    header nav {
        flex-direction: column;
        gap: 10px;
    }
    .banner-right{
        justify-content: center;
    }
    .banner-logo{
        padding: 20px 0 0 0;
        margin: 0 auto;
    }
    .banner{
        padding: 0px;
    }
    .banner-text-container{
        width: auto;
        display: block;
        text-align: center;
    }
    .banner-text-bottom, .banner-second-image{
        margin-left: 0;
    }
    .banner-button{
        margin: 0 auto;
    }
    .banner-image .main-image{
        width: 360px;
    }
    .banner-image{
        flex: 0;
        padding: 0;
    }

    .benefits h2{
        display: block;
    }

    .benefits .benefit-grid {
        flex-direction: column;
        align-content: center;
    }

    .products .product-grid {
        grid-template-columns: 1fr;
        width: auto;
    }
    
    .logo-defines{
        width: -webkit-fill-available;
    }
    .sellos{
        max-width: -webkit-fill-available;
    }
    .banner-content{
        display: inline-table;
    }
    .nanobond-content{
        display: inline-table;
        width: auto;
    }
    .nanobond-right{
        display: block;
    }
    .nanobond-image img{
        width: 350px;
    }
    .nanobond-text-bottom img{
        max-width: 370px;
    }
    .nanobond{
        margin: 0 auto;
        display: flex;
        text-align: center;
    }

    .sello-image{
    width: 110px;
    }
    .nano-button{
        padding-bottom: 0;
    }
    .banner-second-image{
        position: absolute;
        bottom: 270px;
        right: 260px;
    }
}

}