.complete-seo-services-container{
    width: 90%;
    max-width: 1900px;
    height: 100%;
    margin:auto;
    position:relative;
}
.page1 {
    width: 100%;
    height: min(900px,130vh);
    position: relative;
    overflow: hidden
}


.page1 .image-text-container {
    height: 100%;
    width: 100%;
    margin-top: -50px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 5%; */
    z-index: 1;
}

.page1 .image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1
}

.page1 .image-container img {
    margin-top: 4rem;
    display: block;
    height: 50%;
    object-fit: fill;
    /* animation: float 3s ease-in-out infinite */
}

.dotted-circles-img {
    width: 90px;
    height: auto;
}

.dotted-circles-img img {
    width: 100%;
    height: 100%;
    z-index: -10;
    display: block;
    position: relative;
}


.page1 .text-container {
    color: #12141D;
    font-family: var(--poppins-font);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    flex: 1;
    max-width:750px;
}



.page1 .text-container h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.8rem;
    width: 100%;
    text-align: left;
    padding:0 !important;
    width:755px !important;
    margin-top: 0;
}


.page1 .text-container p.description {
    font-size: 1rem;
    font-weight: 400;
    color: #12141D;
    opacity: 0.7;
    line-height: 1.4rem;
    max-width: 700px;
}

.page1 .text-container .button-container button {
    background-color: var(--primary-green);
    /* color: #1E2330; */
    font-family: var(--poppins-font);
    font-size: 1.2rem;
    font-weight: 600;
    padding: .9rem 2.5rem;
    letter-spacing: 1.1px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all .3s ease-in-out;

    margin-top:1.5rem;
    color: #fff;
}
.page1 .text-container .button-container button:hover {
    background-color: #04CF82;
    color: #fff;
    box-shadow: none;
}
.dashboard {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    font-family: var(--poppins-font);
    padding: 100px;
    border-radius: 40%;
    z-index: 1;
    background-color: transparent;
    width:100%;
}

.dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1058 955" fill="none"><g opacity="0.4" filter="url(%23filter0_f)"><ellipse cx="528.6" cy="478.215" rx="228.6" ry="196.215" fill="%2304E690"/></g><defs><filter id="filter0_f" x="0" y="-18" width="1057.2" height="992.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur"/></filter></defs></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(5px);
    border-radius: 40%;
    z-index: -1;
}
#track_growth{
    width: 270px;
    height: 300px;
}
#mobile-optimized, #website-audit{
    width: 230px;
    position:relative;
    height: 210px;
}

  .card {
    background: white;
    border-radius: 10px;
    height: auto;
    padding-block: 13px;
    /* padding-bottom: 5px; */
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  .data-save-text{
    text-align: start;
    font-size: 0.6rem;
    font-weight: 600;
  }
  .page1 .sub-text{
    opacity: 0.4;
    font-size: 0.5rem;
    text-align: start;
    margin-bottom: 0.3rem;
  }
  .page1 .number {
    font-size: 0.9rem;
    font-weight: bold;
    display: block;
    text-align: start;
    width: 50px;
  }


  .chart {
    /* height: 50px; */
    position: absolute;
    border-radius: 5px;
    /* margin-top: 10px; */
  }
  .track-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000464;
   position:relative;
  }
  .shadow-text-container img{
    width: 150px;
  }
  .chart img{
    width: 260px;
    height: auto;
    object-fit: contain;
    /* margin-top:20px; */
  }
  #track_growth .chart img{
    margin-top:-72px;
    width: 310px;
    margin-left: -20px;
  }
  #website-audit .chart img,
  #mobile-optimized .chart img{
    height: 216px;
    margin-top: -70px;
    object-fit: contain;
  }
#track_growth .img-text-container{
    display: flex;
    justify-content: flex-end;
}
.page1 .dashboard .card .img-text-container{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.1rem;
    padding-right: 1rem;
}
.page1 .dashboard .card .img-text-container img{
    height:30px;

}
  .two-cards-container{
    display:flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .two-cards-container #new-users .img-text-container{
    display:flex;
    gap: 15px;
  }
  .two-cards-container #new-users .img-text-container .img-container{
    background: #73CED0;
    padding: 13px;
    border-radius: 18px;
    display:flex;
    align-items: center;
  }
  .two-cards-container #new-users .img-text-container .text-container p{
    align-self: start;
  }
  .new-users-text-container p{
    font-size: 0.7rem;
    text-align: start;
  }
  #new-users{
    padding-bottom: -3px;
  }
.page2 {
    width: 100%;
    height: auto;
    min-height: 640px;
    background: #2E343F;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--poppins-font);
}
.dashboard-img{
    display:none;
}
.graph-analitics {
    position:relative;
    display: flex;
    justify-content: center;
    margin: auto;
    /* position: absolute; */
    width: 860px;
    height: 1200px;
    margin-top: -100px;
   height:auto;
   background-color: #F5F9FF;
   padding: 12px;
   padding-bottom:165px;
   padding-left: 50px;
   border-radius: 5px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.dotted-circle-image-container{
    position:absolute;
    top:-40px;
    left:94%;
    z-index: -10;
    width: 120px;
}
.dotted-circle-image-container img{
    width:100%;
    height:100%;
}

#barChart{
    height: 222px !important;
}
.charts-container{
    display:grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    height:250px;
}
.charts-container .bar-chart{
 display:flex;
 gap: 2rem;
 background-color: #fff;
 padding: 10px;
 border-radius: 10px;
 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 margin-bottom: 2rem;
}
.pie-chart{
    width: 260px !important;
}
.charts-container .pie-chart img{
    width: 100%;
    height: 100%;
    object-fit:contain;
}

.middle-graph {
    width: 100%;
    height: 100%;
    max-width:1200px;

}
.middle-graph .dashboard-title{
    color:#000000;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-top:2rem;
}
.middle-graph .small-cards{
    display:flex;
    gap:1rem;
    width: 100%;
    max-width: 500px;
}
.middle-graph .small-cards .dashboard-card{
    padding:6px;
    border-radius: 5px;
    display:flex;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.middle-graph .small-cards .dashboard-card .svg-container{
    width: 70px;
    height: 70px;
    position:relative;

}
.middle-graph .small-cards .dashboard-card .svg-container svg{
    width: 100%;
    height: 100%;
}
.middle-graph .small-cards .dashboard-card  .text-arrow-container{
    display:flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 0.65rem;
    font-weight: 500;
    color:#00BF63;
}
.middle-graph .small-cards .dashboard-card .text-arrow-container img{
    width: 10px;
    height: 10px;
    margin-top: -4px;
}
.middle-graph .small-cards .dashboard-card .text-number-container{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.middle-graph .small-cards .dashboard-card .text-number-container .card-name{
    font-size: 0.7rem;
    font-weight: 600;
    color:#000000;
    text-align: center;
}
.middle-graph .small-cards .dashboard-card .text-number-container .card-number{
    font-size: 1rem;
    font-weight: 700;
    color:#000000;
    margin-top: -7px;
}

.second-chart-container{
    display:grid;
    grid-template-columns: 3fr 1fr 0.6fr;
    gap: 1rem;
    position:absolute;
    max-width:780px;
}
.second-chart-container .bar-chart {
    /* position: relative; */
    /* display:flex; */
    /* width: 40%; */
    display:grid;
    grid-template-columns: 3fr 1fr;
    max-width: 800px;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    height: 210px;
    /* width: fit-content; */
  }
  #userchart{
    height: 110px !important;
    width: 300px !important;
  }

  .percentages {
    display: flex;
    justify-content: center;
    flex-direction: column;

  }

  .percentages div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .percentages p {
    color: green;
    font-size: 18px;
    font-weight: bold;
  }

  .percentages span {
    font-size: 10px;
    color: #555;
    white-space: nowrap;
  }
  .percentages .image-container img{
    width: 62px;
  }
 .donut-chart{
    display:flex;
    flex-direction: column;
    /* gap:1rem; */
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 20px;
    padding:5px;
 }
 .donut-chart .donut-image-container{
    width: 160px;
    position:relative;
 }
 .donut-chart .donut-image-container img{
    width:100%;;
 }
 .donut-chart .donut-text-container{
    margin-top:-5px;
 }
 .donut-chart .donut-text-container > p{
    font-size: 0.6rem;
 }
 .donut-chart .donut-text-container > img{
    width: 100px;
 }


 .donut-chart .arrow-text-container{
    position:absolute;
    top:55%;
    left:48%;
    transform: translate(-50%,-50%);
    display:flex;
    gap:0.3rem;
    align-items: center;
    /* margin-top: -8px; */
 }
 .donut-chart .arrow-text-container p{
    color: #00bb61;
    font-size:0.8rem;
 }

 .core-web-vital-chart{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
    justify-content: center;
    background-color: #fff;
    border-radius: 20px;
 }
 .core-web-vital-chart .circles-container{
    display:flex;
 }
 .circle1,.circle2{
    width: 75px;
    height: 75px;
    position:relative
 }
.circle1 img,.circle2 img{
    width: 100%;
    height: 100%;
    object-fit:fill;
}
.circle-percentage{
    display:flex;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color:#00bb61;
}
.circle-percentage p{
    font-size:1rem;
    font-weight: 400;
}
.percentage-arrow img{
    width: 12px;
    height: 17px;
}
.core-web-vital-chart .text-container{
    margin-top:-20px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
}
.core-web-vital-chart .text-container img{
    width:110px;
}
.speedometer-container{
    display:flex;
    gap: 1rem;
    margin-top: -1.5rem;
}
.speedometer-container img{
    width: 60px;
}
.keyword-difficulty-container{
    background: #fff;
    border-radius: 13px;
    box-shadow: 2px 2px 4.7px 0px #0000008C;
    margin-top:1rem;
    width:200px;
    display:flex;
    flex-direction:column;
    align-items: center;
    padding: 1rem;
}
.keyword-difficulty p{
    color: #000464;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.keyword-difficulty span{
    color: white;
    background-color: #000464;
    padding-inline: 5px;
}
.half-circle-container{
    display:flex;
    justify-content: center;
    width: 120px;
    margin:auto;
}
.half-circle-container img{
    width: 100%;
    height: 100%;
}
.keyword-difficulty-container .percentage-container{
    margin-top: -2.5rem;
}
.keyword-difficulty-container .percentage-container p:nth-child(1){
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 700;
    text-align: center;
    color:#000464;
    margin-top:14px;
}
.keyword-difficulty-container .percentage-container p:nth-child(2){
    font-size: 1.1rem;
    line-height: 1.7rem;
    font-weight: 700;
    text-align: center;
    color:#000464;
}
.keyword-difficulty-container .keyword-difficulty-percentage .details-container{
    margin-top:0.7rem;
    color: #737373;
    font-size: 0.7rem;
}
.post-type {
    text-align: center;
    font-family: var(--poppins-font);
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    left: -20%;
    top:-85px;
}
.post-type h3{
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1.1rem;
}

.circular-chart {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.circle-svg {
    transform: rotate(-122deg);
    width: 100px;
    height: 100px;
}

.circle-bg {
    fill: none;
    stroke: #e6e6e6;
    stroke-width: 2.8;
}

.circle-arc-1,
.circle-arc-2 {
    fill: none;
    stroke-width: 2.8;
    stroke-dasharray: 75, 25;
    /* Adjust arc proportions */
    stroke-dashoffset: 100;
    /* Initial offset (completely hidden) */
    animation: draw-arc-simultaneously 2s ease-in-out forwards;
}

.circle-arc-1 {
    stroke: #00b8d9;
    /* First arc color */
}

.circle-arc-2 {
    stroke: #1565d8;
    /* Second arc color */
}

@keyframes draw-arc-simultaneously {
    to {
        stroke-dashoffset: 0;
        /* Final offset (fully visible) */
    }
}

.upload-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
}

.labels {
    margin-top: 10px;
}

.label {
    font-size: 12px;
    margin: 0 5px;
}

.label.images {
    color: #00b8d9;
}

.label.videos {
    color: #1565d8;
}

.likes-container {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap:0.5rem;
    padding: 6px;
    width: 155px;
    height: 75px;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: absolute;
    left: 93%;
    top: 10%;
    font-family: var(--poppins-font);

}

.icon-wrapper {
    width: 30px;
    height: 30px;
    background: rgba(21, 101, 216, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper img {
    width: 13px !important;
    height: 13px !important;
    background-size: cover;
}

.likes-content {
    /* margin-top: 10px; */
    text-align: center;

}

#likes-count {
    font-size: 1rem;
    font-weight: bold;
    color: #183B56;
}

.likes-content p {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
    /* margin-top: 4px; */
}

.page3 {
    width: 100%;
    height: 100vh;
    max-height: 325px;
    background: #2E343F;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page3 h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-top: 2.8rem;
    font-family: var(--poppins-font);
    text-align: center;
}

.page3 .lines-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.3rem;
    gap: 0.5rem;
}

.page3 .lines-container .line1 {
    width: 55px;
    height: 0.4rem;
    background-color: var(--primary-green);
    border-radius: 5px;
}

.page3 .lines-container .line2 {
    width: 15px;
    height: 0.4rem;
    border-radius: 5px;
    background-color: var(--primary-green);
}

.page3 .description {
    color: #fff;
    font-size: 1rem;
    font-family: var(--poppins-font);
    margin:auto;
    margin-top: 1rem;
    width: 95%;
    max-width: 1350px;
    line-height: 1.7rem;
    text-align: center;
}

.page4 {
    width: 100%;
    height: 800px;
    /* min-height: 100vh; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F5F5F5;
}
.page4 .page4-sub-container{
    width: 100%;
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}

.page4 .services-cards {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-wrap: wrap;
    gap: 2.2rem;
    /* position: absolute; */
    margin-top:-80px;
}
.page4 .services-cards .card .number-heading-container{
    display:flex;
    justify-content: space-between;
    position:relative;
}
.page4 .services-cards .card {
    width: 240px;
    padding: 1.5rem 1rem 1.5rem 1rem;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: var(--poppins-font);
}
.page4 .services-cards .card {
    opacity: 0;
    transform: translateY(20px); /* Slightly below original position */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Animate into view */
.page4 .services-cards .card.animate {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
}

.page4 .services-cards .card .number {
    color: #ccc;
    font-size: 2.4rem;
    font-family: var(--poppins-font);
    font-weight: 500;
    padding: 0;
    line-height: 0.5;
    margin-top: -20px;
    align-self: flex-end;
}
.page4 .title{
    font-size: 1.3rem;
    text-align:left;
}
.number1{
    width: 25px;
    height: 28px;
    margin-top:-30px;
}
.page4 .services-cards .card .number img{
    width: 25px;
    height: 40px;
    object-fit: contain;
    /* margin-top: -18px; */
    position: absolute;
    top: -17px;
    left: 90%;
    padding-top: 10px;
}

.page4 .services-cards .card .description {
    font-size: 0.8rem;
    text-align: start;
    width:83%;
}

.page4 .services-cards .card .title{
    margin-top:10px;
}

.page4 .img-text-container {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 100px; */
    margin:auto;
}

.page4 .img-text-container .img-container {
    width: 65%;
    position: relative;
    /* z-index: -100; */
    height: 500px;
}

.page4 .img-text-container .img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: rotate 10s ease-in infinite;
    /* z-index: -1; */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.percentage_circle_container {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.circle-wrap {
    width: 190px;
    height: 190px;
    background: #ddd;
    border-radius: 50%;
    position: relative;
}

.circle-wrap .fill {
    width: 190px;
    height: 190px;
    position: absolute;
    border-radius: 50%;
    clip: rect(0px, 95px, 190px, 0px);
    background-color: var(--primary-green);
}

.circle-wrap .mask {
    width: 190px;
    height: 190px;
    position: absolute;
    border-radius: 50%;
    clip: rect(0px, 190px, 190px, 95px);
}


.full.seventy,
.seventy .fill {
    transform: rotate(100deg);
}

.seventy.full.animate,
.seventy.animate .fill {
    animation: seventy linear 3s forwards;
}

@keyframes seventy {
    0% {
        transform: rotate(-60deg);
    }

    100% {
        transform: rotate(-180deg);
    }
}

.circle-wrap .inside-circle {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: #fff;
    /* line-height: 170px; */
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
    /* z-index: 100; */
    /* font-weight: 700; */
    /* font-size: 2em; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--poppins-font);
    flex-direction: column;
}

.circle-wrap .inside-circle .percentage {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary-green);
}

.circle-wrap .inside-circle .text {
    font-size: 0.8rem;
    font-weight: 500;
    color: #121212;
}
.more-traffic-text{
    font-size: 1rem;
    position: absolute;
    top: 58px;
    transform: rotate(180deg);
    font-family: var(--poppins-font);
    color: #525252;
}
.upto-text{
    position: absolute;
    top: 145px;
    font-size: 1rem !important;
    transform: rotate(180deg);
    font-family: var(--poppins-font);
    color: #525252;
}

.page4 .img-text-container .text-container {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.page4 .img-text-container .text-container h2 {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    font-family: var(--poppins-font);
}

.page4 .img-text-container .text-container .lines-container {
    display: flex;
    gap: 0.3rem;
}

.page4 .img-text-container .text-container .lines-container .line1 {
    width: 55px;
    height: 0.4rem;
    background-color: var(--primary-green);
    border-radius: 5px;
}

.page4 .img-text-container .text-container .lines-container .line2 {
    width: 15px;
    height: 0.4rem;
    border-radius: 5px;
    background-color: var(--primary-green);
}

.page4 .img-text-container .text-container .description {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    margin-top:1rem;
}

.page4 .img-text-container .text-container .description p,.page4 .img-text-container .text-container .description h3 {
    font-size: 1rem;
    line-height: 1.7rem;
    font-family: var(--poppins-font);
    color:#12141D;
}
.page4 .img-text-container .text-container .description h3{
    font-weight:600;
}
.page5{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: 100%;
    min-height: 50vh;
    max-height:1500px;
    background: #FFF;
    position: relative;
    font-family: var(--poppins-font);
    margin-bottom: 20px;
}
.page5 .complete-seo-services-container{
    display:flex;
    flex-direction:column;
    align-items: center;
    margin:0;
}
.page5 .text-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 1rem;
    width: 100%;
    min-height: 530px;
    background-color: #2E343F;
}

.page5 .text-container .heading{
    color: #F7FAFC;
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 12px;
    text-align:center;
}
.page5 .text-container .lines-container{
    display: flex;
    gap: 0.3rem;
    margin-top: 1rem;
}
.page5 .text-container .lines-container .line1{
    width: 55px;
    height: 0.4rem;
    border-radius: 5px;
    background-color: var(--primary-green);
}
.page5 .text-container .lines-container .line2{
    width: 15px;
    height: 0.4;
    border-radius: 5px;
    background-color: var(--primary-green);
}
.page5 .text-container .description{
    font-size:1rem;
    color: #F7FAFC;
    margin-top: 2rem;
    text-align: center;
    max-width: 900px;
}

.page5 .pricing-container{
    width: 90%;
    /* height: 50%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -280px;
    /* background: #fff; */
}
.page5 .pricing-container .pricing-box{
    width: 100%;
    max-width: 800px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display:flex;
    border-radius: 10px;
    overflow:hidden;

}
.page5 .price-steps-container{
    display:flex;
    flex-direction: column;
    width: 45%;
    background-color: #fff;
}
.page5 .pricing-container .pricing-box .price-button-container{
    background-color: #d5d6de;
    padding: 30px;
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    gap:.5rem;
    font-family: var(--poppins-font);
}
.page5 .pricing-container .pricing-box .price-button-container .title{
    font-size: 1rem;
    color: #171923;
    font-weight: 600;
    font-family: var(--poppins-font);

}
.page5 .pricing-container .pricing-box .price-button-container .price{
    font-size: 2.2rem;
    font-weight: bold;
    color:#1E2330;
    font-family: var(--poppins-font);
}
.page5 .pricing-container .pricing-box .price-button-container .sub-title{
    font-size: 0.9rem;
    color: #171923;
    /* margin-top: -9px; */
}
.price-per-month{
    display:flex;
    align-items: center;
}
.page5 .pricing-container .pricing-box .price-button-container .price-submit-button {
    background: #04E690;
    padding: 8px 45px;
    border-radius: 5px;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1.1px;
    margin-top: 10px;
    font-family: var(--poppins-font);
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Animation */
.page5 .pricing-container .pricing-box .price-button-container .price-submit-button:hover {
    transform: translateY(-3px);
    background-color: #04CF82;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

/* Click Animation */
.page5 .pricing-container .pricing-box .price-button-container .price-submit-button:active {
    transform: translateY(2px);
    background-color: #03B873;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}

.page5 .pricing-container .pricing-box  .price-description-container{
    background: #fff;
    padding: 30px;
    width: 55%;
}
.page5 .pricing-container .pricing-box  .price-description-container p{
    color: #2D3748;
    font-size: 14px;
    margin-bottom: 20px;
    font-family: var(--poppins-font);
}
.page5 .pricing-container .pricing-box .price-description-container ul{
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}
.page5 .pricing-container .pricing-box .price-description-container ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    color: #2D3748;
    font-size: 1rem;
    /* margin-top: 12px; */
    font-family: var(--poppins-font);
}


.page5 .pricing-container .pricing-box .price-description-container ul li::before {
    content: '';
    width: 15px;
    height: 15px;
    background: var(--primary-green);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

}
.page5 .img-text-container{
    display:flex;
    justify-content: center;
    gap: 3rem;
    font-size: 0.7rem;
    color: #171923;
    align-items:center;
    margin-top: 30px;
}
.shield,.batch,.return{
    display:flex;
    gap: 0.8rem;
    align-items: center;
}
.shield p,.batch p,.return p{
 opacity:0.6;

}
.page5 .img-text-container img{
    width: 33px;
    height: 33px;
}
.steps-section {
    max-width: 600px;
    margin: 0.6rem auto;
    text-align: center;
    padding: 1rem;
    color: #183B56;
}

.steps-section h4,.price-description-container h4 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
    font-weight: bold;
}

.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    background: url('data:image/svg+xml,<svg width="36" height="165" viewBox="0 0 36 165" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.584 1.00101C14.584 1.00101 4.1806 16.4932 1.86938 29.1444C-1.80849 49.2765 17.9789 79.0116 17.9789 79.0116C17.9789 79.0116 35.3564 106.703 34.9825 126.339C34.6993 141.218 22.584 163.5 22.584 163.5" stroke="%23CDFAE9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/></svg>');
    background-repeat: no-repeat;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 0.7rem 0;
}


.step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #cdfae9;
}

.step-icon img {
    width: 20px;
    height: 20px;
}

.steps-list p {
    font-size: 1rem;
    margin: 0;
    text-align: left;
    color:#2D3748;
}

.steps-list p strong {
    font-weight: bold;
}

.note {
    margin-top: 1.5rem;
    color: #5A7184;
    font-size: 0.9rem;
}
/* page 6 start */
.page6{
    width: 100%;
    height: auto;
    display:flex;
    flex-direction: column;
    gap: 2rem;
    font-family: var(--poppins-font);
    padding-bottom: 20px;
    position: relative;
    margin-top: 5rem;
}
#navBtnLeft, #navBtnRight {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 50%;
    background-color: #00115E;
    transition: background-color 0.25s, color 0.25s; /* Smooth transition */
}

.dots-container1,.dots-container2,.dots-container3, .dots-container4,.dots-container5, .dots-container6,.dots-container7, .dots-container8{
    position:absolute;
    width: 50px;
}
.dots-container1 img,.dots-container2 img,.dots-container3 img,.dots-container4 img,.dots-container5 img,.dots-container6 img,.dots-container7 img,.dots-container8 img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.dots-container1{
    top: 05%;
    left: 100%;
}
.dots-container2{
    bottom: 05%;
    right: 100%;
}
.dots-container3{
    top: 25%;
    left: 100%;
}
.dots-container4{
    bottom: 25%;
    right: 100%;
}
.dots-container5{
    top: 45%;
    left: 100%;
}
.dots-container6{
    bottom: 45%;
    right: 100%;
}
.dots-container7{
    top: 85%;
    left: 100%;
}
.dots-container8{
    bottom: 85%;
    right: 100%;
}
.page6 .cross-icon{
    color: #70764D;
    font-size: 12px;
}


.page6 .pricing-table-title-container{
    display:flex;
    flex-direction: column;
    /* gap: .6rem; */
    align-items: center;
}
.page6 .pricing-table-title-container .heading2{
    font-size: 2.5rem;
    text-align:center;
    width: 90%;
}
.page6 .pricing-table-title-container .lines-container{
    display:flex;
    gap:0.3rem;
    margin-top:0.3rem;
    margin-bottom: 4rem;
}
.page6 .pricing-table-title-container .lines-container .line1{
    width: 55px;
    height: 0.4rem;
    background-color: var(--primary-green);
    border-radius: 6px;
}
.page6 .pricing-table-title-container .lines-container .line2{
    width: 15px;
    height: 0.4;
    background-color: var(--primary-green);
    border-radius: 6px;
}
.pricing__table {
    width: 95%;
    max-width: 1150px;
    margin:auto;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius:25px;
    overflow:hidden;
}
.table-header button{
    border: 1px solid #502274 !important;
    border-radius: 22px;
    padding: 12px 20px;
    margin-top: 25px;
    color: #502274;
    font-size: 1rem;
    white-space:nowrap;

}
.table-header h4 , .table-header p.table-price{
    color: #1E2330;
    font-size: 1.5rem;
    font-weight: 400;
    margin-top:8px;
    white-space: nowrap;
}
.table-header p.table-price{
    font-weight: 600 !important;
}
.table-header p{
    color: #676B5F;
    font-size: 0.9rem;
    font-weight: 400;
    margin-top:7px;
}
.text-white{
    color: white !important;
}

.table-header{
    background-color: #F2F3EF;
    padding: 40px;
}

 .bg-green{
    background: #d7fbed;

}
.bg-blue{
    background: #00115E;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.text-white{
    color: white;
}
button.text-white{
    background-color: #2E343F;
    border: 1px solid #EEF0F2 !important;
}
.recomonded-text{
    color: #1E2330;
    font-size: 9px;
    padding: 5px 10px;
    text-align: start;
    /* text-align: center; */
    border-radius: 8px;
    background-color: var(--primary-green);
    align-self: flex-start;
}

/* page 6 ends */

/* page7 starts */
.page7{
    padding: 30px 0px;
    width: 100%;
    font-family: var(--poppins-font);
}
.page7 .complete-seo-services-container{
    width: 100%;
    height: 100%;
    display:flex;
    align-items:center;
    flex-direction: column;
    gap: 1.8rem;
}
.page7 .heading2{
    font-size: 2.5rem;

}
.page7 .lines-container{
    display:flex;
    gap:0.3rem;
    margin-top: -21px;
}
.page7 .line1{
    width: 55px;
    height: 0.4rem;
    border-radius: 5px;
    background: var(--primary-green);
}
.page7 .line2{
    width: 20px;
    height: 7px;
    border-radius: 6px;
    background: var(--primary-green);
}
.page7 .img-container{
    width: 95%;
    margin:auto;
    overflow:hidden;
    max-width: 1200px;
    margin-top: 20px;
}
.page7 .img-container img{
    width: 100%;
    object-fit: fill;
}

/* page8 ends */

.images-section {
    width: 100%;
    height: 50vh;
}
.images-section .complete-seo-services-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: var(--poppins-font);
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.left-content {
    position: relative; /* Ensures absolute positioning is relative to this div */
    width: 200px; /* Adjust based on your layout */
    height: 100%; /* Match the container height */
}

.left-content img {
    position: absolute;
    width: 50px; /* Control image size */
    height: 50px;
    object-fit: cover;
    border-radius: 50%; /* Makes them circular */
    /* animation: float infinite 0.3s; */
    transition: transform 0.3s; /* Smooth hover effect */
}

/* Add hover effect for images */
.left-content img:hover {
    transform: scale(1.2);
}
.left-content .img1{
    width: 20px;
    height: 20px;
}
.left-content .img2{
    width: 15px;
    height: 15px;
}
.left-content .img3{
    width: 35px;
    height: 35px;
}
.left-content .smilee, .left-content .thumbsup{
    width: 20px;
    height: 20px;
}
.img4{
    width: 25px;
    width: 25px;
}
.img5{
    width: 22px;
    width: 22px;
}
.img6{
    width: 24px;
    height: 24px;
}
/* Center content */
.center-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.images-section h3.title {
    font-size: 2.5rem;
    width: 95%;
    max-width: 400px;
    text-align: center;
    color: #183B56;
    margin:auto;
}

.images-section .description {
    color: #5A7184;
    font-size: 1rem;
    max-width: 800px;
    width:92%;
    margin:auto;
}

.images-section button {
    background: var(--primary-green);
    font-family:var(--poppins-font);
    padding: 12px 50px;
    border-radius: 8px;
    color: #1E2330;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1.3rem;
    cursor: pointer;
}
.images-section button:hover{
    background-color: #04CF82;
}
.images-section button a{
    color: #fff;
    letter-spacing: 1.1px;

}
@keyframes float {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-10px, 15px);
    }
    50% {
        transform: translate(10px, -10px);
    }
    75% {
        transform: translate(-15px, -5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* page 8 styling start */
.page8 {
    width: 100%;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30px;
    font-family: var(--poppins-font);
    box-sizing: border-box;
}
.page8 .complete-seo-services-container{
    width:100% !important;
}
.page8 .text-blog-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: 100%; /* Ensures the container spans the full width */
    box-sizing: border-box;
}

.page8 .text-container {
    width: 27%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.page8 .text-container .heading2 {
    font-size: 2.5rem;
    line-height: 3rem;
    color: #183B56;
    width:210px;
}

.page8 .text-container .lines-container {
    display: flex;
    gap: 0.3rem;
}

.page8 .text-container .lines-container .line1 {
    width: 55px;
    height: 0.4rem;
    border-radius: 5px;
    background: var(--primary-green);
}

.page8 .text-container .lines-container .line2 {
    width: 15px;
    height: 7px;
    border-radius: 5px;
    background: var(--primary-green);
}

.page8 .text-container .sub-title {
    color: #183B56;
    font-size: 1rem;
    font-weight: 600;
}

.page8 .text-container .description {
    font-size: 1rem;
}

.page8 .view-blog-button {
    padding: 10px 30px;
    font-family: var(--poppins-font);
    background: #183B56;
    color: white;
    border-radius: 6px;
    font-size: 1.2rem;
    margin-top: 1.2rem;
    font-weight:bold;
    letter-spacing:1.1px;
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

.page8 .blog-container {
    display: flex;
    gap: 1.4rem;
    width: 70%;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    box-sizing: border-box;
    user-select: none;
}

.page8 .blog-container::-webkit-scrollbar {
    display: none;
}

.page8 .blog-container .blog-card {
    width: 270px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.page8 .blog-container .blog-card .img-container {
    width: 100%;
    height: 240px;
    overflow: hidden; /* Ensures the image stays within bounds */
    border-radius: 6px;
}

.page8 .blog-container .blog-card .img-container img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Ensures the image is scaled properly */
}

.page8 .blog-container .blog-card .blog-text-container .title {
    font-size: 1rem;
    font-weight: bold;
    color: #183B56;
    margin: 10px 0;
}

.page8 .blog-container .blog-card .blog-text-container .description {
    font-size: 1rem;
    color: #666;
}

/* page 8 styling ends */
.page9{
    width: 100%;
    /* min-height: 100vh; */
    background: #272727;
    padding: 50px;
    font-family: var(--poppins-font);
}

.page9 .complete-seo-services-container{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.faq-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 2px solid rgba(4, 230, 144, 0.2);
    border-radius: 8px; /* Rounded corners */
    background-color: transparent;
    color: var(--primary-green);
    font-family: var(--poppins-font);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .faq-button .icon {
    margin-right: 8px;
    /* font-size: 12px;
    padding: 3px 0px;
    border: 1px solid var(--primary-green);
    border-radius: 50%; */
  }

  /* .faq-button:hover {
    background-color: var(--primary-green);
    color: #000;
  } */
.page9 .heading2{
    color: var(--white);
    font-family: var(--poppins-font);
    margin-block: 8px;
    font-size: 2.5rem;
    line-height:3rem;
    text-align:center;
}
.page9 .lines-container{
    display:flex;
    gap: 0.3rem;
}
.page9 .lines-container .line1{
    height: 0.4rem;
    width: 55px;
    border-radius: 5px;
    background-color: var(--primary-green);
}
.page9 .lines-container .line2{
    height: 0.4rem;
    width: 15px;
    border-radius: 5px;
    background-color: var(--primary-green);
}
.page9 .description{
    color: #8F8F8F;
    font-size: 15px;
    text-align: center;
    margin-top: 15px;
    font-family: var(--poppins-font);
}
.wrapper {
    width: 60%;
  }

  h1 {
    margin-bottom: 20px;
  }

  .container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(171, 171, 171, 0.06) 100%);
    color: black;
    border-radius: 14px;
    box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
    margin: 20px 0;
  }
  .container:has(.active) {
    background: linear-gradient(0deg, #383838, #383838),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(171, 171, 171, 0.06) 100%);

}

  .question {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 15px 80px 15px 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #EBEBEB;
  }

  .question::after {
    content: "\002B";
    font-size: 1rem;
    position: absolute;
    right: 20px;
    transition: 0.2s;
    color: #8F8F8F;

  }

  .question.active::after {
    content: "-";
    color: #EBEBEB;
  }

  .answercont {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
  }

  .answer {
    padding: 0 20px 20px;
    line-height: 1.2rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #D1D1D1;
    display:flex;
    flex-direction:column;
    gap: 0.5rem;
    margin-top: 17px;
}
.hidden-faq{
    display:none;
}
.answer b{
    font-size: 0.8rem;
}
.answer ul{
    padding-left: 20px;
}

  @media screen and (max-width: 790px){
    .wrapper {
    width: 80%;
  }

  }
  @media screen and (max-width: 600px){
    .wrapper {
    width: 95%;
  }
  .left-content{
    display: none;
  }
  }
  .page7 .description{
    font-size: 1rem;
    font-family: var(--poppins-font);
  }

  .see-all-faq-button {
    display: flex;
    font-family: var(--poppins-font);
    align-items: center;
    gap: 8px;
    background-color: #383838;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1.2rem;
    font-weight:600;
    letter-spacing: 1.1px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #555;
    transition: all 0.2s ease-in-out;
  }

  .see-all-faq-button:hover {
    background-color: #444; /* Slightly lighter on hover */
    box-shadow: 0 6px 8px rgba(40, 40, 40, 0.2);
  }

  .see-all-faq-button .arrow {
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.2s ease-in-out;
  }

  .see-all-faq-button:hover .arrow {
    transform: translateX(4px);
  }


  .page10{
    width:100%;
    /* min-height: 80vh; */
    /* display: flex;
    align-items: center; */
  }
  .page10 .text-arrow-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    margin:auto;
    padding: 30px;
    margin-top: 80px;
    box-sizing: border-box;
    line-height: 38px;
  }
  .page10 .text-arrow-container .text-container .heading2{
    font-family: var(--poppins-font);
    color: #183B56;
    font-size: 2.5rem;
    line-height:3rem;
    position: relative;
    width:411px;
  }
  .page10 .text-arrow-container .text-container .heading2::before {
    content: url('data:image/svg+xml,%3Csvg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M29.8456 14C31.4706 14 32.8456 15.375 32.8456 17V25C32.8456 26.6875 31.4706 28 29.8456 28H21.8456C20.1581 28 18.8456 26.6875 18.8456 25V10C18.8456 4.5 23.2831 0 28.8456 0H29.3456C30.1581 0 30.8456 0.6875 30.8456 1.5V4.5C30.8456 5.375 30.1581 6 29.3456 6H28.8456C26.5956 6 24.8456 7.8125 24.8456 10V14H29.8456ZM11.8456 14C13.4706 14 14.8456 15.375 14.8456 17V25C14.8456 26.6875 13.4706 28 11.8456 28H3.84561C2.15811 28 0.845613 26.6875 0.845613 25V10C0.845613 4.5 5.28311 0 10.8456 0H11.3456C12.1581 0 12.8456 0.6875 12.8456 1.5V4.5C12.8456 5.375 12.1581 6 11.3456 6H10.8456C8.59561 6 6.84561 7.8125 6.84561 10V14H11.8456Z" fill="white"%3E%3C/path%3E%3C/svg%3E');
    display: flex;
    justify-content: center;
    padding: 12px;
    align-items: center;
    font-size: 20px;
    width: 70px;
    height: 70px;
    color: var(--white);
    background: var(--primary-green);
    position: absolute;
    top: -55%;
    left: -17%;
    z-index: -1;
    border-radius: 50%;
  }
  .page10 .text-arrow-container .text-container .lines-container{
    display:flex;
    gap: 0.3rem;
    margin-top: 0.8rem;
  }
  .page10 .text-arrow-container .text-container .lines-container .line1{
    width: 55px;
    height: 0.4rem;
    background-color: var(--primary-green);
    border-radius: 6px;
  }
  .page10 .text-arrow-container .text-container .lines-container .line2{
    width: 15px;
    height: 0.4rem;
    background-color: var(--primary-green);
    border-radius: 6px;
  }
.slideContainer{
    width: 100%;
    max-width: 950px;
    margin: auto;
}
.post-slide{
    overflow:hidden;
    margin-right:15px;
    background-color:#fff!important;
    width: 100%;
    max-width: 450px;
    height:320px;
    padding: 20px;
    display:flex;
    flex-direction: column;
    justify-content:space-evenly;
    gap: 1.3rem;
}
.post-slide .title{
    font-size: 1.2rem;
    color: #183B56;
    font-family: var(--poppins-font);
    font-weight: 400;
    max-width: 420px;
}
.post-slide .review{
    font-size: 12px;
    color: #5A7184;
    font-family: var(--poppins-font);
    font-weight: 400;
}
.post-slide .img-name-container{
    display:flex;
    gap: 1rem;
    font-family: var(--poppins-font);
}
.post-slide .img-container{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow:hidden;
}
.post-slide .img-container img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.post-slide .img-name-container .name-container .name{
    color: #183B56;
    font-size: 13px;
    font-weight: 600;
}
.post-slide .img-name-container .name-container .company{
    color: #5A7184;
    font-size: 12px;
    font-weight: 400;
}
.owl-nav{
    display:flex;
    gap: 15px;
    position: absolute;
    top: -51px;
    left: 88%;
}
@media screen and (max-width:1025px)  {
    .page1{
        height:19vh;
        min-height: 665px;
        /* margin-top: 90px; */
    }
    .track-text {
        font-size: 0.7rem;
    }
    .page1 .dashboard .card .img-text-container img{
        height: 20px;
    }
    .page1 .text-container {
        margin-top: -.5rem;
        padding-left: .8rem;
        gap: .4rem
    }

    .page1 .text-container h1 {
        font-size: 2rem;
        line-height: 2.5rem;
        width: 100% !important
    }

    .page1 .text-container p.description {
        font-size: .8rem;
        line-height: 1.3rem
    }

    .page1 .text-container .button-container button {
        font-size: 0.8rem;
        padding: .5rem 1.3rem;
        border-radius: 7px;
        margin-top: .5rem;
        font-weight:bold;
        margin-top:1.3rem;
        letter-spacing:1.1px;
    }
    .page1 .dashboard{
        margin-top: 3rem;
        padding: 40px;
        display:none;
    }
    .page1 .card {
        padding: 5px;
      }
      .chart img {
        width: 146px;
      }
      #website-audit .chart img, #mobile-optimized .chart img {
        height: 82px;
      }
      .page1 .sub-text{
        opacity: 0.4;
        font-size: 0.4rem;
      }
      .page1 .number {
        font-size: 0.7rem;
        width: 40px;
      }

      .amount {
        font-size: 0.7rem;
      }
    .two-cards-container{
        gap: 0.6rem;
    }
      .two-cards-container #new-users .img-text-container{
        gap: 8px;
      }
      .two-cards-container #new-users .img-text-container .img-container{
        padding: 8px;
        border-radius: 13px;
      }
      .new-users-text-container p{
        font-size: 0.5rem;
        text-align: start;
      }
      #new-users{
        padding-bottom: -3px;
      }
}

@media screen and (max-width:1025px) {
    .page1 .image-text-container {
        flex-direction: column;
        margin-top:72px;
    }

    .page1 .dashboard {
        order: -1;
        justify-content: center
    }
    .page1 .text-container {
        margin-top: 1.5rem;
        padding-left: .8rem;
        gap: .4rem;
    }
    .graph-analitics {
        /* width: 740px; */
        /* height: 430px; */
    }
    .circular-chart{
        width: 75px;
        height: 75px;
    }
    .circle-svg {
        width: 75px;
        height: 75px;
    }
    .post-type h3 {
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.1rem;
    }
    .post-type .labels{
        margin-top: 0;
    }
    .post-type .label{
        font-size:10px;
    }
    .page3{
        max-height: 350px;
    }

}

@media screen and (max-width:800px){
    .post-type {
        padding: 4px;
        left: -30%;
    }
    /* .graph-analitics {
        height: 261px;
    } */
    .page2{
        height: 200px;
    }
    .likes-container {
        display: flex;
        padding: 7px;
        width: 121px;
        height: 64px;
    }
    .page4 .img-text-container {
        flex-direction: column;
    }
    .page4 .img-text-container .text-container {
        width: 100%;
        justify-content:flex-start;
    }
    .page4 .img-text-container .img-container {
        width:100%;
    }
    .page4{
        padding-bottom: 40px;
    }
    .page5 .pricing-container .pricing-box .price-button-container {
        background-color: #d5d6de;
        padding: 15px;
    }
    .page5 .pricing-container .pricing-box .price-button-container .price-submit-button {
        padding: 8px 22px;
    }
    .page5 .pricing-container .pricing-box .price-description-container {
        background: #fff;
        padding: 15px;
    }
    .page5 .pricing-container {
        width: 100%;
        /* margin-top: -30px; */
    }
    .page5 .img-text-container {
        display: flex;
        gap: 2.5rem;
        width:95%;
    }
    .page5 .img-text-container {
        margin-top: 35px;
    }
}

@media screen and (max-width:1280px){
    .core-web-vital-chart{
        padding: 12px;
    }
}
@media screen and (max-width: 1025px){
    .page10{
        padding: 30px;
    }
    /* .page6 .pricing-table-title-container .heading2 {
        font-size: 2rem;
      } */
    .page10 .text-arrow-container .text-container .heading2::before {
        content: url('data:image/svg+xml,%3Csvg width="22" height="20" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M29.8456 14C31.4706 14 32.8456 15.375 32.8456 17V25C32.8456 26.6875 31.4706 28 29.8456 28H21.8456C20.1581 28 18.8456 26.6875 18.8456 25V10C18.8456 4.5 23.2831 0 28.8456 0H29.3456C30.1581 0 30.8456 0.6875 30.8456 1.5V4.5C30.8456 5.375 30.1581 6 29.3456 6H28.8456C26.5956 6 24.8456 7.8125 24.8456 10V14H29.8456ZM11.8456 14C13.4706 14 14.8456 15.375 14.8456 17V25C14.8456 26.6875 13.4706 28 11.8456 28H3.84561C2.15811 28 0.845613 26.6875 0.845613 25V10C0.845613 4.5 5.28311 0 10.8456 0H11.3456C12.1581 0 12.8456 0.6875 12.8456 1.5V4.5C12.8456 5.375 12.1581 6 11.3456 6H10.8456C8.59561 6 6.84561 7.8125 6.84561 10V14H11.8456Z" fill="white"%3E%3C/path%3E%3C/svg%3E');
        display: flex;
        justify-content: center;
        padding: 12px;
        align-items: center;
        font-size: 20px;
        width: 50px;
        height: 50px;
        color: var(--white);
        background: var(--primary-green);
        position: absolute;
        top: -42%;
        left: -12%;
        z-index: -1;
        border-radius: 50%;
      }
      .page8 .text-blog-container {
        flex-direction: column;
        /* align-items:center; */
      }
      .page8 .text-container {
        width: 100%;
        margin:auto;
      }
      .page8 .blog-container {
        width: 100%;
      }
      .page5 .text-container .heading {
        color: #F7FAFC;
        font-size: 2.2rem;
        text-align: center;
        line-height: 1.2;
    }
    .page5 .pricing-container .pricing-box .price-button-container .price {
        font-size: 2rem;
    }
    .page5 .pricing-container .pricing-box .price-button-container .title {
        font-size: 0.8rem;
    }
    .page5 .pricing-container .pricing-box .price-button-container .sub-title {
        font-size: 0.7rem;
        /* margin-top: -15px; */
    }
    .page5 .pricing-container .pricing-box .price-description-container p {
        font-size: 12px;
        margin-bottom: 17px;
    }
    .page5 .pricing-container .pricing-box .price-description-container ul li {
        font-size: 0.8rem;
        margin-top: 10px;
    }
    .steps-list p{
        font-size:0.8rem;
    }
}
@media screen and (max-width:400px){
    .page1{
    min-height: 135vh;
    }
}
@media screen and (max-width:600px) {

    .page1 .text-container {
        margin-top: -.5rem;
        padding-left: .8rem;
        gap: .4rem;
        /* justify-content: center; */
        width: 100vw;
    }

    .page1 .text-container h1 {
        font-size: 1.6rem;
        line-height: 2.2rem
    }

    .page1 .text-container p.description {
        font-size: .8rem;
        line-height: 1.3rem;
        max-width: 88%;
    }

    .page1 .text-container .button-container button {
        font-size: .8rem;
        padding: .5rem 1.3rem;
        border-radius: 7px;
        margin-top: 1.3rem
    }
    .post-type {
        padding: 4px;
        left: -36%;
    }
    /* .graph-analitics {
        height: 260px;
    } */
    .post-type{
        display: none;
    }
    .likes-container {
        display:none;
    }
    .page3{
        /* padding: 20px; */
        max-height: 400px;
    }
    .page3 h2 {
        font-size: 2rem;
        line-height:2.6rem;
        margin-top: 1.1rem;
        text-align: center;
    }
    .page3 .description {
        font-size:0.8rem;
        text-align: center;
        max-width: 560px;
    }
    .page3 .lines-container .line2 {
        width: 15px;
    }
    .page3 .lines-container .line1 {
        width: 55px;
    }
    .circle-wrap .mask {
        width: 130px;
        height: 130px;
        position: absolute;
        border-radius: 50%;
        clip: rect(0px, 130px, 130px, 65px);
    }
    .circle-wrap .fill {
        width: 130px;
        height: 130px;
        position: absolute;
        border-radius: 50%;
        clip: rect(0px, 65px, 130px, 0px);
        background-color: var(--primary-green);
    }
    .circle-wrap .mask {
        width: 130px;
        height: 130px;
        position: absolute;
        border-radius: 50%;
        clip: rect(0px, 130px, 130px, 65px);
    }
    .circle-wrap {
        width: 130px;
        height: 130px;
        background: #ddd;
        border-radius: 50%;
        position: relative;
    }
    .circle-wrap .inside-circle {
        width: 110px;
        height: 110px;
    }
    .page4 .img-text-container {
        width: 88%;
    }
    .circle-wrap .inside-circle .percentage {
        font-size: 1.7rem;
    }

    .page8 .blog-container .blog-card .img-container {
        height: 200px;
    }
    .page8 .blog-container .blog-card {
        width: 230px;
    }
    .page8 .blog-container {
        width: 100%;
      }
      .page5 .text-container{
        min-height:737px;
      }
      .page5 .text-container .heading{
        font-size: 1.6rem;
      }
      .page5 .text-container .description{
        color: #F7FAFC;
        font-size: 0.8rem;
      }
      .page5 .pricing-container{
        margin-top:-440px;
      }
      /* .page6 .pricing-table-title-container .heading2 {
        font-size: 1.6rem;
      } */
      .page5 .pricing-container .pricing-box{
        flex-direction: column;
      }
      .page5 .price-steps-container {
        width: 100%;
      }
      .page5 .pricing-container .pricing-box .price-description-container {
width: 100%;
      }
      .page5 .pricing-container .pricing-box .price-description-container ul {
        gap:0.6rem;
      }
}
@media screen and (max-width:480px){
    .page10 .text-arrow-container .text-container .heading2::before {
        content: url('data:image/svg+xml,%3Csvg width="22" height="20" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M29.8456 14C31.4706 14 32.8456 15.375 32.8456 17V25C32.8456 26.6875 31.4706 28 29.8456 28H21.8456C20.1581 28 18.8456 26.6875 18.8456 25V10C18.8456 4.5 23.2831 0 28.8456 0H29.3456C30.1581 0 30.8456 0.6875 30.8456 1.5V4.5C30.8456 5.375 30.1581 6 29.3456 6H28.8456C26.5956 6 24.8456 7.8125 24.8456 10V14H29.8456ZM11.8456 14C13.4706 14 14.8456 15.375 14.8456 17V25C14.8456 26.6875 13.4706 28 11.8456 28H3.84561C2.15811 28 0.845613 26.6875 0.845613 25V10C0.845613 4.5 5.28311 0 10.8456 0H11.3456C12.1581 0 12.8456 0.6875 12.8456 1.5V4.5C12.8456 5.375 12.1581 6 11.3456 6H10.8456C8.59561 6 6.84561 7.8125 6.84561 10V14H11.8456Z" fill="white"%3E%3C/path%3E%3C/svg%3E');
        padding: 12px;
        width: 40px;
        height: 40px;
        top: -50%;
        left: -13%;

    }
}


  .pricing__table {
    display: flex;
    /* margin: 30px 30px 90px 30px; */
  }

  @media (max-width: 640px) {
    .pricing__table {
      margin: auto;
      width: 94%;
    }
  }

  .pt__title {
    max-width: 25%;
    flex: 1;
  }

  @media (max-width: 991px) {
    .pt__title {
      max-width: 50%;
    }
    .table-header{
        position:sticky;
        top:0;
        z-index: 1;
    }
    .pt__item__wrap {
        transition: transform 0.3s ease; /* Smooth sliding effect */
        will-change: transform; /* Optimize animation performance */
    }

    .pt__item__wrap,.pt__title__wrap {
        max-height: calc(100vh - 100px);
        overflow-y: scroll;
    }
    .pt__item__wrap,.pt__title_wrap {
        scrollbar-width: none; /* For Firefox */
        -ms-overflow-style: none; /* For Internet Explorer and Edge */
    }

    .pt__item__wrap::-webkit-scrollbar, .pt__title__wrap::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }

  }

  .pt__title__wrap {
    position: relative;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /* padding: 24px 0; */
    font-size: 1.375rem;
    line-height: 1.4;
    text-align: center;
  }

  @media (max-width: 991px) {
    .pt__title__wrap {
      font-size: 1.3rem;
    }
  }

  .pt__row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    min-height: 70px;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid rgba(73, 72, 74, 0.1);
    text-align: left;
    /* align-items: flex-start; */
  }
  .pt__row button{
    cursor:pointer;
    width: fit-content;
    transition: all 0.3s ease-in;
  }
  .pt__row button:hover{
    background: var(--primary-green);
  }

  .pt__row:first-child {
    border-bottom: 0;
  }

  @media (max-width: 991px) {
    .pt__row {
      padding-left: 32px;
      padding-right: 32px;
    }
  }

  @media (max-width: 640px) {
    .pt__row {
      padding-left: 0;
      padding-right: 15px;
      font-size: 14px;
    }
  }

  .pt__option {
    position: relative;
    flex: 1;
  }

  @media (max-width: 991px) {
    .pt__option {
      max-width: 50%;
    }
  }

  .pt__option__mobile__nav {
    position: absolute;
    z-index: 1;
    top: 0%;
    left: 0%;
    display: none;
    justify-content: space-between;
    width: 100%;
  }

  @media (max-width: 991px) {
    .pt__option__mobile__nav {
      z-index: 2;
      top: 8px;
      display: flex;
      grid-column-gap: 8px;
      grid-row-gap: 8px;
      width: 102%;
      margin-left: -5%;
    }
  }

  .mobile__nav__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 50%;
    background-color: #0061ff;
    transition: 0.25s;
  }

  .mobile__nav__btn:hover {
    background-color: #0057e6;
  }
  .swiper-wrapper{
    display:flex;
  }

  .mobile__nav__btn.swiper-button-disabled {
    background-color: #c0beb6;
    pointer-events: none;
  }

  .mobile__nav__btn svg {
    width: 16px;
    color: #faf7f2;
  }

  .pt__option__slider {
    overflow: hidden;
  }

  @media (max-width: 991px) {
    .pt__option__slider {
      overflow: hidden;
    }
  }

  .pt__option__item {
    flex: 1;
    width: auto;
    max-width: 33.3333%;
    margin-right: 0;
  }

  @media (max-width: 991px) {
    .pt__option__item {
      width: 100%;
      max-width: none;
      flex: none;
    }
  }

  .pt__item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    /* margin-bottom: 1em; */
    overflow: hidden;
    /* border-radius: 24px; */
  }
  .pt__title__wrap .pt__row:not(.table-header) {
    font-size: 0.9rem;
    color: #1E2330;
    text-align:start;
    font-weight:400;
}
.pt__item__wrap .pt__row:not(.table-header){
    font-size: 0.9rem;
    color: #1E2330;
    font-weight:400;
}

.pt__row .cross-icon,.pt__row .tick-icon{
    font-size: 1rem;
    font-weight: 600;
}
.table-header{
    text-align: start !important;
}

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

  .pt__item.recommend {
    background-color: rgba(0, 97, 255, 0.15);
    border: 1px solid #0061ff;
  }

  .pt__item__wrap {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: center;
    /* padding: 24px 0 0 0; */
    font-size: 1.375rem;
    line-height: 1.4;
    position: relative;
  }

  @media (max-width: 991px) {
    .pt__item__wrap {
      font-size: 1.3rem;
    }
  }

  .pt__row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--poppins-font);
    min-height: 60px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    font-weight: 300;
    border-bottom: 1px solid #E4E5DE;
    text-align: center;
  }
  .pt__item__wrap{
    text-align: center;
  }

  .pt__row:first-child {
    border-bottom: 0;
    font-size: 20px;
    font-weight: 600;
  }

  .pt__row:last-child {
    border-bottom: 0;
  }


  @media (max-width: 640px) {
    .pt__row {
      font-size: 14px;
      font-weight: 400;
    }
  }

  h1 {
    text-align: center;
    margin-top: 60px;
    padding: 0 30px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.4;
  }


  @media screen and (max-width:1650px){
    .page1 .text-container h1 {
        font-size: 3.5rem;
        width:661px !important;
    }
    .page1 .text-container p.description{
        line-height: 1.7rem;
    }

    .page4 .img-text-container .text-container .description p,.page4 .img-text-container .text-container .description h3{
        font-size:0.8rem;
        line-height:1.3rem;
    }
    .page4 .img-text-container{
        width:91%;
    }
  }
  @media screen and (max-width:1540px){
    .page1 .text-container h1 {
        font-size: 3.2rem;
        line-height: 3.6rem;
        width:604px !important;
    }
    .images-section button{
        font-size:1rem;
        letter-spacing: 1.1rem;
    }
    .page8 .view-blog-button,.see-all-faq-button,.page5 .pricing-container .pricing-box .price-button-container .price-submit-button{
        font-size:1rem;
    }
    .page3 .description{
        font-size:0.8rem;
        line-height:1.5rem;
        max-width:1050px;
    }
    .page4 .img-text-container .text-container .description{
        gap:1rem;
    }
    .page1 .text-container p.description{
        font-size: 1rem;
        line-height: 1.7rem;
    }
    .page1 .text-container .button-container button{
        font-size: 1.1rem;
        padding: .9rem 2rem;
    }
    .page8 .complete-seo-services-container{
        width:100%;
    }
  }

  @media screen and (max-width:1470px){
    .page1 .text-container h1 {
        font-size: 3rem;
        line-height:3.5rem;
    }
    .page1 .text-container p.description{
        font-size: 1rem;
        line-height: 1.7rem;
    }
    .page1 .dashboard{
        padding:30px;
    }
  }

  @media screen and (max-width:1280px){
    .page1 .text-container h1 {
        font-size: 2.5rem;
        line-height:3rem;
        width:472px !important;
    }
    .images-section button{
        font-size:0.8rem;
    }
    .page8 .view-blog-button,.see-all-faq-button,.page5 .pricing-container .pricing-box .price-button-container .price-submit-button{
        font-size: 0.8rem;
    }
    .page1 .text-container p.description{
        font-size: 0.8rem;
        line-height: 1.4rem;
    }
    .track-text{
        font-size: 0.9rem;
    }
    #track_growth {
        width: 240px;
        height: 240px;
    }
    .chart img {
        width: 197px;
    }
    #mobile-optimized, #website-audit {
        width: 200px;
    }
    #website-audit .chart img, #mobile-optimized .chart img {
        height: 220px;
    }
    #track_growth .chart img{
        margin:-40px 0 0 6px;
        width: 245px;
    }
    .page1 .text-container .button-container button{
        padding: 0.7rem 1.8rem;
        font-size: 0.8rem;
    }

  }
  @media screen and (max-width:1200px){
    .graph-analitics{
        display:none !important;
    }
    .dashboard-img{
        display:block;
        margin-top: -100px;
        width: 95%;
        max-width: 700px;
    }
    .dashboard-img img{
        width:100%;
        height: 100%;
    }
    .page2{
        min-height: 400px;
    }

    .page3 h2, .page4 .img-text-container .text-container h2, .page5 .text-container .heading, .page6, .pricing-table-title-container .heading2, .images-section h3.title, .page7 .heading2, .page8 .text-container .heading2, .page9 .heading2, .page10 .text-arrow-container .text-container .heading2, .page8 .text-container .heading2{
        font-size:2.2rem !important;
        line-height:2.8rem !important;
    }
    .page4 .img-text-container .text-container h2,.page10 .text-arrow-container .text-container .heading2{
        max-width:377px;
    }
    .page8 .text-container .heading2{
        max-width: 180px;
    }
    .dots-container1,.dots-container2,.dots-container3,.dots-container4,.dots-container5,.dots-container6,.dots-container7,.dots-container8{
        display:none;
        }


    }

  @media screen and (max-width:1105px) and (min-width:1025px){
    .page1 .text-container h1 {
        font-size: 2.1rem;
        line-height:3rem;
        width:397px !important;
    }
    .page1 .text-container p.description{
        font-size: 0.8rem;
        line-height: 1.2rem;
    }

  }

  @media screen and (max-width:1025px){
    .page1{
        min-height:665px;
    }
    .page1 .text-container h1{
        width:472px !important;
    }
    /* .complete-seo-services-container{
        width:100%;
    } */
    .page1 .text-container {
        margin:0;
        width:100%;
    }
    .page1 .text-container p.description{
        max-width: 600px;
    }
    .page2 .meters-container{
        display:flex;
        flex-direction: column;
        justify-content: center;
    }
    .page2 .meters-container .meter img{
        width:55px;
    }
    .page2 .meters-container .meter p{
        font-size:0.7rem;
        white-space: nowrap;
    }
    .page2 .meters-container .meter svg{
        width:60px;
    }
    .charts-container{
        grid-template-columns:1fr 1fr;
    }
    .page4 .img-text-container{
        width:95%;
    }
    .page4 .circular-progress{
        left:37%;
    }
    /* .page4 .img-text-container .text-container h2{
        font-size:1.5rem;
    } */
    .dots-container1 img,.dots-container2 img{
        display:none;
    }
    .page8 .complete-seo-services-container,.page6 .complete-seo-services-container{
        width:100%;
    }
    .images-section .description{
        font-size:0.8rem;
    }
    .page8 .text-container .description{
        font-size:0.8rem;
    }
    .page8 .blog-container .blog-card .blog-text-container .description{
        font-size:0.8rem;
    }
    .page8 .text-container .sub-title{
        font-size: 0.8rem !important;
    }
  }
  @media screen and (max-width:800px){
    .page4{
        min-height: 1230px;

    }
    .page4 .img-text-container .text-container{
        width:90%;
        max-width: 600px;
    }
    .page9{
        padding:50px 20px;
    }
    .page9 .complete-seo-services-container{
        width:100%;
    }
    .page10 .complete-seo-services-container{
        width:100%;
    }
    .page3 h2, .page4 .img-text-container .text-container h2, .page5 .text-container .heading, .page6, .pricing-table-title-container .heading2, .images-section h3.title, .page7 .heading2, .page8 .text-container .heading2, .page9 .heading2, .page10 .text-arrow-container .text-container .heading2, .page8 .text-container .heading2{
        font-size:1.8rem !important;
    }
  }
  @media screen and (max-width:600px){
    .page1 .text-container h1 {
        font-size: 2rem;
        line-height: 2.5rem;
        width:426px !important;
    }
    .dashboard-img{
        margin-top:-70px;
    }
    .page1 .text-container .button-container button{
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
    .page1 .text-container p.description {
        max-width: 450px;
    }
    .page2{
        min-height: 300px;
    }
    .page3{
        max-height:470px;
    }
    .pt__title__wrap .pt__row:not(.table-header){
        font-size:0.7rem;
    }
    .page10 .text-arrow-container .text-container .heading2{
        font-size:26px;
        line-height:2rem;
        width:330px;
    }
    .page6{
        margin-top:4rem;
    }

  }

  @media screen and (max-width:530px){
    .page4{
        min-height:1230px;
    }
    .shield, .batch, .return{
        flex-direction:column;
        font-size: 0.5rem;
        text-align: center;
        justify-content: center;
    }
    .page5 .img-text-container{
        justify-content: center;
    }
    .page9 .heading2{
        font-size:30px;
    }
  }
  @media screen and (max-width:520px){
    .page4{
        min-height:1450px;
    }
  }
  @media screen and (max-width:500px){
    .page1 .text-container h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .page5 .text-container{
        min-height: 800px;
    }
    #track_growth {
        width: 169px;
        height: 180px;
    }
    .chart img {
        width: 132px;
        margin-top:0;
    }
    #mobile-optimized, #website-audit {
        width: 169px;
    }
    #website-audit .chart img, #mobile-optimized .chart img {
        height: 100px;
    }
    .page2{
        min-height: 250px;
    }
    .page1 .text-container p.description {
        font-size: 0.8rem;
        line-height: 1.2rem;
    }
  }
  @media screen and (max-width:435px){
    .page1 .text-container h1 {
        font-size:1.7rem;
        line-height: 2rem;
        width:321px !important;
    }
    .dashboard-img{
        margin-top: -60px;
    }
    .page2{
        min-height: 200px;
    }
    .page10 .text-arrow-container .text-container .heading2{
        font-size:1.7rem !important;
        width:298px;
        line-height:2.2rem !important;
    }
  }

  @media screen and (max-width:390px){
    .page1 .text-container h1 {
        font-size: 1.5rem;
        line-height: 1.8rem;
        width:95% !important;
    }
    .page4{
        height: 1462px;
    }
    .page10 .text-arrow-container .text-container .heading2{
        font-size:1.6rem !important;
    }
    .post-slide{
        height:400px;
    }
  }

  :root {
    --progress-bar-width: 215px;
    --progress-bar-height: 215px;
    --font-size: 2rem;
  }

  .circular-progress {
    width: var(--progress-bar-width);
    height: var(--progress-bar-height);
    position: absolute;
    top: 26%;
    left: 42%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform:rotate(180deg)
  }
  .circular-progress::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    mask-image: radial-gradient(circle, transparent 98%, black 100%);
    -webkit-mask-image: radial-gradient(circle, transparent 98%, black 100%);
    background: inherit; /* Match the conic-gradient background */
    z-index: 1;
  }

  .inner-circle {
    position: absolute;
    width: calc(var(--progress-bar-width) - 18px);
    height: calc(var(--progress-bar-height) - 18px);
    border-radius: 50%;
  /*   background-color: lightgrey; */

  }

  .circular-progress .percentage {
    position: relative;
    font-size: var(--font-size);
    color: rgb(0, 0, 0, 0.8);
    transform:rotate(180deg)
  }
  .circular-progress .percentage{
    font-size: 2.5rem !important;
    font-weight:bold;
    font-family: var(--poppins-font);
  }

  @media screen and (max-width: 1200px) {
    :root {
      --progress-bar-width: 180px;
      --progress-bar-height: 180px;
      --font-size: 1.3rem;
    }
    .circular-progress .percentage{
        font-size:2rem !important;
    }
    .upto-text {
        top: 120px;
        font-size: 0.8rem !important;
    }
    .more-traffic-text {
        font-size: 0.8rem;
        top: 47px;
    }
  }

  @media screen and (max-width: 500px) {
    :root {
      --progress-bar-width: 140px;
      --progress-bar-height: 140px;
      --font-size: 1rem;
    }
    .circular-progress .percentage{
        font-size:1.7rem !important;
    }
    .upto-text {
        top: 91px;
    }
    .more-traffic-text {
        top: 37px;
    }
  }


:root{
  --custom-progress-width: 60px;
  --custom-progress-height: 60px;
  --custom-font-size: 1rem;
}

  .custom-circular-progress {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .custom-inner-circle {
    position: absolute;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
  }

  .custom-percentage {
    position: relative;
    font-size: var(--custom-font-size, 1.5rem);
    color: rgba(0, 0, 0, 0.8);
  }
  .apexcharts-legend{
    top:0!important;
  }
  .apexcharts-toolbar{
    display:none;
  }
  .meter{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #chart{
    height:100%;
    width:100%;
  }