/* General Styles */

html {
   scroll-behavior: smooth;
}

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

.header {
   display: flex;
   justify-content: space-between;
   padding: 50px;
   padding-top: 20px;
   padding-bottom: 30px;
   align-items: flex-end
}

.background-wrapper{
   background-image: url("/wp-content/themes/elcore/images/landing-aws/bg.svg") ;
   background-repeat: no-repeat;
   background-size: contain;
}

/* Main Content */
.main-content {
   display: flex;
   justify-content: space-between;
   padding: 50px;
   padding-top: 0px;
   padding-bottom: 0px;
}

.main-content .left-content {
   width: 70%;
   text-align: left;
   margin-top: -30px;
}

.cta-button {
   max-width: 360px;
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   background-color: transparent;
   color: #003857;
   padding: 10px 20px;
   text-decoration: none;
   border-radius: 30px;
   border: 2px solid #003857;
   cursor: pointer;
   margin-left: 30%;
}

.left-content h1{
   font-family: 'Roboto', sans-serif;
   font-size: 60px;
   color: #ffffff;
}
.left-content h2{
   font-family: 'Roboto', sans-serif;
   font-size: 30px;
   color: #003857;
   margin-bottom: 40px;
}

.main-content .right-content {
   width: 50%;
}

.main-content .right-content img {
   max-width: 100%;
   height: auto;
}

/* First Block */
.blocks {
   padding: 0 50px;
   padding-top: 0px;
   padding-bottom: 0px;
}

.block {
   margin-bottom: 50px;
}

.block h1 {
   margin-bottom: 20px;
   margin-top: 20px;
   font-size: 54px;
   color: #1B91AE;
}

.parallel-blocks {
   display: flex;
   justify-content: space-between;
   gap: 40px;
   margin-bottom: 160px;
}

.text-block-left, .text-block-right{
   padding: 30px;
}

.text-block-image{
   max-width: 50px;
   margin-right: 50px;
}

.text-block-left{
   display: flex;
   flex-direction: row;
   border: solid 1px #909AB1;
   border-radius: 30px;
   width: 48%;
}

.text-block-left div{
   display: flex;
   flex-direction: column;
   padding: 0px;
   margin: 0px;
}

.text-block-right{
   display: flex;
   flex-direction: row;
   border: solid 1px #909AB1;
   border-radius: 30px;
   width: 48%;
}

.text-block-heading{
   color: #003857;
   font-size: 30px;
   font-weight: bold;
   margin: 0px;
}

.text-block-heading span{
   background-color: #50FEF3;
}

/* Contact Form Block*/

.block-content {
   background-size: cover;
   background-position: center;
   display: flex;
   flex-direction: row;
   border-radius: 30px;
   background-image: url('/wp-content/themes/elcore/images/landing-aws/form-bg.svg');
}

.left-part p {
   font-size: 54px;
   font-weight: bold;
   color: #003857;
   margin-bottom: 20px;
}

.left-part {
   width: 55%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.left-part p {
   margin: 0;
}

.right-part {
   flex: 1;
   min-width: 300px;
   padding: 20px;
}

/* Contact Form Block */

/* .contact-form p{
   font-size: 18px;
   font-weight: bold;
   color: #003857;
   display: block;
   margin-bottom: 8px;
}

.right-part .contact-form .wpcf7-form-control-wrap{
   width: 100%;
   height: 60px;
   font-weight: bold;
   color: #1B91AE;
   font-size: 18px;
   border-radius: 30px;
   padding-left: 0px;
}

.right-part .contact-form input[type="text"],  .contact-form input[type="tel"], .contact-form input[type="email"]{
   color: #003857;
   font-family: 'Roboto', sans-serif; 

}

.wpcf7-submit{
   font-family: 'Roboto', sans-serif; 
   width: 300px;
   height: 60px;
   margin-left: 0px;
   padding: 10px 20px;
   font-size: 18px;
   padding: 18px;
   color: #1B91AE;
   text-transform: none;
   background-color: #ffffff;
   border: none;
   border-radius: 30px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.wpcf7 form .wpcf7-response-output{
   border: none;
}

.wpcf7-submit:hover {
   background-color: #1B91AE; 
   color: #ffffff;} */

   /* 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 {
   background-size: cover;
   background-position: center;
   display: flex;
   flex-direction: column;
   border-radius: 30px;
   background-image: url('/wp-content/themes/elcore/images/landing-aws/form-bg.svg');

}

.c-form div{
   padding: 5px;
}

.c-form h3 {
   color: #003857;
   font-size: 30px;
   font-weight: bold;
   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: #ffffff;
   color: #003857;
   font-size: 16px;
   transition: border-color 0.3s ease;
}

div.form-column.checkbox-column p a{
   text-decoration: none;
   color: #000000;
   font-size: 16px;
   text-decoration: underline;
}
.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: solid 2px #1B91AE;
   border-radius: 25px;
   background: linear-gradient(to right, #1B91AE, #23D5E0);
   color: #ffffff;
   font-size: 18px;
   padding: 15px 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
}

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


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

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


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

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

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

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

/* Second Block */

.new-block {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 80px;
   padding: 50px 80px;
   margin-top: 100px;
   border: solid 1px #909AB1;
   border-radius: 30px;
}

.new-block .left-images {
   display: flex;
   flex-direction: row;
   max-width: 50%; 
   gap: 50px;
}

.new-block .right-text {
   flex: 1;
   margin-left: 20px;
   font-size: 16px;

}

.new-block .right-text h1 {
   font-size: 45px;
   font-weight: bold;
}

/* Third Block */

.third-block{
   margin-top: 100px;
}

.four-blocks{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   height: 500px;
}

.four-block{
   display: flex;
   flex-direction: row;
   align-items: center;
   min-height: 200px;
   gap: 20px;
   width: 50%;
}

.four-block h2{
   color: #003857;
   font-size: 30px;
   font-weight: bold;
}

/* Fourth Block */

.fourth-block{
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 80px;
   padding: 50px 80px;
   border: solid 1px #909AB1;
   border-radius: 30px;
   margin-top: -90px;
}

/* Fifth Block */

.fifth-block{
   display: flex;
   flex-direction: row;
   gap: 70px;
   background-image: url('/wp-content/themes/elcore/images/landing-aws/Vector\ 8.svg');
   background-repeat: no-repeat;
   background-size: cover;
   margin-top: -200px;
   padding-left: 50px;
   padding-right: 50px;
   padding-top: 350px;
}

.upper-block h2, .down-block h2{
   color: #23D5E0;
   font-size: 80px;
   font-weight: bold;
   margin: 0px;
}

.fifth-right-part{
   width: 60%;
}

.upper-block .images{
   display: flex;
   flex-direction: row;
   gap: 8px;
   flex-wrap: wrap;
}

.down-block{
   margin-top: 50px;  
}

.down-block span{
   color: #23D5E0;
   font-size: 40px;
   font-weight: bold;
}

.images img{
   border: 1px solid #909AB1;
   border-radius: 30px;
   background-color: #ffffff;
   width: 150px;
   height: 100px;
}

/* Sixth Block */

.sixth-block{
   background-image: linear-gradient(to right, #1B91AE , #50FEF3);
   margin: 50px;
   border-radius: 30px;
   display: flex;
   flex-direction: row;
   margin-bottom: 100px;
}

.sixth-left-part h1{
   color: #ffffff;
}

.sixth-left-part{
   width: 50%;
   padding: 50px;
   padding-left: 100px;
}

.sixth-left-part div{
   display: flex;
   flex-direction: row;
   justify-content: left;
}

.sixth-left-part div p{
   color: #ffffff;
}

.sixth-left-part .cta-button {
   margin-top: 30px;
   font-size: 18px;
   padding: 18px;
   color: #1B91AE;
   text-transform:none;
   background-color: #ffffff;
   border: none;
   border-radius: 30px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.sixth-left-part .cta-button:hover {
   background-color: #1B91AE; 
   color: #ffffff;
}

.sixth-right-part{
   display: flex;
   align-self: flex-end;
}


/* Seventh Block */

.seventh-block {
   display: flex;
   flex-direction: row;
padding: 0 50px;
   gap: 70px;
   align-items: center;
}

.seventh-left-part {
display: flex;
flex-direction: column;
gap: 10px;
width: 65%;
}

.seventh-left-part h2 {
   color: #1B91AE;
   font-size: 54px; 
   margin: 0px;
}

.seventh-left-part p {
   color: #003857;
   font-size: 18px;
}


.seventh-block .image-container {
   position: relative;
   width: 100%;
   height: auto;
}

.seventh-block .background-image {
   width: 100%;
   height: auto;
   display: block;
}

.seventh-block .logo-overlay {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 50%;
}

/* Eighth Block */
.eighth-block {
   margin: 50px;
}

.eighth-block .text-content {
   color: #1B91AE;
   font-size: 35px;
   font-weight: bold;
}

.eighth-block .text-content h2 {
   font-size: 54px;
   margin-bottom: 10px;
}

.images-row{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
}

/* Ninth Block */

.ninth-block {
   margin: 20px;
   padding-left: 100px;
   padding-right: 100px;
}

.ninth-block h2 {
   text-align: center;
   margin-bottom: 20px;
   color: #1B91AE;
   font-size: 54px;
}

.ninth-block .accordion {
   cursor: pointer;
   padding: 18px;
   color: #003857;
   width: 100%;
   text-align: left;
   border: 1px solid #CAD6F1;
   border-radius: 20px;
   background-color: #ffffff;
   outline: none;
   margin-bottom: 10px;
   font-size: 24px;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.ninth-block .accordion img {
   margin-left: auto;
}

.ninth-block .panel {
   padding: 0 18px;
   background-color: #ffffff;
   display: none;
   overflow: hidden;
   margin-bottom: 10px;
   border: 1px solid #CAD6F1;
   border-radius: 20px;
}



/* Tenth Block */
.tenth-block {
   margin: 50px;
   padding: 50px;
   padding-left: 230px;
   padding-right: 230px;
   background-size: cover;
   background-position: center;
   text-align: center;
   color: #fff;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

.tenth-block h2 {
   font-size: 54px;
   margin-bottom: 20px;
}

.tenth-block p {
   font-size: 30px;
   margin-bottom: 50px;
}

.tenth-block .cta-button {
   padding: 10px 20px;
   justify-content: center;
   font-size: 18px;
   margin-left: 30%;
   display: flex;
   padding: 18px;
   color: #1B91AE;
   text-transform:none;
   background-color: #ffffff;
   border: none;
   border-radius: 30px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.tenth-block .cta-button:hover {
   background-color: #1B91AE; 
   color: #ffffff;
}


/* Responsive Styles */
@media (max-width: 1024px) {
   .background-wrapper{
      background-size: auto;
   }

   .header {
      padding: 20px;
   }
   
   .main-content {
      flex-direction: column;
      padding: 20px;
   }

   .main-content .left-content {
      width: 100%;
      text-align: center;
   }

   .main-content .right-content {
      width: 50%;
      align-self: center;
      text-align: center;
   }

   .left-content h1 {
      font-size: 48px;
   }

   div.block h1{
      text-align: center;
   }
   .cta-button {
      max-width: 100%;
   }

   .text-block-heading {
      font-size: 24px;
   }

   .block-content{
      flex-direction: column;
   }

   .block-content .left-part{
      align-self: center;
      padding-top: 20px;
   }

   .contact-form p {
      font-size: 14px;
   }

   .wpcf7-submit {
      width: 50%;
      font-size: 18px;
   }

   .new-block {
      flex-direction: column;
      gap: 20px;
   }

   .new-block .left-images {
      display: none;
   }

   .new-block .right-text {
      margin-left: 0;
   }

   .text-block-left, .text-block-right {
      width: 100%;
   }

   .four-blocks {
      height: auto;
   }

   .four-block {
      width: 100%;
   }

   .four-block h2 {
      font-size: 24px;
   }

   .fourth-block{
      margin-top: 50px;
      justify-content: center;
   }
   .right-image{
      display: none;
   }

   .fifth-block {
      flex-direction: column;
      padding: 20px;
      margin-top: 50px;
   }

   .fifth-right-part{
      align-self: center;
   }

   .upper-block h2, .down-block h2 {
      font-size: 40px;
   }

   .down-block span {
      font-size: 24px;
   }

   .images img {
      width: 100px;
      height: 70px;
   }

   .sixth-block {
      flex-direction: column;
      padding: 20px;
   }

   .sixth-left-part {
      width: 100%;
   }

   .seventh-left-part h2 {
      font-size: 32px;
   }

.seventh-right-part{
   width: 50%;
}

   .eighth-block {
      flex-direction: column;
      gap: 20px;
   }

   .eighth-block .text-content h2 {
      font-size: 36px;
   }

   .ninth-block {
      padding: 20px;
   }

   .ninth-block h2 {
      font-size: 32px;
   }

   .tenth-block {
      padding: 30px;
   }

   .tenth-block h2 {
      font-size: 32px;
   }

   .tenth-block p {
      font-size: 18px;
   }
}

@media (max-width: 768px) {
   .header {
      flex-direction: column;
      align-items: center;
   }
   
   .main-content {
      padding: 10px;
   }

   .main-content .left-content {
      padding-top: 20px;
   }

   .main-content .right-content img{
      margin: 40px 0px;
   }

   .left-content h1 {
      font-size: 36px;
   }

   .left-content h2{
      padding: 0 20px;
      font-size: 18px;
   }

   .cta-button {
      max-width: 100%;
      font-size: 16px;
      margin-left: 0px;
   }

   .contact-form p {
      font-size: 12px;
   }

   .wpcf7-submit {
      width: 100%;
      font-size: 12px;
   }

   .new-block .right-text {
      margin-left: 0;
   }

   .text-block-heading {
      font-size: 20px;
   }

   .four-blocks {
      height: auto;
   }

   .four-block {
      width: 100%;
   }

   .four-block h2 {
      font-size: 20px;
   }

   .fifth-block {
      padding: 10px;
   }

   .upper-block h2, .down-block h2 {
      font-size: 30px;
   }

   .down-block span {
      font-size: 20px;
   }

   .images img {
      width: 80px;
      height: 50px;
   }

   .sixth-block {
      flex-direction: column;
      padding: 10px;
   }

   .sixth-left-part {
      width: 100%;
   }

   .seventh-block {
      flex-direction: column;
      gap: 10px;
   }

   .seventh-left-part h2 {
      font-size: 28px;
   }

   .eighth-block {
      flex-direction: column;
      gap: 10px;
   }

   .eighth-block .text-content h2 {
      font-size: 32px;
   }

   .ninth-block h2 {
      font-size: 28px;
   }

   .tenth-block h2 {
      font-size: 28px;
   }

   .tenth-block p {
      font-size: 16px;
   }
}

@media (max-width: 480px) {

   .header {
      padding: 30px;
      gap: 10px;
   }

   .blocks{
      padding: 0 20px;
   }

   .main-content {
      padding: 15px;
   }

   .left-content h1 {
      padding: 15px;
      font-size: 28px;
   }

   div.block h1{
      font-size: 30px;
      padding-bottom: 40px;
   }

   .parallel-blocks{
      flex-direction: column;
      margin-bottom: 50px;
   }

   .text-block-image{
      display: none;
   }

   .cta-button {
      font-size: 14px;
   }

   .contact-form p {
      font-size: 16px;
      text-align: center;
   }

   .block-content .left-part p{
      font-size: 30px;
      text-align: center;
   }

   .contact-form span.wpcf7-form-control-wrap{
      padding: 0px;
   }      
   
   .wpcf7-submit {
      font-size: 16px;
   }

   .right-text p{
      text-align: center;
   }
   .right-text p{
      text-align: center;
   }
   .new-block .left-images{
      display: none;
   }

   .new-block .right-text {
      margin-left: 0;
   }

   .text-block-heading {
      font-size: 18px;
   }

   .four-block h2 {
      font-size: 18px;
   }

   .fourth-block{
      padding: 30px;
   }

   .fifth-block {
      padding: 15px;
      gap: 0px;
   }
   .fifth-right-part{
      width: 90%;
   }

   .upper-block h2, .down-block h2 {
      font-size: 24px;
   }

   .upper-block .images{
      flex-wrap: wrap;
   }

   .down-block span {
      font-size: 16px;
   }

   .images img {
      width: 60px;
      height: 40px;
   }

   .sixth-block {
      flex-direction: column;
      padding: 5px;
   }

   .sixth-left-part h1{
      padding-bottom: 10px;
   }

   .sixth-left-part {
      width: 100%;
      padding: 10px;
      text-align: center;
   }

   .sixth-left-part div{
      justify-content: center;
   }

   .sixth-right-part{
      display: none;
   }

   .seventh-block {
      flex-direction: column;
      gap: 5px;
   }

   .seventh-left-part {
      width: 90%;
   }
   .seventh-left-part h2 {
      font-size: 24px;
   }

   .seventh-right-part{
      width: 60%;
   }

   .eighth-block .text-content {
      font-size: 28px;
      text-align: center;
   }

   .images-row{
      display: flex;
      flex-direction: column;
      gap: 5px;
   }

   .ninth-block h2 {
      font-size: 24px;
   }

   .ninth-block .accordion{
      font-size: 18px;
   }

   .tenth-block h2 {
      font-size: 24px;
   }

   .tenth-block p {
      font-size: 14px;
   }
   .tenth-block .cta-button {
      margin-left: 0px;
   }
}

#wpcf7-f620-o1 > form > div.contact-form.contact-form_dark > div > div:nth-child(6) > div.form-column.checkbox-column > p{
  color: white;
}