@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

a {
    text-decoration: none;
}

:root { 
    --black: #151515;
    --black-10: rgba(15, 15, 15, .1);
    --black-30: rgba(15, 15, 15, .3);
    --black-50: rgba(15, 15, 15, .5);
    --black-75: rgba(15, 15, 15, .75);
    --black-90: rgba(15, 15, 15, .9);
    --grey: #2A2A2A;
    --color-1: #22586e;
    --color-2: #163948;
    --color-3: #e3b037;
    --white: #f2f2f2;
    --white-20: rgba(255, 255, 255, .2);
    --white-40: rgba(255, 255, 255, .4);
    --shadow: 0 5px 25px rgba(1 1 1 / 5%);
}

/*  WHA BTN     */

.wha_btn_section {
    position: fixed;
    bottom: 10%;
    right: 5%;
    z-index: 1000;
}

.wha_btn_section.mostrar {
    display: none;
    transition: 0.5s ease-in-out;
}

.wha_text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wha_text h3 {
    background-color: #25D366;
    padding: 0.5rem 2rem 0.5rem 1rem;
    color: var(--white);
    border-radius: 30px;
    transform: translateX(2rem);
}

.wha_circle {
    background: #25D366;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.wha_btn_section i {
    color: var(--white);
    font-size: 3rem;
}

@media (max-width: 600px) {

    .wha_btn_section {
        bottom: 5%;
    }

    .wha_btn_section i {
        font-size: 2rem;
    }

    .wha_circle {
        height: 50px;
        width: 50px;
    }

    .wha_text h3 {
        font-size: 0.8rem;
    }
}

/*  UPPER HEADER    */

.upperheader_section {
    background: var(--color-1);
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

/*  HEADER  */

.header_section {
    padding: 0;
}

.container_header {
    max-width: 1920px;
    width: 90%;
    margin: 0 auto;
}

.header_up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo .foccologo {
    height: 70px;
}

.logo .zeisslogo {
    height: 45px;
    margin-left: 2rem;
}

.btn__contact {
    padding: 0.5rem 1rem;
    border: 1px solid var(--black);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    color: var(--black);
    font-weight: 500;
}

.btn__contact:hover {
    background-color: var(--black-10);
}

.responsive_bars {
    display: none;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
}

.menu nav ul {
    display: flex;
}

.menu nav ul li {
    list-style: none;
    margin: 0px 16px;
}

.menu nav ul li a {
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
}

.menu2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    display: none;
}

.menu2 nav ul {
    list-style: none;
    margin: 0px 16px;
}

.menu2 nav ul li {
    list-style: none;
    margin: 0px 16px;
    text-align: center;
}

.menu2 nav ul li a {
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
}

.container_header hr {
    margin-bottom: 1rem;
}

@media (max-width: 992px) {

}

@media (max-width: 800px) {

    .header_section .social, .btn_header, .menu {
        display: none;
    }

    .logo img {
        height: 50px;
    }

    .container_header hr{
        margin-bottom: 10px;
    }

    .responsive_bars{
        display: block;
        cursor: pointer;
    }

    .logo {
        position: relative;
    }

    .menu2.active {
        display: block;
        z-index: 100;
        width: 100%;
        background: var(--white);
    }

}

@media (max-width: 600px) {
    
}

/*  HERO    */

.hero_slider {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 600px;
    position: relative;
}

.hero_slide {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: circle(0% at 0 50%);
}

.hero_slide.display {
    clip-path: circle(150% at 0 50%);
    transition: 1.5s ease-in-out;
    transition-property: clip-path;
}

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

.hero_text {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 20%;
    color: var(--white);
    max-width: 700px;
    background: var(--black-10);
    border-radius: 30px;
    padding: 1rem 2rem;
}

.hero_text h1 {
    font-size: 4rem;
    margin-bottom: 1rem;

}

.hero_text p {
    margin-bottom: 3rem;
}

.call {
    padding: 0.7rem 4rem;
    background: var(--color-1);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-size: 1.5rem;
    color: #f2f2f2;
    font-weight: 700;
}

.call:hover {
    background: var(--color-2);
}

.hero_text_location {
    display: flex;
    align-items: baseline;
    color: var(--white);
    margin-top: 4rem;
}

.hero_text_location p {
    margin: 0 1rem;
}

.hero_navigation {
    z-index: 10;
    position: absolute;
    display: flex;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.hero_nav_btn {
    background: var(--white);
    border: 2px solid var(--white);
    width: 3rem;
    height: 0.8rem;
    border-radius: 30px;
    cursor: pointer;
    margin: 0.6rem;
}

.hero_nav_btn.display {
    background-color: var(--color-3);
    transition: 2s ease-in-out;
}


@media (max-width: 768px) {   
    
    .hero_text {
        left: 5%;
        right: 5%;
        top: 30%;
    }

    .hero_text h1 {
        font-size: 3rem;
    }
}


@media (max-width: 600px) {   

    .hero_text {
        top: 35%;
    }

    .hero_text h1 {
        font-size: 2rem;
    }

    .hero_text p {
        font-size: 0.8rem;
    }

    .hero_nav_btn {
        width: 2rem;
        height: 0.6rem;
        margin: 0.5rem;
    }
}


@media (max-width: 400px) {

    .hero_text {
        top: 20%;
    }
}  

/*  MARCAS  */

.marcas_section {
    padding: 20px 0px;
}

.marcas_container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marcas_container::before, .marcas_container::after {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    content: "";
    z-index: 2;
}

.marcas_container::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff);
}

.marcas_container::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
}

.marcas_container:hover .marcas {
    animation-play-state: paused;
}

.marcas {
    display: inline-block;
    animation: 50s marca infinite linear;
}

.marcas img {
    height: 70px;
    margin: 0 30px;
}

@keyframes marca {

    from {
        transform: translateX(0);
    }
    
    to {
        transform: translateX(-100%);
    }
}

@media (max-width: 600px) {
        
    .marcas_section {
        padding: 20px 0px;
    }

    .marcas_container::before, .marcas_container::after {
        width: 100px;
    }
}

/*  PROPUESTA DE VALOR  */

.propuesta_section {
    padding: 70px 0px;
}

.propuesta_container {
    width: 80%;
    max-width: 1290px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
}

.propuesta_L {
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: end;
}

.propuesta_L h2 {
    margin-bottom: 2rem;
    font-weight: 600;
}

.propuesta_L hr {
    margin-top: 2rem;
}

.propuesta_R {
    grid-column: 2/3;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: start;
}

.propuesta_R h2 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

@media (max-width: 768px) {   
            
    .propuesta_section {
        padding: 40px 0px;
    }

    .propuesta_container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .propuesta_L {
        grid-column: 1/2;
        grid-row: 1/2;
        justify-content: center;
        text-align: center;
    }

    .propuesta_R {
        grid-column: 1/2;
        grid-row: 2/3;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 600px) {

    .propuesta_L h2 {
        font-size: 1rem;
    }

    .propuesta_container p {
        font-size: 0.8rem;
    }

    .propuesta_R h2 {
        font-size: 1.5rem;
    }
}

/*  SLIDER1     */

.slider_section {
    padding: 50px 0;
}

.slider_up_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.slider_up_text h1 {
    font-size: 2rem;
}

.slider_section p {
    font-weight: 300;
}

.slider_container {
    width: 90%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
}

.slider {
    grid-column: 2/3;
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border: none;
    background: #ffffff;
    border-radius: 30px;
    clip-path: circle(0% at 0 50%);
}

.slide.active {
    clip-path: circle(150% at 0 50%);
    transition: 1.5s ease-in-out;
    transition-property: clip-path;
}

.slide_text {
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: auto 3rem;
}

.slide_text h1 {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    text-align: center;
}

.slide_text p {
    font-weight: 300;
}

.slide_img {
    grid-column: 2/3;
}

.slide_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.slide_img a {
    grid-column: 2/3;
    position: absolute;
    left: 0;
    bottom: 0;
    color: var(--white);
    background: var(--black-50);
    padding: 0.3rem 1rem;
    margin: 0.6rem 2rem;
    border-radius: 30px;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.slide_img a:hover {
    background: var(--black-75);
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.navigation_btn {
    border: 2px solid var(--color-1);
    width: 35px;
    height: 10px;
    margin: 10px;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
}

.navigation_btn.active {
    background: var(--color-1);
}

.navigation_arrows .left_arrow {
    grid-column: 1/2;
}

.navigation_arrows .right_arrow {
    grid-column: 3/4;
}

.navigation_arrows {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation_arrows i {
    height: 40px;
    width: 40px;
    background: var(--color-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.navigation_arrows i:hover {
    background: var(--color-2);
}

@media (max-width: 992px) {

    .slider {
        height: 400px;
    }

    .slide {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        gap: 0;
    }

    .slide_text {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: auto 1rem;
    }

    .slide_img {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .slide_img a {
        grid-column: 1/2;
        grid-row: 1/2;
    }
}

@media (max-width: 600px) {
    
    .slider_section {
        background: var(--white);
    }

    .slider {
        border-radius: 30px;
        box-shadow: var(--shadow);
    }

    .slider {
        height: 450px;
    }
    .slider_up_text h1 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .slider_up_text p {
        font-size: 0.8rem;
    }

    .slide_text {
        align-items: center;
        margin: 0 2rem;
        height: 300px;
    }

    .slide_text p {
        font-size: 0.8rem;
    }

    .slide_text h1 {    
        margin-bottom: 1rem;
        margin-left: 0;
        margin-top: 1rem;
        font-size: 1rem;
    }

    .navigation_arrows i {
        height: 30px;
        width: 30px;
    }
}

/*  NOSOTROS    */

.nosotros_section {
    padding: 70px 0px;
}

.nosotros_container {
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.nosotros_img {
    grid-column: 1/2;
}

.nosotros_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.nosotros_text {
    grid-column: 2/3;
}

.nosotros_text h2 {
    margin: 2rem 1rem;
}


@media (max-width: 600px) {

        
    .nosotros_container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .nosotros_img {
        grid-column: 1/2;
        grid-row: 1/2;
    }
        
    .nosotros_text {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .nosotros_text p {
        font-size: 0.8rem;
    }
}
 

/*  LENTES ESPECIALES   */

.especiales_section {
    padding: 70px 0px;
}

.especiales_up_text h1 {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.especiales_container {
    width: 90%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 200px);
    gap: 1rem;
}

.esp1 {
    grid-column: 1/3;
    grid-row: 1/2;
    position: relative;
}

.esp2 {
    grid-column: 1/3;
    grid-row: 2/3;
    position: relative;
}

.esp3 {
    grid-column: 3/5;
    grid-row: 1/3;
    position: relative;
}

.esp4 {
    grid-column: 5/6;
    grid-row: 1/3;
    position: relative;
}

.esp4 h1 {
    margin: 0 1rem;
}

.especiales_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.especiales_info {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--black-30);
    color: var(--white);
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    border-radius: 30px;
    transition: all 0.3s ease-out;
}

.especiales_info:hover {
    background: var(--black-50);
}

.especiales_info h1 {
    font-size: 1.5rem;
    text-align: center;
}

.especiales_info hr {
    width: 70%;
}

.especiales_info a {
    color: var(--white);
    background: var(--white-20);
    padding: 0.3rem 1rem;
    margin: 0.3rem 0;
    border-radius: 30px;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    text-align: center;
    margin-bottom: 2rem;
}

.especiales_info a:hover {
    background: var(--white-40);
}

@media (max-width: 992px) {
    
    .especiales_container{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 200px);
    }

    .esp1 {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .esp2 {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .esp3 {
        grid-column: 1/3;
        grid-row: 2/3;
    }

    .esp4 {
        grid-column: 1/3;
        grid-row: 3/4;
    }

    .especiales_info h1 {
        font-size: 1rem;
    }

    .especiales_info a {
        font-size: 0.8rem;
    }
}


@media (max-width: 600px) {
    
    .especiales_section {
        background: var(--white);
    }
}

/*  LENS    */

.lens_section {
    padding: 70px 0px;
}

.lens_up_text h1 {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    padding-bottom: 2rem;
}

.lens_container {
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.lens_slide {
    grid-column: 1/2;
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.lens_text {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    clip-path: circle(0% at 0 50%);
}

.lens_text.display {
    clip-path: circle(150% at 0 50%);
    transition: 1s ease-in-out;
    transition-property: clip-path;
}

.lens_text h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.lens_text p {
    font-size: 0.9rem;
    margin: 2rem 0;
}

.lens_text a {
    background: var(--color-1);
    color: var(--white);
    padding: 0.3rem 1.5rem;
    border: 1px solid var(--white);
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 0;
    bottom: 0;
}

.lens_text a:hover {
    background: var(--color-2);
}

.lens_box_container {
    grid-column: 2/3;
    grid-row:  1/2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1em;
}

.lens_box_container h4 {
    margin-bottom: 0.5rem;
}

.lens_box_container p {
    font-size: 0.8rem;
    width: 70%;
}

.lens_box1 {
    grid-column: 1/2;
    grid-row: 1/2;
    background-image: url(/assets/img/lens/Progre.gif);
}

.lens_box1:hover {
    background-image: url(/assets/img/lens/Progresivos\ .GIF);
}

.lens_box2 {
    grid-column: 2/3;
    grid-row: 1/2;
    background-image: url(/assets/img/lens/Mono.gif);
}

.lens_box2:hover {
    background-image: url(/assets/img/lens/Monofocales.GIF);
}

.lens_box3 {
    grid-column: 1/2;
    grid-row: 2/3;
    background-image: url(/assets/img/lens/Ocu.gif);
}

.lens_box3:hover {
    background-image: url(/assets/img/lens/OCUPACIONALES.GIF);
}

.lens_box4 {
    grid-column: 2/3;
    grid-row: 2/3;
    background-image: url(/assets/img/lens/You.gif);
}

.lens_box4:hover {
    background-image: url(/assets/img/lens/Young.GIF);
}

.lens_box {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    height: 200px;
    object-fit: cover;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
}

.lens_box.display {
    border: 3px solid var(--color-1);
    border-radius: 33px;
}

/*
.lens_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}
*/

.lens_box_text {
    position: absolute;
    color: var(--white);
    background: var(--black-30);
    border-radius: 30px;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
}

.lens_box_text:hover {
    background: var(--black-50);
}

.lens_box_text h4 {
    bottom: 1rem;
    position: absolute;
}

.lens_box_container div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 992px) {
    
    .lens_container {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .lens_slide {
        grid-row: 2/3;
        height: 400px;
    }

    .lens_box_container {
        grid-column: 1/2;
        grid-row: 1/2;
    }
}

@media (max-width: 768px) {

    .lens_slide {
        height: 360px;
    }

}

@media (max-width: 600px) {

    .lens_slide {
        height: 450px;
    }

    .lens_text a {
        position: static;
    }

    .lens_up_text h1 {
        font-size: 1.5rem;
    }

    .lens_up_text p {
        font-size: 0.8rem;
    }

    .lens_text h1 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    .lens_text p {
        font-size: 0.8rem;
    }
    
@media (max-width: 385px) {

    .lens_slide {
        height: 480px;
    }
}
}

/*  PHOTO FUSION X  */

.photo_section {
    padding-top: 70px;
    padding-bottom: 100px;
}

.photo_up {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

.photo_up h1 {
    font-size: 2rem;
}

.photo_up p {
    font-weight: 300;
}

.photo_container {
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    gap: 2rem;
    position: relative;
}

.photo_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.photo_card h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.photo_card p {
    font-weight: 300;
}

.photo_card img {
    height: 70px;
    width: 70px;
    margin: 1rem;
}

.photo_L {
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.photo_C {
    grid-column: 2/3;
}

#photo5 p {
    max-width: 300px;
}

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

.photo_R {
    grid-column: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.photo_btn a {
    background: var(--color-1);
    color: var(--white);
    padding: 0.3rem 1.5rem;
    border: 1px solid var(--white);
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 0;
    bottom: 0;
}

.photo_btn a:hover {
    background: var(--color-2);
}


@media (max-width: 992px) {
   
    .photo_container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .photo_L {
        grid-row: 2/3;
        height: 100%;
    }

    .photo_C {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .photo_R {
        grid-column: 2/3;
        grid-row: 2/3;
        height: 100%;
    }
}


@media (max-width: 600px) {

    .photo_section {
        background: var(--white);
    }

    .photo_up h1 {
        font-size: 1.5rem;
    }

    .photo_up p {
        font-size: 0.8rem;
    }
    
    .photo_card h3 {
        font-size: 0.8rem;
    }

    .photo_card p {
        font-size: 0.8rem;
    }
    
    .photo_card img {
        height: 50px;
        width: 50px;
        margin: 0.5rem;
    }
    
    .photo_card_img img {
        border-radius: 30px;
        box-shadow: var(--shadow);
    }

    #photo5 {
        margin-top: 1rem;
    }

    #photo5 p {
        max-width: 170px;
    }

    .photo_btn {
        position: static;
        margin-top: 3rem;
    }
}

/*  TESTIMONIOS     */

.testimony_section {
    background: var(--grey);
}

.testimony_container {
    width: 90%;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0 auto;
}

.testimony_L {
    grid-column: 1/2;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testimony_L h2 {
    font-size: 2.5rem;
    font-weight: 600;
}

.testimony_L p {
    font-weight: 300;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.testimony_L img {
    height: 30px;
    margin-bottom: 0.5rem;
}

.testimony_L a {
    color: var(--white);
    padding: 0.3rem 1rem;
    border: 1px solid var(--white);
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out;
}

.testimony_L a:hover {
    background-color: var(--white-20);
}

.google_icon {
    width: 100px;
}

.testimony_R {
    grid-column: 2/5;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.testimonies {
    display: flex;
    animation: 50s testimonio infinite linear;
}

.testimony_R:hover .testimonies {
    animation-play-state: paused;
}

.testimony_card {
    background: var(--white);
    height: 230px;
    width: 300px;
    min-width: 300px;
    margin-right: 1rem;
    padding: 1rem;
    border-radius: 30px;
    position: relative;
}

.testimony_card p {
    font-weight: 300;
    font-size: 0.8rem;
}

.testimony_card h5 {
    font-weight: 500;
    font-size: 0.85rem;
    position: absolute;
    right: 10%;
    bottom: 5%;
}

.testimony_card img {
    height: 50px;
    width: 50px;
}

@keyframes testimonio {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {

    .testimony_container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        height: auto;
    }

    .testimony_L {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .testimony_R {
        grid-column: 1/2;
        grid-row: 2/3;
        padding-bottom: 1rem;
    }

    .testimony_card {
        height: 200px;
        width: 260px;
    }

    .testimony_card img{
        height: 30px;
        width: 30px;
    }

    .testimony_card p {
        font-size: 0.8rem;
    }

    .testimony_card h5 {
        font-size: 0.8rem;
    }
}

/*  CONTACT     */

.contact_section {
    padding: 0;
}

.contact_container {
    width: 100%;
    height: 500px;
    position: relative;
}

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

.text_contact {
    position: absolute;
    inset: 0;
    margin: auto;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--black-90);
}

.text_contact h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
}

.text_contact p {
    margin-top: 3rem;
    font-weight: 100;
}

.contact_btn a {
    padding: 1.5rem 6rem;
    background: var(--color-1);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-bottom: 30px;
    font-size: 1.5rem;
    color: #f2f2f2;
    font-weight: 700;
}

.contact_btn a:hover {
    background-color: var(--color-2);
}


@media (max-width: 600px) {
            
    .text_contact h2 {
        font-size: 1.5rem;
    }

    .contact_btn a {
        padding: 1.5rem 3rem;
        font-size: 1rem;
    }

    .text_contact {
        font-size: 0.8rem;
    }
}

/*  CONTACT FORM    */

.form_section {
    padding: 70px 0;
}

.form_up_text {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    text-align: center;
}

.form_container {
    width: 70%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    position: relative;
}

.contact_form {
    grid-column: 1/3;
    width: 100%;
    height: 100%;
}

.contact_form form {
    display: flex;
    flex-direction: column;
}

.contact_form form input, textarea {
    border: none;
    padding: 1rem 0;
    margin: 0.5rem 0;
    outline: none;
    background: var(--white); 
    border-radius: 30px; 
    padding-left: 1rem;
}

.contact_form form ::placeholder {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--black-50);
}

.contact_form form button {
    cursor: pointer;
    padding: 1rem 4rem;
    border: none;
    background: var(--color-1);
    border-radius: 50px;
    font-size: 1rem;
    color: #f2f2f2;
    font-weight: 700;
    right: 10%;
    bottom: 0;
    transition: all 0.3s ease-in-out;
    margin-top: 1rem;
}

.contact_form form button:hover {
    background: var(--color-2);
}

.contact_info {
    grid-column: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.contact_info i {
    color: var(--black);
}

.contact_info img {
    height: 80px;
    margin: 1rem 0rem;
}

.contact_info a:last-child {
    margin-left: 1rem;
}

.contact_info h3{
    margin: 1rem 0;
}

.contact_info p {
    font-weight: 300;
}

@media (max-width: 992px) {

    .form_container {
        width: 80%;
    }

    .form_container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.5fr;
    }

    .contact_form {
        grid-column: 1/2;
        grid-row: 1/2;
    }
    
    .contact_info {
        grid-column: 1/2;
        grid-row: 2/3;
    }
}


@media (max-width: 992px) {

    .form_up_text h1 {
        font-size: 1.5rem;
    }

    .contact_info p {
        font-size: 0.8rem;
    }
}

/*  FOOTER  */

.footer_section {
    padding: 0;
    background: var(--grey);
}

.footer_container {
    max-width: 1920px;
    width: 90%;
    margin: 0 auto;
}

.up_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 5rem;
}

.logo_footer img {
    height: 70px;
}

.footer_menu nav ul {
    display: flex;
}

.footer_menu nav ul li {
    list-style: none;
    margin: 0 1rem;
}

.footer_menu nav ul li a {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.social_footer a {
    color: var(--white);
}

.social_footer a:last-child {
    margin-left: 1rem;
}

.down_footer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 0;
    color: var(--white);
}

.down_footer div {
    padding: 0 2rem;
}

.down_footer h3 {
    font-weight: 600;
    margin-bottom: 20px;
}

.down_footer p {
    font-weight: 300;
}

.footer_box1 p {
    text-decoration: none;
}

.footer_email {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer_email p {
    font-weight: 200;
    text-align: center;
    font-size: 0.8rem;
}

.footer_email form {
    margin: 0.5rem 0;
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid var(--white);
    border-radius: 30px;
}

.footer_email input {
    padding: 0.5rem;
    width: 170px;
    background: none;
    border: none;
    padding-left: 1rem;
    color: var(--white);
}

.footer_email button {
    border-radius: 0 10px 10px 0;
    background: var(--white);
    color: var(--grey);
    width: 130px;
    border: none;
    cursor: pointer;
}

.footer_email span{
    color: var(--color-3);
}

.copyright {
    background: var(--black-50);
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright p {  
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 100;
}


@media (max-width: 1150px) {
    
        .down_footer p {
            font-size: 0.8rem;
        }
}

@media (max-width: 800px) {
    
    .logo_footer img {
        height: 50px;
    }
}

@media (max-width: 992px) {
    
    .footer_menu {
        display: none;
    }

    .down_footer {
        flex-wrap: wrap;
    }

}

@media (max-width: 600px) {

    .up_footer {
        padding: 1.5rem 2rem;
    }

    .down_footer {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .down_footer div {
        margin-top: 2rem;
    }
}