html {
   scroll-behavior: smooth;
   }
body {
   font-family: "Montserrat", serif;
   font-optical-sizing: auto;
   font-style: normal;
   margin: 0;
   padding: 0;
   color: #333;
   margin-left: auto;
   margin-right: auto;
}

.container {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.row {
   display: flex;
   flex-direction: row;
}

.column {
   display: flex;
   flex-direction: column;
}

header {
   background: linear-gradient(to bottom, #FFC83D, #FFD56A);
   border-radius: 0 0 800px 800px;
   overflow: hidden;
   z-index: 1;
   position: relative;
   /* display: block; */
   height: 740px;
}

.header-main {
   height: 815px;
   /* background: linear-gradient(to bottom, #FFC83D, #FFD56A); */

}

.header-menu {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   width: 100%;
}

.header-menu img {
   width: 250px;
   margin-right: 20px;
   width: 30%;
}

.header-menu-body {
   display: flex;
   width: 100%;
   justify-content: space-between;
}

.header-menu-body a {
   text-decoration: none;
   color: #013040;
   font-size: 15px;
   /* padding-right: 15px; */
   /* margin-right: 15px; */
}

.header-menu-body a:hover {
   text-decoration: underline;
   font-size: 15px;
   font-weight: 600;
}


.header-title h1:nth-child(1) {
   font-size: 67px;
   font-weight: 800;
   color: white;
}

.header-title h1:nth-child(2) {
   font-size: 67px;
   font-weight: 800;
   color: #013040;
}


.header-circle {
   text-align: right;
   display: flex;
   align-items: flex-end;
   position: relative;
}


.header-circle-text {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   z-index: 2;
   background-color: #013040;
   color: white;
   text-align: center;
   border-radius: 250px 250px;
   width: 350px;
   height: 350px;
   padding: 20px;
   font-size: 55px;
   left: 338px;
   top: 373px;
   -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35);
}

.header-circle img {
   width: 700px;
   z-index: 2;
   position: relative;
   left: 320px;
   top: -75px;
}

main {
   color: black;
}

.block1 {
   justify-content: space-between;
   align-items: center;
}

.blockcenterVertical {
   justify-content: space-between;
   align-items: center;
   margin-top: 30px;
   margin-bottom: 30px;
}

/* Start Who We Are */

.who-we-are {
   background-color: #B7DCEE;
   text-align: center;
   padding-bottom: 50px;
}

.who-we-are-top {
   justify-content: center;
   margin-bottom: 30px;
}

.title-box {
   background-color: #B7DCEE;
   width: 50%;
   justify-items: right;
}

.title-box h2 {
   background-color: #f4b400;
   padding: 10px;
   border-radius: 0px 0px 0px 20px;
   color: #00324A;
   font-size: 36px;
   width: fit-content;
   -webkit-box-shadow: -10px 10px 25px 0px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: -10px 10px 25px 0px rgba(0, 0, 0, 0.35);
   box-shadow: -10px 10px 25px 0px rgba(0, 0, 0, 0.35);
}

.white-box {
   background-color: #fff;
   height: 30px;
   position: relative;
   width: 50%;
}

.who-we-are-left {
   width: 50%;
   align-items: center;
   display: flex;
}

.who-we-are-left h1 {
   font-size: 38px;
   text-align: left;
}

.who-we-are-right {
   width: 40%;
   text-align: left;
}

.who-we-are-right p {
   font-size: 18px;
}

/* End Who We Are */


/* Start Who We Help */

.who-we-help {
   background: rgb(0, 116, 163);
   background: linear-gradient(270deg, rgba(0, 116, 163, 0.9) 0%, rgba(246, 152, 153, 1) 100%);
   color: white;
}

.blue-box {
   background-color: #B7DCEE;
   height: 30px;
   position: relative;
   width: 50%;
}

.help-title-box h2 {
   background-color: #f4b400;
   padding: 10px;
   border-radius: 0px 0px 20px 0px;
   color: #00324A;
   font-size: 36px;
   width: fit-content;
   -webkit-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
-moz-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
}

.who-we-help-block {
   margin-top: 20px;
   margin-bottom: 40px;
}


.who-we-help-title {
   border-bottom: 5px solid white;
   font-size: 28px;
   font-weight: 600;
   padding-bottom: 10px;
   margin-bottom: 10px;
}

.who-we-help-left {
   margin-right: 20px;
}

.who-we-help-left-text {
   margin-bottom: 50px;
   height: 150px;
}

.who-we-help-button {
   background-color: #ffa726;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 50px;
   cursor: pointer;
   margin-bottom: 50px;
   -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35);
}

.who-we-help-button:hover {
   background-color: #fb8c00;
}

.who-we-help-left-desc {
   margin-top: 30px;
   color: black;
}

/*End Who We Help */

/* Start Who We Do */

.what-we-do-title {
   text-align: center;
   position: relative;
   top: -30px;
   z-index: 2;

}

.gradient-box-body {
   /* opacity: 0.0; */
   background: rgb(0, 116, 163);
   background: linear-gradient(270deg, rgba(0, 116, 163, 0.9) 0%, rgba(246, 152, 153, 1) 100%);
   height: 30px;
   position: relative;
   /* width: 50%; */
}



.title-box-what-we-do {
   background-color: #B7DCEE;
   width: 50%;
   justify-items: right;
}

.title-box-what-we-do h2 {
   background-color: #f4b400;
   padding: 10px;
   border-radius: 0px 0px 0px 20px;
   color: #00324A;
   font-size: 36px;
   width: fit-content;
   -webkit-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
-moz-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
}

.who-we-do {
   background-color: #B7DCEE;
   padding-top: 50px;
   padding-bottom: 50px;
   position: relative;
   top: -70px;
   z-index: 1;
}

.who-we-do-top {
   justify-items: right;
}

.who-we-do-top h1 {
   font-size: 38px;
   text-align: left;
   margin-bottom: 30px;
   margin-top: 20px;
}

.who-we-do-top p {
   font-size: 18px;
   text-align: left;
   margin-bottom: 30px;
}




.tabs button {
   padding: 10px;
   border: none;
   background: #B7DCEE;
   cursor: pointer;
   color: rgb(0, 0, 0);
   border-top: 2px solid rgba(0, 0, 0, 1);
   border-right: 2px solid rgba(0, 0, 0, 1);
   border-left: 2px solid rgba(0, 0, 0, 1);
   /* border-bottom: 2px solid #B7DCEE; */
   border-radius: 10px 10px 0px 0px;
   position: relative;
   top: 2px;
   opacity: 0.4;
}

.tabs button.active {
   background: #B7DCEE;
   color: rgb(0, 0, 0);
   border-left: 2px solid black;
   border-top: 2px solid black;
   border-right: 2px solid black;
   /* border-bottom: 2px solid #B7DCEE; */
   border-radius: 10px 10px 0px 0px;
   position: relative;
   z-index: 1;
   opacity: 1;
}

.tab-button-2 {
   position: relative;
   right: 10px;

}

.content-wrapper {
   border-left: 2px solid black;
   border-top: 2px solid black;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   border-radius: 0px 0px 10px 10px;
}

.content {
   padding: 15px;
   display: none;
}

.content1tab p {
   width: fit-content;
   padding: 10px;
   font-size: 24px;
}

.content.active {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.content2tab {
   display: flex;
   flex-direction: column;
   margin-right: 20px;
}

.content2tab p {
   padding: 5px;
}



/*End Who We Do */

/* Start Services */

.Services {
   background-color: #013040;
   color: white;
   position: relative;
   bottom: 70px;
   height: 350px;
}
.Services-title-box>h2{
   -webkit-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
   -moz-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
   box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
   
}
.blue-box {
   background-color: #B7DCEE;
   height: 30px;
   position: relative;
   width: 50%;
}

.Services-title-box h2 {
   background-color: #f4b400;
   padding: 10px 20px;
   border-radius: 0px 0px 20px 0px;
   color: #00324A;
   font-size: 36px;
   width: fit-content;
}

.Services-block {
   margin-top: 20px;
   margin-bottom: 40px;
   justify-content: space-between;
}

.Services-block-item img {
   color: white;
   fill: white;
}

.Services-block-item h1 {}

.Services-block-item:hover {
   color: #f4b400;
}

.Services-title {
   border-bottom: 5px solid white;
   font-size: 28px;
   font-weight: 600;
   padding-bottom: 10px;
   margin-bottom: 10px;
}


.Services-text-text {
   margin-bottom: 50px;
   height: 150px;
}

.Services-button {
   background-color: #ffa726;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 50px;
   cursor: pointer;
   margin-bottom: 50px;
}

.Services-button:hover {
   background-color: #fb8c00;
}

.Services-left-desc {
   margin-top: 30px;
   color: black;
}


/* End Services */



/* Leads-Sales */

.Leads-Sales {
   background-color: #FEEED7;
   padding: 30px 50px;
   color: #013040;
   position: relative;
   bottom: 140px;
   border-radius: 0px 0px 50px 0px;
   align-items: flex-end;
   -webkit-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
-moz-box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
box-shadow: -10px 10px 25px 0px rgba(0,0,0,0.35);
}

.Leads-Sales h1 {
   font-size: 38px;
   margin-bottom: 20px;
   width: 100%;
}

.Leads-Sales p {
   font-size: 18px;
   margin-bottom: 50px;
}

.Leads-Sales-button {
   background-color: #FFFFFF;
   color: #013040;
   border: none;
   padding: 20px 40px;
   border-radius: 50px;
   cursor: pointer;
   margin-bottom: 40px;
   font-size: 24px;
   font-weight: 600;
}

.Leads-Sales-button:hover {
   background-color: #fb8c00;
   color: white;
}

/* Leads-Sales */

/* Form-block */

.form-block {
   position: relative;
   bottom: 90px;
}

.form-block>div {
   align-items: center;
}

.form-block-left {
   width: 50%;
}

.form-block-left h1 {
   font-size: 38px;
   margin-bottom: 20px;
   width: 100%;
}

.form-block-left p {
   font-size: 18px;
   margin-bottom: 20px;
   width: 80%;
}

.form-block-right {
   width: 50%;
}

.form-block-right>form>input {
   margin-bottom: 20px;
}

.form-block-right>form>textarea {
   margin-bottom: 20px;
}

.form-block-right>form>input[type="text"] {
   border: 0px solid #cccccc;
   border-bottom: 2px solid #013040;
   outline: none;
   height: 24px;
   color: #000000;
   font-size: 24px;
   padding-bottom: 20px;
}

.form-block-right>form>input[type="email"] {
   border: 0px solid #cccccc;
   border-bottom: 2px solid #013040;
   outline: none;
   height: 24px;
   color: #000000;
   font-size: 24px;
   padding-bottom: 20px;
}

.form-block-right>form>textarea {
   border: 0px solid #cccccc;
   border-bottom: 2px solid #013040;
   outline: none;
   height: 120px;
   color: #000000;
   font-size: 24px;
   /* padding-bottom: 20px; */
}


.form-button {
   background-color: #FFFFFF;
   color: #013040;
   padding: 20px 40px;
   border-radius: 50px;
   cursor: pointer;
   font-size: 24px;
   font-weight: 600;
}

.form-button:hover {
   background-color: #fb8c00;
   color: white;
}


/* Form-block */



footer {
   display: flex;
   background: linear-gradient(to bottom, #013040, #013040);
   padding: 50px 20px;
}


.flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}


.logo-text {
   text-decoration: none;
   text-align: left;
}

.logo-text p {
   color: #FFC83D;
   text-decoration: none;
   text-align: left;
   font-size: 16px;
   font-weight: 400;
}

.logo-text img {
   width: 150px;
   margin-bottom: 20px;
}

.logo-text p {
   color: #FFC83D;
   max-width: 420px;
   text-align: left;
   padding-right: 30px;
   font-size: 18px;
}

.menu-footer {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   color: white;
   width: 50%;
   justify-content: flex-end;
}

.footer-menu {
   display: flex;
   flex-direction: column;
   text-align: left;
   margin-left: 30px;
}

.footer-menu h2 {
   font-size: 18px;
   font-weight: 900;
   margin-bottom: 15px;
}

.footer-menu a {
   font-size: 16px;
   color: white;
   text-decoration: none;
   margin-bottom: 10px;
}

.footer-menu a:hover {
   color: #FFC83D;
   text-decoration: none;
   margin-bottom: 10px;
}

.menu-mob {
   display: none;

}

.hidden {
   display: none;
}


.header-menu-body>img {
   display: none;
}

/* Tablet styles */
@media (max-width: 1024px) {
   body {
      /* overflow: hidden; */
   }

   /* header */

   header {
      height: 600px;
      width: 100%;
   }

   .header-main {
      width: 100%;
   }

   .header-menu-body {
      display: flex;
      width: 66%;
   }

   .header-title {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
   }

   .header-circle-text {
      width: 250px;
      height: 250px;
      font-size: 36px;
      left: 117px;
      top: 344px;
   }

   /* header */

   .block1 {
      width: 86vw;
      margin-left: 0px;
      margin-right: 0px;
   }




}

@media (max-width: 768px) {
   body {
      /* overflow: hidden; */
   }

   .column {
      justify-content: flex-start;
   }

   .menu-mob {
      display: block;
   }

   .menu-mob>a>img {
      /* margin-top: 40px; */
      width: 40px;
      margin-left: 35px;
   }

   header {
      height: 600px;
      width: 100%;
   }

   .header-menu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* height: 100px; */
   }

   .header-menu-body {
      /* display: none; */
      flex-direction: column;
      position: absolute;
      padding-top: 20px;
      padding-left: 20px;
      background-color: #FFC83D;
      width: 200px;
      border-radius: 0px 0px 20px 0px;
      top: 0px;
      height: 320px;
      left: -220px;
      /* Initially hidden off-screen */
      transition: left 0.3s ease-in-out;
      /* Animation for sliding in */
   }

   .header-menu-body.show {
      left: 0;
      /* Slide in from the left */
   }

   .header-menu-body>img {
      display: block;
      width: 250px;
      margin-right: 0px;
      /* margin-top: 30px; */
      /* width: 30%; */
   }

   .header-menu-body a {
      margin-bottom: 15px;
      font-size: 26px;
   }

   .header-menu-body img {
      width: 25px;
      /* margin-left: 35px; */
      margin-bottom: 20px;
   }

   .header-title {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
   }

   .header-title h1:nth-child(1) {
      font-size: 56px;
      font-weight: 800;
      color: white;
   }

   .header-title h1:nth-child(2) {
      font-size: 56px;
      font-weight: 800;
      color: #013040;
   }

   .header-circle {}

   .header-circle img {
      width: 700px;
      z-index: 2;
      position: relative;
      left: 195px;
      top: -75px;
   }

   .header-circle-text {
      width: 250px;
      height: 250px;
      font-size: 36px;
      left: 32px;
      top: 344px;
   }


   .block1 {
      width: 100vw;
      margin-left: 0px;
      margin-right: 0px;
      flex-direction: column;
   }

   .blockcenterVertical {
      flex-direction: column;
   }

   .title-box {
      width: 60%;
   }

   .white-box {
      width: 40%;
   }

   .container {
      width: 100%;
   }

   .column {}

   .who-we-are-block,
   .who-we-help-block,
   .who-we-do-block,
   .Services-block,
   .form-block-conteiner {
      flex-direction: column;
      width: 100%;
      align-items: center;
   }

   .who-we-are-left,
   .who-we-help-left,
   .who-we-do-top,
   .form-block-left {
      margin-bottom: 20px;
      width: 80%;
   }

   .who-we-are-right,
   .who-we-help-right,
   .who-we-are-botoom,
   .form-block-right {
      width: 80%;
   }

   .who-we-are-botoom {
      width: 95%;
   }

   .who-we-help-left {
      margin-right: 0px;
   }

   .who-we-help-left-text {
      margin-bottom: 20px;
   }

   .who-we-help-right-text {
      margin-bottom: 20px;
   }

   .Services {
      height: 100%;
   }

   .Services-block>div {
      margin-bottom: 30px;
   }

   .what-we-do-title {
      top: -35px;
   }

   .Leads-Sales {
      padding: 0px;
      align-items: center;
      margin-top: 70px;
      padding-top: 40px;

   }

   .Leads-Sales h1 {
      margin-top: 20px;
      width: 80%;
      padding: 0px;
   }

   .Leads-Sales p {
      width: 80%;
      padding: 0px;
   }

   .Services-title-box {
      width: 70%;
   }

   .Services-title-box>h2 {
      font-size: 24px;
   }


}

/* Mobile styles */
@media (max-width: 480px) {

   body {
      /* overflow: hidden; */
   }

   .column {
      justify-content: flex-start;
   }

   .menu-mob {
      display: block;
   }

   .menu-mob>a>img {
      /* margin-top: 40px; */
      width: 40px;
      margin-left: 13px;
   }

   header {
      width: 100%;
      height: 430px;
      border-radius: 0 0px 400px 400px;
   }

   .header-menu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* height: 100px; */
   }

   .header-menu-body {
      /* display: none; */
      flex-direction: column;
      position: absolute;
      padding-top: 20px;
      padding-left: 40px;
      background-color: #FFC83D;
      width: 200px;
      border-radius: 0px 0px 20px 0px;
      top: 0px;
      height: 320px;
      left: -300px;
      /* Initially hidden off-screen */
      transition: left 0.3s ease-in-out;
      /* Animation for sliding in */
      z-index: 5;
      padding-bottom: 90px;
   }

   .header-menu-body.show {
      left: 0;
      /* Slide in from the left */
      width: 100%;
      padding-bottom: 90px;
   }

   .header-menu-body>img {
      display: block;
      width: 250px;
      margin-right: 0px;
      /* margin-top: 30px; */
      /* width: 30%; */
   }

   .header-menu-body a {
      margin-bottom: 15px;
      font-size: 26px;
   }

   .header-menu-body img {
      width: 25px;
      /* margin-left: 35px; */
      margin-bottom: 20px;
   }

   .header-title {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
   }

   .header-title h1:nth-child(1) {
      font-size: 36px;
      font-weight: 800;
      color: white;
   }

   .header-title h1:nth-child(2) {
      font-size: 36px;
      font-weight: 800;
      color: #013040;
   }

   .header-circle {
      align-items: center;
      justify-self: center;
   }

   .header-circle img {
      width: 100vw;
      position: unset;
   }

   .header-circle-text {
      width: 150px;
      height: 150px;
      position: relative;
      font-size: 26px;
      top: -40px;
      left: 0px;
      margin-left: auto;
      margin-right: auto;
      z-index: 2;
   }

   .title-box {
      width: 100%;
   }

   .title-box h2 {
      font-size: 24px;
   }

   .who-we-help-left-text {
      margin-bottom: 35px;
      height: fit-content;
   }

   .help-title-box h2 {
      font-size: 24px;
   }

   .title-box-what-we-do h2 {
      font-size: 24px;
   }

   .white-box {
      width: 40%;
   }

   .flex-container {
      flex-direction: column;
   }

   .menu-footer {
      width: 100%;
      align-items: flex-start;
      justify-content: left;

   }

   .footer-menu {
      margin: 0px;
      margin-right: 20px;
      margin-top: 20px;
   }

   .blue-box {
      width: 30%;
   }

   .help-title-box {
      width: 75%;

   }

   .what-we-do-title {
      top: -50px;
   }

   .title-box-what-we-do {
      width: 75%;
   }

   .gradient-box {
      width: 30%;
   }
}