@font-face {
    font-family: 'AvenirNext';
    font-style: normal;
    font-weight: normal;
    src: url('font/AvenirNext.woff2') format('woff2');
}

html, body{
    overflow-x: hidden;  
}

body{
margin:0;
font-family: "Avenir next", Sans-serif;
}
.top-header{
    background:#fff;
}

p{
font-family: "Avenir next", Sans-serif;    
}
.top-header a{
    text-decoration:none; 
}
.header{
display:flex;
justify-content:space-between;
align-items:center;
    padding: 20px 0px 10px 0px;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.icon i{
    font-size:30px;
    padding-right:15px;
}

.header-right{
display: flex;
align-items: center;   
}
 
.sec-1-mooi:before {
    left: 0;
    background-color: #f2f2f2;
}
.sec-1-mooi:after {
    right: 0;
    background-color: #e5e5e5;
}
.sec-mooi:before, .sec-mooi:after {
    position: absolute;
    content: '';
    top: 0;
    width: 25%;
    height: 100%;
}
.sec-2-mooi:before {
    left: 0;
    background-color: #e6e6e6;
}

.sec-mooi:before, .sec-mooi:after {
    position: absolute;
    content: '';
    top: 0;
    width: 25%;
    height: 100%;
}
.sec-3-mooi:before {
    left: 0;
    background-color: #f2f2f2;
}

.sec-3-mooi:after {
    right: 0;
    background-color: #ececec;
}
.sec-mooi:before, .sec-mooi:after {
    position: absolute;
    content: '';
    top: 0;
    width: 25%;
    height: 100%;
}
.sec-4-mooi:before {
    left: 0;
    background-color: #f2f2f2;
}
.sec-4-mooi:after {
    right: 0;
    background-color: #d9d9d9;
}
.sec-5-mooi:before {
    left: 0;
    background-color: #d9d9d9;
}
.sec-5-mooi:after {
    right: 0;
    background-color: #f2f2f2;
}

.email-part{
    margin-bottom:153px;
        padding-top: 15px;
}
.email-part a{
color:#fff;
    line-height: 1.2;
}

/*.logo{*/
/*font-size:28px;*/
/*letter-spacing:4px;*/
/*margin-right: 20px;*/
/*}*/
.image-section{
        position: relative;
}
.header-right a{
font-size:18px;
color:#000;
line-height: 1em;
margin-right:30px;
}
.header-right span.flag a{
margin-right:0px!important;
}
.flag{
    margin-top:5px;
}
.instgram-c{
    padding-right:15px;
    padding-right: 15px;
    max-width: 27px;
}
.right-col p a, .right-col a{
    color:#fff!important;
}
.right-col a i{
    margin-right:10px;
}
.grid-section{
    position: relative;}
.grid-container{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
display:grid;
grid-template-columns:1fr 1fr;
}

.box{
overflow:hidden;
}



.box img{
width:100%;
height:100%;
    max-width: 70%;
}

.black{
background:black;
color:white;
}

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

.section-wrapper{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
 display:grid;
grid-template-columns:1fr 1fr;
}

.right-col{
    width: 50%;
    background: #000;
    color: #fff;
    padding: 40px;
    box-sizing: border-box;
}



.center h1{
font-size:40px;
margin:0;
}

.center p{
letter-spacing:3px;
font-size:22px;
}

.text{
padding:40px;
font-size:15px;
line-height:1.6;
text-align: center;
}

.hero-section{
width:100%;
height:100%;
margin:auto;
background-image:url("../image/04.png");
background-size:contain;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
    padding: 0% 0% 50% 0%;

}
.hero-text{
    position: absolute;
    top: 50%;
    left: 50%;
    padding-top: 100px;
    transform: translate(-50%, -50%);
}



.full-image{
  max-width: 50%;
    margin-left: auto;
    margin-right: auto;  
}

.hero-text{
text-align: center;
letter-spacing:5px;
}
.hero-text img{
    width: 70%;    
}
.box-new img{
    max-width:100%!important;
}

.box.black{
    height:100%;
    width:100%;
}
.content{
    padding: 172px 0px 197px;
    width: 675px;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    margin-left: auto;
    margin-right: auto;
}
.content p{
     line-height: 1.4;
    font-size: 22px;
    color: #000;
}
.footer{
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}
.footer p{ 
    font-size: 15px;
    line-height: 1.6;
    
}
.image-slider{
position:relative;
overflow:hidden;

}
.image-slider,.image-slider .slide, .image-slider img{
 height:100%!important; 
     object-fit: cover;
}
.slide{
display:none;
}

.slide img{
width:100%;
display:block;
}

.slide.active{
display:block;
}

.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:black;
color:#fff;
border:none;
padding:10px 15px;
cursor:pointer;
display:none;
}

.prev{
left:10px;
}

.next{
right:10px;
}

/* Popup background */
.popup-overlay{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index: 9999;
   transition: opacity .5s ease, visibility .5s ease;
}

/* Show popup when link clicked */
.popup:target{
  opacity:1;
  visibility:visible;
}

/* Popup box */
.popup-box{
  background:#fff;
  width:400px;
  padding:40px;
  position:relative;
  text-align:left;
    transform: translate3d(0,-200px,0);
    opacity:0;

    transition: all .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.popup-box p, .popup-box a{
        color: #000!important;
}
.popup-box p {
    color: #3A3A3A!important;
    font-size: 24px!important;
    font-weight: 400;
    line-height: 32px!important;
}

.popup-box h2{
     color: #000000!important;
    font-family: "Chivo", Sans-serif;
    font-size: 36px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 60px;
    letter-spacing: -0.37px;   
}
.popup-box{
    background:#fff;
    width:500px;
    padding:40px;
    position:relative;
    transform:translateY(-200px);
    transition:0.4s;
}

.popup-overlay.active{
    opacity:1;
    visibility:visible;
}

.popup-overlay.active .popup-box{
     transform: translate3d(0,0,0);
    opacity:1;
}

/* Close button */
.close-btn{
    position:absolute;
    right:20px;
    top:15px;
    font-size:28px;
    cursor:pointer;
    color:#000!important;
}








@media screen and (max-width:1024px){
  .header {
    padding: 20px 10px 10px 10px;
    max-width: 100%;
   
}
.popup-box h2{
    font-size: 26px;
         line-height: 30px;
   
}
.popup-box p {
    font-size: 20px!important;
    line-height: 26px!important;
}
.sec-mooi:before, .sec-mooi:after {
  display:none;
}
.grid-container, .section-wrapper {
    max-width: 100%;
}
.hero-section {
    width: 100%;
}
.content {
    padding: 100px 10px 100px 10px;
    width: 100%;
}
.full-image {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
    .content p {
    line-height: 1.4;
    font-size: 18px;
    color: #000;
}
.new-section{
    width:98%!important;
}
}

@media screen and (max-width: 767px){
.grid-container,
.section-wrapper{
display:block !important;
}
 .grid-container .box.black{
    padding-top: 100px;
    padding-bottom: 100px;     
 }
  .grid-container .box.black.footer{
  padding-top: 00px;
    padding-bottom: 0px;      
 }
 .popup-box {
    width: 230px;
    padding: 20px;
}
 .box img {
    width: 100%;
    height: 100%;
    max-width: 50%;
}
.hero-text {
    padding-top: 50px;
    
}
.hero-section {
    padding: 50% 0% 50% 0%;
}
    .content {
        padding: 50px 10px 50px 10px;
        width: 100%;
    }
    .content p {
    line-height: 1.4;
    font-size: 16px;
    color: #000;
}
.email-part {
    margin-bottom: 100px;
  }
  .header-right a {
    font-size: 16px;
    margin-right: 15px;
}
.flag {
    margin-top: 0px;
}
.logo img{
    width:70px;
}
.icon i {
    font-size: 25px;
    padding-right: 10px;
}
.instgram-c {
    padding-right: 10px;
    max-width: 22px;
}
.section-wrapper{
    display: flex!important;
    flex-direction: column;
}

.left-col{
    order: 2;   /* image upar */
}

.right-col{
    order:1;   /* text niche */
}
    .new-section {
        width: 94% !important;
    }
}