.hero-header {
    width: 100%;
    padding-top: 120px;
    padding-bottom: 80px;
    background-image: linear-gradient( rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) ), url("/images/fov1.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.fov-des-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.fov-description {
    margin-top: 100px;
}

.fov-des {
    padding-left: 10px;
    border-left: 5px solid transparent;
    border-image: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(33, 150, 243, 1) 35%, rgba(255, 255, 255, 0) 100% ) 3 round;
}

.fov-des__title {
    font-size: 24px;
    font-weight: bolder;
    line-height: 1.4;
    margin-bottom: 10px;
}

.fov-des__content {
    line-height: 1.4;
}

.header-img {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.header-img__wrapper {
    position: relative;
    width: fit-content;
}

.header-img__tooltip-1,
.header-img__tooltip-2 {
    padding: 20px 16px;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    background-color: var(--whiteSmoke);
    border-radius: var(--largeRadius);
}

.header-img__tooltip-1 {
    top: -10px;
    left: -28px;
    border-bottom-right-radius: 1px;
    animation: tooltip1 2s ease-in 2s infinite alternate-reverse;
}

.header-img__tooltip-2 {
    padding: 15px 16px;
    top: 10px;
    right: -10px;
    border-bottom-left-radius: 1px;
    animation: tooltip2 2s ease-in 2s infinite alternate-reverse;
    transform: translate(0px, 5px);
}

@keyframes tooltip1 {
    from {
        transform: translate(0px, 5px);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes tooltip2 {
    from {
        transform: translate(0px, 0px);
    }

    to {
        transform: translate(0px, 5px);
    }
}

.header-img__tag {
    width: 380px;
    height: auto;
    position: relative;
    background-position: center;
    background-size: contain;
    z-index: 1;
}

.custom-shape-divider-bottom-1747395032 {
    width: 100%;
    max-width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0px;
    overflow: hidden;
    line-height: 0;
}

    .custom-shape-divider-bottom-1747395032 svg {
        position: relative;
        display: block;
        width: calc(136% + 1.3px);
        height: 81px;
        transform: rotateY(180deg);
    }

    .custom-shape-divider-bottom-1747395032 .shape-fill {
        fill: #eceff1;
    }

.how-to {
    margin: 150px 0px;
}

.how-to-left {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: var(--lightRadius);
    padding: 40px;
    min-height: 420px;
}

.how-to-left__title,
.how-to-right__title {
    display: flex;
    align-items: center;
    position: relative;
    column-gap: 10px;
    margin-bottom: 30px;
}

.how-to-left__icon,
.how-to-right__icon {
    width: 47px;
    height: 47px;
    background-color: var(--orange);
    color: var(--whiteSmoke);
    padding: 4px;
    border-radius: var(--lightRadius);
}

.how-to-left__text,
.how-to-right__text {
    font-weight: bold;
    font-size: 26px;
}

.how-to-left__des,
.how-to-right__des {
    line-height: 1.4;
    font-size: 18px;
}

.how-to-right {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: var(--lightRadius);
    padding: 40px;
    min-height: 420px;
}

.how-to-right__icon {
    background-color: var(--darkGreen);
}

.how-to-right__dl-btn {
    text-decoration: none;
    display: block;
    width: fit-content;
    margin-top: 28px;
    padding: 15px;
    border: 1px solid var(--lightBlue);
    color: var(--blue);
    border-radius: var(--mediumRadius);
    transition: all 0.4s;
}

    .how-to-right__dl-btn:hover {
        background-color: var(--lightBlue);
        color: var(--black);
    }

.why-us,
.pricing {
    margin: 150px 0px;
    text-align: center;
}

.why-us__title-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0px auto;
    margin-bottom: 70px;
}

.why-us__shape,
.pricing__shape {
    width: 80px;
    height: 80px;
    left: -30px;
    top: -12px;
    position: absolute;
    z-index: -1;
}

.why-us__circle,
.pricing__circle {
    position: relative;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--lightBlue);
}

.why-us__circle-wave,
.pricing__circle-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--lightBlue);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.pricing__circle-wave,
.pricing__circle {
    background-color: var(--doubleLightRed);
}

.why-us__circle-wave,
.pricing__circle-wave {
    animation: wave 4s linear infinite;
}

@keyframes wave {
    from {
        opacity: 0.4;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}

.why-us__title,
.pricing__title {
    font-size: 46px;
    color: var(--blackSmokeLighter);
}

.property {
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    overflow: hidden;
    border-radius: var(--largeRadius);
    min-height: 235px;
    background: linear-gradient( 184deg, rgba(196, 196, 196, 1) 0%, rgba(255, 255, 255, 1) 100% );
}

.property__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 99%, 0 86%);
}

.property__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: var(--blackSmokeLighter);
    background-color: var(--whiteSmoke);
    padding: 5px;
    border-radius: var(--mediumRadius);
}

.property__text {
    font-size: 28px;
    font-weight: bolder;
    color: var(--whiteSmoke);
}

.property__desc-wrapper {
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    padding: 20px 10px 10px 10px;
}

.property__desc {
    font-size: 18px;
    line-height: 1.4;
    color: var(--blackSmokeLighter);
}

.property__title--background-blue {
    background: linear-gradient( 184deg, rgba(33, 150, 243, 1) 0%, rgba(79, 195, 247, 1) 100% );
}

.pricing__title-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0px auto;
    margin-bottom: 60px;
}

.pricing__refund-container {
    display: flex;
    justify-content: center;
}

.pricing__refund-text {
    font-size: 20px;
    width: fit-content;
    margin: 0px 20px;
    line-height: 1.4;
    position: relative;
    margin-bottom: 50px;
}

    .pricing__refund-text::before {
        content: "";
        display: block;
        width: 4px;
        height: 100%;
        background-color: var(--lightRed);
        position: absolute;
        left: -7px;
    }

.pricing_btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

.pricing__single-btn,
.pricing__multi-btn {
    padding: 15px 30px;
    outline: none;
    border: none;
    font-size: 20px;
    line-height: 1.4;
    color: var(--whiteSmoke);
    background-color: var(--gray);
    transition: all 0.2s;
}

.pricing__single-btn {
    border-top-left-radius: var(--mediumRadius);
    border-bottom-left-radius: var(--mediumRadius);
}

    .pricing__single-btn.active {
        background-color: var(--blue);
    }

.pricing__multi-btn {
    border-top-right-radius: var(--mediumRadius);
    border-bottom-right-radius: var(--mediumRadius);
}

    .pricing__multi-btn.active {
        background-color: var(--lightRed);
    }

.pricing-plans--translate {
    animation: pricingAnim 0.4s ease-in 1;
}

@keyframes pricingAnim {
    from {
        transform: translate(-20px);
        opacity: 0;
    }

    to {
        transform: translate(0px);
        opacity: 1;
    }
}

.plan {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    border-radius: var(--largeRadius);
    background-image: linear-gradient( 180deg, rgba(250, 250, 250, 1) 0%, rgba(245, 245, 245, 1) 35%, rgba(224, 224, 224, 1) 100% );
    border-bottom: 2px solid var(--blue);
    overflow: hidden;
    transition: all 0.4s;
}

    .plan:hover {
        transform: translate(0px, -5px);
    }

.plan__header {
    width: 100%;
    padding: 20px 10px;
    border-left: 4px solid var(--blue);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.plan__time {
    font-size: 24px;
    font-weight: bolder;
}

.plan__price {
    font-size: 24px;
}

.plan__price-cent {
    font-size: 16px;
}

.plan__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0px;
}

.plan__icon {
    width: 24px;
    height: 24px;
}

.plan__text {
    vertical-align: middle;
    font-size: 19px;
}

.plan__divider {
    width: 80%;
    height: 1px;
    background-image: linear-gradient( 90deg, rgba(224, 224, 224, 1) 0%, rgb(14, 146, 222) 35%, rgba(224, 224, 224, 1) 100% );
    margin: 0px auto;
}

.plan__buy-btn {
    display: block;
    width: 80%;
    font-size: 30px;
    margin: 30px auto;
    text-decoration: none;
    color: var(--blue);
    border: 1px solid var(--lightBlue);
    padding: 15px 30px;
    border-radius: var(--mediumRadius);
    transition: all 0.4s;
}

    .plan__buy-btn:hover {
        color: var(--whiteSmoke);
        background-color: var(--lightBlue);
    }

.plan--multi {
    border-bottom: 2px solid var(--lightRed);
}

.plan--multi-header {
    border-left: 4px solid var(--lightRed);
}

.plan--multi-divider {
    background-image: linear-gradient( 90deg, rgba(224, 224, 224, 1) 0%, rgba(222, 39, 14, 1) 35%, rgba(224, 224, 224, 1) 100% );
}

.plan--buy-btn {
    color: var(--lightRed);
    border: 1px solid var(--lightRed);
}

    .plan--buy-btn:hover {
        color: var(--whiteSmoke);
        background-color: var(--lightRed);
    }
/* media queries */
@media screen and (max-width: 992px) {
    .header {
        background-attachment: local;
    }
}

@media screen and (min-width: 768px) {
    .property {
        min-height: 235px;
    }
}

@media screen and (min-width: 992px) {
    .property {
        min-height: 320px;
    }
}

@media screen and (min-width: 1200px) {
    .property {
        min-height: 285px;
    }
}