* 
{
    margin:0;
    padding:0;
}

body 
{
  display:flex;
  flex-direction: column;
  overflow-x: hidden;
}

header 
{
    width:100%;
    height:80px;
    background: rgb(110,60,3);
    background: linear-gradient(90deg, rgba(110,60,3,0.849) 0%, rgba(40,27,2,0.849) 100%);
    position: fixed;
    top:0;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index:1000;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.75);
    
}

.logo-container 
{
  width:90px;
  height:130px;
  position:absolute;
  left:20px;
  top:0;
  background-color:rgba(40,27,2,1);
  -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 11px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 11px 0px rgba(50, 50, 50, 0.75);

display:flex;
align-items: center;
justify-content: center;
}

.logo-container img 
{
  position: relative;
  width:140px;
  height:140px;
}

nav 
{
  width:100vw;
  height:calc(100vh - 80px);
  background:rgba(0, 0, 0, 0.897);
  position:absolute;
  top:80px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s;
  transform: translateX(100vw);
}

.nav-active 
{
    transform: translateX(0);
    transition:0.6s;
}
.menu-link 
{
  font-size:23px;
  color:rgba(255, 255, 255, 0.863);
  letter-spacing: 5px;
  line-height: 25px;
  padding:5px 5px;
  margin:10px 0px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  transition:color 0.4s;
  text-align: center;
}
.menu-link:nth-child(3) 
{
  color:#d9903de3;

}
.menu-link:hover 
{
  color:#d9903de3;
  transition:0.4s;
}

.language-container 
{
  width: fit-content;
  height:60px;
  border-left:none;
  position:absolute;
  right:80px;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.language-container a 
{
  position:relative;
  font-size:23px;
  color:rgba(255, 255, 255, 0.74);
  line-height: 23px;
  margin:0px 5px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  transition:color 0.4s;
  text-align: center;
  padding:5px;

}

.language-container a:hover 
{
  color:#d9903de3;
  transition:0.4s;
}

.hamburger-menu 
{
    position:absolute;
    width:50px;
    height: 50px;
    background:transparent;
    border:none;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right:20px;
}

.hamburger-menu span 
{
    width:35px;
    height:5px;
    content:" ";
    background:rgba(255, 255, 255, 0.781);
    border-radius:2px;
    position:absolute;
}

.first 
{
    transform:translateY(-12px);
    transition:0.6s;
}
.second 
{
    transition:0.6s;
}
.third
{
    transform:translateY(12px);
    transition:0.6s;
}


.first-active
{
    transform:rotate(45deg);
    transition:0.6s;
}
.second-active
{
    opacity:0;
    transition:0.6s;
}
.third-active 
{
    transform:rotate(-45deg);
    transition:0.6s;
}



.landing-container
{
  width:100%;
  height:fit-content;
  padding:50px 0px;
  margin-top:90px;
  position:relative;
  display:flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}

.description
{
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

}

h1 
{
  font-size:30px;
  color:rgba(126, 69, 8, 0.762);
  letter-spacing: 2px;
  line-height: 31px;
  padding:0;
  margin:0;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  width:100%;
  text-align: center;
}

p1 
{
  font-size:14px;
  color:rgba(77, 42, 4, 0.918);
  letter-spacing: 1px;
  line-height: 15px;
  padding:0;
  margin:10px 0px 0px 0px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  width:100%;
  text-align: center;
}



.cloud-image1
{
  width:60%;
  position:relative;
}


.text-container
{
  width:100%;
  height:fit-content;
  background:rgb(255, 255, 255);
  position:relative;
  display:flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin:20px 0px;
}

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

h2 
{
  font-size:18px;
  color:rgba(126, 69, 8, 0.762);
  letter-spacing: 2px;
  line-height: 18px;
  padding:0;
  margin:20px 0px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 1000;
  width:70%;
  text-align: left;
  
}
p2 
{
  font-size:14px;
  color:rgba(107, 56, 5, 0.932);
  letter-spacing: 1px;
  line-height: 16px;
  padding:0;
  margin:0;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  width:70%;
  text-align:left;
  transition:0.5s;
}


h3
{
  font-size:23px;
  color:rgba(126, 69, 8, 0.762);
  letter-spacing: 2px;
  line-height: 23px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 1000;
  width:fit-content;
  text-align: center;
  margin-top:50px;
  
}

hr 
{
  width:100%;
  height:3px;
  content:" ";
  background: rgb(110, 60, 3);
    background: linear-gradient(90deg, rgba(190, 115, 28, 0.849) 0%, rgba(40, 27, 2, 0.849) 100%);
  border:none;  
  margin:20px 0px;
 opacity:0.8;

}

.certificates-container
{
  width:100%;
  height:fit-content;
  position:relative;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin:40px 0px;
}

.certificate-img
{
  height:100px;
  width:150px;
}

.certificate
{
  width:220px;
  height:220px;
  border:1px solid rgba(107, 56, 5, 0.233);
  border-radius:15px;
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
margin:25px 25px;
padding:10px;
background: linear-gradient(to left,white 50%, #a78f74 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}

p3 
{
  font-size:20px;
  color:rgba(87, 47, 6, 0.762);
  letter-spacing: 1px;
  line-height: 22px;
  padding:0;
  margin:20px 0px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 1000;
  width:90%;
  text-align: left;
  transition:0.5s;
}

.long
{
  font-size:15px;
  line-height: 17px;
}

.certificate:hover 
{
  cursor: pointer;
  background-position: left;
  color:white;
  transition:0.5s;
}
.certificate:hover p3 
{
  color:white;
  transition:0.5s;
}

.cloud-container
{
  width:100%;
  height:fit-content;
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.cloud-container hr 
{
  width:100%;
  height:2px;
  border-radius:20px;
}


.holder 
{
  width:90%;
  height:fit-content;
  margin:10px 0px;
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.holder img 
{
  width:300px;
  height:250px;
}

.holderMid 
{
  flex-direction: column-reverse;
}

.holderMid h2
{
  margin-top:0;
}

.holderMid p2
{
  margin-bottom:20px;
}

.holder h2
{
  width:90%;
  text-align: center;
}

.holder p2
{
  width:90%;
  text-align: center;
}

.help 
{
  transform:rotate(-3deg) translateX(-5%);
  width:110%;
  height:200px;
  background: rgb(110, 60, 3);
    background: linear-gradient(90deg, rgba(190, 115, 28, 0.849) 0%, rgba(40, 27, 2, 0.849) 100%);
    position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index:-999;
    margin:150px 0px;
   
   
}

.help div:nth-child(1)
{
  width:60px;
  height: 100%;
  position:absolute;
  left:0;
  background-image: url('images/bg1.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size:200%;
}
.help div:nth-child(2)
{
  width:60px;
  height: 100%;
  position:absolute;
  right:0;
  background-image: url('images/bg2.png');
  background-repeat: no-repeat;
  background-position: left;
  background-size:200%;
}



h4
{
  transform: rotate(3deg);
  position:relative;
  font-size:20px;
  color:rgb(255, 255, 255);
  letter-spacing: 2px;
  line-height: 22px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 1000;
  text-align: center;
  margin:10px 0px 10px 0px;
  z-index:3;
  
}

p4
{
  transform: rotate(3deg);
  position:relative;
  font-size:14px;
  width:90%;
  color:rgb(255, 255, 255);
  letter-spacing: 2px;
  line-height: 15px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  width:fit-content;
  text-align: center;
  margin-top:5px;
  
}


.help button 
{
  transform: rotate(3deg);
  position:relative;
  font-size:16px;
  color:rgb(255, 255, 255);
  letter-spacing: 2px;
  line-height: 16px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 1000;
  height:30px;
  width:fit-content;
  text-align: center;
  margin:20px 0px;
  padding:20px 10px;
  z-index:3;
  background:none;
  border:2px solid white;
  border-radius:15px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.help button:hover 
{
  cursor: pointer;
  z-index:3;
}


.solutions
{
  width: 100%;
  height: fit-content;
  display:flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}

.support-img 
{
  width:290px;
  height:140px;
}

.support
{
  width:220px;
  height:300px;
  border:1px solid rgba(107, 56, 5, 0.233);
  border-radius:15px;
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
margin:25px 25px;
padding:10px;
background: linear-gradient(to left,white 50%, #a78f74 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}


.support:hover 
{
  cursor: pointer;
  background-position: left;
  color:white;
  transition:0.5s;
}
.support:hover p3
{
  color:white;
  transition:0.5s;
}

.support:hover p2
{
  color:white;
  transition:0.5s;
}










































footer 
{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
  height:fit-content;
  padding:30px 0px;
  background: rgb(110, 60, 3);
    background: linear-gradient(90deg, rgba(110, 60, 3, 0.849) 0%, rgba(40, 27, 2, 0.849) 100%);
}
.footer-nav 
{
  width:100%;
  height:fit-content;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position:relative;
}
.footer-nav a 
{
  position:relative;
  font-size:17px;
  color:rgba(255, 255, 255, 0.863);
  line-height: 17px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  transition:0.4s;
  text-align: center;
  padding:5px;
  margin:10px 0px;
}

.footer-nav a:hover 
{
  color:#d9903de3;
  transition:0.4s;
}

.empty 
{
  margin-top:20px;
  width:20px;
  height:20px;
  background:rgba(255, 255, 255, 0.192);
  border:2px solid rgba(255, 255, 255, 0.486);
  border-radius:100%;
  position:relative;
  
}

.empty::after{
  width:120px;
  height:2px;
  background:rgba(255, 255, 255, 0.603);
  position:absolute;
  content:" ";
  transform:translate(50px, 10px);
}

.empty::before{
  width:120px;
  height:2px;
  background:rgba(255, 255, 255, 0.603);
  position:absolute;
  content:" ";
  transform:translate(-150px, 10px);
}


footer p{
  position:relative;
  font-size:14px;
  color:rgba(255, 255, 255, 0.863);
  line-height: 14px;
  text-decoration: none;
  outline: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  transition:0.4s;
  text-align: center;
  margin-top:30px;
}