@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

@font-face {
  font-family: 'SourceSansPro-light';
  src: url('../fonts/SourceSansPro-Light.ttf'); /*URL to font*/
}
@font-face {
  font-family: 'SourceSansPro-regular';
  src: url('../fonts/SourceSansPro-Regular.ttf'); /*URL to font*/
}
@font-face {
  font-family: 'SourceSansPro-semibold';
  src: url('../fonts/SourceSansPro-Semibold.ttf'); /*URL to font*/
}
@font-face {
  font-family: 'SourceSansPro-bold';
  src: url('../fonts/SourceSansPro-Bold.ttf'); /*URL to font*/
}
@font-face {
  font-family: 'SourceSansPro-black';
  src: url('../fonts/SourceSansPro-Black.ttf'); /*URL to font*/
}
@font-face {
  font-family: 'gt';
  src: url('../fonts/GTWalsheimPro-Medium.ttf'); /*URL to font*/
}

* {
    margin: 0px;
    box-sizing: border-box;
    font-family: 'SourceSansPro-regular';
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol {
    margin: 0px;
    padding: 0px;
  }
  a,
  a:hover {
    text-decoration: none;
  }
  img {
    width: 100%;
    height: auto;
  }
  li {
    list-style: none;
  }
  :root {
    --sspr : 'sourceSansPro-regular';
    --sspb : 'sourceSansPro-bold';
    --ssps : 'sourceSansPro-semibold';
    --sspl : 'sourceSansPro-light';
    --sspbk : 'sourceSansPro-black';
    --primary:#4682b4;
    --secondery: #f8f4f4;
    --sub-1: #333333;
    --sub-2: #828282;
    --sub-3 : #BDBDBD ;
    --sub-4: #E0E0E0;
    --white: #ffffff;
    --black: #000000;
  }
#main-wrapper {
  overflow: hidden;
    position: relative;
    max-width: 1900px;
    margin: 0 auto;
    width: 100%;
}
.top-areas {
  position: relative;
  .first-pic img {
    position: absolute;
    width: 100%;
    height: 640px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
}
.banner-area {
  padding: 150px 0px 270px 0px;
  position: relative;
  background-color: #f9f9fb;
  .banner-heading {
    font-size: 43px;
    color: var(--primary);
    font-family: var(--sspb);
    line-height: 110%;
    margin-bottom: 20px;
    b {
      font-size: 56px;
      font-family: var(--sspbk);
    }
  }
  .banner-para {
    font-family:  "Merriweather", serif;
    font-weight: 400;
    color: #656565;
    margin-bottom: 14px;
    font-size: 24px;
  }
  .right-pic {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 158px;
    z-index: 3;
    img {
      max-height: 550px;
      object-fit: contain;
      object-position: right bottom;

    }
  }
  .right-ab {
    width: 50%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 2;
  }
}
.banner-area .left {
  position: relative;
  z-index: 4;
}
.sec-section {
  padding: 0px 0px 225px;
  position: relative;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* background-color: #f4f4f4; */
  margin-top: 0px;
  /* .first-pic img {
    position: absolute;
    width: 100%;
    height: 640px;
    left: 0px;
    right: 0px;
    top: -238px;
  } */
  .content {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background: #E1E1E1;
    background: linear-gradient(180deg, rgba(225, 225, 225, 1) 0%, rgba(254, 254, 254, 1) 100%);
    padding: 25px;
    position: relative;
    border-radius: 10px;
    /* margin-top: 0px; */
    top: -94px;
    .heading {
      font-size: 40px;
      font-family: var(--sspb);
      color: var(--primary);
    }
    .items {
      position: relative;
      gap: 15px;
      display: flex;
      justify-content: end;
      padding-left: 10px;
      .item {
        width: 32%;
        .pic {
          width: 80px;
          height: 70px;
          box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
          background-color: #fff;
          position: relative;
          border-radius: 10px;
          margin: 0px auto;
          img {
            position: absolute;
            height: 55px;
            width: 55px;
            object-fit: contain;
            object-position: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        h6 {
          font-size: 19px;
          font-family: var(--sspb);
          color: #535353;
          margin-top: 10px;
          text-align: center;
        }
      }
    }
  }
  
}
.section-title {
  font-size: 50px;
  font-family: var(--sspb);
  color: var(--primary);
}
.third-section {
  position: relative;
  z-index: 4;
  padding: 0px 0px 60px;
  background: url(../images/third-s-bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  .btm-content {
    margin-bottom: 80px;
    margin-top: -233px;
    .item {
      background-color: #fff;
      border-radius: 6px;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      margin: 14px 18px ;
      min-height: 250px;
      p {
        font-size: 18px;
        padding: 14px;
        font-family: var(--sspr);
        b {
          font-family: var(--sspb);
        }
        span {
          color: var(--primary);
        }
      }
    }
    .slick-arrow {
      position: absolute;
      bottom: -45px;
      border: none;
      color: #656565;
      padding: 0px 4px;
      font-size: 26px /*20px*/;
      background-color: transparent;
    }
	/* Position both arrows relative to the center */
	.slick-arrow.prev-arrow,
	.slick-arrow.next-arrow {
	  left: 50%;
	  transform: translateX(-50%);
	}

	/* Shift them left/right from the center to create spacing */
	.slick-arrow.prev-arrow {
	  transform: translateX(-150%);  /* move further left */
	}

	.slick-arrow.next-arrow {
	  transform: translateX( 50% ); /* move a bit right */
	}
}
.right-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  .item {
    border-bottom: 1px solid #595959;
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px 4px;
    width: 80%;
    img {
      width: 50px;
    }
    h5 {
      font-size: 20px ;
      font-family: var(--sspb);
      color: #595959;
    }
    p {
      font-family: 'merriweather', serif;
      font-size: 18px;
      color: #595959;
    }
  }

}
.right-items .item:last-child {
  border: none;
}
.left {
  position: relative;
  .bg {

  }
  .above {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
  }
}
}
.fourth-section {
  padding: 80px 0px;
  background-image: url(../images/fourth-s-bg.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  .work-item {
    display: flex;
    gap: 16px;
    align-items: center;
    .pic {
      width: 70px;
      height: 80px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      position: relative;
      img {
        position: absolute;
        height: 50px;
        width: 50px;
        object-fit: contain;
        object-position: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .cont {
      width: 80%;
      h5 {
        font-size: 23px;
        font-family: var(--sspb);
        color: var(--primary);
        margin-bottom: 4px;
      }
      p {
        font-size: 16px;
        font-family: 'merriweather', serif;
        color: #595959;
      }
    }
  }
}
.fifth-section {
  padding: 70px 0px 55px;
  background: url(../images/fifth-s-bg.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  .testi-slider {
    .item {
      padding: 24px 16px;
      position: relative;
      background-color: #fff;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      margin: 16px 30px 30px; 
      border-radius: 10px;
      min-height: 230px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      img {
        width: 70px;
        object-fit: cover;
        object-position: center;
        border-radius: 80px;
      }
      p {
        font-size: 20px;
        font-family: var(--sspr);
        color: #595959;
      }
    }
  }
}
.sixth-section {
  padding: 60px 0px;
  .item {
    padding: 20px;
    margin: 0px 20px;
  }
}
.seventh-section {
  background-color: #eeeded;
  padding: 60px 0px;
  position: relative;
  .item {
    background-color: #fff;
    border-radius: 6px;
    padding: 15px 15px;
    margin: 15px 16px 20px;
    min-height: 150px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    p {
      font-family: 'merriweather', serif;
      font-size: 16px;
      color: #595959;
    }
  }
  .back-pic img {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 27%;
    height: 100%;
    object-fit: cover;
  }
}
.eight-section {
  padding: 60px 0px; 
  .pricing-content {
    width: 80%; 
    margin: 0px auto;
    table {
      border-radius: 15px;
      overflow: hidden;
      outline: 1px solid #E0E0E0; 
      th {
        background: #508BBC;
        background: linear-gradient(180deg, rgba(80, 139, 188, 1) 0%, rgba(96, 154, 203, 1) 100%);
        color: #fff;
        font-family: var(--sspb);
        font-size: 20px;
      }
      th:nth-child(1) {
        /* border-top-left-radius: 10px; */
      }
      td {
        font-family: var(--sspr);
        font-size: 20px;
        color: #595959;
      }
    }
    .primary-btn {
      width: max-content;
      margin-left: auto;
    }
  }
}
.ninth-section {
  padding: 50px 0px 30px;
  background: url(../images/faq-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.accordion-button {
  color: var(--primary) ;
  font-size: 18px;
  font-family: var(--sspb);
}
.accordion-button:not(.collapsed) {
  box-shadow: none;
  color: #fff;
	background: #636363;
	background: linear-gradient(180deg, rgba(138, 138, 138, 1) 0%, rgba(120, 120, 120, 1) 100%);
  /*background: #C6C5C5;
  background: linear-gradient(180deg, rgba(198, 197, 197, 1) 0%, rgba(170, 170, 170, 1) 100%);*/
  border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
.accordion-item {
  margin-bottom: 10px;
  border-radius: 10px !important;
  overflow: hidden;
}
.accordion-body p {
  font-family: 'merriweather', serif;
  font-size: 16px;
  color: #535353
}
.footer-area {
  background-color: #565656;
  padding: 60px 0px 0px;
  .wpcf7-form {
    p {
      margin-bottom: 16px
    }
  }
  .comn-inp {
    padding: 10px 10px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #E1E1E1;
    font-family: var(--sspr);
    color: #535353;
    font-size: 18px;
  }
  .wpcf7-response-output {
    color: #fff;
  }
  .f-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    h5 {
      font-size: 30px;
      font-family: var(--sspb);
      color: #fff;
    }
    p {
      font-family: var(--sspr);
      font-size: 16px;
      color: #fff
    }
    a {
      font-size: 26px;
      color: #fff;
    }
  }
  .copy {
    padding: 18px 0px;
    text-align: center;
    font-size: 14px;
    font-family: 'gt';
    color: #f8f4f4;
    background-color: #2f2f2f;
  }
}
.submit-btn {
  background-color: var(--primary);
  color: #fff;
  font-family: var(--sspb);
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  width: 100%;
  text-align: center;
  transition: 0.2s ease-in-out;
  border: 1px solid transparent;
}
.submit-btn:hover {
  background-color: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}

















@media (min-width: 1250px) { 
  /* .banner-area {
    .right-pic {
      
        img {
        
          object-fit: contain;
      }
    }
} */
}

  @media (max-width: 1440px) { 
    
  }

  @media (max-width: 1199px) { 

  }
  @media (max-width: 1099px) { 
      .banner-area {
        padding: 120px 0px 133px 0px;
        .right-pic {
          img {
            max-height: 440px;
          }
        }
    }
    .sec-section {
      .content {
       
        .heading {
          font-size: 34px;
        }
      }
    }
  
  
  }

  @media (max-width: 991px) { 
    .banner-area {
      .banner-heading {
        font-size: 35px;
        b {
          font-size: 45px;
        }
      }
      .banner-para {
        font-size: 18px;
      }
      .right-pic {
        img {
          max-height: 403px;
        }
      }
    }
    .sec-section {
      padding: 50px 0px 165px;
      margin-top: 0px;
      .content {
        top: -120px;
        .items {
          justify-content: center;
          .item {
            width: 23%;
          }
        }
        .heading {
          font-size: 30px;
          text-align: center;
          margin-bottom: 16px;
        }
      }
    }
    .third-section {
      padding: 0px 0px 40px;
      & .btm-content {
          & .item {
              p {
                  font-size: 16px;
                  padding: 14px;
                  font-family: var(--sspr);
              }
          }
          .slick-arrow.next-arrow {
            right: 47%;
          }
          .slick-arrow.prev-arrow {
            left: 47%;
          }
      }
  }
  .top-areas {
    .first-pic img {
        height: 585px;
    }
}
.section-title {
  font-size: 44px;
}

.sixth-section , .seventh-section , .fifth-section , .fourth-section , .eight-section , .ninth-section {
  padding: 50px 0px;
}
.seventh-section {
  & .item {
      p {
          font-size: 15px;
      }
  }
}
.eight-section {
  .pricing-content {
      width: 100%;
  }
}





  }
  @media (max-width: 767px) { 
    .banner-area {
      padding: 120px 0px 0px 0px;
      .right-pic {
        position: relative;
        margin-top: 30px;
        top: 0px;
      }
    }
    .sec-section {
      .content {
        .items {
          .item {
            width: 30%;
          }
        }
      }
    }
    .section-title {
      font-size: 40px;
    }
    .third-section {
      .btm-content {
        margin-bottom: 80px;
        margin-top: -182px;
        .item {
          min-height: 200px;
        }
        .slick-arrow.next-arrow {
          right: 46%;
        }
        .slick-arrow.prev-arrow {
          left: 46%;
        }
      }
    }
    .sec-section {
      padding: 50px 0px 100px;
      margin-top: 0px;
    }
    .fifth-section {
      & .testi-slider {
          .item {
              padding: 24px 18px;
              position: relative;
              background-color: #fff;
              box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
              margin: 10px 8px 20px;
              border-radius: 10px;
              min-height: 230px;
              display: flex ;
              flex-direction: column;
              gap: 16px;
              p {
                font-size: 18px;
            }
          }
      }
  }
  .sixth-section, .seventh-section, .fifth-section, .fourth-section, .eight-section, .ninth-section {
    padding: 40px 0px;
}
.seventh-section {
  .item {
      background-color: #fff;
      border-radius: 6px;
      padding: 10px 10px;
      margin: 10px 6px 10px;
      min-height: 150px;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
      p {
        font-size: 14px;
      }
  }
}

.eight-section {
  & .pricing-content {
      table {
          
      }
  }
}
.accordion-button {
  font-size: 17px;
}
.accordion-item p {
  font-size: 15px;
}
.footer-area {
  padding: 40px 0px 0px;
}
.footer-area {
  & .f-item {
      h5 {
          font-size: 28px;
          text-align: center;
      }
      p {
        font-size: 16px;
        text-align: center;
      }
      a {
        text-align: center;
        font-size: 20px;
      }
  }
}
.eight-section {
    & .pricing-content {
        & table {
            th {
             
                font-size: 10px;
            }
			            td {

                font-size: 10px;
               
            }
        }
    }
}

  }
  @media (max-width: 576px) {


    .sec-section {
      & .content {
        padding: 20px 10px;
        .heading {
          font-size: 22px;
        }
            & .items {
              gap: 8px;
              row-gap: 15px;
                .item {
                    width: 33%;
                    h6 {
                      font-size: 16px;
                    }
                    .pic {
                      width: 70px;
                      height: 60px;  
                      img {
                        width: 45px;
                        height: 45px;
                      }
                    }
                }
            }
        }
    }
    .banner-area {
      & .right-pic {
          img {
              max-height: 323px;
          }
    }
  }
.section-title {
  font-size: 32px;
}
.third-section {
  & .btm-content {
    margin-bottom: 50px;
    .slick-arrow {
      bottom: -20px;
    }
      .slick-arrow.prev-arrow {
          left: 42%;
      }
      .slick-arrow.next-arrow {
        right: 42%;
    }
  }
}
.fourth-section {
  & .work-item {
      & .cont {
        h5 {
          font-size: 20px;
          .seventh-section {
    .back-pic img {
        position: relative;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        height: 200px;
        object-fit: cover;
        left: 0px;
    }
};
        }
          p {
              font-size: 14px;
          }
      }
  }
}
.seventh-section {
        padding-bottom: 0px;
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        padding: 0px 0px 20px;

  .item {
    p {
      font-size: 17px;
    }
  }
    .back-pic img {
        position: relative;
        width: 100%;
        height: 200px;
        object-fit: cover;
        left: 0px;
    }
}






  }

  @media (max-width: 400px) {
    .third-section {
      & .btm-content {
        
        
          .slick-arrow.prev-arrow {
              left: 40%;
          }
          .slick-arrow.next-arrow {
            right: 40%;
        }
      }
    }

  }