/* =========================================
   WINNE ACCOUNTING
   DREAMY PASTEL WEBSITE
========================================= */


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


:root {

    --pink:
        #f4bddd;

    --pink-light:
        #fff0f7;

    --pink-dark:
        #d987b6;

    --purple:
        #cbb6f6;

    --purple-light:
        #eee5ff;

    --purple-dark:
        #9677c8;

    --white:
        #ffffff;

    --text:
        #594b63;

    --text-light:
        #7e7086;

}


body {

    font-family:
        "Poppins",
        sans-serif;

    color:
        var(--text);

    line-height:
        1.7;

    background:
        linear-gradient(
            135deg,
            #fff8fc,
            #f8f3ff
        );

    overflow-x:
        hidden;

}


/* =========================
   SELECTION
========================= */

::selection {

    background:
        #e8c6f7;

    color:
        #594b63;

}


/* =========================
   DREAMY BACKGROUND
========================= */

.dream-circle {

    position:
        fixed;

    border-radius:
        50%;

    filter:
        blur(15px);

    pointer-events:
        none;

    z-index:
        -10;

}


.circle-one {

    width:
        300px;

    height:
        300px;

    background:
        rgba(
            246,
            190,
            220,
            0.22
        );

    top:
        12%;

    left:
        -120px;

}


.circle-two {

    width:
        350px;

    height:
        350px;

    background:
        rgba(
            194,
            172,
            243,
            0.22
        );

    right:
        -130px;

    top:
        40%;

}


.circle-three {

    width:
        200px;

    height:
        200px;

    background:
        rgba(
            255,
            213,
            235,
            0.25
        );

    left:
        40%;

    bottom:
        -100px;

}


/* =========================
   NAVBAR
========================= */

header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            255,
            249,
            253,
            0.88
        );

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid
        rgba(
            225,
            190,
            230,
            0.25
        );

}


.navbar {

    max-width:
        1200px;

    margin:
        auto;

    padding:
        20px 30px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.logo {

    text-decoration:
        none;

    color:
        #67536f;

    font-size:
        21px;

    font-weight:
        700;

}


.logo span {

    color:
        #d688b6;

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    list-style:
        none;

    gap:
        25px;

}


.nav-links a {

    position:
        relative;

    color:
        #695a72;

    font-size:
        14px;

    font-weight:
        500;

    text-decoration:
        none;

}


.nav-links a::after {

    content:
        "";

    position:
        absolute;

    height:
        2px;

    width:
        0;

    left:
        50%;

    bottom:
        -6px;

    background:
        linear-gradient(
            90deg,
            #e69abc,
            #a98ae0
        );

    border-radius:
        20px;

    transition:
        0.3s;

}


.nav-links a:hover::after {

    width:
        100%;

    left:
        0;

}


.nav-links a:hover {

    color:
        #c27ea9;

}


.menu-button {

    display:
        none;

    border:
        none;

    background:
        transparent;

    font-size:
        25px;

    color:
        #796188;

    cursor:
        pointer;

}


/* =========================
   HERO
========================= */

.hero {

    max-width:
        1200px;

    min-height:
        91vh;

    margin:
        auto;

    padding:
        80px 30px;

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    align-items:
        center;

    gap:
        80px;

    position:
        relative;

}


.hero-text {

    position:
        relative;

    z-index:
        3;

}


.mini-title {

    display:
        inline-block;

    margin-bottom:
        15px;

    color:
        #bb80bc;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        4px;

}


.hero h1 {

    max-width:
        700px;

    font-size:
        clamp(
            45px,
            6vw,
            68px
        );

    line-height:
        1.12;

    color:
        #55425f;

}


.hero h1 span {

    background:
        linear-gradient(
            90deg,
            #e48fb7,
            #9e82dd
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-description {

    max-width:
        640px;

    margin-top:
        25px;

    color:
        #7b6d82;

    font-size:
        15px;

}


.hero-buttons {

    display:
        flex;

    gap:
        15px;

    margin-top:
        32px;

}


.button {

    position:
        relative;

    overflow:
        hidden;

    display:
        inline-flex;

    gap:
        9px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        14px 27px;

    border-radius:
        30px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        500;

    transition:
        transform 0.3s,
        box-shadow 0.3s;

}


.button-primary {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #eca1c6,
            #ac91e3
        );

    box-shadow:
        0 10px 25px
        rgba(
            187,
            139,
            208,
            0.28
        );

}


.button-primary::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -130%;

    width:
        60%;

    height:
        100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.7
            ),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        0.7s;

}


.button-primary:hover::before {

    left:
        150%;

}


.button-primary:hover {

    transform:
        translateY(-5px)
        scale(1.02);

    box-shadow:
        0 15px 32px
        rgba(
            190,
            142,
            211,
            0.4
        );

}


.button-secondary {

    color:
        #9875b4;

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    border:
        1px solid
        #d6b5e5;

}


.button-secondary:hover {

    transform:
        translateY(-5px);

    background:
        #faefff;

    box-shadow:
        0 10px 25px
        rgba(
            190,
            150,
            209,
            0.18
        );

}


/* =========================
   HERO MINI INFO
========================= */

.hero-information {

    display:
        flex;

    gap:
        12px;

    margin-top:
        35px;

}


.mini-info {

    min-width:
        105px;

    padding:
        12px 16px;

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    border:
        1px solid
        rgba(
            227,
            201,
            237,
            0.5
        );

    backdrop-filter:
        blur(10px);

    transition:
        0.3s;

}


.mini-info:hover {

    transform:
        translateY(-5px);

}


.mini-info strong {

    display:
        block;

    color:
        #a16fb5;

    font-size:
        14px;

}


.mini-info span {

    color:
        #887a8e;

    font-size:
        11px;

}


/* =========================
   HERO CARD
========================= */

.hero-card {

    position:
        relative;

    z-index:
        4;

    padding:
        35px;

    border-radius:
        32px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                229,
                242,
                0.9
            ),
            rgba(
                231,
                220,
                255,
                0.9
            )
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    box-shadow:
        0 25px 55px
        rgba(
            177,
            139,
            199,
            0.2
        );

    backdrop-filter:
        blur(15px);

    animation:
        floatingCard
        5s
        ease-in-out
        infinite;

}


@keyframes floatingCard {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


.hero-card-title {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        25px;

}


.hero-card-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size:
        25px;

}


.hero-card-title p {

    color:
        #a17ca6;

    font-size:
        11px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.hero-card-title h3 {

    color:
        #685174;

    font-size:
        20px;

}


.hero-feature {

    display:
        flex;

    gap:
        13px;

    align-items:
        center;

    padding:
        14px;

    margin-top:
        12px;

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.68
        );

    transition:
        0.35s;

}


.hero-feature:hover {

    transform:
        translateX(6px);

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

}


.check-icon {

    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #e8a1c4,
            #aa8bdf
        );

}


.hero-feature h4 {

    color:
        #65536e;

    font-size:
        13px;

}


.hero-feature p {

    color:
        #96869b;

    font-size:
        11px;

}


/* =========================
   WHALES
========================= */

.whale {

    position:
        absolute;

    pointer-events:
        none;

    user-select:
        none;

    z-index:
        1;

}


.whale-one {

    top:
        5%;

    right:
        3%;

    font-size:
        125px;

    opacity:
        0.12;

    animation:
        whaleFloat
        7s
        ease-in-out
        infinite;

}


.whale-two {

    bottom:
        4%;

    left:
        2%;

    font-size:
        65px;

    opacity:
        0.1;

    animation:
        whaleFloatTwo
        6s
        ease-in-out
        infinite;

}


@keyframes whaleFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-8deg);

    }

    50% {

        transform:
            translateY(-25px)
            rotate(-3deg);

    }

}


@keyframes whaleFloatTwo {

    0%,
    100% {

        transform:
            translateY(0)
            translateX(0);

    }

    50% {

        transform:
            translateY(-15px)
            translateX(15px);

    }

}


/* =========================
   SPARKLE
========================= */

.sparkle {

    position:
        absolute;

    color:
        #d59ede;

    pointer-events:
        none;

    animation:
        sparkleAnimation
        2.5s
        ease-in-out
        infinite;

}


.sparkle-one {

    top:
        20%;

    left:
        48%;

    font-size:
        25px;

}


.sparkle-two {

    top:
        35%;

    right:
        5%;

    font-size:
        30px;

    animation-delay:
        0.8s;

}


.sparkle-three {

    bottom:
        15%;

    right:
        40%;

    font-size:
        18px;

    animation-delay:
        1.2s;

}


@keyframes sparkleAnimation {

    0%,
    100% {

        opacity:
            0.3;

        transform:
            scale(0.8)
            rotate(0);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2)
            rotate(20deg);

    }

}


/* =========================
   GENERAL SECTION
========================= */

.section {

    max-width:
        1200px;

    margin:
        auto;

    padding:
        100px 30px;

}


.section-dreamy {

    max-width:
        none;

    padding-left:
        max(
            30px,
            calc(
                (100% - 1140px) / 2
            )
        );

    padding-right:
        max(
            30px,
            calc(
                (100% - 1140px) / 2
            )
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                235,
                246,
                0.7
            ),
            rgba(
                238,
                230,
                255,
                0.75
            )
        );

}


.section-title {

    text-align:
        center;

    margin-bottom:
        60px;

}


.section-title > p:first-child {

    color:
        #bc82bd;

    letter-spacing:
        4px;

    font-size:
        12px;

    font-weight:
        600;

}


.section-title h2 {

    max-width:
        750px;

    margin:
        10px auto 0;

    color:
        #5b4867;

    font-size:
        clamp(
            30px,
            4vw,
            40px
        );

}


.section-title h2 span {

    color:
        #bd7fb2;

}


.title-line {

    width:
        60px;

    height:
        4px;

    margin:
        18px auto;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #ef9fc6,
            #a98ce3
        );

}


.section-description {

    color:
        #86798b !important;

    letter-spacing:
        normal !important;

    font-weight:
        400 !important;

}


/* =========================
   ABOUT
========================= */

.about-container {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        65px;

    align-items:
        center;

}


.about-text .hello {

    color:
        #ba82ba;

    font-size:
        14px;

    font-weight:
        600;

}


.about-text h3 {

    margin:
        5px 0 18px;

    color:
        #5e4b68;

    font-size:
        34px;

}


.about-text p {

    margin-bottom:
        15px;

    color:
        #7c7082;

}


.text-link {

    display:
        inline-block;

    margin-top:
        10px;

    color:
        #aa73b3;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        0.3s;

}


.text-link:hover {

    transform:
        translateX(7px);

    color:
        #d17ead;

}


.about-card {

    padding:
        38px;

    border-radius:
        28px;

    background:
        linear-gradient(
            140deg,
            #ffe7f2,
            #e8deff
        );

    box-shadow:
        0 20px 45px
        rgba(
            177,
            142,
            199,
            0.15
        );

    transition:
        0.4s;

}


.about-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 50px
        rgba(
            177,
            142,
            199,
            0.22
        );

}


.about-card h3 {

    color:
        #675270;

    margin-bottom:
        20px;

}


.about-item {

    padding:
        13px 15px;

    margin-top:
        10px;

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    color:
        #77657e;

    transition:
        0.3s;

}


.about-item:hover {

    transform:
        translateX(8px);

    background:
        rgba(
            255,
            255,
            255,
            0.9
        );

}


.about-item span {

    margin-right:
        9px;

    color:
        #cf8abc;

}


/* =========================
   SERVICES
========================= */

.service-container {

    max-width:
        1140px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        25px;

}


.service-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        260px;

    padding:
        35px;

    border-radius:
        25px;

    background:
        rgba(
            255,
            255,
            255,
            0.7
        );

    backdrop-filter:
        blur(12px);

    border:
        1px solid
        rgba(
            230,
            202,
            238,
            0.7
        );

    transition:
        0.4s;

}


.service-card:hover {

    transform:
        translateY(-12px);

    box-shadow:
        0 20px 40px
        rgba(
            185,
            140,
            204,
            0.2
        );

}


.service-icon {

    width:
        63px;

    height:
        63px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #ffe1ee,
            #e1d4ff
        );

    font-size:
        29px;

    transition:
        0.4s;

}


.service-card:hover .service-icon {

    transform:
        rotate(-8deg)
        scale(1.12);

}


.service-card h3 {

    margin-bottom:
        12px;

    color:
        #654f70;

}


.service-card p {

    color:
        #827487;

    font-size:
        13px;

}


.service-number {

    position:
        absolute;

    right:
        20px;

    bottom:
        10px;

    color:
        rgba(
            186,
            135,
            199,
            0.12
        );

    font-size:
        55px;

    font-weight:
        700;

}


/* =========================
   SKILLS
========================= */

.skills-container {

    max-width:
        800px;

    margin:
        auto;

    padding:
        40px;

    border-radius:
        28px;

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    border:
        1px solid
        rgba(
            229,
            207,
            236,
            0.7
        );

    box-shadow:
        0 15px 35px
        rgba(
            181,
            150,
            197,
            0.1
        );

}


.skill {

    margin-bottom:
        27px;

}


.skill:last-child {

    margin-bottom:
        0;

}


.skill-title {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        9px;

    color:
        #66566d;

    font-size:
        14px;

}


.skill-bar {

    height:
        11px;

    border-radius:
        20px;

    background:
        #eee4f2;

    overflow:
        hidden;

}


.skill-progress {

    width:
        0;

    height:
        100%;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #eca2c5,
            #a98de5
        );

    transition:
        width 1.5s ease;

}


/* =========================
   PRICE
========================= */

.pricing-container {

    max-width:
        1100px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        25px;

}


.price-card {

    position:
        relative;

    padding:
        42px 30px;

    border-radius:
        28px;

    background:
        rgba(
            255,
            255,
            255,
            0.8
        );

    border:
        1px solid
        rgba(
            229,
            206,
            236,
            0.8
        );

    transition:
        0.4s;

}


.price-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 45px
        rgba(
            183,
            139,
            202,
            0.2
        );

}


.package-name {

    color:
        #bd83bd !important;

    font-size:
        12px !important;

    font-weight:
        600;

    letter-spacing:
        3px;

}


.price-card h3 {

    margin:
        12px 0;

    color:
        #aa72b8;

    font-size:
        31px;

}


.package-description {

    min-height:
        50px;

    color:
        #887a8d !important;

}


.package-line {

    height:
        1px;

    margin:
        23px 0;

    background:
        #eadcef;

}


.price-card p {

    margin:
        10px 0;

    color:
        #786a7e;

    font-size:
        13px;

}


.popular {

    border:
        2px solid
        #d899c6;

    transform:
        scale(1.03);

    box-shadow:
        0 20px 45px
        rgba(
            188,
            143,
            205,
            0.18
        );

}


.popular:hover {

    transform:
        scale(1.03)
        translateY(-10px);

}


.popular-badge {

    position:
        absolute;

    top:
        -15px;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        6px 18px;

    border-radius:
        25px;

    color:
        white;

    background:
        linear-gradient(
            90deg,
            #e99bbe,
            #a88bdd
        );

    font-size:
        10px;

    letter-spacing:
        1px;

    white-space:
        nowrap;

}


.package-button,
.calculate-button,
.review-button,
.contact-button {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    margin-top:
        23px;

    padding:
        14px;

    border:
        none;

    border-radius:
        25px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #eca1c5,
            #aa8ce2
        );

    font-family:
        inherit;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        0.3s;

}


.package-button::before,
.calculate-button::before,
.review-button::before,
.contact-button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -130%;

    width:
        60%;

    height:
        100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.7
            ),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        0.7s;

}


.package-button:hover::before,
.calculate-button:hover::before,
.review-button:hover::before,
.contact-button:hover::before {

    left:
        150%;

}


.package-button:hover,
.calculate-button:hover,
.review-button:hover,
.contact-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(
            184,
            135,
            206,
            0.35
        );

}


.package-button:active,
.calculate-button:active,
.review-button:active,
.contact-button:active {

    transform:
        scale(0.97);

}


/* =========================
   CALCULATOR
========================= */

.calculator {

    max-width:
        630px;

    margin:
        auto;

    padding:
        42px;

    border-radius:
        30px;

    background:
        linear-gradient(
            140deg,
            #ffe5f1,
            #eae0ff
        );

    box-shadow:
        0 20px 45px
        rgba(
            181,
            142,
            201,
            0.15
        );

}


.calculator label {

    display:
        block;

    margin:
        15px 0 7px;

    color:
        #68566f;

    font-size:
        13px;

    font-weight:
        500;

}


input,
select,
textarea {

    width:
        100%;

    padding:
        14px 15px;

    border:
        1px solid
        #ead8ef;

    border-radius:
        13px;

    outline:
        none;

    color:
        #66556c;

    background:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-family:
        inherit;

    transition:
        0.3s;

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        #ca99d8;

    box-shadow:
        0 0 0 4px
        rgba(
            201,
            153,
            216,
            0.13
        );

}


textarea {

    resize:
        vertical;

}


.calculation-result {

    margin-top:
        28px;

    padding:
        25px;

    border-radius:
        20px;

    text-align:
        center;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

}


.calculation-result p {

    color:
        #89788e;

    font-size:
        13px;

}


.calculation-result h3 {

    color:
        #aa78b9;

    font-size:
        32px;

}


.calculation-result span {

    color:
        #a092a5;

    font-size:
        10px;

}


/* =========================
   REVIEW
========================= */

.review-section {

    max-width:
        none;

    padding-left:
        max(
            30px,
            calc(
                (100% - 1140px) / 2
            )
        );

    padding-right:
        max(
            30px,
            calc(
                (100% - 1140px) / 2
            )
        );

    background:
        linear-gradient(
            135deg,
            #fff1f8,
            #f1eaff
        );

}


.rating-summary {

    max-width:
        480px;

    margin:
        0 auto 35px;

    padding:
        28px;

    text-align:
        center;

    border-radius:
        25px;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    border:
        1px solid
        #ecdcef;

}


.rating-summary h3 {

    color:
        #a977bb;

    font-size:
        43px;

}


.summary-stars {

    color:
        #d796cb;

    font-size:
        25px;

    letter-spacing:
        5px;

}


.rating-summary p {

    margin-top:
        5px;

    color:
        #8c7c90;

    font-size:
        12px;

}


.review-form-container {

    max-width:
        670px;

    margin:
        auto;

    padding:
        40px;

    border-radius:
        28px;

    background:
        rgba(
            255,
            255,
            255,
            0.8
        );

    border:
        1px solid
        #ecdaef;

    box-shadow:
        0 15px 35px
        rgba(
            178,
            143,
            196,
            0.12
        );

}


.review-form-title {

    display:
        flex;

    gap:
        14px;

    align-items:
        center;

    margin-bottom:
        25px;

}


.review-form-title > span {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        #f7e4f4;

}


.review-form-title h3 {

    color:
        #65526e;

}


.review-form-title p {

    color:
        #958698;

    font-size:
        11px;

}


.review-form-container label {

    display:
        block;

    margin:
        14px 0 7px;

    color:
        #6d5b72;

    font-size:
        13px;

    font-weight:
        500;

}


.star-rating {

    display:
        flex;

    gap:
        7px;

}


.star {

    color:
        #ded3e3;

    font-size:
        36px;

    cursor:
        pointer;

    transition:
        0.25s;

}


.star:hover {

    transform:
        scale(1.17)
        rotate(-5deg);

}


.star.active {

    color:
        #d795cb;

}


.review-list {

    max-width:
        850px;

    margin:
        45px auto 0;

    display:
        grid;

    gap:
        18px;

}


.review-card {

    padding:
        25px;

    border-radius:
        22px;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    border:
        1px solid
        #eadbed;

    transition:
        0.35s;

}


.review-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 15px 30px
        rgba(
            181,
            143,
            199,
            0.15
        );

}


.review-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.review-user h4 {

    color:
        #67546f;

}


.review-date {

    color:
        #a598a8;

    font-size:
        10px;

}


.review-stars {

    color:
        #d998cd;

}


.review-card > p {

    margin-top:
        14px;

    color:
        #7b6e80;

    font-size:
        13px;

}


/* =========================
   CONTACT
========================= */

.contact-container {

    max-width:
        850px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        45px;

    padding:
        45px;

    border-radius:
        30px;

    background:
        linear-gradient(
            140deg,
            #ffe8f3,
            #ebe2ff
        );

    box-shadow:
        0 20px 50px
        rgba(
            178,
            142,
            198,
            0.15
        );

}


.contact-info {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.contact-info > p {

    color:
        #bc82bd;

    font-size:
        11px;

    letter-spacing:
        3px;

    font-weight:
        600;

}


.contact-info h3 {

    margin:
        12px 0;

    color:
        #614d6a;

    font-size:
        27px;

}


.contact-info span {

    color:
        #89798e;

    font-size:
        13px;

}


.contact-container form label {

    display:
        block;

    margin:
        12px 0 6px;

    color:
        #68576f;

    font-size:
        12px;

    font-weight:
        500;

}


/* =========================
   FOOTER
========================= */

footer {

    position:
        relative;

    overflow:
        hidden;

    padding:
        65px 20px;

    text-align:
        center;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #715a85,
            #9e72a7
        );

}


footer h3 {

    font-size:
        25px;

}


footer > p {

    color:
        #f2e7f7;

    font-size:
        13px;

}


.footer-stars {

    margin:
        15px;

    color:
        #f7cce6;

    letter-spacing:
        8px;

}


.copyright {

    margin-top:
        20px;

    font-size:
        10px !important;

    opacity:
        0.8;

}


.footer-whale {

    position:
        absolute;

    top:
        -20px;

    right:
        8%;

    font-size:
        100px;

    opacity:
        0.08;

    animation:
        footerWhale
        6s
        ease-in-out
        infinite;

}


@keyframes footerWhale {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(15px);

    }

}


/* =========================
   SCROLL ANIMATIONS
========================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(50px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;

}


.reveal-left {

    opacity:
        0;

    transform:
        translateX(-55px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;

}


.reveal-right {

    opacity:
        0;

    transform:
        translateX(55px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;

}


.reveal.show,
.reveal-left.show,
.reveal-right.show {

    opacity:
        1;

    transform:
        translate(
            0,
            0
        );

}


/* =========================
   MOBILE
========================= */

@media
(max-width: 850px) {

    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            70px;

        left:
            0;

        width:
            100%;

        padding:
            20px;

        flex-direction:
            column;

        background:
            rgba(
                255,
                249,
                253,
                0.98
            );

        box-shadow:
            0 15px 25px
            rgba(
                177,
                141,
                195,
                0.1
            );

    }


    .nav-links.active {

        display:
            flex;

    }


    .menu-button {

        display:
            block;

    }


    .hero {

        grid-template-columns:
            1fr;

        gap:
            50px;

        text-align:
            center;

    }


    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-buttons {

        justify-content:
            center;

    }


    .hero-information {

        justify-content:
            center;

        flex-wrap:
            wrap;

    }


    .about-container {

        grid-template-columns:
            1fr;

    }


    .service-container {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .pricing-container {

        grid-template-columns:
            1fr;

    }


    .popular {

        transform:
            none;

    }


    .popular:hover {

        transform:
            translateY(-10px);

    }


    .contact-container {

        grid-template-columns:
            1fr;

    }

}


/* =========================
   SMALL MOBILE
========================= */

@media
(max-width: 550px) {

    .navbar {

        padding:
            16px 20px;

    }


    .logo {

        font-size:
            18px;

    }


    .hero {

        padding:
            60px 20px;

    }


    .hero h1 {

        font-size:
            38px;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .button {

        width:
            100%;

    }


    .hero-card {

        padding:
            25px;

    }


    .hero-information {

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }


    .mini-info {

        min-width:
            0;

        padding:
            10px 7px;

    }


    .section {

        padding:
            75px 20px;

    }


    .service-container {

        grid-template-columns:
            1fr;

    }


    .skills-container {

        padding:
            25px;

    }


    .calculator,
    .review-form-container,
    .contact-container {

        padding:
            25px;

    }


    .review-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .whale-one {

        font-size:
            80px;

    }


    .whale-two {

        font-size:
            45px;

    }

}


/* =========================
   REDUCED MOTION
========================= */

@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}
.price-card {
    display: flex;
    flex-direction: column;
    min-height: 550px;
}

.package-button {
    margin-top: auto;
}