@media (max-width: 320px){
    .sol-btn {
    position: absolute;
    top: 11%;
    right: 0% !important;
     }
    .hero-banner-three.home-banner .hero-heading {
    font-size: 28px !important;
    line-height: 36px !important;
}
    .work .dot:not(:last-child)::after {
    width: 70px !important;
    }
    .work .dot {
    width: 60px !important;
    height: 60px !important;
    }
    .work .dots-navigation {
    gap: 60px !important;
    }
    .accordion-style-one .accordion-item .accordion-button {
        padding: 10px 0;
        font-size: 18px;
    }
     .thank-main img{
    width: 80% !important;
     }
     .btn-fifteen {
    padding: 10px 20px;
    }
    .avatar-plat .project-block-one .title {
    font-size: 25px !important;
    font-weight: 700;
    line-height: 31px !important;
    margin: 15px 0 10px !important;
    }
    .btn-thirteen {
        font-size: 20px;
        line-height: 32px;
    }
    .quote-div{
        margin-top: 0px !important;
    }
    .title-two h2 {
    font-size: 26px !important;
    line-height: 38px !important;
    }
 .title-three h2 {
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
    h3 {
    font-size: 26px;
    font-weight: 700 !important;
}
.block-feature-eleven.avatar-feat .feature-block h3 {
    font-size: 26px !important;
    line-height: 30px;
}
.card-style-four p {
    font-size: 18px !important;
    line-height: 28px !important;
}
.features-slide .card-style-four h4 {
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 17px 0px 14px !important;
}
.overlap-section {
    padding: 120px 30px 60px !important;
}
    .title-one h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .accordion-style-two .accordion-item .accordion-body p {
        font-size: 18px;
    }
    .fancy-banner-seven h2{
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
    .features-bgs {
    padding: 30px 30px !important;
    }
}
@media (min-width: 320px) and (max-width: 479px) {
    /* br{
        display: block !important;
    } */
     .sol-btn {
    position: absolute;
    top: 11%;
    right: 0% !important;
     }
     .work .dot {
    width: 50px !important;
    height: 50px !important;
    }
    .gif {
    position: absolute;
    right: 0% !important;
    top: 59% !important;
    display: none;
    }
    .features-bgs {
    padding: 30px 30px !important;
    }
    .hero-banner-three.home-banner .hero-heading {
    font-size: 30px !important;
    line-height: 40px !important;
}
    .work .dot:not(:last-child)::after {
    width: 70px !important;
    }
    .work .dots-navigation {
    gap: 24px !important;
    }
    .work .dot {
    font-size: 15px !important;
    }
    .accordion-style-one .accordion-item .accordion-button {
        padding: 10px 0;
        font-size: 18px;
    }
     .thank-main img{
    width: 80% !important;
     }
    .padding-sec{
        padding-top:40px;
        padding-bottom: 40px;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
     .btn-fifteen {
    padding: 10px 20px;
    }
     .avatar-plat .project-block-one .title {
    font-size: 25px !important;
    font-weight: 700;
    line-height: 31px !important;
    margin: 15px 0 10px !important;
    }
    .btn-thirteen {
        font-size: 17px;
        line-height: 32px;
        padding:8px 16px
    }
    .btn-one {
    padding: 4px 12px 4px 25px;
    }
    .quote-div{
        margin-top: 0px !important;
    }
      .title-two h2 {
    font-size: 26px !important;
    line-height: 38px !important;
    }
    .hero-banner-three .hero-heading {
        font-size: 28px;
        line-height: 36px;
    }
        .title-three h2 {
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
    h3 {
    font-size: 26px;
    font-weight: 700 !important;
}
.block-feature-eleven.avatar-feat .feature-block h3 {
    font-size: 26px !important;
    line-height: 30px;
}
.card-style-four p {
    font-size: 18px !important;
    line-height: 28px !important;
}
.features-slide .card-style-four h4 {
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 17px 0px 14px !important;
}
.overlap-section {
    padding: 120px 30px 60px !important;
}
    .title-one h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .accordion-style-two .accordion-item .accordion-body p {
        font-size: 18px;
    }
    .fancy-banner-seven h2{
        font-size: 26px;
        line-height: 36px;
        letter-spacing: 0px;
    }
}
@media (min-width: 480px) and (max-width: 599px) {
    .sol-btn {
    position: absolute;
    top: 11%;
    right: 14% !important;
    }
    .gif {
    position: absolute;
    right: 4% !important;
    top: 59% !important;
}
        .btn-thirteen {
        font-size: 18px;
        line-height: 32px;
    }
      .hero-banner-three.home-banner .hero-heading {
    font-size: 36px !important;
    line-height: 42px !important;
}
    .work .dot:not(:last-child)::after {
    width: 70px !important;
    }
    .work .dots-navigation {
    gap: 70px !important;
    }
     .accordion-style-one .accordion-item .accordion-button {
        padding: 6px 0;
        font-size: 18px;
    }
     .thank-main img{
    width: 80% !important;
     }
     .btn-fifteen {
    padding: 10px 20px;
    }
     .avatar-plat .project-block-one .title {
    font-size: 25px !important;
    font-weight: 700;
    line-height: 31px !important;
    margin: 15px 0 10px !important;
    }
    .quote-div{
        margin-top: 0px !important;
    }
      .title-two h2 {
    font-size: 26px !important;
    line-height: 38px !important;
    }
     .title-three h2 {
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
    h3 {
    font-size: 26px;
    font-weight: 700 !important;
}
.block-feature-eleven.avatar-feat .feature-block h3 {
    font-size: 26px !important;
    line-height: 30px;
}
.card-style-four p {
    font-size: 18px !important;
    line-height: 28px !important;
}
.features-slide .card-style-four h4 {
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 17px 0px 14px !important;
}
.overlap-section {
    padding: 120px 30px 60px !important;
}
    .title-one h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .accordion-style-two .accordion-item .accordion-body p {
        font-size: 18px;
    }
    .fancy-banner-seven h2{
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
    .hero-banner-three .hero-heading {
        font-size: 28px;
        line-height: 36px;
    }
}
@media (min-width: 600px) and (max-width: 767px) {
.sol-btn {
    position: absolute;
    top: 11%;
    right: 10% !important;
    }
    .work .dot {
    width: 60px !important;
    height: 60px !important;
    }
    .work .dot:not(:last-child)::after{
        width: 80px !important;
    }
    .work .dots-navigation {
    gap: 80px !important;
    }
     .gif {
    position: absolute;
    right: 15% !important;
    top: 59% !important;
}
        .btn-thirteen {
        font-size: 18px;
        line-height: 32px;
    }
      .hero-banner-three.home-banner .hero-heading {
    font-size: 44px !important;
    line-height: 50px !important;
}
    .accordion-style-one .accordion-item .accordion-button {
        padding: 6px 0;
        font-size: 18px;
    }
     .thank-main img{
    width: 80% !important;
     }
     .btn-fifteen {
    padding: 10px 20px;
    }
     .avatar-plat .project-block-one .title {
    font-size: 25px !important;
    font-weight: 700;
    line-height: 31px !important;
    margin: 15px 0 10px !important;
    }
        .hero-banner-three .hero-heading {
        font-size: 36px;
        line-height: 43px;
    }
      .quote-div{
        margin-top: -50px !important;
    }
    .quote-div-2{
        margin-top: 0px !important;
    }
      .title-two h2 {
    font-size: 32px !important;
    line-height: 40px !important;
    }
     .title-three h2 {
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
    h3 {
    font-size: 26px;
    font-weight: 700 !important;
}
.block-feature-eleven.avatar-feat .feature-block h3 {
    font-size: 26px !important;
    line-height: 30px;
}
.card-style-four p {
    font-size: 18px !important;
    line-height: 28px !important;
}
.features-slide .card-style-four h4 {
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 17px 0px 14px !important;
}
.overlap-section {
    padding: 120px 30px 60px !important;
}
    .title-one h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .accordion-style-two .accordion-item .accordion-body p {
        font-size: 18px;
    }
    .fancy-banner-seven h2{
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 0px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .sol-btn {
    position: absolute;
    top: 11%;
    right: 7% !important;
    }
      .hero-banner-three.home-banner .hero-heading {
    font-size: 36px !important;
    line-height: 42px !important;
}
    .gif {
    position: absolute;
    right: 15% !important;
    top: 48% !important;
    }
    .step-title {
    font-size: 26px !important;
    line-height: 36px !important;
    }
    .step-description {
        font-size: 18px !important;
    }
    .accordion-style-one .accordion-item .accordion-button {
        padding: 6px 0 !important;
    }
    .title-two h2 {
    font-size: 28px !important;
    line-height: 38px !important;
    }
        .accordion-style-one .accordion-item .accordion-button {
        font-size: 20px;
        padding: 18px 0;
        line-height: 28px;
    }
     .avatar-plat .project-block-one .title {
    font-size: 25px !important;
    font-weight: 700;
    line-height: 31px !important;
    margin: 15px 0 10px !important;
    }
    .btn-thirteen {
        font-size: 20px;
        line-height: 32px;
    }
       .hero-banner-three .hero-heading {
        font-size: 36px;
        line-height: 43px;
    }
        .lg-pb-150 {
        padding-bottom: 80px !important;
    }
    .lg-pt-200 {
        padding-top: 135px !important;
    }
     .quote-div{
        margin-top: -70px !important;
    }
    .quote-div-2{
        margin-top: 0px !important;
    }
     .title-three h2 {
        font-size: 30px !important;
        line-height: 38px !important;
        letter-spacing: 0px;
    }
    h3 {
    font-size: 26px;
    font-weight: 700 !important;
}
.block-feature-eleven.avatar-feat .feature-block h3 {
    font-size: 26px !important;
    line-height: 30px;
}
.card-style-four p {
    font-size: 18px !important;
    line-height: 28px !important;
}
.features-slide .card-style-four h4 {
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 17px 0px 14px !important;
}
.overlap-section {
    padding: 120px 30px 60px !important;
}
    .title-one h2 {
        font-size: 30px;
        line-height: 38px;
        font-weight: 600;
    }
    .accordion-style-two .accordion-item .accordion-body p {
        font-size: 18px;
    }
    .fancy-banner-seven h2{
        font-size: 27px;
        line-height: 36px;
        letter-spacing: 0px;
    }
    .btn-fifteen {
    padding: 10px 20px;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    .sol-btn {
    position: absolute;
    top: 11%;
    right: 7% !important;
    }
    .gif {
    position: absolute;
    right: 25% !important;
    top: 50% !important;
}
        .feedback-section-five .slider-arrows li .icon, .block-feature-fifteen .slider-arrows li .icon {
        width: 37px;
    }
    .block-feature-fifteen .slider-arrows li {
    width: 55px;
    height: 55px;
    }
     .hero-banner-three.home-banner .hero-heading {
    font-size: 40px !important;
    line-height: 48px !important;
}
    .accordion-style-one .accordion-item .accordion-button {
        font-size: 20px !important;
        padding: 9px 0 !important;
    }
     .step-title {
    font-size: 26px !important;
    line-height: 36px !important;
    }
    .step-description {
        font-size: 18px !important;
    }
    .btn-thirteen {
        font-size: 20px;
        line-height: 32px;
    }
 .fancy-banner-seven h2 {
        font-size: 36px;
        line-height: 45px;
    }
    .title-two h2 {
    font-size: 28px !important;
    line-height: 40px !important;
    }
        .title-one h2 {
        font-size: 36px;
        line-height: 40px;
    }
    .title-three h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .hero-banner-three .hero-heading {
        font-size: 42px;
    }
        h3 {
        font-size: 28px;
        font-weight: 700 !important;
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .sol-btn {
    position: absolute;
    top: 11%;
    right: 7% !important;
    }
     .gif {
    position: absolute;
    right: 25% !important;
    top: 140px !important;
}
     .feedback-section-five .slider-arrows li .icon, .block-feature-fifteen .slider-arrows li .icon {
        width: 37px;
    }
    .block-feature-fifteen .slider-arrows li {
    width: 65px;
    height: 65px;
    }
    .accordion-style-one .accordion-item .accordion-button {
        font-size: 20px !important;
        padding: 9px 0 !important;
    }
     .step-title {
    font-size: 26px !important;
    line-height: 36px !important;
    }
    .step-description {
        font-size: 18px !important;
    }
    .avatar-plat .project-block-one .title {
    font-size: 26px !important;
    font-weight: 700;
    line-height: 36px !important;
    }
    .btn-thirteen {
        font-size: 20px;
        line-height: 32px;
    }
        .fancy-banner-seven h2 {
        font-size: 40px;
        line-height: 53px;
    }
    .title-two h2 {
    font-size: 28px !important;
    line-height: 40px !important;
    }
     .title-one h2 {
        font-size: 36px;
        line-height: 40px;
    }
    .avatar-plat .project-block-one .title {
    font-size: 26px !important;
    font-weight: 700;
    line-height: 36px !important;
    }
       .title-three h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .hero-banner-three .hero-heading {
        font-size: 42px;
    }
        h3 {
        font-size: 28px;
        line-height: 40px;
        font-weight: 700 !important;
    }
    .hero-banner-three .hero-heading {
        font-size: 42px;
    }
}
@media (min-width: 1201px) and (max-width: 1300px) {
     .sol-btn {
    position: absolute;
    top: 11%;
    right: 15% !important;
    }
      .gif {
    position: absolute;
    right: 25% !important;
    top: 180px !important;
}
    .avatar-plat .project-block-one .title {
    font-size: 28px !important;
    font-weight: 700;
    line-height: 36px !important;
    }
     .fancy-banner-seven h2 {
        font-size: 40px;
        line-height: 53px;
    }
       .title-three h2 {
        font-size: 34px !important;
        line-height: 44px !important; 
    }
    .hero-banner-three .hero-heading {
        font-size: 42px;
    }
        h3 {
        font-size: 28px;
        font-weight: 700 !important;
    }
    .hero-banner-three .hero-heading {
        font-size: 42px;
    }
        .title-one h2 {
        font-size: 48px;
    }
}
@media (min-width: 1301px) and (max-width: 1400px) {
    .sol-btn {
    position: absolute;
    top: 11%;
    right: 15% !important;
    }
     .gif {
    position: absolute;
    right: 25% !important;
    top: 181px !important;
}
        .title-one h2 {
        font-size: 48px;
    }
     .fancy-banner-seven h2 {
        font-size: 40px;
        line-height: 53px;
    }
      
}
@media (min-width: 1401px) {
  .gif {
    position: absolute;
    right: 30% !important;
        top: 182px !important;
}
}



.feature-banner {
  position: relative;
  width: 100%;
  /* max-width: 480px; */
  margin: auto;
  /* aspect-ratio: 1/1; */
  /* background: #fff; */
}

.central-person {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.person-img {
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

.ban-avatar {
  position: absolute;
  width: 12%;
  border-radius: 50%;
  border: 4px solid #fff;
  /* background: #fff; */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Avatar-1 (top left) */
.avatar-1 {
  top: -138px;
   left: 162px;
   z-index: 2;
  animation: floatUpDown 2.2s infinite alternate;
}

/* Avatar-2 (bottom right) */
.avatar-2 {
  bottom: 16%; right: 16%;
  animation: floatUpDown 1.8s 0.8s infinite alternate;
}

/* Microphone Icon (top right) */
.speaker {
  position: absolute;
  width: 12%;
  top:8px; 
  /* right: 14%; */
  left: 130px;
  border-radius: 50%;
  padding: 6px;
  z-index: 2;
}

.waves {
  position: absolute;
  height: 100px;
  left: -1%; 
  /* bottom: 28%; */
}
.decor-form {
  position: absolute;
  width: 13%;
  /* left: 7%;  */
  right: 176px;
  bottom: -174px;
  z-index: 2;
  /* Optionally, add animation or rotation if needed */
}
.decor-shape {
  position: absolute;
  width: 9%;
  top: 36%; right: 6%;
  z-index: 1;
  /* Optionally, add a softly rotating animation */
}
@keyframes floatUpDown {
  from { transform: translateY(0); }
  to { transform: translateY(-16%); }
}

@media (max-width: 600px) {
  .feature-banner {
    max-width: 98vw;
    aspect-ratio: 1/1;
  }
  .person-img {
        width: 400px;
    }
  .avatar, .icon, .waves {
    width: 18vw;
    height: auto;
  }
  .waves{
     width: 50vw;
    height: 204px;
        left: -4%;
        /* bottom: 28%; */
        top: 150px;
  }
  .avatar-1 {
    top: 50px;
        left: 3px;
    z-index: 2;
  }
  .avatar-2 {
    bottom: 3%;
        right: -1%;
    z-index: 2;
  }
  .speaker {
    position: absolute;
    width: 19%;
        top: 218px;
        /* right: 14%; */
        left: 36px;
  }
  .waves {
    position: absolute;
    height: 100px;
    left: 2%;
    /* bottom: 28%; */
    top: 212px;
}
}


@media (min-width: 576px) and (max-width: 767px) {
    .floating-logo {
        position: absolute;
        width: 50px !important;
        animation: float 5s infinite ease-in-out;
    }
     .logo-1 {
        top: 5% !important;
        left: 5%;
        animation-delay: 0s;
    }
    .logo-4 {
                top: 45% !important;
        left: 4% !important;
        animation-delay: 3s;
    }
    .logo-2 {
        top: 6% !important;
        left: 70%;
        animation-delay: 1s;
    }
        .logo-5 {
        top: 83% !important;
        left: 50% !important;
        animation-delay: 4s;
    }
    .logo-7 {
        top: 85% !important;
        left: 10%;
        animation-delay: 1.5s;
    }
        .logo-8 {
        top: 35% !important;
        left: 85% !important;
        animation-delay: 2.5s;
    }
    .logo-9 {
        top: 80% !important;
        left: 80% !important;
        animation-delay: 3.5s;
    }
    .iin-block {
    height: 50vh !important;
}
}

@media (min-width: 768px) and (max-width: 991px) {
    .floating-logo {
        position: absolute;
        width: 50px !important;
        animation: float 5s infinite ease-in-out;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    .floating-logo {
        position: absolute;
        width: 60px !important;
        animation: float 5s infinite ease-in-out;
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .floating-logo {
        position: absolute;
        width: 60px !important;
        animation: float 5s infinite ease-in-out;
    }
}
@media (min-width: 1201px) and (max-width: 1300px) {
    .floating-logo {
        position: absolute;
        width: 60px !important;
        animation: float 5s infinite ease-in-out;
    }
}