﻿body {
}
.padded-section {
    padding: 20px; 
}
.cg {
    padding: 30px;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 22px;
}

   
  

/* Individual styling for each <p> element */
.guarantee-left p:first-of-type {
    color: #1f41c4;
    font-size: 50px;
    font-weight: 600;
    line-height: 45.989px;
    letter-spacing: -1.14px;

}

.guarantee-left p:last-of-type {
    font-size: 22px;
    color: #555;
    font-weight:600;
    margin: 0 0 10px;
}
.the-cg{
    margin-top:30px;
}
    .the-cg p:first-of-type {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: -0.25px;
        color: #000;
    }

    

    .the-cg p:last-of-type {
        font-size: 20px;
        font-weight: 600;
        line-height: 18px;
        color: #000000;
    }

.inner-cg{
    margin-top:30px;
}
.inner-cg p:first-of-type {
    font-size: 20px;
    font-weight: 400;
    line-height: 18px;
    color: #a0a9b3;
}

    .inner-cg p:last-of-type {
        color: #000000;
        font-family: Homemade Apple;
        font-size: 20px;
        font-weight: 400;
        line-height: 36px;
       
    }
.top-right-image img {
    max-width: 100%; 
    height: auto; 
    border-radius: 8px; 
   
    cursor: pointer; 
}
/* Image styling */
.trusted-cg {
    margin-top:4.5rem;
}
.inner-image img {
    width: 120px;
    height: auto;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}
.trust-h p {
    font-size: 20px;
    font-weight: 800;
    line-height: 27px;
    color: #a0a9b3;
    letter-spacing:1px;
}

    .trust-h p span:first-child {
        color: #2f3031;
        font-size: 40px;
        font-weight: 600;
        line-height: 18px;
        letter-spacing: -1.6px;
    }

    .trust-h p span:last-child {
        color: #2f3031;
        font-size: 24px;
        font-weight: 500;
        line-height: 18px;
    }


.all-images {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top:15px;
}
.more-text p {
    width: 57px;
    height: 42px;
    margin: 0 auto;
    color: #a0a9b3;
    font-size: 20px;
    font-weight: 800;
    line-height: 18px;
}
    .all-images .image-row {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

        .all-images .image-row img {
            max-width: 50px;
            height: auto;
            border-radius: 5px;
            
        }

        .all-images .image-row:last-child {
            justify-content: flex-start;
        }

    
@media (max-width: 468px) {
    .all-images .image-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .all-images .image-row img {
            width: calc(50% - 5px);
        }
}

@media (min-width: 469px) and (max-width: 768px) {
    .all-images .image-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .all-images .image-row img {
            width: calc(25% - 10px);
        }
}

@media (min-width: 769px) {
    .all-images .image-row img {
        width: 50px;
    }
}
.trusted-content p:nth-of-type(1) {
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
    text-align: left;
    letter-spacing: -0.72px;
    color: #1f41c4;
}
    .trusted-content p:nth-of-type(1) span {
        font-size: 22px;
        color: #1f41c4;
        font-weight: 300;
        line-height: 33.886px;
        text-align: left;
        letter-spacing: -0.84px
    }
.trusted-content p:nth-of-type(2) {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.25px;
    color: #000;
}
.bene-image img{
    width:100%;
    height:auto;
    object-fit:cover;
}
.last-part {
    margin-top: 5rem;
}
.benefit-title {
    color: #4b70e2;
    margin-top:15px;
    font-size: 20px;
    font-weight: 900;
    line-height: 21.784px;
}

.benefit-content {
    color: #676767;

    font-size: 28px;
    font-weight: 700;
    line-height: 37.8px;
    letter-spacing: -0.5px;
}
.benefit-description {
    color: #4d4d4d;
    font-size: 17px;
    font-weight: 400;
    line-height: 21px;
}
.inner-last {
    border-right: 1px solid #ccc;
    padding-right: 10px;
    margin-top: 3rem;
}

.free {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 3rem;
}

    .free:last-child {
        border-bottom: none;
    }
.end-line {
    text-align: center; 
    margin: 20px 0; 
}

    .end-line p {
        max-width: 800px; 
        margin: 0 auto; 
        font-size: 32px; 
        line-height: 1.6; 
        font-weight:300;
    }

    .end-line span {
        font-size: 32px;
        font-weight: 600;
        line-height: 45.76px;
        text-align: center
    }
@media (max-width: 468px) {
    .end-line p {
      
        margin: 0 auto; 
        font-size: 22px; 
        line-height: 18px; 
        font-weight:300;
    }

    .end-line span {
        font-size: 16px;
        font-weight: 600;
   
        text-align: center
    }
}
@media (max-width: 768px) {
    .end-line p {
        margin: 0 auto;
        font-size: 22px;
        line-height: 18px;
        font-weight: 300;
    }

    .end-line span {
        font-size: 16px;
        font-weight: 600;
        text-align: center
    }
}
@media (max-width: 468px){
   .benefit-item free-website{
    margin-top:15px;
   }
    .benefit-content {
        color: #676767;
        font-size: 16px;
        font-weight: 700;
        line-height: 15px;
        letter-spacing: -0.5px;
    }

    .benefit-description {
        color: #4d4d4d;
        font-size: 15px;
        font-weight: 400;
        line-height: 21px;
    }
}
@media screen and (max-width: 468px) {
    .trusted-content p:nth-of-type(1) {
        font-size: 26px; 
        line-height: 31.2px;
        letter-spacing: -0.55px;
    }

        .trusted-content p:nth-of-type(1) span {
            font-size: 19px; 
            line-height: 28.5px;
            letter-spacing: -0.65px;
        }

    .trusted-content p:nth-of-type(2) {
        font-size: 15px; 
        line-height: 1.45;
        letter-spacing: -0.18px;
    }

    .bene-image img {
        height: 250px; 
    }
}
@media screen and (max-width: 768px) {
    .trust-h p {
        font-size: 18px; 
        line-height: 16px;
    }
}

@media screen and (max-width: 468px) {
    .trust-h p {
        font-size: 16px; 
        line-height: 14px;
    }
}
@media screen and (max-width: 768px) {
    .trust-h p {
        font-size: 18px; 
        line-height: 16px; 
    }

        .trust-h p span:first-child {
            font-size: 36px; 
            letter-spacing: -1.2px; 
        }
}

@media screen and (max-width: 468px) {
    .trust-h p {
        font-size: 16px; 
        line-height: 14px;
    }

        .trust-h p span:first-child {
            font-size: 32px; 
            letter-spacing: -0.8px; 
        }
}
@media screen and (max-width: 768px) {
    .guarantee-left p:first-of-type {
        font-size: 40px; 
        line-height: 40px; 
        letter-spacing: -0.9px; 
    }

    .guarantee-left p:last-of-type {
        font-size: 18px; 
        margin-bottom: 5px; 
    }
}

@media screen and (max-width: 468px) {
    .guarantee-left p:first-of-type {
        font-size: 32px; 
        line-height: 35px;
        letter-spacing: -0.7px; 
    }

    .guarantee-left p:last-of-type {
        font-size: 16px; 
        margin-bottom: 3px;
    }
}

@media screen and (max-width: 768px) {
    .the-cg p:first-of-type {
        font-size: 20px; 
        line-height: 1.4; 
        letter-spacing: -0.4px;  
    }

    .the-cg p:nth-of-type(2) {
        font-size: 16px; 
        line-height: 1.5;
        letter-spacing: -0.2px; 
    }

    .the-cg p:last-of-type {
        font-size: 18px; 
        line-height: 16px; 
    }
}

@media screen and (max-width: 468px) {
    .the-cg p:first-of-type {
        font-size: 14px; 
        line-height: 1.3; 
        letter-spacing: -0.3px;
    }

    .the-cg p:nth-of-type(2) {
        font-size: 14px; 
        line-height: 1.4; 
        letter-spacing: -0.15px; 
    }

    .the-cg p:last-of-type {
        font-size: 16px; 
        line-height: 14px; 
    }
    .padded-section {
        padding: 10px;
    }
    .cg{
        padding:15px;
    }
}
.blue-section {
    margin-top: 5rem;
  
    background: #4a3aff;
    border-radius: 22px;
    height: auto;
    padding: 35px;
    position: relative;
}
.feedback-part {
    width: 500px; 
    margin: 0 auto;
}
    .feedback-part p {
        font-size: 22px;
        font-weight: 400;
        line-height: 26.784px;
        letter-spacing: -0.54px;
        color: #ffffff;
    }
.gif-container {
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
}

.gif-item {
    flex: 0 1 auto;
    text-align: center;
}

.gif-content {
    height: 115px;
    background-color: white;
    border-radius: 7px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

    .gif-content img {
        width: 70px;
        height: 70px;
        border-radius: 7px;
        transition: transform 0.2s;
    }

    .gif-content:hover img {
        transform: scale(1.2);
    }

    .gif-content.selected {
        background-color: #D6FFE8;
        border-color: #34E0A1;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
        border-radius: 7px;
        animation: pulse 0.5s infinite alternate;
    }

    .gif-content p {
        font-size: 15px;
        color: #757575;
        font-size: 12px;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: -0.48px;
        transition: color 0.2s;
    }

    .gif-content.selected p {
        color: #238A64;
    }

@keyframes pulse {
    from {
        transform: scale(1.2);
    }

    to {
        transform: scale(1.3);
    }
}
.again-blue .row {
    position: relative; 
}
.again-blue {
    margin-top: 5rem;
    background: #4a3aff;
    border-radius: 22px;
    height: auto;
    padding: 30px;
    position: relative;
}
.commission-content p,
.deals-offer-content p,
.dashboard-content p,
.free-training-content p,
.free-website-content p,
.free-flyers-content p {
    color: #fff;
    font-size: 14px;
    width: 150px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #eeeeee;
    transition: background-color 0.3s, color 0.3s;
}

.commission-content:hover p,
.deals-offer-content:hover p,
.dashboard-content:hover p,
.free-training-content:hover p,
.free-website-content:hover p,
.free-flyers-content:hover p {
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.commission-content.selected p,
.deals-offer-content.selected p,
.dashboard-content.selected p,
.free-training-content.selected p,
.free-website-content.selected p,
.free-flyers-content.selected p {
    background-color: #fff;
    color: #000000;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.first-ab p:first-child {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    line-height: 2.364px;
    letter-spacing: -0.48px;
}

.first-ab p:last-child {
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    line-height: 25px;
}
.feedback-image {
    text-align: center;
    position: relative;
    top: -47px;
}

    .feedback-image img {
       width:280px;
        height: auto;
    }
.custom-margin {
    margin: 0 50px;
}
.divider {
    position: absolute;
    top: -51px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background-color: #ccc; /* Adjust color as needed */
}

.first-ab {
    margin-left: 33px;
    padding: 15px;
}

.score-container {
    display: flex;
    border-radius: 8px;
    padding: 10px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.score-item {
    height: 69px;
    text-align: center;
    display: flex;
    border-radius: 8px;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 5px; /* Reduced margin for spacing */
    cursor: pointer; /* Show pointer cursor on hover */
}

.score-number p {
    width: 50px;
    padding: 10px;
    border-radius: 50%;
    border: 2px solid white;
    margin: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Smooth transition for visual effect */
}

.score-item.selected {
    background-color: white;
}

.score-item.selected .score-number p {
    border: 2px solid #6178FA;
    border-color: #6178FA;
    color: #6178FA;
}

.score-descriptions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}


.score-description {
    color: #fff;
    font-size: 14px;
    flex: 1; 
}

    .score-description p {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
    }

    .score-description:first-child {
        text-align: left; 
    }

    .score-description:last-child {
        text-align: right; 
    }

.how-likely {
   
    border-radius: 8px;
}

    .how-likely p {
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        text-align:center;
        line-height: 19.364px;
        letter-spacing: -0.48px;
    }
.all-feed{
    
    display: flex;
    justify-content: center;
   
}
.all-feedback{
    position:relative;
}
.new-feedback-image img {
    width: 140px; 
    height: auto; 
   
    margin: 0 auto; 
    display: block; 
}
.new-feedback-image {
    position: absolute;
    top: -75px;
    right: 118mm;
}


@media (max-width: 768px) {
    .feedback-part {
        width: 100%;
        padding: 0 20px;
    }

        .feedback-part p {
            font-size: 16px;
            line-height: 24px;
        }

    .gif-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gif-item {
        flex: 0 1 20%;
        margin: 5px;
    }

    .gif-content {
        height: auto;
        padding: 5px;
    }

        .gif-content img {
            width: 50px;
            height: 50px;
        }

        .gif-content p {
            font-size: 12px;
        }
}

@media (max-width: 468px) {
    .feedback-part {
        width: 100%;
        padding: 0 10px;
    }

        .feedback-part p {
            font-size: 14px;
            line-height: 22px;
        }

    .gif-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gif-item {
        flex: 0 1 calc(50% - 10px); /* Two items per row on screens up to 468px */
   
        margin: 5px;
    }

    .gif-content {
        height: auto;
        padding: 5px;
    }

        .gif-content img {
            width: 40px;
            height: 40px;
        }

        .gif-content p {
            font-size: 10px;
        }
}

@media (max-width: 768px) {
    .commission-content p,
    .deals-offer-content p,
    .dashboard-content p,
    .free-training-content p,
    .free-website-content p,
    .free-flyers-content p {
        font-size: 12px;
        width: auto;
        padding: 8px;
    }

    .first-ab p:first-child {
        font-size: 16px;
    }

    .first-ab p:last-child {
        font-size: 12px;
    }

    .feedback-image img {
        max-width: 200px;
    }

    .score-container {
        padding: 5px;
    }

    .score-item {
        height: 60px;
        width: 50px;
        padding: 5px;
    }

    .score-number p {
        width: 40px;
        padding: 5px;
    }

    .score-description p {
        font-size: 14px;
    }

    .how-likely p {
        font-size: 16px;
    }

    .divider {
        display: none;
    }
}

@media (max-width: 468px) {
    .commission-content p,
    .deals-offer-content p,
    .dashboard-content p,
    .free-training-content p,
    .free-website-content p,
    .free-flyers-content p {
        font-size: 10px;
        width: auto;
        padding: 5px;
    }

    .first-ab p:first-child {
        font-size: 14px;
        line-height: 20px;
    }

    .first-ab p:last-child {
        font-size: 10px;
    }

    .feedback-image img {
        max-width: 150px;
    }

    .score-container {
        padding: 5px;
        
        display: flex;
        justify-content: center;
    }

    .score-item {
        height: 50px;
        width: 50px;
        padding: 5px;
    }

    .score-number p {
       
        padding: 5px;
    }

    .score-description p {
        font-size: 12px;
    }

    .how-likely p {
        font-size: 14px;
    }

    .divider {
        display: none;
    }
}
@media (max-width: 468px) {
    .first-ab {
        margin-left: 0;
        padding: 0; /* Remove margin-left */
    }
}
@media (max-width: 768px) {
    .new-feedback-image {
        position: static; /* Reset position */
        top: auto;
        right: auto;
        text-align: center; /* Center image on smaller screens */
    }

        .new-feedback-image img {
            width: 100px; /* Adjust image size */
        }
}

@media (max-width: 468px) {
    .new-feedback-image img {
        width: 80px; /* Further adjust image size for smaller screens */
    }
    .end-line {
        margin-bottom: 41px;
        text-align: center;
    }
    }
.shape-image {
    position: relative;
}

.right-end-image {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0; /* Adjust z-index as needed */
}
@media screen and (max-width: 468px) {
    .right-end-image {
       display:none;
    }

    .all-images {
        display: none;
    }
}