html, body {

    margin: 0rem ;
    padding: 0rem;
    box-sizing: border-box;
    position: relative;
    background-color: #f8efce;
    overflow-x: hidden ;
    height: 100vh;
    width: 100vw;

}

nav{
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: center;
    height: 10vh;
    width: 100%;
    margin-bottom: 2rem;
    
    
}


.main{
      margin: 0rem 0rem;
      width: 100%;
      min-height: 0vh ;
      
      
    }

  

  .big-part{
    display: flex;
    width: 100%;
    
    min-height: 0vh;
    
    
    

  }
  
  #left-headline-container{
    flex: 1;
  
    width: 100%;
    min-height: 0vh;
    
    margin: 2rem 0rem;
  

    
  }
  .aroye{
   
    min-height: 0vh;
    width: 100% ;
    
   
    
    

    
  }

  .headline-box{
    
    
    margin: 1rem 2rem  1rem 2rem;
    min-height: 0vh;
    
    
    
  }

  .headline{
    font-size: 12vw;
    line-height: .7;
    min-height: 0vh;
    
    margin: 0rem 0rem;
    
  }



  .sub-headline{
    margin: 1rem 2rem 2rem;
    font-size: 2vw;
    min-height: 0vh;
    
   
   
    
    
  
}




.icon{
    display: flex;
    margin: 2rem 2rem 0rem ;
}
    

  #right-images{
    flex: 1;
  }



  #small-part{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 0rem 2rem ;
    min-height: 0vh;
    width: 100%;
    
    
    
    
  }

  .icon{
  
    
    padding: 0rem;
    width: 48%;
    margin: 0rem 0rem;
  }

  .big-icon p{
    margin: 0.2rem;
    
    font-size: 1.7vw;
    
    width: auto;
    height: 17vh;

}
hr{
    margin-left: 2rem
}

.enter-market a{
text-decoration: none;
color: black;
}

.enter-market{
    
    
    padding: 1rem 2rem;
    font-size: 2vw;
    border: none;
    border-radius: 10px;
    background-color: white;
    transform: translateX(100px);
    

    
}


.dot {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
 
  

}
.active {
  background-color: #717171;
}


.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}







@media (max-width: 1024px) {
  .sub-headline{
    margin: 1.5rem 2rem 2rem;
    
    font-size: 2vw;
   
    
  }
}


@media (max-width: 868px) { 
  
    .main{
      margin: 0rem 0rem;
      
      
    }
    .big-part{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        margin: 0rem 0rem;
    
      }

      #small-part{
        display: flex;
        flex-direction:column-reverse ;
        margin: 0rem 2rem ;
         
      }


      .icon{
        
       display: flex;
       justify-content: center;
       
       
      
    }

    .big-icon{
        margin: 0.2rem;
        
       
    }

      .enter-market{
    
        
        padding: 1rem 2rem;
        border: none;
        border-radius: 10px;
        background-color: white;
        transform: translateX(-50px);
        
        
    }

    .headline-box{
    
    
      margin: 2rem;
      
      
    }
    
    .headline{
      font-size: 17vw;
      line-height: .7;
      
    }
  
  
  
    .sub-headline{
      margin: 2rem 2rem 2rem;
      
      font-size: 3.8vw;
     
      
    }
  
    
    
    hr{
       display: none;
    }

    nav{
      display: flex;
      background-color: white;
      align-items: center;
      justify-content: center;
      height: 10vh;
      width: 100%;
      margin-bottom: 1rem;
      
      
  }
    .car{
      width: 100%;
      margin: 13rem 0rem 0rem;
      
      
    }

    #small-part{
      display: flex;
      align-items: center;
      margin: 2rem 2rem 2rem ;
     
      
    }
  


}


@media (max-width: 768px){

  .headline{
    font-size: 18vw;
    line-height: .7;
    
  }



  .sub-headline{
    margin: 0rem 2rem 2rem;
    
    font-size: 3vw;
   
    
  }

  .car{
    width: 100%;
    margin: 1rem 0rem 0rem;
    
    
  }

  #small-part{
    display: flex;
    align-items: center;
    margin: 1rem 2rem 2rem ;
    
    
    
  }
}




@media (max-width: 568px) {
  .headline-box{
    
    
    margin: 2rem;
    
    
  }
 
  .headline{
    font-size: 17vw;
    line-height: .7;
    
  }



  .sub-headline{
    
      
    font-size: 3.7vw;
    
  }
        nav{
            display: flex;
            justify-content: space-around;
        }

        .nav-content{
            color: white;
            position: absolute;
            right: 0px;
            height: 92vh;
            top: 8vh;
            background-color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            transform: translateX(100%);
            transition: transform 0.5s ease-in;
            z-index: 2;
            color: aliceblue;
        }
        
        .nav-content-active{
            transform: translateX(0%);
          }
       

        .burger{
            width: 50px;
            height: 5px;
            background-color: black;
            margin-top: 0.5rem;
            border-radius: 10px;
            margin-top: .1rem;
            display: block;
           
          
        }


        .car{
          width: 100%;
          
          
          
        }
    
        #small-part{
          display: flex;
          align-items: center;
          margin: 1rem 2rem 2rem ;
         
          
          
          
        }
}

@media (max-width: 425px) {
  
 

  .car{
    width: 100%;
    
    
    
  }

  #small-part{
    display: flex;
    align-items: center;
    
   
    
    
  }

  .headline{
    font-size: 20vw;
    line-height: .7;
    
  }



  .sub-headline{
    
      
    font-size: 4vw;
    
  }

  .icon{
    display: none;
  }
  
  .enter-market{
    
    
      font-size: 3vw;
      
  
      
  

    
}

  
}