/* Global Styles */
body {
   font-family: 'Roboto', sans-serif; 
   margin: 0 auto;
   max-width: 1440px;
   padding: 0;
}
a{
   text-decoration: none;
}

/* Header Section */
/* header {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   background-color: #ffffff;
} */

.header__top {
   padding-top: 25px;
   padding-bottom: 27px;
}

/* Main Section */
main {
   background-color: #eff1f5;
   display: flex;
   flex-direction: column-reverse;
   padding: 20px;
   gap: 30px;
   text-align: center;
}

.p-logo-right{
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 200px;
}

h5{
   color: #003857;
}

.h-gradient{
   /* text-transform: uppercase; */
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.content-left, .content-right {
   flex: 1;
   align-self: center;
}

.content-left {
   margin-bottom: 20px;
}

main h2 {
   margin: 10px 0;
}

main p {
   margin-bottom: 15px;
}

.buttons {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 30px;
   justify-content: space-around;
   align-content: center;
}

.button-left{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-content: center;
   width: 200px;
   height: 46.5px;
   font-size: 16px;
   border-radius: 25px;
   background-color: #23D5E0;
   color: #003857;
   cursor: pointer;
   border: none;
   padding: 10px;
   transition: transform 0.3s ease;
}

.button-right{
   width: 200px;
   font-size: 16px;
   padding: 10px;
   background-color: #ffffff;
   color: #003857;
   border: 1px solid #909AB1;
   border-radius: 25px;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.button-right-text{
   padding-top: 2.5px;
   display: flex;
   flex-direction: row;
   gap: 3px;
   justify-content: center;
}

.buttons button:hover {
   transform: translateY(-5px);
}

.content-right {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
}

.video-wrapper {
   width: 100%;
   max-width: 100%; 
   height: auto;
   overflow: hidden;
   background: #eff1f5;
}

.video-wrapper video {
   width: 100%;
   height: auto;
   object-fit: cover;
}


/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
   main {
      flex-direction: row;
      text-align: left;
      gap: 40px;
   }

   .content-left, .content-right {
      width: 50%;
   }

   .buttons {
      flex-direction: row;
      justify-content: flex-start;
      gap: 40px;
   }
}

@media (min-width: 1024px) {
   header {
      padding: 0px 40px;
      flex-direction: row;

   }

   main {
      padding: 20px 40px;
      gap: 60px;
   }

   main h2 {
      font-size: 54px;
   }

   main p {
      font-size: 18px;
   }
   .buttons {
      flex-direction: row;
      justify-content: flex-start;
      gap: 40px;
   }
}

/* First Block */

.first-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   background-color: #eff1f5;
   overflow: hidden;
}

.first-block-left {
   text-align: center;
   margin-bottom: 20px;
}

.first-block-left h2 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
   margin-bottom: 10px;
}

.first-block-left p {
   font-size: 16px;
   line-height: 1.5;
}

.first-block-right {
   opacity: 0;
   transform: translateX(100%);
   transition: transform 1s ease, opacity 1s ease;
}

.first-block-right img {
   max-width: 100%;
   height: auto;
   display: block;
}

.first-block.active .first-block-right {
   opacity: 1;
   transform: translateX(0);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
   .first-block {
      padding: 20px 40px;
      flex-direction: row; 
      text-align: left;
   }

   .first-block-left {
      flex: 1;
      text-align: left;
      margin-bottom: 0;
      padding-right: 20px;
   }
.first-block-left h2{
   text-transform: uppercase;
   font-size: 40px;
}
   .first-block-right {
       flex: 1;
       display: flex;
       justify-content: center;
   }
}

/* Second Block */
.second-block {
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
   padding: 20px;
   background-color: #eff1f5;
   overflow: hidden;
}

.second-block-left {
   opacity: 0;
   transform: translateX(-100%);
   transition: transform 1s ease, opacity 1s ease;
   margin-bottom: 20px; 
}

.second-block-left img {
   max-width: 100%;
   height: auto;
   display: block;
}

.second-block-right {
   text-align: center; 
}

.second-block-right h2 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
   margin-bottom: 10px;
}

.second-block-right p {
   font-size: 16px;
   line-height: 1.5;
}

.second-block.active .second-block-left {
   opacity: 1;
   transform: translateX(0);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
   .second-block {
       flex-direction: row;
       text-align: left; 
   }

   .second-block-left {
       flex: 1;
       margin-bottom: 0;
       display: flex;
       justify-content: center;
   }
   .second-block-right h2{
      text-transform: uppercase;
      font-size: 40px;
   }
   .second-block-right {
       flex: 1;
       padding-left: 20px;
       text-align: left;
   }
}


/* Banner */
.banner-wrapper{
   background-color: #eff1f5;
   padding: 20px;
}
.banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 16px;
   background-image: linear-gradient(to right, #1B91AE , #50FEF3);   border: none;
   padding: 20px 20px;
   text-align: center;
}

.banner-left {
   color: #ffffff;
   margin-bottom: 10px; 
}

.banner-left h2 {
   font-size: 20px;
   margin: 0;
}

.banner-right {
   margin-top: 10px;
}

.banner-button {
   display: inline-block;
   padding: 10px 20px;
   font-size: 16px;
   color: #fff;
   width: max-content;
   background-color: #003857;
   text-decoration: none;
   border-radius: 25px;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.banner-button:hover {
   transform: translateY(-5px);}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {

.banner-wrapper{
   padding: 20px 40px;
}

.banner {
      flex-direction: row; 
      justify-content: space-between;
      text-align: left;
      padding: 20px 40px;
}

.banner-left {
      width: 90%;
      margin-bottom: 0;
      text-align: left;
}

.banner-left h2{
   text-transform: uppercase;
   font-size: 32px;
}

.banner-right {
      flex: 1;
      text-align: right;
}

.banner-button {
      padding: 12px 24px;
}
}

/* Third Block */

.third-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   background-color: #eff1f5;
   overflow: hidden;
}

.third-block-left {
   text-align: center;
   margin-bottom: 20px;
}

.third-block-left h2 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
   margin-bottom: 10px;
}

.third-block-left p {
   font-size: 16px;
   line-height: 1.5;
}

.third-block-right {
   opacity: 0;
   transform: translateX(100%);
   transition: transform 1s ease, opacity 1s ease;
}

.third-block-right img {
   max-width: 100%;
   height: auto;
   display: block;
}

.third-block.active .third-block-right {
   opacity: 1;
   transform: translateX(0);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
.third-block {
   padding: 20px 40px;
      flex-direction: row; 
      text-align: left;
}

.third-block-left {
      flex: 1;
      text-align: left;
      margin-bottom: 0;
      padding-right: 20px;
}
.third-block-left h2{
text-transform: uppercase;
font-size: 40px;
}
.third-block-right {
      flex: 1;
      display: flex;
      justify-content: center;
}
}

/* Forth Block */
.forth-block {
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
   padding: 20px;
   background-color: #eff1f5;
   overflow: hidden;
}

.forth-block-left {
   opacity: 0;
   transform: translateX(-100%);
   transition: transform 1s ease, opacity 1s ease;
   margin-bottom: 20px; 
}

.forth-block-left img {
   max-width: 100%;
   height: auto;
   display: block;
}

.forth-block-right {
   text-align: center; 
}

.forth-block-right h2 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
   margin-bottom: 10px;
   margin-top: 0px;
}

.forth-block-right p {
   font-size: 16px;
   line-height: 1.5;
}

.forth-block.active .forth-block-left {
   opacity: 1;
   transform: translateX(0);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
   .forth-block {
       flex-direction: row;
       text-align: left; 
   }

   .forth-block-left {
       flex: 1;
       margin-bottom: 0;
       display: flex;
       justify-content: center;
   }
   .forth-block-right h2{
      text-transform: uppercase;
      font-size: 40px;
   }
   .forth-block-right {
       flex: 1;
       padding-left: 20px;
       text-align: left;
   }
}

/* Fifth Block */

.fifth-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   background-color: #eff1f5;
   overflow: hidden;
}

.fifth-block-left {
   text-align: center;
   margin-bottom: 20px;
}

.fifth-block-left h2 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
   margin-bottom: 10px;
   margin-top: 0px;
}

.fifth-block-left p {
   font-size: 16px;
   line-height: 1.5;
}

.fifth-block-right {
   opacity: 0;
   transform: translateX(100%);
   transition: transform 1s ease, opacity 1s ease;
}

.fifth-block-right img {
   max-width: 100%;
   height: auto;
   display: block;
}

.fifth-block.active .fifth-block-right {
   opacity: 1;
   transform: translateX(0);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
.fifth-block {
   padding: 20px 40px;
      flex-direction: row; 
      text-align: left;
}

.fifth-block-left {
      flex: 1;
      text-align: left;
      margin-bottom: 0;
      padding-right: 20px;
}
.fifth-block-left h2{
text-transform: uppercase;
font-size: 40px;
}
.fifth-block-right {
      flex: 1;
      display: flex;
      justify-content: center;
}
}

/* Grid Block */

.grid-block {
   padding: 20px;
   background-color: #eff1f5;
}

.grid-block-heading {
   text-align: center;
   margin-bottom: 20px;
}

.grid-block-heading h2 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
}

.grid-block-content {
   display: grid;
   grid-template-columns: 1fr;
   gap: 25px;
}

.grid-item {
   text-align: center;
   padding: 1px;
   background-color: #ffffff;
   border: solid 1px transparent;
   border-radius: 16px;
   background-image: linear-gradient(white, white), 
                     linear-gradient(to right, #1B91AE, #23D5E0);
   background-origin: border-box;
   background-clip: content-box, border-box;
}

.grid-item img {
   max-width: 100%;
   height: auto;
   margin: 10px;
}

.grid-item p {
   font-size: 16px;
   font-weight: bold;
   line-height: 1.5;
   color: #1B91AE;
   margin: 10px;
}

.grid-block-button{
   display: flex;
   justify-content: center;
   margin-bottom: 10px;
   margin-top: 20px;
}

.grid-button{   
   display: flex;
   border:none;
   /* width: max-content; */
   border-radius: 25px;
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   color: #ffffff;
   font-size: 16px;
   cursor: pointer;
   padding: 10px 20px;
   transition: transform 0.3s ease;
}

.grid-button:hover {
   transform: translateY(-5px);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {

   .grid-block-content {
       grid-template-columns: repeat(3, 1fr);
       padding: 20px 150px;
   }

   .grid-block-heading h2{
      text-transform: uppercase;
      font-size: 40px;
      }
}


/* Second Grid Block */

.s-grid-block {
   padding: 20px;
   background-color: #eff1f5;
}

.s-grid-block-heading {
   text-align: center;
   margin-bottom: 20px;
}

.s-grid-block-heading h2 {
   color: #003857;
   font-size: 22px;
}

.s-grid-block-content {
   display: grid;
   grid-template-columns: 1fr;
   gap: 25px;
}

.s-grid-item {
   text-align: center;
   padding: 1px;
}

.s-grid-item img {
   max-width: 100%;
   height: 100%;
   /* margin: 10px; */
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {

   .s-grid-block-content {
       grid-template-columns: repeat(2, 1fr);
       padding: 20px 150px;
   }

   .s-grid-block-heading h2{
      text-transform: uppercase;
      font-size: 40px;
      }
}

/* Sixth block */
.sixth-block {
   padding: 20px;
   background-color: #eff1f5;
   text-align: center;
}

.sixth-block-wrapper{
   background-image: linear-gradient(to right, #1B91AE , #50FEF3);   border: none;
   padding: 20px 0;
   text-align: center;
}
.sixth-block-logo{
   display: flex;
   flex-direction: column; 
}

.sixth-block-content {
   margin-bottom: 20px;
}

.sixth-block-content h2 {
   font-size: 22px;
   margin-bottom: 10px;
   color: #ffffff;
}

.sixth-block-content p {
   font-size: 16px;
   line-height: 1.5;
   color: #ffffff;
}

.sixth-buttons {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-content: center;
   gap: 30px;
   margin: 20px;
   justify-content: center;
}

.sixth-button-left{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-content: center;
   height: 46.5px;
   font-size: 16px;
   border-radius: 25px;
   background-color: #ffffff;
   color: #003857;
   cursor: pointer;
   border: 1px solid #909AB1;
   padding: 10px;
   transition: transform 0.3s ease;
}

.sixth-button-right{
   font-size: 16px;
   padding: 10px;
   background-color: transparent;
   color: #ffffff;
   border: 1px solid #ffffff;
   border-radius: 25px;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.sixth-button-right-text{
   padding-top: 2px;
   display: flex;
   flex-direction: row;
   gap: 5px;
   justify-content: center;
}

.sixth-buttons button:hover {
   transform: translateY(-5px);
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
   .sixth-block {
         text-align: left;
         padding: 40px 150px;
   }

   .sixth-block-wrapper{
      padding: 20px;
   }
   .sixth-block-content h2{
      font-size: 40px;
   }

   .sixth-block-logo {
         flex-direction: row;
         justify-content: center;
         gap: 30px;
   }
.s-logo-right{
   display: flex;

}
.s-logo-left img{
   width: 250px;
}
.s-logo-right a {
align-self: center;
}

.sixth-buttons {
   flex-direction: row;
   gap: 20px;
}
}

/* Footer Section */

footer{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background: linear-gradient(to bottom, #003857 0%, #242425 100%);
      /* background-color: #003857; */
}
.footer {
   margin-top: 0px;
}

.footer__content{
   padding: 5px 0;
}


.logo-footer{
   display: flex;
   flex-direction: column;
   gap: 10px;
}

div.f-logo-left a img{
   width: 200px;
}
.f-logo-right{
   display: flex;
   justify-content: center;
}

/* Media Queries for Tablet and Desktop */
@media (min-width: 768px) {
   .logo-footer{
      flex-direction: row;
      gap: 100px;
   }
}

/* Contact Form */
.screen-reader-response{
   display: none;
}

.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required.wpcf7-not-valid{
   display: flex;
}

.wpcf7-not-valid-tip{
   font-size: 12px;
   color: red;
}

.wpcf7-response-output{
   text-align: center;
   padding-top: 10px;
   color: red;
}
.c-form {
   display: flex;
   flex-direction: column;
   padding: 20px;
   background-color: #eff1f5;
}

.c-form h3 {
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 22px;
   text-align: center;
}

.two-column-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.form-row {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 20px;
}

.form-column {
   width: 100%;
}

div input[type="text"],
div input[type="email"],
div input[type="tel"],
div select,
div textarea {
   width: 100%;
   padding: 15px;
   border: 2px solid #1B91AE;
   border-radius: 25px;
   box-sizing: border-box;
   background-color: #eff1f5;
   color: #003857;
   font-size: 16px;
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

div.form-column.checkbox-column p a{
   text-decoration: none;
   color: #000000;
   font-size: 16px;
}
.checkbox-submit-row {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
}

.checkbox-column {
   width: 100%;
   text-align: center;
}

.submit-column {
   width: 100%;
   display: flex;
   justify-content: center;
}

.submit-column input[type="submit"] {
   width: 200px;
   text-transform: uppercase;
   border: none;
   border-radius: 25px;
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   color: #eff1f5;
   font-size: 18px;
   padding: 15px 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.submit-column input[type="submit"]:hover {
   transform: translateY(-5px);
}


@media (min-width: 768px) {
.c-form {
   flex-direction: column;
   padding: 20px 150px;
}
.c-form h3 {
   text-transform: uppercase;
   font-size: 40px;
   padding: 0 50px;
}
.two-column-form {
      padding: 0 50px;
}

.form-row {
      flex-direction: row;
      gap: 20px;
}

.form-row .form-column {
      width: 32%;
}

.form-row:nth-child(2) .form-column {
      width: 50%;
}

.checkbox-submit-row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
}

.checkbox-column {
      width: 70%;
      text-align: left;
      font-size: 16px;
}

.submit-column {
      width: 30%;
   justify-content: flex-end;
}
}