/*------ Code structure --------
	1. Resset code
	2. Variables
	3. General style
	4. Useful classes
	5. Cookie consemn
	6. Header
	7. Navigation
	8. Form
	9. Footer
	10. Tablet/Mobile code
*/  

/* 1. Resset code */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline}

/* 2. Variables */
:root {--general: #000; --bg1: #f1f1f1; --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1;
  --pink: #e83e8c; --red: #dc3545; --orange: #d35400; --yellow: #ffc107; --green: #2ecc71; --teal: #20c997; --cyan: #17a2b8;
  --white: #fff; --gray: #6c757d; --gray-dark: #262626; --primary: #2c3e50; --secondary: #6c757d; --success: #28a745;
  --info: #34ccfd; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --blueLight:#e3f1ff; --blueOpac: rgba(0, 29, 38, .7); --mainFont: 'Roboto', sans-serif}

/* 3. General style */
* {text-align: center; box-sizing: border-box}
strong{font-weight: bold}
h1, h2, h3, p, label, a, li{font-family: var(--mainFont); text-align: left;}
h1, h2, h3{font-weight: 600}
.head{display: inline-block; background: var(--primary)}
h1{font-size: 25px; color: var(--light);}
h2{font-size: 23px; color: var(--secondary); margin: 0 0 10px 0}
h3{margin-bottom: 5px;}
p{line-height: 20px; font-size: 16px; color: var(--gray-dark); text-align: left; margin-bottom: 20px}
ul.tk li:before {content: '✓'}
a, a:visited, a:active{color:var(--general); text-decoration: none; transition: all 0.5s ease}
a:hover{text-decoration: none; color:var(--secondary)}
.btn, a.btn:visited, a.btn:active{background: var(--primary); color: var(--bg1); padding: 15px 30px; border-radius: 5px; text-decoration: none; display: block; text-align: center; border: 0; margin: 20px auto;}
.btn:hover{background: var(--secondary); color: var(--bg1); padding: 15px 30px; border-radius: 5px; text-decoration: none}
label{padding-bottom: 20px}
svg{transition: 1s;}
svg:hover{transform: scale(1.5);}
ul{list-style: none; margin-bottom: 20px;}
ul li{text-align: left;margin-bottom: 10px;}
ul li:before {content: '✓'; padding-right: 10px;}
.head{box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;margin-bottom:20px}
section img{box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;border-radius:5px}
h1 span{font-weight: 100; color:var(--info)}
i{font-style: italic;}
.logo{width:85px}
.buttons{display: none;}

a.blue:link, a.blue:active, a.blue:active, a.blue:visited {color:var(--info);}
a.blue:hover {color:var(--secondary)}
.blue path {fill:var(--info);}


/* 4. Useful classes */
header, section{max-width: 1024px; margin: 15px auto}
.f{width: 100%}
.df{display: flex}
.dr{flex-direction: row}
.dc{flex-direction: column}
.l{justify-content: flex-start}
.r{justify-content: flex-end}
.c{justify-content: center}
.j{text-align: justify}
.sa{justify-content: space-around}
.sb{justify-content: space-between}
.at{align-items: flex-start}
.am{align-items: center}
.ab{align-items: flex-end}
.g{gap: 15px 30px}
.ml{margin-left: 20px}
.mr{margin-right: 20px}
.mb{margin-bottom: 50px;}
.mt{margin-top: 50px}
.w50{width: 50%}
.w33{width: 33%}
.w25{width: 25%}
.w50 img,.w33 img,.w25 img{width: 100%}
.topBgBanner{width: 100%; height: 500px; background-size: cover; background-position: top; background-image: url(../img/header.jpg);}
.b{border-bottom:1px solid var(--white)}
.my{margin:15px 0}

/* 5. Cookie consemn */
.cookie-container{position: fixed; bottom: -100%; left: 0; right: 0; background: #2f3640; color: #fff; padding: 0 32px; box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39); transition: 400ms}
.cookie-container.active{bottom: 0}
.cookie-container p{color: #fff; text-align: center; margin-top: 15px}
.cookie-container a{color: #f5f6fa}

/* 6. Header*/
.top{background: var(--gray-dark)}
header i{font-size: 20px}
.head p{margin-bottom: 0; color: var(--white);}

/* 7. Navigation */
nav ul li:before{content:initial}
nav{text-decoration: none; background: var(--blueOpac); color:var(--secondary); padding: 1px 0}
nav a:not(:last-child){margin-right: 30px}
a.icon{display: none}
.menu a{color: var(--white);}
nav a, nav a:visited, nav a:active, footer a, footer a:visited, footer a:active{color:var(--info)}
nav a:hover, footer a:hover{text-decoration: none; color:var(--bg1); transition: width 2s}
.menu a:hover{color: var(--bg1);}






/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

:root {
  --color-primary: #002626;
  --color-secondary: #F0F7EE;
  --duration: 1s;
  --nav-duration: calc(var(--duration) / 4);
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --space: 1rem;
  --font-primary: "Helvetica", sans-serif;
  --font-heading: "Merriweather", serif;
  --font-size: 1.125rem;
  --line-height: 1.5;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

.main-navigation-toggle {
  position: fixed;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.main-navigation-toggle + label {
  position: fixed;
  top: calc(var(--space) * 1.5);
  cursor: pointer;
  z-index: 2;
}

.icon--menu-toggle {
  --size: calc(1rem + 4vmin);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  stroke-width: 6;
}

.icon-group {
  transform: translateX(0);
  transition: transform var(--nav-duration) var(--ease);
}

.icon--menu {
  stroke: var(--white);
}

.icon--close {
  stroke: var(--color-secondary);
  transform: translateX(-100%);
}

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: transform var(--nav-duration);
  z-index: 1;
}
.main-navigation:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--blueOpac);
  transform-origin: 0 50%;
  z-index: -1;
}
.main-navigation ul {
  font-size: 12vmin;
  font-family: var(--font-heading);
  width: 100%;
}
.main-navigation li {
  --border-size: 1vmin;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.main-navigation li:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--border-size);
  background-color: var(--color-secondary);
  transform-origin: 0 50%;
  transform: translateX(-100%) skew(15deg);
}
.main-navigation a, .main-navigation a:visited, .main-navigation a:active {
  display: inline-block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  color: var(--color-secondary);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  padding: var(--space) calc(var(--space) * 2) calc(var(--space) + var(--border-size) / 2);
  transform: translateY(100%);
}

.main-content {
  margin: 6rem auto;
  max-width: 70ch;
  padding: 0 calc(var(--space) * 2);
  transform: translateX(0);
  transition: transform calc(var(--nav-duration) * 2) var(--ease);
}
.main-content > * + * {
  margin-top: calc(var(--space) * var(--line-height));
}

.main-navigation-toggle:checked ~ label .icon--menu-toggle .icon-group {
  transform: translateX(100%);
}
.main-navigation-toggle:checked ~ .main-content {
  transform: translateX(10%);
}
.main-navigation-toggle:checked ~ .main-navigation {
  transition-duration: 0s;
  transform: translateX(0);
}
.main-navigation-toggle:checked ~ .main-navigation:after {
  animation: nav-bg var(--nav-duration) var(--ease) forwards;
}
.main-navigation-toggle:checked ~ .main-navigation li:after {
  animation: nav-line var(--duration) var(--ease) forwards;
}
.main-navigation-toggle:checked ~ .main-navigation a {
  animation: link-appear calc(var(--duration) * 1.5) var(--ease) forwards;
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(1):after, .main-navigation-toggle:checked ~ .main-navigation li:nth-child(1) a {
  animation-delay: calc((var(--duration) / 2) * 1 * 0.125);
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(2):after, .main-navigation-toggle:checked ~ .main-navigation li:nth-child(2) a {
  animation-delay: calc((var(--duration) / 2) * 2 * 0.125);
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(3):after, .main-navigation-toggle:checked ~ .main-navigation li:nth-child(3) a {
  animation-delay: calc((var(--duration) / 2) * 3 * 0.125);
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(4):after, .main-navigation-toggle:checked ~ .main-navigation li:nth-child(4) a {
  animation-delay: calc((var(--duration) / 2) * 4 * 0.125);
}

@keyframes nav-bg {
  from {
    transform: translateX(-100%) skewX(-15deg);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes nav-line {
  0% {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  35% {
    transform: scaleX(1.001);
    transform-origin: 0 50%;
  }
  65% {
    transform: scaleX(1.001);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}
@keyframes link-appear {
  0%, 25% {
    transform: translateY(100%);
  }
  50%, 100% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 1084px){
    .menu {
        margin-right: 20px;
    }
}





/* 8. Form */
input,textarea{outline: none; display: block; width: 100%; padding: 17px 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #666}
textarea{height: 145px; width: 100%;}
input[type=text],textarea,select,::placeholder{text-align: left}
input[type=checkbox]{width: 20px; display: inline; transform: scale(1.3);}

/* 9. Footer */
footer{background: var(--primary); position: relative;}
footer section{margin: 0 auto; padding: 15px 0}
footer section p{margin: 0; color:var(--bg1)}

/* 10. Media contact: WhatUp, Telegram, etc */
.mediaContact{display: none}
.callNow svg{fill:var(--blue)}
.whatapp svg{fill:var(--green)}
.telegram svg{fill:var(--blue)}
.messenger svg{fill:var(--blue)}

/* 11. Tablet/Mobile code */
@media screen and (max-width: 1044px){
	header, section, footer{max-width: 1024px; padding: 0 20px}
	header i{font-size:15px}
	h1{font-size: 22px;}
	nav a:not(:last-child) {margin-right: 5px;}
	.logo{width:70px}
	.menu a {margin-left: 10px;}
	.dqs p{font-size: 13px;}
	footer p{font-size:13px}
}
@media screen and (max-width: 700px){
	h1, h2, h3, p{text-align: left}
	.nf{width: 90%}
	.dc, .sb{flex-direction: column; align-items: center}
	header, section, footer{width: 100%;}
	.g{gap: 0}
	.w50, .w33, .w25{width: 100%}
	header img{margin-bottom: 20px}
	section img{width: 100%}
	.logo{margin-bottom: 0}
	header i{font-size: 12px;}
	h1{font-size: 18px;}
	.ph, .eml{display: none;}

	/* 10. Media contact */
	.mediaContact{display: block; position: fixed; bottom: 30px; width: 100%;}
	nav .sb{flex-direction: row;}

	.buttons{
        display: flex;
        position: fixed;
        bottom: 10px;
        width: 100%;
        justify-content: space-between;
        margin: 0 auto;
		z-index: 99;
    }
    .buttons img{
        margin: 20px;
    }    
}

@media screen and (max-width: 600px){
	hr{margin:0 5px}
}

/*12. Delivery/quality/support*/
.dqs{margin:40px auto}
.dqs h3{text-align: center;}
.services{background: var(--blueLight); padding-bottom: 20px;}
.services .w50{border:0; margin-bottom: 20px; position: relative;}
.services h3{padding: 20px; margin: 0; color: #fff; font-size: 15px; text-align: center; position: absolute; background: var(--primary); bottom: 0; display: block; width: 100%;}
.services h2{font-size: 25px; padding-top: 40px; text-align: center;}



/*12. Animate elements*/
.hidden{
    opacity: 0;
    transition: all 2s;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.animatedElement {display: flex;}

.animatedElement:nth-child(2){
    transition-delay: 200ms;
}

.animatedElement:nth-child(3){
    transition-delay: 400ms;
}

.animatedElement:nth-child(4){
    transition-delay: 600ms;
}

.animatedElement:nth-child(5){
    transition-delay: 800ms;
}

@media(prefers-reduced-motion){
    .hidden{
        transition: none;
    }
}