@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

* {
   font-family: 'Roboto', sans-serif;
}

body {
   overflow: hidden;
}

.button {
   padding: 20px 50px;
   border-radius: 50px;
   font-weight: bold;
   font-size: 13px;
   text-transform: uppercase;
}



/******************** Navbar ********************/
.navbar { 
   position: fixed;
   width: 100%;
   padding: 15px 100px;
}

.navbar img {
   transform: scale(1.5);
}

.navbar-menu {
   box-shadow: none;
}

@media only screen and (max-width: 768px) {
   .navbar {
      padding: 15px 25px;
   }

   .navbar .button {
      margin-top: 10px;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   .navbar {
      padding: 15px 50px;
   }

   .navbar .button {
      margin-top: 25px;
   }
}



/******************** Hero ********************/
.hero {
   padding: 150px 100px 100px 100px;
   background-color: #f9f9f9;
   color: black;
}

.hero .title {
   color: black;
}

.hero img {
   width: 100%;
}

.hero .column:nth-child(1) {
   position: relative;
   padding-right: 100px;
}

.hero .column:nth-child(1) img { 
   position: absolute;
   top: -150px;
   width: 80%;
}

@media only screen and (max-width: 768px) {
   .hero {
      padding: 150px 25px 50px 25px;
      text-align: center;
   }

   .hero .column:nth-child(1) {
      padding-right: 0;
   }

   .hero .column:nth-child(1) img {
      display: none; 
   }

   .hero img {
      margin-top: 25px;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   .hero {
      padding: 150px 50px 50px 50px;
   }

   .hero .column:nth-child(1) {
      padding-right: 50px;
   }

   
   .hero .column:nth-child(1) img {
      display: none; 
   }
}

@media only screen and (min-width: 1408px) {
   .hero .column:nth-child(1) img { 
      top: -300px;
   }
}



/******************** Section 1 ********************/
#what-you-can-do {
   margin: 100px 0;
}

#what-you-can-do .columns {
   width: 80%;
   margin: 50px auto 0 auto;
}

#what-you-can-do .columns .column .card {
   padding-top: 25px;
   background-color: #f9f9f9;
   box-shadow: none;
}

#what-you-can-do img {
   display: block;
   width: 75%;
   margin: auto;
}

#what-you-can-do .title {
   margin: 10px 0 15px 0;
}

@media only screen and (max-width: 768px) {
   #what-you-can-do {
      margin: 50px 25px;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   #what-you-can-do {
      margin: 50px;
   }
}

@media only screen and (min-width: 1408px) {
   #what-you-can-do .columns {
      width: 60%;
   }
}



/******************** Section 2 ********************/
#content-library {
   padding-top: 100px;
   background-color: #333a45;
   color: white;
}

#content-library .title {
   width: 50%;
   margin: auto;
   color: white;
}

#content-library .columns {
   width: 80%;
   margin: 100px auto 0 auto;
}

#content-library .column {
   padding: 0;
}

#content-library .column:nth-of-type(1) {
   padding: 75px 50px;
}

#content-library #indication {
   margin-bottom: 25px;
   text-align: center;
   text-transform: uppercase;
}

#content-library #indication .arrow {
   animation: hop 1.5s infinite ease-out;
}

#content-library #mockup {
   position: relative;
   height: 300px;
   background-image: url("./assets/images/frame.png");
   background-size: cover;
   background-repeat: no-repeat;
   overflow-y: scroll;
}

#content-library #mockup img {
   position: absolute;
   top: 25px;
   right: 25px;
   width: 60%;
}

@media only screen and (max-width: 768px) {
   #content-library {
      padding: 75px 25px 0 25px;
   }
   
   #content-library .title {
      width: 100%;
   }
   
   #content-library .columns {
      width: 100%;
      margin: 50px auto 0 auto;
   }
   
   #content-library .column:nth-of-type(1) {
      padding: 0;
      text-align: center;
   }
   
   #content-library #indication {
      margin: 60px auto 25px auto;
   }
   
   #content-library #mockup {
      height: 250px;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   #content-library {
      padding-top: 75px;
   }
   
   #content-library .title {
      width: 75%;
   }
   
   #content-library .columns {
      margin: 75px auto 0 auto;
   }
   
   #content-library .column:nth-of-type(1) {
      padding: 75px 50px 0 0;
   }
   
   #content-library #mockup {
      height: 200px;
   }
}



/******************** Functionality ********************/
#functionality { 
   padding: 100px 0;
   background-color: #f9f9f9;
}

#functionality h6 {
   text-transform: uppercase;
   font-size: 14px;
}

#functionality .custom-card { 
   position: relative;
   width: 50%;
   margin: 50px auto 0 auto;
   background-color: white;
   border-radius: .5rem;
   padding: 25px 25px 350px 25px;
}

#functionality .custom-card:nth-of-type(odd) {
   left: -50px;
}

#functionality .custom-card:nth-of-type(even) {
   left: 50px;
}

#functionality .text {
   position: relative;
   width: 75%;
   z-index: 1;
}

#functionality img {
   width: 50%;
   position: absolute;
   bottom: 0;
   right: 0;
}

#functionality .custom-card:nth-of-type(2) img {
   width: 80%;
}

#functionality .custom-card:nth-of-type(3) img {
   width: 65%;
}

@media only screen and (max-width: 768px) {
   #functionality { 
      padding: 75px 25px;
   }

   #functionality .custom-card { 
      width: 100%;
      padding: 25px 25px 0 25px;
      left: 0 !important;
   }

   #functionality .text {
      width: 100%;
   }
   
   #functionality img {
      position: relative;
      right: -25px;
      width: 100% !important;
      margin-top: 25px;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   #functionality { 
      padding: 75px 50px;
   }

   #functionality .custom-card { 
      width: 75%;
      padding: 25px 25px 300px 25px;
   }
}

@media only screen and (min-width: 1408px) {
   #functionality .custom-card { 
      padding: 25px 25px 500px 25px;
   }
}



/******************** Team ********************/
#team { 
   margin: 100px 0;
}

#team h6 {
   text-transform: uppercase;
   font-size: 14px;
}

#team p {
   width: 60%;
   margin: auto;
   text-align: center;
}

#team .columns { 
   width: 60%;
   margin: 100px auto 0 auto;
}

#team .column {
   position: relative;
   margin: 10px;
   border-radius: .25rem;
}

#team .arrow { 
   position: absolute;
   top: 20px;
   right: 20px;
   width: 20px;
   z-index: 5;
   transition: all .25s ease-in-out;
}

#team span {
   opacity: 0;
   color: white;
}

#team span span {
   display: block;
   margin-top: 15px;
   font-weight: bold;
   font-size: 20px;
}

#team .photo { 
   object-fit: cover;
   position: absolute;
   bottom: 0;
   left: 50%;
   height: 120%;
   transform: translateX(-50%);
}

#team .column:nth-child(1) {
   max-height: 300px;
   padding: 50px 35px 100px 35px;
   background-color: #ffd433;
}

#team .column:nth-child(2) {
   max-height: 350px;
   margin-top: 100px; 
   padding: 50px 35px 200px 35px;
   background-color: #e98e93;
}

#team .column:nth-child(3) { 
   max-height: 300px;
   margin-top: -75px; 
   padding: 50px 35px 150px 35px;
   background-color: #58946e;
}

#team .columns .column:hover .arrow {
   transform: rotate(180deg);
}

#team .columns .column:hover .photo {
   object-fit: contain;
   left: auto;
   right: 0;
   transform: translateX(0);
   transition: .5s height ease-in-out;
}

#team .columns .column:nth-child(1):hover .photo {
   height: 35%;
}

#team .columns .column:nth-child(2):hover .photo {
   height: 45%;
}

#team .columns .column:nth-child(3):hover .photo {
   height: 40%;
}

#team .columns .column:hover span {
   opacity: 1;
   transition: 1s all ease-in-out;
}

@media only screen and (max-width: 768px) {
   #team {
      margin: 50px 25px;
   }

   #team p {
      width: 100%;
   }

   #team .columns { 
      width: 100%;
      margin: 50px auto 0 auto;
   }

   #team .column:nth-child(1) {
      margin-top: 100px;
   }
   
   #team .column:nth-child(2) { 
      margin-top: 100px;
   }
   
   #team .column:nth-child(3) { 
      margin-top: 100px;
   }   
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   #team { 
      margin: 75px 50px;
   }

   #team .columns { 
      width: 100%;
   }

   #team .column {
      margin: 25px;
   }
}



/******************** Testimonials ********************/
#testimonials { 
   padding: 100px 0;
   background-color: #f9f9f9;
}

#testimonials h6 {
   text-transform: uppercase;
   font-size: 14px;
}

#testimonials h1 {
   width: 60%;
   margin: auto;
}

#testimonials #subtitle {
   width: 60%;
   margin: 25px auto 0 auto;
}

#testimonials .slider-container {
   overflow: hidden;
   position: relative;
   width: 60%;
   margin: 50px auto 0 auto;
   background-color: white;
   border-radius: .25rem;
}
 
#testimonials .slider {
   display: flex;
   width: 100%;
   transition: all .5s ease-in-out;
}

#testimonials .slide {
   min-width: 100%;
}

#testimonials .card { 
   padding: 25px 100px; 
   box-shadow: none;
   text-align: center;
}

#testimonials .card .media {
   justify-content: center;
   margin-top: 50px;
}

#testimonials .card .media-content {
   flex-grow: 0;
   text-align: left;
}

#testimonials button { 
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: transparent;
   border: none;
}

#testimonials #back {
   left: 15px;
}

#testimonials #forward {
   right: 15px;
}

@media only screen and (max-width: 768px) {
   #testimonials { 
      padding: 75px 25px;
   }

   #testimonials h1 {
      width: 100%;
   }

   #testimonials #subtitle {
      width: 100%;
   }

   #testimonials .slider-container {
      width: 100%;
   }

   #testimonials .card { 
      padding: 0; 
   }

   #testimonials #back {
      left: 0;
   }
   
   #testimonials #forward {
      right: 0;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   #testimonials { 
      padding: 75px 0;
   }

   #testimonials .slider-container {
      width: 80%;
   }
}



/******************** Testimonials ********************/
#videos {
   margin: 100px 0;
}

#videos video {
   display: block;
   width: 50%;
   margin: 50px auto 0 auto;
}

@media only screen and (max-width: 768px) {
   #videos {
      margin: 75px 25px;
   }
   
   #videos video {
      width: 90%;
   }
}



/******************** Why us ********************/
#why-us {
   padding-top: 100px;
   background-color: #333a45;
   color: white;
}

#why-us .title {
   color: white;
}

#why-us .columns { 
   width: 80%;
   margin: auto;
}

#why-us .column {
   padding: 0;
}

#why-us .column:nth-child(1) img { 
   width: 100%;
}

#why-us .column:nth-child(2) {
   padding-left: 100px;
}

#why-us .column:nth-child(2) img {
   float: left;
   width: 25px;
   margin-right: 15px;
}

#why-us li {
   margin-bottom: 25px;
}

@media only screen and (max-width: 768px) {
   #why-us {
      padding: 50px 0;
   }

   #why-us .column:nth-child(1) {
      text-align: center;
   }

   #why-us .column:nth-child(2) {
      margin-top: 50px;
      padding-left: 0;
   }
}



/******************** Trust ********************/
#trust {
   margin: 100px 0;
}

#trust .columns {
   width: 80%;
   margin: 50px auto 0 auto; 
}

#trust .card {
   box-shadow: none;
}

@media only screen and (max-width: 768px) {
   #trust .columns {
      width: 100%;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
   #trust {
      margin: 100px 50px;
   }

   #trust .columns {
      width: 100%;
   }
}



/******************** CTA ********************/
#cta {
   padding: 100px 0 50px 0;
   text-align: center;
}

#cta {
   background-color: #e0acd5;
   color: white;
}

#cta .title {
   color: white;
}

#cta .button {
   margin: 50px 15px;
}

@media only screen and (max-width: 768px) {
   #cta {
      padding: 75px 25px;
   }

   #cta .button {
      margin: 25px 0 0 0;
   }
}



/******************** Footer ********************/
footer {
   padding: 100px 0;
   background-color: #f9f9f9;
}

footer .columns {
   width: 75%;
   margin: auto;
}

footer li {
   margin-bottom: 10px;
}

footer a {
   color: black;
}

@media only screen and (max-width: 768px) {
   footer {
      padding: 50px 0;
   }
}


/******************** Animation ********************/
@keyframes hop {
   from {
      transform: translateY(0);
   }

   to {
      transform: translateY(-15px);
   }
}