main {
    background-color: var(--color-bg);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
}


.mahakpopup {
    width: 200px;
    position: fixed;
    bottom: 4%;
    right: -11%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 1rem;
    z-index: 99999999;
}

.mahakpopup img {
    border-radius: 1rem;
    position: relative;
}

.mahakpopup__close {
    position: absolute;
    width: 25px;
    top: -10%;
    right: 0;
    cursor: pointer;
}

.active_mahakpopup {
    opacity: 0;
    pointer-events: none;
    transition: .8s ease-in-out;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

/* ========== Hero Section ==========  */

.hero-container {
    width: var(--container-width);
    background-color: var(--color-bg);
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero_heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 30px;
}

.deyParaghraph {
    width: 183.139px;
    white-space: nowrap;
    border-left: 1px solid var(--color-text);
    display: inline-block;
    overflow: hidden;
    animation: typing 15s steps(25) infinite,
        blink 1s step-end infinite;
}

.deyAtm {
    width: 500px;
}

.hero-container__start,
.column-card {
    display: flex;
    flex-direction: column;
}


.hero-container__card-video {
    width: 350px;
}

.column-cards {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}


.column-cards:hover {
    margin-right: 3px;
}



.colmn-card__circle {
    width: 27px;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.column-cards:hover .colmn-card__circle {
    outline: 2px solid var(--color-text-muted);
    outline-offset: 1px;
}

.column-card {
    gap: 10px;
}

.naqdi-color {
    color: var(--card-naqdi);
}

.sigma-color {
    color: var(--card-sigma);
}

.hoquq-color {
    color: var(--card-hoquq);
}

.hedie-color {
    color: var(--card-hedie);
}

.bon-color {
    color: var(--card-bon);
}

.viza-color {
    color: var(--card-viza);
}

.etebary-color {
    color: var(--card-etebary);
}

.column1 .colmn-card__circle {
    background-color: var(--card-naqdi);
}

.column2 .colmn-card__circle {
    background-color: var(--card-sigma);
}

.column3 .colmn-card__circle {
    background-color: var(--card-hoquq);
}

.column4 .colmn-card__circle {
    background-color: var(--card-hedie);
}

.column5 .colmn-card__circle {
    background-color: var(--card-bon);
}

.column6 .colmn-card__circle {
    background-color: var(--card-viza);
}

.column7 .colmn-card__circle {
    background-color: var(--card-etebary);
}

.hero-container__end {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 851.083px;
}

.hero-container__card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
}

.active__hero-container__card {
    opacity: 1;
    pointer-events: auto;
}

.hero-container__card-name {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-container__card-name-button1 {
    background-color: var(--card-naqdi);
    color: var(--color-white);
}

.hero-container__card-name-button2 {
    background-color: var(--card-sigma);
    color: var(--color-white);
}

.hero-container__card-name-button3 {
    background-color: var(--card-hoquq);
    color: var(--color-white);
}

.hero-container__card-name-button4 {
    background-color: var(--card-hedie);
    color: var(--color-text);
}

.hero-container__card-name-button5 {
    background-color: var(--card-bon);
    color: var(--color-white);
}

.hero-container__card-name-button6 {
    background-color: var(--card-viza);
    color: var(--color-white);
}

.hero-container__card-name-button7 {
    background-color: var(--card-etebary);
    color: var(--color-white);
}

.hero-container__card-name-heading {
    font-size: var(--font-size-xxl);
}

.hero-container__divider {
    height: 166.562px;
    width: 1px;
    background-color: var(--border-color);
}

.hero-container__card-name {
    width: 491.090px;
}

.active_colmn-card__circle {
    outline: 2px solid var(--color-text-muted);
    outline-offset: 1px;
}

/* ================================================== Second Section ==================================================  */

.secondContainer {
    display: flex;
    align-items: center;
    width: var(--container-width);
    background-color: var(--color-bg);
    padding: 50px;
    margin-top: 50px;
    gap: 20px;
    justify-content: space-between;
}

.secondIcons {
    margin-top: 10px;
}

.secondIcons-ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.secondIcons-li {
    width: 88.5px;
    padding: 7px;
    border-radius: var(--font-size-medium);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    font-size: var(--font-size-medium);
    /* animation: scale 2s ease 0s infinite; */
}

.secondIcons-li:hover {
    opacity: .7;
}

.secondIcons-li__a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.secondIcons-li__icon {
    width: 20px;
    aspect-ratio: 1/1;
    color: var(--color-primary);
}




.second-start {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.second-start__heading {
    font-size: var(--font-size-xxl);
    color: var(--color-text-secondary);
}

.second-start__downloadBox {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-secondary);
    border-radius: var(--medium-radius);
    width: max-content;
    padding: 20px;
}

.second-start__downloadBox-svg {
    background-color: var(--color-bg);
    border-radius: var(--medium-radius);
    width: max-content;
    padding: 5px;
    display: flex;
    align-items: center;

}

.second-start__Sms {
    font-weight: 600;
    font-size: var(--border-color);
}

.second-start__Sms-p {
    font-size: var(--font-size-l);
}

.second-start__sms-copy {
    background-color: var(--color-secondary);
    padding: 7px;
    border-radius: var(--medium-radius);
    cursor: pointer;
}

.second-end__img {
    width: 400px;
}

.secondSection {
    position: relative;
}

.secondIcons-Flip {
    grid-template: repeat(2, 1fr) / repeat(3, 1fr);
    gap: 20px 10px;
    position: absolute;
    z-index: 999;
    top: clamp(40%, 50%, 60%);
    left: clamp(20%, 26%, 30%);
    transform: translate(-50%, -50%);
}


.thirdContainer {
    width: var(--container-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    position: relative;
}

.thirdContainer-heading {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xxxxl);
    position: absolute;
    top: 30px;
}

.thirdContainer-calc {
    margin-top: 81px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 20px;
}

.thirdContainer-calc-target {
    width: 100%;
}

#thirdContainer-calc__range {
    width: 100%;
    direction: ltr;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-primary);
    height: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.thirdContainer-calc__amount {
    font-size: var(--font-size-x);
    font-weight: 700;
    color: var(--color-text-secondary);
}

#thirdContainer-calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #fff;
    width: 30px;
    height: 30px;
    border: .5px solid #000;
    border-radius: 50%;
    cursor: pointer;
}

.thirdContainer-calc-result {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: -20px;
}

.thirdContainer-calc-results {
    display: flex;
    min-width: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background-color: var(--color-bg);
    border-radius: var(--medium-radius);
    padding: 30px;
    gap: 10px;
    height: 178.78px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.thirdContainer-calc-results:hover {
    background-color: var(--color-secondary);
}

.thirdContainer-calc-result__spans {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: start;
    justify-content: start;
}

.thirdContainer-calc-result__heading {
    color: var(--color-text-secondary);
    font-size: var(--font-size-x);
}

a.thirdContainer-calc-btn.btn {
    background-color: var(--color-bg);
    border: none;
    color: var(--color-text-secondary);
}

.thirdContainer-calc-Container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background-color: var(--color-primary);

    border-radius: var(--medium-radius);
    padding-bottom: 40px;
    margin-top: 30px;
    background-image: url(/assets/img/cartographer\ \(1\).png);
}


.fourthContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: var(--container-width);
    margin-top: 20px;
    height: 687.04px;
    position: relative;
}

.four-Heading {
    font-size: var(--font-size-xxl);
}

.four-tabs {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 30px;
}

.four-tabs__tab {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    cursor: pointer;
    position: relative;
    padding-bottom: 10px;
}

.four-tabs__tab::after {
    content: "";
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width .7s ease-in-out;
}

.four-tabs__tab:hover::after {
    width: 100%;
    transition: .7s ease-in-out;
}

.active__four-tabs__tab::after {
    width: 100%;
}


.four-content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 30px;
    justify-content: space-between;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.active__four-content {
    opacity: 1;
    pointer-events: auto;
}

.four-contentContainer {
    height: 510px;
    width: 100%;
}

.four-content__end {
    display: flex;
    align-items: center;
    justify-content: center;
}

.four-content__img {
    width: 450px;
}

.four-content__start {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 10px;
}

.four-content__plan {
    font-size: var(--font-size-xxl);
}

.four-content__Heading {
    font-size: var(--font-size-x);
    font-weight: 400;
}

.four-content__description {
    font-weight: 500;
    color: var(--color-text-secondary);
    width: 85%;
}

.four-content__list li {
    list-style: circle;
    margin-top: 10px;
}

.four-content__question {
    font-weight: 600;
}

.four-Slogan {
    font-size: var(--font-size-x);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: 10px;
}

.fifthContainer {
    width: var(--container-width);
    border-radius: 1rem;
    /* background-color: #fed816; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    background-image: linear-gradient(#fed816 40%,#fff);
    margin-bottom: 20px;
}

.fifthContainer__img {
    width: 600px;
}

.fifth-heading {
    font-size: var(--font-size-xxxl);
    margin: 50px 0;
}

.fifthContainer__start {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
}

.fifthContainer__heading {
    font-size: var(--font-size-xxxxl);
    color: var(--color-text);
    opacity: .7;
    font-weight: 900;
}

.fifthContainer__list {
    margin: 20px 0;
}

.fifthContainer__list li {
    list-style: circle;
}

.fifthContainer_btn {
    background-color: #fff;
    border: none;
}