$btn-color : linear-gradient(180deg, #FF5B05 0%, #FF7D39 100%);
$white : #FFFFFF;
$black: #000000;
$border-color :#FF5D5D;
$header-linkbg : #FFE9E9;
$text-black: #111111;
$rating-text: #474747;
$second-sectionbuttonbg : #FFD5D5;
$secnd-sectionbuttonborder: #FF8383;
$home-secondsectionBtn: linear-gradient(180deg, #FF7575 0%, #FF4444 100%);
$videoSection-smallhead: #8F8F8F;
$card-bg: #FFF4F4;
$card-border: #FF4545;
$card-head: #1D1D1D;
$card-p: #484848;
$footer-color: #9E9E9E;
$bottom-small-text: #3C3C3C;
$list-cardbg: #FFF1F1;
$list-cardborder: #939393;
$owlcarousel-blachead: #282828;
$carousel-headborder: #FF3333;
$bg: #FFE5E5;
$light-red: #ff7070;
$button-red: linear-gradient(180deg, #FF7575 0%, #FF4444 100%);
$features-border: #D4D4D4;
$card-bg-back: #FFE2E2;

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

* {
  font-family: "Urbanist", sans-serif !important;
}



// Blog section
.blog-section {


  .blog-4th {
    display: flex;
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px 94px;

    @media (max-width: 600px) {
      display: flex;
      gap: 20px;
      padding: 10px;
      padding: 0px 14px;
      flex-direction: column;
      flex-wrap: wrap;
    }


    .blog-card {
      flex: 1.5;
      background-image: url('../images/Rectangle_414.png');
      background-size: cover;
      background-position: center;
      border-radius: 20px;
      position: relative;
      min-height: 260px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

      .blog-in {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 20px;
        gap: 10px;

        .user_details {
          display: flex;
          flex-direction: row; // default is row, but good to be explicit
          align-items: center; // vertically center items
          gap: 10px;
        }


        .blog-link {
          display: inline-block;
          background: #FFFFFF;
          color: #000000;
          font-size: 14px;
          border-radius: 20px;
          padding: 7px 48px;
          text-decoration: none;
          font-weight: 500;
        }

        h4 {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 32px;
          color: #FFFFFF;
        }

        p {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          color: #CFCCCC;
        }

        small {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 16.1015px;
          color: #FFFFFF;
          flex: none;
          order: 1;
          flex-grow: 0;
        }
      }
    }

    .subscribe-box {
      flex: 0.5;
      background-image: url('../images/sidebackground.png');
      background-size: cover;
      background-position: center;
      border-radius: 20px;
      padding: 20px;
      text-align: center;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

      .subscribe-icon {

        // width: 100%;

      }

      .subscribe-content {
        margin-top: 30px;

        p {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 21px;
          color: #000000;
        }

        .subscribe-btn {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          background: $btn-color !important;
          color: #fff;
          padding: 12px 24px;
          font-size: 16px;
          border: none;
          border-radius: 24px;
          cursor: pointer;
          margin-bottom: 30px;
        }
      }
    }
  }


  .blog-5th {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 105px;

    @media (max-width: 768px) {
      flex-direction: column;
      padding: 30px 20px;
    }


    .crm-list {
      width: 30%;

      @media (max-width: 768px) {
        width: 100%;
      }


      .crm-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 11px 4px;

        .text-group {
          h4 {
            font-family: 'SF Pro Display';
            font-style: normal;
            font-weight: 400;
            font-size: 20.1714px;
            margin-bottom: 1px;
            color: #111111;
          }

          small {
            color: #666;
            font-size: 13px;
          }
        }

        .arrow {

              display: none;
          font-size: 20px;
          color: #000;
        }
      }

      hr {
        border: none;
        border-top: 1px solid #ddd;
        margin: 0;
      }
    }


  }
}

.contact-section {
  .contact-box {
    .main-container {
      .left-panel {
        flex: 0.4;
        padding: 11% 7% 5% 4%;
        margin: 6% -20% 2px -13%;
        background-image: url(../images/contactbg2.png);
        height: 40%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 20px;

        @media (max-width:1280px) {
          flex: 1;
          margin: 10% 3%;
        }

        @media (max-width:600px) {
          margin: 0 !important;
        }

        .info-box {
          border-radius: 30px;
          margin: 8px 8px 10px 15px;
          width: 100%;
          min-height: 119px;

          @media (max-width:600px) {
            margin: 8px 0px 9px 4px;
          }

          img {
            padding-top: 0px !important;
          }

          .office {
            margin-top: -3px;
            margin-left: 9px !important;

          }

          .d-flex {
            margin-top: -3px !important;
            margin-left: 9px !important;

            strong {
              font-family: 'SF Pro Display';
              font-style: normal;
              font-weight: 400;
              font-size: 22px;
            }

            p {
              font-family: 'SF Pro Display';
              font-style: normal;
              font-weight: 400;
              font-size: 13.71px;
              line-height: 23px;
              color: #9E9E9E;
              margin: 0;
            }
          }

        }

      }

      .right-panel {
        flex: 1;
        padding: 30px;
        border-radius: 0;
        flex: 1;
        padding: 5%;
        border-radius: 20px;
        display: flex;
        justify-content: flex-end;

        @media (max-width:1280px) {
          flex: 1;
          margin: 0% 7% 3px -10%;
          padding: 25px;

        }

        @media (max-width:600px) {

          padding: 0;
          justify-content: center;
          margin-top: 3rem !important;

          button {
            margin: 0 auto;
            margin-bottom: 1rem !important;
          }
        }

        .right_box {
          .forms {

            input,
            textarea {
              font-family: 'SF Pro Display';
              font-style: normal;
              font-weight: 400;
              font-size: 18px;
              line-height: 16px;
              display: flex;
              color: #000000;
            }


          }

        }
      }
    }
  }
}

.home-section {
  .home-inner-section {
    .first_section {
      .text-content {
        .bottom-small-text {
          p {
            font-family: 'SF Pro Display';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 55px;
            text-align: center;
            color: #111111;
          }
        }
      }
    }
  }

  .sixth-section {
    .lin-bgdiv {
      .head-section {
        .main-head {
          p {
            @media (max-width: 600px) {
              padding: 0 7%;
              line-height: 23px;
            }

          }
        }
      }
    }
  }

  .home-fifthSection {
    .fifthSection-bg {
      .list-section {
        .list-card {
          .text {
            @media (max-width: 600px) {
              font-style: normal;
              font-weight: 300;
              font-size: 20px;
              line-height: 27px;
              color: #000000;
            }

          }
        }
      }
    }
  }

  .seventh-section {
    .head-section {
      .main-head {
        p {
          @media (max-width: 600px) {
            padding: 0 7%;
            line-height: 23px;
            margin-top: 20px;
          }
        }
      }
    }
  }

  .eighth-section {
    .head-section {
      .main-head {
        p {
          @media (max-width: 600px) {
            line-height: 22px;
          }
        }
      }
    }
  }

}


.feature-section {
  .home-inner-section {
    .first_section {
      .text-content {
        .bottom-small-text {
          p {
            margin: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 26px;
            text-align: center;
            color: #3C3C3C;
            padding: 0 6%;
            margin-top: 1.5rem;
          }
        }

        .highlight-text {
          h2 {
            @media (max-width: 600px) {
              margin: 57px -2px -2px;
              font-style: normal;
              font-weight: 700;
              font-size: 26px;
              line-height: 36px;
              text-align: center;
              color: #111111 !important;
            }
          }
        }
      }
    }
  }

  .home-fifthSection {
    .btn-div {
      button {
        @media (max-width: 600px) {
          padding: 12px 24px;
          gap: 8px;
          border-radius: 34px;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #000000;
          margin-top: -18px;
        }
      }
    }

    .div-sections {
      h4 {
        @media (max-width: 600px) {
          font-style: normal;
          font-weight: 400;
          font-size: 24px;
          line-height: 34px;
          text-align: center;
          color: #111111;
          margin: 0;
          margin-top: 20px;
        }
      }
    }
  }

  .home-secondSection {
    .head {
      .btn-div {
        button {
          @media (max-width: 600px) {
            padding: 12px 30px;
            gap: 10px;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            margin-top: -58px;
          }
        }
      }

      .div-sections {
        h4 {
          @media (max-width: 600px) {
            font-style: normal;
            font-weight: 400;
            font-size: 24px;
            line-height: 32px;
            text-align: center;
            color: #111111;
            margin: 0;
            margin-top: 20px;
          }
        }
      }
    }
  }

  .sixth-section {
    .lin-bgdiv {
      .head-section {
        .main-head {
          h4 {
            @media (max-width: 600px) {
              margin: 0;
              margin-top: 16px;
              font-weight: 400;
              font-size: 24px;
              line-height: 32px;
              text-align: center;
              color: #111111;
            }
          }
        }
      }
    }
  }

  .seventh-section {
    .content-div {
      .btn-div {
        button {
          @media (max-width: 600px) {
            background: linear-gradient(180deg, #FF5B05 0%, #FF7D39 100%);
            border-radius: 34px;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #FFFFFF;
            padding: 12px 24px;
            border: none;
            outline: none;
            margin-bottom: 18px;
          }
        }
      }
    }
  }

}









@media (max-width: 900px) {
  .footer-logo {
    margin-top: -38px;
    margin-left: 17px;

  }
}

.footer-block {
  .grid {
    .second {
      @media (max-width: 600px) {
        margin-top: -7px;
      }
    }

    .first {
      .footer-column0 {
        .footer-logo {
          @media (max-width: 600px) {
            margin-top: -38px;
            margin-left: 17px;

          }

        }
      }

    }
  }

}


// blog section
.blog-section .end-section {
  border-radius: 30px;
  min-height: 420px;
  padding-left: 0;
  padding-right: 0;
  font-weight: 200;
  font-style: normal;
  margin-top: 24px;
}


.contact-section {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top 100px center;

  .contact-inner-section {
    .first_section2 {
      @media (max-width: 600px) {
        --bs-gutter-x: 5rem;
        margin-top: -10%;
      }

      .text-content2 {
        text-align: center !important;

        .small-text {
          padding-top: 0% !important;

          p {
            margin: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 55px;
            text-align: center;
            color: $text-black !important;

            @media (max-width: 600px) {
              margin-top: 15px;
            }
          }
        }

        .highlight-text2 {
          h2 {
            margin: 0;
            font-style: normal;
            font-weight: 700;
            font-size: 36px;
            line-height: 129px;
            text-align: center;
            color: $text-black !important;
            margin: 40px 0 0px;
            font-family: 'SF Pro Display';

            @media (max-width: 600px) {
              line-height: 40px;
              margin-top: 71px;
            }
          }
        }

        .bottom-small-text {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 30px;
          color: $bottom-small-text;
          margin-top: -13px;
          padding: 11px 25%;

          @media (max-width: 600px) {
            margin-top: 15px;
            line-height: 23px;
            padding: 0px 6%;
          }
        }
      }

      .btn-divSection {
        display: flex;
        justify-content: center;
        padding-bottom: 40px;
        padding-top: 25px;

        button {
          background: $btn-color;
          font-style: normal;
          font-weight: 400;
          font-size: 16.4745px;
          line-height: 22px;
          color: $white;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 10px 17px;
          gap: 10px;
          left: calc(50% - 150px/2 - 19px);
          top: calc(50% - 49px/2 - 3390px);
          border-radius: 34px;

        }
      }

    }

    .second-section {
      .carousel-div {
        .highlight-text3 {
          @media (max-width: 600px) {
            margin-top: 33px;
          }
        }

        .top-imgdiv {
          .img-fluid {
            width: 100%;
          }

          @media (max-width: 784px) {
            margin-bottom: 28px;
          }
        }

        .item {
          display: flex;
          flex-direction: row;
          justify-content: center;
        }

        .bottom-img-div {
          .img-fluid {
            width: 100%;
            margin-top: 10px;
          }
        }

        .pricing-toggle {
          display: inline-flex;
          background-color: $second-sectionbuttonbg;
          padding: 4px;
          border-radius: 12px;
          gap: 4px;

          .toggle-btn {
            border: none;
            background-color: transparent;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            color: #6c6c6c;
            border-radius: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;

            .highlight {
              font-size: 12px;
              color: #000;
              font-weight: 400;
            }

            &:hover {
              background-color: rgba(230, 67, 67, 0.1);
            }

            &.active {
              border: 1px solid $light-red;
              background-color: #fff;
              color: #000;

              .highlight {
                color: #000;
                font-weight: 500;
              }
            }
          }
        }

      }
    }
  }

  .contact-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
  }

  .main-container {
    //   aspect-ratio: 1159 / 932;
    // width: 70%;
    // height: 90%;
    background-image: url('../images/bgimgcontact.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    border-radius: 30px;
    overflow: visible; // ⬅️ important to let box-shadow show
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

    @media (max-width: 1332px) {
      height: 90%;
      width: 100%;
      background-image: url(../images/bgimgcontact.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: flex;
      border-radius: 30px;
      overflow: visible;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 784px) {
      flex-direction: column;
      aspect-ratio: auto;
      height: auto;
      gap: 35px;
    }

    .right-panel {
      flex: 1;
      padding: 30px;
      border-radius: 0;
      flex: 1;
      padding: 62px;
      border-radius: 20px;
      display: flex;
      justify-content: center; // center horizontally
      align-items: center;
      margin: 5% -3% 0% 5%;

      @media (max-width: 1332px) {
        flex: 1;
        padding: 30px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

      }

      @media (max-width: 784px) {
        flex: 1;
        padding: 30px;
        border-radius: 0;
        flex: 0.3;
        padding: 26px 0px;
        border-radius: 20px;
        display: flex justify-content center;
        align-items: center;
        margin: -4% -7px;
      }


      .right_box {
        flex: 0.7;
        margin: -8% 6% 0px -7%;

        @media (max-width:600px) {
          margin: -13% -17% 0px 0%;
        }


        .top-form {
          margin: 20px 0px 25px 0px;
          padding: 0px 0px 1% 0px;

          p {
            font-family: 'SF Pro Display';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 30px;
            color: #3C3C3C;
            ;
          }

          h4 {
            font-family: 'SF Pro Display';
            font-style: normal;
            font-weight: 400;
            font-size: 43px;
            color: $black;
          }



        }

        .forms {
          .btn {
            background: linear-gradient(180deg, #FF5B05 0%, #FF7D39 100%);
            font-style: normal;
            font-weight: 400;
            font-size: 17.4745px;
            color: #FFFFFF;
            padding: 13px 9%;
            gap: 10px;
            border-radius: 34px;
            margin-top: 24px;
            margin-bottom: 10px;

            @media (max-width: 600px) {
              margin: 3px 1px 7px 0px;
            }

          }

          form {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            margin-top: -33px;

            input.form-control,
            textarea.form-control {
              border: 1px solid #333; // Match image border
              border-radius: 28.59px !important;
              padding: 29px 21px;
              font-size: 16px;
              background-color: transparent;
              box-shadow: none;
              outline: none;
              width: 100%;
              transition: border-color 0.3s ease;

              &::placeholder {
                color: $black;
                font-size: 14px;
              }

              &:focus {
                border-color: $black;
              }
            }

            .message {
              .rounded-4 {
                //  padding-bottom: 26%;
              }

              padding: 40px;
            }

            textarea.form-control {
              // padding-bottom: 13%;
              border-radius: 20px;
              resize: none;
            }
          }
        }


      }

    }

    .left-panel {
      flex: 0.4;
      padding: 11% 7% 5% 4%;
      margin: 6% -20% 2px -13%;
      background-image: url(../images/contactbg2.png);
      height: 40%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 20px;

      @media (max-width: 1332px) {
        flex: 0.4;
        padding: 7% 49px;
        margin: 5% 3%;
        background-image: url(../images/contactbg2.png);
        height: 40%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
      }

      @media (max-width: 784px) {
        flex: 0.4;
        padding: 7% 15px;
        margin: 3% 3%;
        background-image: url(../images/contactbg2.png);
        height: 40%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
      }

      h4 {
        margin-left: 12%;
        font-family: 'SF Pro Display';
        font-style: normal;
        font-weight: 400;
        font-size: 43px;
      }

      .red-box {
        position: relative;
        width: 90%;
        height: 96%;

        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); // ✅ stronger shadow for visibility
        z-index: 2;
        margin-top: -8px;
        margin-left: -56px;



        @media (max-width: 768px) {
          margin: 0;
          border-radius: 12px;
        }
      }
    }


  }

  .end-section {
    border-radius: 30px;
    min-height: 420px;
    padding-left: 0;
    padding-right: 0;
    font-weight: 200;
    font-style: normal;

    .rounded-5 {
      background-image: url(../images/Group.png);
      background-size: cover; // This makes the image cover the container
      background-position: center; // This keeps it centered
      background-repeat: no-repeat; // Prevents tiling
      width: 90%;
      margin: 0 auto;
      font-weight: 200;
      font-style: normal;

      .bg-dark {
        h4 {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 32px;
          line-height: 55px;
          text-align: center;
          color: $white;

          @media (max-width: 600px) {
            line-height: 30px;
          }
        }

        h2 {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 32px;
          line-height: 55px;
          text-align: center;
          color: $white;

          @media (max-width: 600px) {
            line-height: 40px;
          }
        }

        p {
          font-family: 'SF Pro Display';
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 55px;
          color: #919191;

          @media (max-width: 600px) {
            line-height: 20px;
          }
        }


        .btn {
          background: $btn-color;
          font-style: normal;
          font-weight: 400;
          font-size: 16.4745px;
          line-height: 22px;
          color: $white;
          padding: 10px 17px;
          gap: 10px;
          left: calc(50% - 150px/2 - 19px);
          top: calc(50% - 49px/2 - 3390px);
          border-radius: 34px;
          margin-bottom: 15px;


        }

        .phone-showcase {
          .btn {
            padding: 14px 28px;
            border: 0.850133px solid #323232;
            border-radius: 25.504px;
            background: transparent;
            font-weight: 400;
            font-size: 17.8528px;
            text-align: center;
            color: #B5B5B5;
          }
        }
      }
    }
  }

  .social-container {
    width: 70%;
    margin: 30px auto;
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 25px;
    filter: drop-shadow(1px 1px 52.1px rgba(0, 0, 0, 0.2));
    text-align: center;

    .img-section {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;

      p {
        margin-top: 20px;
        font-family: 'SF Pro Display';
        font-style: normal;
        font-weight: 500;
        font-size: 20.5872px;
        color: #000000;
      }

      .icon-row {
        display: flex;
        gap: 15px;

        img {
          width: 24px;
          height: 24px;
          object-fit: contain;
          transition: transform 0.3s;

          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}