:root{
    --text-color:#474747;
  }
  @font-face {
    font-family: myFirstFont;
    src: url(NotoSansLao-Medium.ttf);
  }
  *{
    box-sizing:border-box;
  }
  body{
    font-family: myFirstFont;
    background-color:black;
  }
  .wraper{
    /* max-width:1200px; */
    margin:auto;
  }
  .header{
    align-items:center;
    line-height:1.5;
    background-color:#F7F2EF;
    border-radius:0.5rem;
    display:flex;
    justify-content:space-between;
    padding: 1rem 1.3rem;
  }
  .navbar,.menu{
    display:flex;
    align-items:center;
  }
  .navbar{
    gap:1rem;
  }
  .menu{
    font-weight:500;
    display:none;
    gap:0.5rem;
    font-size:15px;
  }
  
  .contact-btn{
    background-color:#FFED4F;
    padding:0.2rem 1rem;
    color: black;
    border-radius:1rem;
    border:1px solid black;
    box-shadow: 2px 2px 0px 0px black;
    font-weight:500;
  }
  
  .font-w-500{
    font-weight:500;
  }
  .logo{
    height: 50px;
    width: 100px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:0.2rem;
  }
  
  section{
    margin-top:0.5rem;
  }
  .icon-burger{
    display:block;
  }
  .section-img{
    position:relative;
    overflow:hidden;
    column-gap:2rem;
    border-radius:0.5rem;
    background-color:#f5f4f3;
    padding:clamp(1rem,3vw,3rem) clamp(2rem,5vw,5rem);
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
  }
  
  img{
    
    height:auto;
    width:100%;
    /* object-fit:cover; */
    /* clip-path: polygon(0 44%, 15% 15%, 37% 34%, 61% 9%, 89% 11%, 100% 31%, 100% 85%, 80% 89%, 63% 98%, 38% 84%, 7% 95%, 0% 85%); */
  }
  
  .image{
    filter:drop-shadow(6px 12px 0px black) drop-shadow(-1px -1px 0px black)  drop-shadow(1px 2px 0px black);
    DISPLAY:grid;
    place-items:center;
    position:relative;
    width: 500px;
    
  }
  
  h1{
    font-size:clamp(20px,5vw + 10px,50px);
  
    margin-bottom:0.5rem;
    line-height: 1.2;
  }
  p{
    color: var(--text-color);
  }
  
  .texto{
    display:grid;
    align-items:center;
    JUSTIFY-ITEMS:START;
    GAP:1REM;  

  }
  
  
  svg{
    height:20px;
    width:20px;
  }
  
  .icon-card{
    height:30px;
    width:30px;
  }
  .title-card{
    font-weight:600;
    font-size:20px;
  }
  .p-card{
    font-size:15px;
    color:var(--text-color);
  }
  .reset-section{
    grid-template-columns:auto;
    gap:1rem;
  }
  .yellow{
    background-color:#FFED4F; 
  }
  .green{
    background-color:#0DFFA8; 
  }
  .violet{
    background-color:#FFD9FE;
  }
  
  .redright{
    background-color:#ca4c6c;
    color: white;
  }
  .orange{
    background-color:#E1A725;color: white;
  }
  .purple{
    background-color:#212f63;
    color: white;
  }
  
  .cyan{
    background-color:#469db3;
    color: white;
  }
  .darkgreen{
    background-color:#244831;
    color: white;
  }
  .darkblue{
    background-color:#34619b;
    color: white;
  }
  .darkpurple{
    background-color:#770056;
    color: white;
  }
  
  
  .section-img > * {
    z-index: 3;
  }
  .section-img::after{
    /*content:'';
    height:10rem;
    width:10rem;
    background-color:#c099ff;
    border-radius:50%;
    filter:blur(80px);
    position:absolute;
    left:70%;
    top:40%;
    z-index:0; */
  }
  
  .section-img::before{
    
    content:'';
    height:10rem;
    width:10rem;
    background-color:#f6cd6d;
    border-radius:50%;
    filter:blur(80px);
    position:absolute;
    right:3%;
    top:50%;
    z-index:0;
  }
  
  .card{
   
    border-radius:0.5rem;
    padding:1rem 1rem;
    display:grid;
    gap:1rem;
    justify-items:start;
  }
  .section-tres-columnas{
    gap:0.5rem;
    display:grid;
    grid-template-columns:repeat(1,1fr);
  }
  
  .btn-card{
    display:flex;
    align-items:center;
    gap: 1rem;
    padding: 0.2rem 0.5rem;
    border-radius:1rem;
    background-color:black;
    color:white;
    border:none;
    transition:filter 0.2s;
    cursor:pointer;
    padding: 0.3rem 1rem;
  }
  .btn-card:hover{
    filter:drop-shadow(2px 2px 0px lightgrey);
  }
  
  .btn-card svg{
    fill:white;
  }
  
  .clip-path-square{
   clip-path: polygon(0 45%, 40% 0, 82% 6%, 100% 25%, 100% 57%, 89% 68%, 100% 85%, 100% 97%, 85% 100%, 27% 100%, 12% 89%, 0% 85%);
  }
  
  .brutal-btn{
    font-family: myFirstFont;
    COLOR:BLACK;
    FONT-WEIGHT:700;
    PADDING:0.5REM 2REM;
    BORDER-RADIUS:2REM;
    BACKGROUND-COLOR:TRANSPARENT;
    BORDER:1PX SOLID BLACK;
    BOX-SHADOW:2PX 4PX 0PX 0PX BLACK;
  }
  .centrado{
    place-items:Center;
  }
  
  .blanco{
    background-color:white;
  }
  .menu>div:hover{
        text-decoration: underline;
      text-underline-offset: 0.3rem;
    cursor:pointer;
        text-decoration-thickness: 0.2rem;
  }
  
  
  .borde-negro{
    border-radius:1rem;
    border:3px solid black;
    clip-path:none;
  }
  @media (min-width: 750px){
    .menu{
      display:flex;
    }
    .section-tres-columnas{
       grid-template-columns:repeat(3,1fr);
    }
    .icon-burger{
      display:none;
    }
  }
  
  
  /* jo additional */
  a{
    color: white;
    text-decoration: none;
    font-family: myFirstFont;
  }
  span{
    font-family: myFirstFont;

  }
  .nav{
    color: black;
  }