body, html ,input,textarea{font-family: sans-serif;margin: 0;padding:0;color:#fff;background: #002642;width: 100%;max-width: 100%;overflow-x: hidden;} 
img{width:100%;border:0;}
a{text-decoration:none;}
.fr{float:right}
ul,li{margin:0;padding:0;list-style:none;}
h1,h2,h3{padding:0;margin:0;}

.layout{margin:0 auto;max-width: 1200px;width:100%;}
.mainbg{background: url(../images/background.jpg) no-repeat center top/ cover;width:100%;height:auto;display:block;padding-bottom:50px}
.slogan .layout {display:flex;justify-content: space-between;align-items: center;width: 1000px;margin: 0 auto;line-height: 40px;}
.slogan img{width: 42%;}
.slogan a{padding: 10px 20px;color: #fff;border-radius: 30px;width: 73px;border: 1px solid #fff;box-shadow: #ffffff45 0 0 13px 3px;} 
.slogan a:hover{text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;}
.slogan h1{width: 500px; line-height: 2; margin-bottom:20px}

.content{width:100%;position:relative;z-index:1}
.navbar .layout{height:65px;display:flex;justify-content:space-between;align-items: center;padding: 20px}
.navbar .logo{margin-left:35px;display: flex;align-items: center;width: 100%;}
.navbar .logo img{width:60px;margin-right:10px;}
.navbar a{color:#fff;text-align: center;margin: 0 20px;font-size: 14px;white-space: nowrap;font-weight: bold;}
.navbar a:hover{text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;}
.navbar .menu{display:flex;justify-content:space-between;float:right;width: 100%;}
.navbar.h5,.icon-hamburger{display:none;}

.background .layout{width:1100px;position:relative;padding:50px 0;display:flex;justify-content: space-between;align-items: end}
.background .layout > div{width: 46%;justify-content: center;display: flex;flex-direction: column;}
.background img{width: 45%;height: calc(100% / 2);transition: transform 0.3s ease;border-radius:10px;box-shadow: #ffffff45 0 0 13px 3px;}
.background img:hover{transform: scale(1.1); }
.background h1,.vision .fr h1{margin-bottom:20px;}
.background h2,.vision h2{font-size: 17px;font-weight:normal;line-height:1.5;background: #fffefe1c;padding: 30px;border-radius: 20px;margin: 0;}
.vision .layout{width:1100px;display:flex;align-items: end;justify-content: space-between;padding-bottom:50px;}
.vision .fr h2{width: 400px;}
.vision img{width: 120px;}
.vision p{text-align: center;}
.vision ul{display:flex;align-items: center;justify-content: space-between;width: 50%;}
.vision ul li{border-radius: 10px;text-align: center;transition: transform 0.3s ease; }
.vision ul li:hover{transform: scale(1.2); z-index: 1; }

.method{background: url(../images/bg_method.jpg) no-repeat center center/100%;text-align:center;color: #222;padding:50px 20px;}
.method h1{margin-bottom:20px}
.method h2{padding:0 0 50px}
.method p{font-size:12px;font-weight: normal;}
.method ul {display:flex;align-items: center;justify-content: space-between;position:relative;}
.method ul li{transition: transform 0.3s ease; text-align: center;max-width:200px;padding:0 30px;display:flex;align-items: center;justify-content:center;flex-direction: column;}
.method ul li:hover{transform: scale(1.1); z-index: 1; }
.method ul li h3{font-size:14px;color:#202e48}
.method ul li img{width:100px;height:100px;display:flex;align-items: center;justify-content: center;}
.method ul li p{text-align:center;}

.service-wrap{text-align:center;padding:20px 0;}
.service{padding:20px;display:flex;align-items:start;justify-content:center;font-size:14px;}
.service > div{width:300px;margin:0 10px;transition: transform 0.3s ease;}
.service > div:hover{transform: scale(1.1); z-index: 1; }
.service div > div{background: #fffefe1c;padding: 20px;text-align:left;height:95px;}
.service img{/* width:300px; */}
.service p{margin:5px 0;font-size: 12px;color: #ffffff99;}
.service h3{font-size:14px;}

.delivery-wrap {position:relative;background: url(../images/bg_delivery.png) no-repeat center center/cover;}
.delivery-wrap .layout > h1{position: relative;top: 80px;left: 200px;color: #ffffff;}
.delivery{padding:20px;display:flex;align-items: center;justify-content: center;}
.delivery img{width:500px;}
.delivery h2{font-size:16px;}
.delivery > div{width: 442px;background:#ffffff9c;border-radius: 20px;color: #202e48;font-size: 14px;padding:20px;margin-right: 76px;}

.outlet{display: flex ; align-items: center; justify-content: space-around;}
.outlet iframe{border-radius:10px;}

#scrollUpBtn {position: fixed;bottom: 70px;right: 30px;display: none;background-color: #64646473;color: white;border: none;padding: 8px 12px;border-radius: 50%;font-size: 18px;cursor: pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.3);transition: background-color 0.3s ease;z-index: 1000;}
#scrollUpBtn:hover {background-color: #646464b5; }

#whatsppBtn {position: fixed;bottom: 20px;right: 30px;display:block;background: url(../images/icon_whatsapp.png) no-repeat center/65%;border: none;padding: 20px 20px;border-radius: 50%;font-size: 18px;cursor: pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.3);background-color: #25D366;z-index: 1000;}
#whatsppBtn:hover {background-color: #0dac49; }

.contact-form{overflow: hidden;position: relative;}
.contact-form .layout{display:flex;align-items: flex-start;justify-content: space-between;width: 80%;margin: 0 auto;}
.contact-form .layout > *{width:50%;}
.contact-form::before{content:"";background: url(../images/bg_contact.png) no-repeat center top / 100%;width: 62%;height: 100%;display:block;position:absolute;filter: opacity(0.3);left: -12px;z-index: -1;}
.contact-form  h1{text-align: center;margin: 30px auto 10px;}
.contact-form > p{text-align: center;}
.contact-form .info{padding-top:30px;padding-right: 50px;color:#fff}
.contact-form .info ul{margin-bottom:10px;}
.contact-form .info li{margin:5px 0;}
.contact-form .info li i::before{content:"";background: linear-gradient(#1a7880, #1c3e57);width: 35px;height: 35px;display:flex;align-items: center;justify-content: center;z-index:-1;position: relative;border-radius:50%;}
.contact-form .info li i{margin-right:24px;height: 50px;display: flex;align-items: center;justify-content: center;}
.contact-form .info li .contact-company i{background: url(../images/contact_company.png) no-repeat center center/ 20px;}
.contact-form .info li .contact-email i{background: url(../images/contact_email.png) no-repeat center center/ 20px;}
.contact-form .info li .contact-whatsapp i{background: url(../images/contact_whatsapp.png) no-repeat center center/ 20px;}
.contact-form .info li .contact-phone i{background: url(../images/contact_phone.png) no-repeat center center/ 20px;}
.contact-form .info li .contact-waze i{background: url(../images/contact_waze.png) no-repeat center center/ 20px;}
.contact-form .info li .contact-address i{background: url(../images/contact_address.png) no-repeat center center/ 20px;}
.contact-form .info a{color:#fff;display:flex;align-items: center;}

form#contactform {max-width: 400px;margin: 30px auto;padding: 20px;background: #fffefe1c;border-radius: 8px;} 
#contactform input,#contactform textarea {width: 100%;padding: 10px;margin-top:10px;margin-bottom: 10px;border: none;border-radius: 4px;resize: vertical;} 
#contactform > div{width:100%;display:flex;}
#contactform button {background-color: #1a7880;color: #ffffff;margin-top: 20px;padding: 10px 20px;border: none;border-radius: 20px;cursor: pointer;} 
#contactform button:hover {background-color: #002642; }
#contactform h4{margin-top:0;}
#contactform input:focus ,#contactform textarea:focus{outline: none;box-shadow: 0 0 5px rgba(0, 123, 255, 0.7);}

footer{padding: 30px; text-align: center; border-top: 1px solid #ffffff14;}

.bubble-container {position: fixed; top:0; width: 100%; height: 100%; overflow: hidden; z-index:0; }
.bubble {position: absolute; bottom: -100px; width: 20px; height: 20px; background:url(../images/bubble.png); background-size: contain; background-repeat: no-repeat; border-radius: 50%; animation: floatUp 10s infinite ease-in; }
.bubble:nth-child(2),.bubble:nth-child(8){width:40px;height:40px;}
.bubble:nth-child(5),.bubble:nth-child(9){width:50px;height:50px;}

     @keyframes floatUp {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      100% {
        transform: translateY(-120vh) scale(1.5);
        opacity: 0;
      }
    }
.box {opacity: 0; transition: opacity 1s ease, transform 1s ease; }

/* Initial positions */
.box.left {transform: translateX(-100px); } 
.box.right {transform: translateX(100px); } 
.box.top {transform: translateY(-100px); } 
/* When visible */ 
.box.slide-in {opacity: 1; transform: translateX(0) translateY(0); }
.video-container {width:43% !important;position: relative; width: 100%; padding-top: 24.25%; overflow: hidden; border-radius: 10px;} 
.video-container video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }


/*Mobile*/
@media (max-width: 480px) {
  .navbar.h5{transition: transform 0.5s ease-out;display:block;position: fixed;top: 0;height: 100%;transform: translateX(100%);transition: transform 0.4s ease;;background: #013356;z-index: 99;padding: 20px 0;left:0;}
  .navbar.h5.active{transform: translateX(0);}
  .navbar.h5 .menu{display:block;}
  .navbar.h5 .menu a{width: 100vw; display: flex; align-items: center; justify-content: center; margin: 0; padding: 20px 0; font-size: 16px; }
  .navbar.h5 .logo{display: block; margin: 30px auto; text-align: center; }
  .navbar.h5 .logo img{margin-right:0;width:100px;margin-left: 60px;}
  .navbar.h5 .layout{padding:20px 0}
  .navbar .menu{display:none;}
  .icon-close {display: inline-block;float:right;width: 32px;height: 32px;filter: brightness(0) invert(1); background-image: url('../images/icon_close.png');background-size: cover;background-position: center;background-repeat: no-repeat;}
  .icon-hamburger {display: inline-block;float:right;width: 32px;height: 32px;filter: brightness(0) invert(1); background-image: url('../images/icon_hamburger.png');background-size: cover;background-position: center;background-repeat: no-repeat;}

  .content.h5 .navbar .layout{padding:20px 0;}
  .content.h5 .navbar .logo{margin-left:20px;}
  .content.h5 .slogan .layout{flex-direction: column-reverse;padding:0 10px;margin: 0 auto;width:100%;}
  .content.h5 .slogan .layout h1{width:93%;margin-bottom:20px;}
  .content.h5 .slogan .layout > div{margin-left:20px;}
  .slogan img{width:70%}
  .mainbg{height:auto;}
  .content.h5 h1{font-size:1.4rem;}
  .content.h5 h2{font-size:1.1rem}
  .content h3{font-size:1rem!important;}
  .content p{font-size:1rem}
  .layout{max-width: 100%;width: auto;}

  .background .layout{flex-direction: column-reverse;width: 100%;padding: 0 20px;}
  .background h1{margin-top:25px;}
  .content.h5 .background h2{font-size:1.0rem}
  .background .layout > div{width:100%;}
  .background img{width:90%;margin-right:19px;}

  .vision .layout{width:100%;flex-direction: column-reverse;margin: 0;}
  .vision ul{width: 90%;margin:0 auto;}
  .vision img{width:80px}
  .vision .fr{margin:50px 20px 20px}
  .vision .fr h2{width: 84%;}

  .method{background: url(../images/bg_method.jpg) no-repeat center center / cover;text-align:center;color: #222;padding:50px 20px;}
  .method ul{flex-direction: column;}
  .method ul li{max-width:100%;padding:0}

  .service{flex-direction: column;padding:5px}
  .service > div{width:100%;margin: 0 0 40px 0;}
  .service div > div{height:auto;}
  .service-wrap .layout{margin: 0 20px;}

  .delivery-wrap {position:relative;background: url(../images/bg_delivery.png) no-repeat 0px 176px/190%;}
  .delivery-wrap .layout {margin:0 20px;}
  .delivery-wrap .layout > h1{top:auto;left:39px;padding-top:20px}
  .delivery{flex-direction: column-reverse;}
  .delivery img{width:100%;}
  .delivery > div{width:100%;margin-right:0;margin-top: 10px;}

  .outlet{flex-direction: column-reverse;}
  .outlet h3{margin-top:20px}
  .map-container iframe{width:99%}
  .video-container { width: 94% !important;padding-top: 49.25%;margin-right: 31px;}
  .contact-form{margin:0 20px;}
  .contact-form .layout{flex-direction: column;width:100%;}
  .contact-form .layout > *{width:100%;}
  .contact-form .info{padding:0;}
  form#contactform{width:91%;}
  #contactform button{width:100%;}
  .contact-form::before{content:"";background: url(../images/bg_contact.png) no-repeat center top / 300%;width: 100%;height: 100%;display:block;position:absolute;filter: opacity(0.3);left: -35px;z-index: -1;}



}