/* ===================================
    Cover
====================================== */

.cover{
  width: 100%;
  height: 565px;
  background: linear-gradient(180deg, rgba(0,84,196,1) 0%, rgba(255,255,255,1) 80%, rgba(17 27 67 / 0%) 80%);
}

.cover .content-img{
  display: flex;
  justify-content: center;
}

.cover .content-img .img-cover{
  width: 300px;
  position: absolute;
  bottom: -245px;
  height: auto;
  margin-top: 50px;
  z-index: 10;
}

.cover .content-img .img-cover-line{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform-origin: left;
}



.cover .title-cover{
  position: absolute;
  top:120px;
  left: 20px;
}

.cover .description-cover{
  width: 95%;
  position: absolute;
  top:200px;
  left: 20px;
  right: auto;
}

.logo-cover{width: 90px;}


 .cloud-left{
  width: 100px;
  top:350px;
  position: absolute;
  animation: cloudleft 30s infinite;
  animation-timing-function: ease-in-out;
}

 .cloud-right{
   width: 150px;
   top:350px;
  position: absolute;
  animation: cloudRightAlt 30s infinite;
  animation-timing-function: ease-in-out;
}


.reveal {
  visibility: hidden;
  position: relative;
  width: 300px;
  height: 100%;
  overflow: hidden;
  bottom: -225px;
}

/* ===================================
    Global
====================================== */

.text-video{
  position: absolute;
  top:50px;
  left: 20px;
  z-index: 100;
}


.content-nave{
  position: relative;
  padding-top: 250px;
  padding-bottom: 0px;
  width: 100%;
  height:auto;
}


.text-pocket{
  position: absolute;
  top:-45px;
  left: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.text-pocket h1{
  margin: 0;
}

.description-pocket{
  width: 70%;
  position: absolute;
  top:-45px;
  left: 95px;
}

.text-bullet{
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.text-bullet img{
  width: 20px;
  height: 20px;
}

.text-bullet p{
  font-style: italic;
  margin-bottom: 0px;
  margin-left: 10px;
}

.content-bullets{
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
}


/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {


}
/* xs  */ @media (min-width: 431px) {

.cover{height: 550px;}
.cover .content-img .img-cover{width: 385px;bottom: -200px;}
.reveal {width: 385px;bottom: -180px;}

.cloud-left{width: 150px;top:300px;}
.cloud-right{width: 200px;top:300px;}

.cover .description-cover{
  width: 95%;
  top: 180px;
  right: 0px;
  left: 20px;
}
.cover .title-cover{top:80px;left: 20px;}

.description-pocket{width: 70%;top:0px;left: 130px;}
.text-pocket{top:50px;left: 30px;}

.content-nave{padding-top: 280px;padding-bottom: 0px;}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.cover{height: 560px;}
.cover .content-img .img-cover{width: 100%;bottom: -140px;}
.reveal {width: 100%;bottom: -110px;}

.cloud-left{width: 200px;top:280px;}
.cloud-right{width: 250px;top:280px;}

.cover .description-cover{
  width: 100%;
  top: 180px;
  right: 0px;
  left: 0;
}
.cover .title-cover{top:50px;left: 0px;}
.logo-cover{width: 100px;}
.description-pocket{width: 80%;top:0px;left: 100px;}
.text-pocket{top:90px;left: -40px;}

.content-nave{padding-top: 250px;padding-bottom: 100px;}
.text-video{top:50px;left: 20px;}

}
/* md  */ @media (min-width: 768px) {

.cover{height: 660px;}
.cover .content-img .img-cover{bottom: -160px;}
.reveal {bottom: -130px;}

.cloud-left{width: 250px;top:230px;}
.cloud-right{width: 300px;top:250px;}

.cover .description-cover{
  width: 100%;
  top: 200px;
  right: 0px;
  left: 0;
}
.logo-cover{width: 100px;}
.description-pocket{width: 60%;top:0px;left: 170px;}
.text-pocket{top:50px;left: -40px;}
.content-nave{padding-top: 250px;padding-bottom: 100px;}
.text-video{top:60px;left: 30px;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.cover{height: 675px;}
.cover .content-img .img-cover{bottom: -50px;}
.reveal {bottom: -10px;}

.cloud-left{width: 400px;top:150px;}
.cloud-right{width: 450px;top:200px;}

.cover .description-cover{
  width: 35%;
  position: absolute;
  top:50px;
  left: auto;
  right: 0px;
}

.logo-cover{width: 130px;}
.description-pocket{width: 45%;top:20px;left: 250px;}
.text-pocket{top:130px;left: -30px;}
.content-nave{padding-top: 220px;padding-bottom: 100px;}
.text-video{top:50px;left: 50px;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.cover{height: 755px;}
.cover .content-img .img-cover{bottom: -50px;}
.reveal {bottom: -10px;}


.description-pocket{width: 35%;}
.content-nave{padding-top: 200px;padding-bottom: 100px;}
.text-video{top:50px;left: 80px;}

}
/* xxl */ @media (min-width: 1400px) {

.cover{height: 795px;}
.cover .content-img .img-cover{bottom: -20px;}
.reveal {bottom: 10px;}


}