@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap");
:root{
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #FFC107;
    --secundario: #0097A7;
    --gris: #757575;
    --negro:#000000;
}

html {
   font-size: 62.5%;
   box-sizing: border-box;
   /*scroll-snap-type: y mandatory;*/
}
.servicios,
.navegacion-principal,
.iconos-nosotros,
.contenido-nosotros,
.formulario{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
*, *:before, *:after {
    box-sizing: inherit;
  }
body{
    font-size: 16px;/* 1rem = 10px */
    font-family: 'Krub', sans-serif;
    background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100%);
}
img{
    max-width: 100%;
    display: block;
  }
h1{
    font-size: 3.8rem;
    color:#000000;
}
h2{
    font-size: 2.8rem;
    margin: 3rem;
    color:#000000;
}
h3{
    font-size: 2rem;
}
 .titulo span {
     font-size: 2rem;
 }
h1,h2,h3 {
    
    font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

p{
    line-height:200%;
    font-family: "Poppins", sans-serif;
}
 .contenedor {
     max-width: 100rem;
     margin: 0 auto;
     list-style: 1px solid;
 }
 .boton{
     background-color: #006da4;
     color: var(--blanco);
     padding: 1rem 3rem;
     margin-top: 1rem;
     font-size: 2rem;
     text-decoration: none;
     text-transform: uppercase;
     font-weight: 700;
     border-radius: .5rem;
     width: 90%;
     text-align: center;
     border: none;
 }
 @media (min-width: 768px) {
     .boton{
        width: auto;
     }  
 }
 .boton:hover{
     cursor: pointer;
     background-color: #004d74;
 }
 .sombra{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(71,71,71,0.54);
    -moz-box-shadow: 0px 5px 15px 0px rgba(71,71,71,0.54);
    box-shadow: 0px 5px 15px 0px rgba(71,71,71,0.54);
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 1rem;
 }
/* Utilidades */
.w-sm-100 {
    width: 100%;
}
@media (min-width: 768px){
    .w-sm-100{
        width: auto;
    }
}
.flex{
    display: flex;
}
.alinear-derecha{
    justify-content: flex-end;
}
.texto-centrado{
    text-align: center;
}
 /* Navegacion Principal */
.nav-bg{
    
    background-color: #004d74;
}
 .navegacion-principal{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 1rem;
 }
 .navegacion-principal a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ee6c4d;
    transform: scaleX(0);
    transition: all 1s;
    transform-origin: left;
 }
 .navegacion-principal a:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background:#ee6c4d;
    transform: scaleX(0);
    transition: all 1s;
    transform-origin: right;
 }
 .navegacion-principal a{
    text-decoration: none;
    color: #000000;
    font-size: 2rem;
    padding: 1rem 2rem;
    position: relative;
    font-weight: bold;
}
 @media (min-width: 768px){
   .navegacion-principal{
      
     font-weight: bold;
     flex-direction: row ;
     justify-content: space-between;
    
     }
}

.navegacion-principal a:hover:before,
.navegacion-principal a:hover:after {
    transform: scaleX(1);
   
}
 
/*.navegacion-principal a:hover{
   background-color: var(--primario);
   color: var(--oscuro);
}
*/
@media (min-width: 480px){
       
}

@media (min-width: 768px){
    video{
        
    }
}
.video{
    position: relative;
    
}

.video h1{
    text-transform: uppercase;
    font-size: 50px;
    color: #ee6c4d;
    line-height: 1;
    text-align: left;
}
.video h2{
    font-size: 4rem; 
    color: #ee6c4d;
    margin-bottom: 50px;
    text-align: left;
 }
 
 .video span{
     color: #ee6c4d;
 }
 
 .video p{
    text-align: center;
    font-size: clamp(2rem, -0.8rem + 10vw , 4rem);
     color: #ffffff;
     margin-bottom: 30px;
     letter-spacing: 0.05em;
     /*background-color: #000000;*/
     padding: 1rem;
     border-radius: 2rem;
 }
 
.overlay{
   position: absolute;

    height: 100%;
    width: 100%;
    /*background-color: #000;
    opacity: .6;*/
}
.contenido-video{
    /*background-color: rgb(0 0 0 /40%);*/
    width: 100%;
    height: 60%;
    font-size: 4rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
video{
    
   
}
@media (min-width: 480px){
    video{
     width: 100%;
    } 
}
.hero{
  
   /* background-image: url(../img/hola.png);
    
    
    position: relative;
    margin-bottom: 2rem;*/
    
    background-image: url(../img/grafico.svg), url(../img/grafico.svg),url(../img/),
    linear-gradient(87deg, rgba(52,67,124,1) 11%, rgba(86,144,193,1) 56%);
    
    height: 25rem;
    background-repeat: no-repeat;
    background-size: 400px, 400px,cover,cover;
    background-position: top left, bottom right, center;
    
}

@media (min-width:280px){
    .hero{
      height: 25rem;
    }
} 
.contenido-hero{
    position: absolute;
    background-color: rgb(0 0 0 /40%);
    width: 100%;
    height: 100%;
    font-size: 4rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contenido-hero h2,
.contenido-hero p {
    color: var(--blanco);
    text-align: center;
}
.header__logo{
    font-size: clamp(2rem, -0.8rem + 10vw , 6rem);
    background: rgb(52,67,124);
    background: linear-gradient(87deg, rgba(52,67,124,1) 11%, rgba(86,144,193,1) 56%);
    background-clip: text;
    color: transparent;
    
}
.anuncio{
    position: relative;
  font-size: 5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 80px;
  cursor: pointer;
}
.text{
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
    transition: 0.1s ease;
    transition-delay: 0.25s;
}
.hover-text {
    position: absolute;
    inset: 0;
    width: 0%;
    color: var(--clr);
    overflow: hidden;
    border-right: 6px solid var(--clr);
    transition: 0.5s ease-in-out;
  }
  
  .anuncio:hover .hover-text {
    width: 100%;
    filter: drop-shadow(0 0 40px var(--clr));
  }
 .anuncio:hover .text {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0);
  }
  /* Categorias */

  .categorias{
    width: 100%;

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
    align-items: center;
    
  }
  .margin{
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .icono i{
    font-size: 5rem;
    align-self: center;
  }
    @media (min-width:768px){
        .categorias{
            grid-template-rows: 1fr;
            grid-template-columns: repeat(3, 1fr);
        }
      }
  




/* Servicios */
@media (min-width: 768px){
.servicios {
    width: 100%;

  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 5rem
    
 }
}
.servicio{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top:  1rem solid #000;
    padding: 2rem;
    margin-bottom: 2rem;
   
    
}
.servicio p{
    line-height: 2;
}
.servicio h3{
    color: #000;
    font-weight: 600;
}

.servicio a{
    text-align: center;
    display: block;
    padding: 2rem;
    font-size: 2rem;
    text-decoration: none;
    width: 100%;
    color: #000;
  }
  
  .contenedor-servicios{
     max-width: 150rem;
     margin: 0 auto;
     list-style: 1px solid;
     padding: 1rem;
  }

  .servicio a:hover{
    background-color: #037bc0;
    border-bottom-right-radius: 1rem;
    color: white;
  }
.servicio .iconos{
    background-image: url(../img/logo1.png);
    height: 15rem;
    width: 15rem;
    background-color: var(--primario);
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
/* Nosotros bloque */
.sobre-nosotros{
    background-image: linear-gradient( to right, transparent 50%, #037bc0 50%, #037bc0 100%), url(../img/5.png);
    background-position: left center;
    padding: 10rem 0;
    margin-top: 5rem;
    margin-bottom: 10rem;
    background-repeat: no-repeat;
    background-size: 100%, 120rem;
  }
 
  .sobre-nosotros-grid{
    display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
  }
  
  
  .texto-nosotros{
   flex-basis: 50%;
   padding-left: 10rem; 
   color: #ffffff;
   padding: 5rem;
  }
/* portada */

.logo h1{
    font-size: 25px;
    color: #000000;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.1em;
}
.logo img{
    width: 20rem;
    
}

.logo span{
    color: #ee6c4d;
}

.nav-links ul{
    display: flex;
    
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 50px;
}

.nav-links ul li a{
    font-size: 20px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #032030;;
    transition: 0.4s;
}

.nav-links ul li a:hover{
    color: #98c1d9;
    font-size: 25px;
}

.btn{
    padding: 10px 20px;
    color: #e0fbfc;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    background: #3d5a80;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px, 
    rgba(0, 0, 0, 0.4) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    transition: 0.4s;
    font-weight: 600;
}

.btn-primary{
    margin-left: 100px;
    color: #3d5a80;
    background: #e0fbfc;
}

.btn:hover{
    scale: 105%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.main-content{
    height:45rem;
}
@media (min-width: 768px){
    .main-content {
        
        width: 100%;
        height:80rem;
   
     }
    }
.main{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
}
@media (min-width: 768px){
    .main {
        
        width: 1400px;
        
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: left;
        padding: 10rem;
            
     }
    }
.line{
    width: 80px;
    border-bottom: 8px solid #ee6c4d;
    margin-bottom: 30px;
}

.main h1{
    text-transform: uppercase;
    font-size: 50px;
    color: #ee6c4d;
    line-height: 1;
    text-align: left;
}

.main h2{
   font-size: 4rem; 
   color: #ee6c4d;
   margin-bottom: 50px;
   text-align: left;
}

.main span{
    color: #ee6c4d;
}

.main p{
   text-align: center;
   font-size: clamp(2rem, -0.8rem + 10vw , 4rem);
    color: #ffffff;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

.right{
    /* position: relative; */
}

.image{
   position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 50px solid #006da4;
    z-index: 8888;
    animation: anim 3s linear infinite;
    display: flex;
    flex-direction: column;
}

@keyframes anim{
    0%{
        top: 0;
    }
    50%{
        top: -10px;
    }
    100%{
        top: 0;
    }
}

.image img{
    margin-top: -79px;
    margin-left: 5px;
    width: 100%;
    scale: 140%;
}

.social{
    position: absolute;
    bottom: 17%;
    left: 14%;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 50px;
}

.social i{
    color: #3d5a80;
    font-size: 30px;
    transition: 0.4s;
}

.social i:hover{
    color: #ee6c4d;
    scale: 105%;
}

.social-link{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e0fbfc;
    border: 2px solid #3d5a80;
    transition: 0.4s;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.social .social-link:hover{
    border: 2px solid #ee6c4d;
    scale: 105%;
}
.containerh{
   
   /*width:  100%;*/
   height:55rem;
   overflow: hidden;
}
.container {
    width: 100%;
    
    overflow: hidden;
}
.header{
    display: flex;
    flex-direction: column;
    
    align-items: center;
}
@media (min-width: 768px){
    .header {
        
        height: 80px;
        margin: 3rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
     }
    }   
/** Conatcto home **/
.imagen-contacto {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='250' preserveAspectRatio='none' viewBox='0 0 1440 250'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1003%26quot%3b)' fill='none'%3e%3crect width='1440' height='250' x='0' y='0' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/rect%3e%3cpath d='M44 250L294 0L444 0L194 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1004%26quot%3b)'%3e%3c/path%3e%3cpath d='M283.6 250L533.6 0L731.6 0L481.6 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1004%26quot%3b)'%3e%3c/path%3e%3cpath d='M512.2 250L762.2 0L1077.2 0L827.2 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1004%26quot%3b)'%3e%3c/path%3e%3cpath d='M732.8000000000001 250L982.8000000000001 0L1174.8000000000002 0L924.8000000000001 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1004%26quot%3b)'%3e%3c/path%3e%3cpath d='M1434 250L1184 0L1139 0L1389 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1005%26quot%3b)'%3e%3c/path%3e%3cpath d='M1182.4 250L932.4000000000001 0L824.4000000000001 0L1074.4 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1005%26quot%3b)'%3e%3c/path%3e%3cpath d='M916.8 250L666.8 0L351.79999999999995 0L601.8 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1005%26quot%3b)'%3e%3c/path%3e%3cpath d='M693.1999999999999 250L443.19999999999993 0L165.69999999999993 0L415.69999999999993 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1005%26quot%3b)'%3e%3c/path%3e%3cpath d='M1245.9079947559298 250L1440 55.907994755929906L1440 250z' fill='url(%26quot%3b%23SvgjsLinearGradient1004%26quot%3b)'%3e%3c/path%3e%3cpath d='M0 250L194.0920052440701 250L 0 55.907994755929906z' fill='url(%26quot%3b%23SvgjsLinearGradient1005%26quot%3b)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1003'%3e%3crect width='1440' height='250' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1004'%3e%3cstop stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1005'%3e%3cstop stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-position: center center;
    background-size: cover;
    height: 40rem;
    display: flex;
    align-items: center;
    
    margin-top: 5rem;
    
  }
  .contenido-contacto{
   /* flex: 0 0 95%;*/
   display: flex;
   flex-direction: column;
    justify-content: center ;
    color:#000000;
   
  }
  .contenido-contacto p,
  .contenido-contacto i{
    font-size:1.8rem;
    padding: 1rem;
    text-align: center;
  }
  .contenido-contacto i{
    font-size:2rem;
  }
.formulario {
    background-color: var(--gris);
    width: min( 60rem, 100%); /** utilizar el valor mas pequño **/
    margin: 0 auto;
    padding: 2rem;
    border-radius:  1rem;
}
.formulario fieldset {
    border: none;

}
.formulario legend {
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primario);
}
@media (min-width:768px){
    .contenedor-campos{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto 20rem;
        column-gap: 1rem;
    }
    
    .campo:nth-child(3),
    .campo:nth-child(4){
        grid-column: 1/3;
    }
}
.campo{
    margin-bottom: 1rem;

}
.campo label{
   color: var(--blanco);
   font-weight: bold;
   margin-bottom: .5rem;
   display: block;
}
.campo textarea{
    height: 18rem;
}
.input-text{
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;
}
.footer{
    background-color: #003554;
    margin-top: 5rem;
    padding-top: 3rem;
    color: white;

}
    .footer__grid {
        width: min(95%, 140rem);
        margin:0 auto;
        @media(min-width:768px){
            display: grid;
            gap: 3rem;
            grid-template-columns: repeat(2, 1fr);
     }
    }
    .footer__logo{
        color: white;
        text-align: center;
        margin-bottom: 2rem;
        white-space: nowrap;
        font-size: clamp(2rem, -0.8rem + 10vw ,4rem);
        @media(min-width: 1024px) {
        text-align: left;
        margin: 0;
    }
    }
    .sobre-nosotros{
        background-image: linear-gradient( to right, transparent 50%, #037bc0 50%, #037bc0 100%), url(../img/nosotros.png);
        background-position: left center;
        padding: 10rem 0;
      
       
        background-repeat: no-repeat;
        background-size: 100%, 120rem;
      }
      
      .sobre-nosotros-grid{
        display: flex;
        justify-content: flex-end;
        
      }
      
      .texto-nosotros{
       flex-basis: 50%;
       padding-left: 10rem; 
       color: #FFF;
      }
    .footer__texto{
        line-height: 2;
        text-align: left;
        color: white;
       
    }

    .footer__copyright{
        background-color: darken(blue, 10);
        color: white;
        margin:3rem 0 0 0;
        padding: 2rem 0;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 600;
    }
    .menu-redes{
    
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin: 4rem 0;
    }

    .menu-redes__enlace{
        &::before{
            color:white;
            font-size: 2rem;
            display: inline-block;
            font-style: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-family: "Font Awesome 6 Brands";
        }
        &[href*="https://facebook.com"]::before {
            content: "\f082";
        }
        &[href*="https://github.com"]::before {
            content: "\f09b";
        }
        
        &[href*="https://tiktok.com"]::before {
            content: "\e07b";
        }
        &[href*="https://instagram.com"]::before {
            content: "\f16d";
        }
        &[href*="https://youtube.com"]::before {
            content: "\f167";
        }
        &[href*="https://twitter.com"]::before {
            content: "\f099";
        }
    }

    .menu-redes__ocultar{
        display: none;
    }

  .fondoh{
    height: 600px;
  }

/** iconos Nosotros **/
@media(min-width:280px){

    
    .iconos-nosotros {
      display:flex;
      justify-content: space-between;
      background-color: #003554;
      margin-top: 10rem;
     }

     
    }
    .icono-nosotros{
        
    }
    .icono{
      text-align: center;
    }
    @media (min-width:768px){
      .icono{
        flex-basis: calc(33.3% - 1rem);
      }
    }
    .icono h3 {
      text-transform: uppercase;
    }

 .iconos-nosotros img {
        height: 15rem;
        transition:all .5s ease-in-out;
        border-radius: 1rem;
 }    
 .iconos-nosotros img:hover {
    filter: saturate(180%);
    -webkit-transform:scale(1.3);transform:scale(1.3);
    overflow:hidden;
}

/** nosotros **/
@media (min-width:768px){
    .contenido-nosotros{
      display: flex;
      flex-direction: column;
      gap: 2rem;
      padding: 5rem;
      margin: 1rem;
     }
     
    }
    .imagen{
        background-position: center center;
        background-size: cover;
        
  
    }

    .titulo-nosotros{
        font-weight: 900;
        font-size: 1.8rem;
        
    }
    .titulos-nosotros{
        text-align: center;
        font-weight: 900;
        font-size: 1.8rem;
    }
    .titulo{
            text-align: center; 
            
            background: #202020; 
            -webkit-background-clip: text; 

            -moz-background-clip: text; 
            background-clip: text; 
            color: transparent; 
            text-shadow: 0px 3px 3px rgba(54, 145, 230, 0.4),0px -1px 1px rgba(0, 0, 0, 0.3);
        }
    .informacion-nosotros{
       margin: 2rem;
    }

    /* clientes */

    .scroller{
        max-width: 1280px;
    }
    .scroller__inner{
        padding: 1rem 0;
        display: flex;
        gap: 4rem;
        flex-wrap: wrap;
    }

    .scroller[data-animated="true"]{
        overflow: hidden;
        --webkit-mask: linear-gradient(90deg, transparent, white 20%,white 80%, transparent);
        mask: linear-gradient(90deg, transparent, white 20%,white 80%, transparent);
    }

    .scroller[data-animated="true"] .scroller__inner{
        flex-wrap: nowrap;
        animation: scroll
        var(--animation-duration, 40s)
        var(--animation-direction, forwards)
        linear
        infinite;
    }
    .scroller__inner[data-duration="fast"]{
        --animation-duration:20s
    }

    @keyframes scroll{
        to{
            transform: translate(-50% - .5rem);
        }
    }


    /*proyectos */
       
    .proyectos{
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
        gap: 8rem;
    }
    .proyectos img {
        height: 15rem;
        transition:all .5s ease-in-out;
        border-radius: 1rem;
    }    
    .proyectos img:hover {
        filter: saturate(180%);
        -webkit-transform:scale(1.3);transform:scale(1.3);
        overflow:hidden;
    }

    @keyframes square-in-center {
        from {
          clip-path: inset(100% 100% 100% 100%);
        }
        to {
          clip-path: inset(0 0 0 0);
        }
      }
      
      [transition-style="in:square:center"] {
        animation: 2.5s cubic-bezier(.25, 1, .30, 1) square-in-center both;
      }

      @keyframes wipe-in-right {
        from {
          clip-path: inset(0 100% 0 0);
        }
        to {
          clip-path: inset(0 0 0 0);
        }
      }
      
      [transition-style="in:wipe:right"] {
        animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }
  
      .swiper-slide {
        background-position: center;
        background-size: cover;
      }
  
      .swiper-slide img {
        display: block;
        width: 100%;
      }