@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian:wght@700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* backdrops */
#horoscope .aries .backdrop {
    background-color: #FFF9E7;
}
#horoscope .taurus .backdrop {
    background-color: #FFE2DD;
}
#horoscope .gemini .backdrop {
    background-color: #DEDBF9;
}
#horoscope .cancer .backdrop {
    background-color: #F1FFDD;
}
#horoscope .leo .backdrop {
    background-color: #FFE8D6;
}
#horoscope .virgo .backdrop {
    background-color: #FFDEED;
}
#horoscope .libra .backdrop {
    background-color: #FFECBE;
}
#horoscope .scorpio .backdrop {
    background-color: #FFDCF9;
}
#horoscope .sagittarius .backdrop {
    background-color: #F3F7FF;
}
#horoscope .capricorn .backdrop {
    background-color: #FFEFE0;
}
#horoscope .aquarius .backdrop {
    background-color: #E6EAC5;
}
#horoscope .pisces .backdrop {
    background-color: #DDF7FB;
}

#horoscope {
    font-family: "Roboto", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    scroll-behavior: smooth;
}
#horoscope hr {
    border: none;
    height: 1px;
    background-color: #E5E5E5;
    width: 100%;
}
#horoscope .title-heading {
    font-size: 28px;
    line-height: 36px;
    text-transform: uppercase;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0;
    padding: 0;
}
#horoscope .two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
#horoscope .sub-title-heading {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0;
    padding: 0;
}
#horoscope .sub-sub-title-heading {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0;
    margin-bottom: 16px;
    padding: 0;
}
#horoscope .text-base {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #2c2c2c;
    margin: 0;
    padding: 0;
}
#horoscope .text-small {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #2c2c2c;
    margin: 0;
    padding: 0;
}
#horoscope .italic {
    font-style: italic;
}
#horoscope .box-shadow {
    padding: 48px 64px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 4px 40px 0px #0000000D;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
#horoscope .date-backdrop {
    display: flex;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9px;
    background-color: #f6f6f6;
    font-size: 18px;
    line-height: 26px;
    color: #000;
    align-items: center;
    width: fit-content;
}

/* Horoscope  Intro */
#horoscope .intro {
    margin: 40px 0;
}
#horoscope .intro .intro-detail .cover .title-heading {
    display: none;
}
#horoscope .intro .intro-detail {
    display: flex;
    gap: 24px;
}
#horoscope .intro .intro-detail .cover .backdrop {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
#horoscope .intro .intro-detail .cover .backdrop figure {
    width: 80px;
    height: 80px;
    width: auto;
    overflow: hidden;
}
#horoscope .intro .intro-detail .cover .backdrop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#horoscope .intro .intro-detail .intro-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
#horoscope .intro .intro-detail .intro-content .title-detail {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Horoscope  Forecast */
#horoscope .forecast {
    position: relative;
    padding: 0 0 40px;
    background: linear-gradient(to bottom, 
        white 0%, 
        white 50%, 
        #FAFAFA 50%, 
        #FAFAFA 100%
    );
}
#horoscope .forecast .forecast-detail .box {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #DDDDDD;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#horoscope .forecast .forecast-detail .heading {
    display: flex;
    gap: 24px
}
#horoscope .forecast .forecast-detail .heading h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
#horoscope .forecast .forecast-detail .sign-today {
    display: flex;
    gap: 24px;
}
#horoscope .forecast .forecast-detail .sign-today .boxy {
    display: flex;
    flex-direction: column;
    gap: 8px;;
}
#horoscope .forecast .forecast-detail .sign-today .rounded {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 99999px;
    overflow: hidden;
}
#horoscope .forecast .forecast-detail .sign-today .rounded .darker {
    background-color: #2C2C2C;
    color: #fff;
}
#horoscope .forecast .forecast-detail .sign-today .rounded h4 {
    padding: 8px 16px;
}
#horoscope .forecast .forecast-detail .sign-today .lucky-numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
#horoscope .forecast .forecast-detail .sign-today .lucky-numbers .number {
    background-color: #F4F4F4;
    border-radius: 8px;
    padding: 5px 0;
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #ED1B33;
    text-align: center;
    justify-content: center;
}
#horoscope .forecast .forecast-detail .sign-today .message {
    font-size: 24px;
    line-height: 32px;
    color: #2c2c2c;
    font-weight: 300;
    margin: 0;
    padding: 0;
}
#horoscope .forecast .forecast-detail .ratings {
    display: flex;
    gap: 15px;
}
#horoscope .forecast .forecast-detail .ratings .rounded {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 99999px;
    overflow: hidden;
    padding: 10px 16px;
}
#horoscope .forecast .forecast-detail .ratings .rounded h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
    padding: 0;
    color: #2c2c2c;
}
#horoscope .forecast .forecast-detail .ratings .rounded .rating {
    display: flex;
}
#horoscope .forecast .forecast-detail .ratings .rounded .rating .star {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 14.3917L15.1501 17.5L13.7834 11.6417L18.3334 7.70002L12.3417 7.19169L10.0001 1.66669L7.65841 7.19169L1.66675 7.70002L6.21675 11.6417L4.85008 17.5L10.0001 14.3917Z' fill='%23FED224'/%3E%3C/svg%3E");
}
#horoscope .forecast .forecast-detail .ratings .rounded .rating .star.empty {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 14.3917L15.1501 17.5L13.7834 11.6417L18.3334 7.70002L12.3417 7.19169L10.0001 1.66669L7.65841 7.19169L1.66675 7.70002L6.21675 11.6417L4.85008 17.5L10.0001 14.3917Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
}

/* Horoscope  About Today */
#horoscope .today {
    background-color: #FAFAFA;
    padding-bottom: 64px;
}
#horoscope .today .today-detail .heading {
    margin-bottom: 32px;
}
#horoscope .today .today-detail .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
    column-gap: 40px;
}
#horoscope .today .today-detail .content .box {
    padding: 32px;
    border-radius: 20px;
    border: 1px solid #EFEFEF;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}#horoscope .today .today-detail .content .box.full-width {
    grid-column: 1 / -1;
}
#horoscope .today .today-detail .content .box h3 {
    font-size: 20px;
    line-height: 28px;
    color: #2c2c2c;
    font-weight: 700;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Horoscope  Personality */
#horoscope .personality {
    padding: 64px 0 0;
}
#horoscope .personality .wrapper{
    display: flex;
    flex-direction: column;
    gap: 48px;
}
#horoscope .personality .text-wrapper{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#horoscope .personality .content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#horoscope .personality .badget-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
#horoscope .personality .badget {
    background-color: #fbfbfb;
    border: 1px solid #d9d9d9;
    padding: 16px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    gap: 8px;
}
#horoscope .personality .badget-group-full {
    display: flex;
    gap: 12px;
    flex-direction: column;
}
#horoscope .personality .badget-small {
    background-color: #fbfbfb;
    border: 1px solid #d9d9d9;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    gap: 8px;
}

/* Horoscope  Personality */
#horoscope .box-message {
    margin: 40px 0 64px;
}
#horoscope .box-message .signup {
    display: flex;
    gap: 24px;
    background-color: #FFFCF9;
    border: 1px solid #EBDED1;
    border-radius: 12px;
    padding: 24px 32px;
}
#horoscope .box-message .signup .image {
    background-color: #ffedef;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
}
#horoscope .box-message .signup .description {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#horoscope .box-message .signup .description a {
    padding: 6px 36px;
    border-radius: 999px;
    background-color: #EF1B33;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #fff;
    width: fit-content;
    font-weight: 700;
}

/* Tablet Responsive (768px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* General */
    #horoscope .box-shadow {
        padding: 32px;
        gap: 28px;
    }

    /* Intro Section */
    #horoscope .intro .intro-detail {
        gap: 20px;
    }

    /* Forecast Section */
    #horoscope .forecast .forecast-detail .box {
        padding: 24px;
    }

    #horoscope .forecast .forecast-detail .heading {
        gap: 16px;
    }

    #horoscope .forecast .forecast-detail .heading h2 {
        font-size: 28px;
        line-height: 36px;
    }

    #horoscope .forecast .forecast-detail .sign-today {
        gap: 20px;
    }

    #horoscope .forecast .forecast-detail .lucky-numbers {
        gap: 10px;
    }

    /* Today Section */
    #horoscope .today {
        padding: 48px 0;
    }

    #horoscope .today .today-detail .content {
        gap: 24px;
    }

    #horoscope .today .today-detail .content .box {
        padding: 24px;
    }

    /* Personality Section */
    #horoscope .personality .badget-group {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Message Box */
    #horoscope .box-message .signup {
        padding: 32px;
    }

    /* Text Adjustments */
    #horoscope .forecast .forecast-detail .sign-today .message {
        font-size: 22px;
        line-height: 30px;
    }

    /* Forecast Ratings Fix */
    #horoscope .forecast .forecast-detail .ratings {
        flex-direction: column;
        gap: 12px;
    }

    #horoscope .forecast .forecast-detail .ratings .rounded {
        padding: 8px 16px;
    }

    #horoscope .forecast .forecast-detail .ratings .rounded .rating {
        gap: 4px;
    }

    #horoscope .forecast .forecast-detail .ratings .rounded .star {
        width: 16px;
        height: 16px;
    }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    /* General */
    #horoscope .box-shadow {
        padding: 24px;
        gap: 24px;
    }

    #horoscope .title-heading {
        font-size: 24px;
        line-height: 32px;
    }

    #horoscope .sub-title-heading {
        font-size: 20px;
        line-height: 28px;
    }

    #horoscope .sub-sub-title-heading {
        font-size: 18px;
        line-height: 26px;
    }
    #horoscope .two-column {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    #horoscope .personality .badget {
        width: 100%;
        padding: 12px 16px;
    }

    /* Intro Section */
    #horoscope .intro .intro-detail {
        flex-direction: column;
    }
    #horoscope .intro .intro-detail .cover {
        display: flex;
        gap: 24px;
        align-items: center;
    }
    #horoscope .intro .intro-detail .cover .title-heading {
        display: block;
    }
    #horoscope .intro .intro-detail .cover .backdrop {
        width: 64px;
        height: 64px;
    }
    #horoscope .intro .intro-detail .cover .backdrop figure {
        width: 42px;
        height: 42px;
    }

    /* #horoscope .intro .intro-detail .intro-content {
        align-items: center;
    } */
    #horoscope .intro .intro-detail .intro-content .title-heading {
        display: none;
    }

    /* Forecast Section */
    #horoscope .forecast .forecast-detail .heading {
        justify-content: space-between;
        align-items: center;
    }
    #horoscope .forecast .forecast-detail .heading .date {
        font-weight: 700;
        padding: 8px 10px;
        font-size: 15px;
    }

    #horoscope .forecast .forecast-detail .heading .date svg {
        width: 20px;
        height: 20px;
    }

    #horoscope .forecast .forecast-detail .heading h2 {
        font-size: 22px;
        line-height: 32px;
    }

    #horoscope .forecast .forecast-detail .sign-today {
        flex-direction: column;
    }

    #horoscope .forecast .forecast-detail .ratings {
        flex-direction: column;
    }

    /* Today Section */
    #horoscope .today {
        padding: 0 0 40px;
    }
    #horoscope .today .today-detail .content {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #horoscope .today .today-detail .content .box {
        padding: 24px;
    }

    /* Personality Section */
    #horoscope .personality {
        padding: 40px 0 0;
    }
    #horoscope .personality .badget-group {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Message Box */
    #horoscope .box-message .signup {
        padding: 24px;
    }
    #horoscope .box-message .signup .image {
        width: 64px;
        height: 64px;
    }

    /* Text Adjustments */
    #horoscope .forecast .forecast-detail .sign-today .message {
        font-size: 20px;
        line-height: 28px;
    }
}