@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..400&display=swap');

:root{
    --primary-colour: #0091c9;
    --secondary-colour: #444444;
    --accent-colour-lightblue: #a7e6ff;
    --background-colour-light: #f5f7fa;
    --background-colour-darkblue: #162736;
    --background-colour-darkgrey: #444444;
    --icon-colour-light: #ebeff0;
    --icon-colour-dark: #94a4a5;
}

/* Sections*/
#pricing-main-content{
    background-color: var(--background-colour-light);
}

#pricing-estimate-section{
    flex-direction: row;
    max-width: 100%;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #pricing-estimate-section{
        flex-direction: column;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #pricing-estimate-section{
        flex-direction: column;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #pricing-estimate-section{
        flex-direction: column;
    }
}

.container-line{
    width: 90%;
    border-bottom: 0.1rem solid #4444;
    margin: 1vh auto 1vh auto;
}

/* Containers */

.pricing-container{
    display: flex;
    flex-direction: column;
    max-width: 80%;
    width: fit-content;
    height: fit-content;
    background-color: white;
    border-radius: 1rem;
    margin: 1vh 1vw 4vh 1vw;
    border: 0.1rem solid #3333;
    text-align: left;
    filter: drop-shadow(0.25vh 0.25vh 1vh #d0d0d0);
}

.pricing-container.estimate{
    min-height: 80vh;
    height: fit-content;
    max-height: fit-content;
    width: 20vw;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .pricing-container.estimate{
        min-height: fit-content;
        width: 80vw;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .pricing-container.estimate{
        min-height: fit-content;
        width: 80vw;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .pricing-container.estimate{
        min-height: fit-content;
        width: 80vw;
    }
}

.pricing-container > h1{
    font-size: 1.5rem;
    font-weight: 1000;
    color: var(--secondary-colour);
    margin: 0 auto 0 1vw;
    align-items: inherit;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .pricing-container > h1{
        margin: 0 auto 0 5vw;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .pricing-container > h1{
        margin: 0 auto 0 5vw;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .pricing-container > h1{
        margin: 0 auto 0 5vw;
    }
}

.pricing-container > h2{
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--secondary-colour);
    margin: 1vh 1vw 2vh 1vw;
    align-items: inherit;
    height: 5vh;
    text-align: center;
}

.pricing-container > h3{
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--secondary-colour);
    margin: 0 auto 1vh 1vw;
    align-items: inherit;
}

.pricing-container > p{
    font-size: 1rem;
    font-weight: 250;
    color: var(--secondary-colour);
    margin: auto 2vw;
    align-items: inherit;
    height: fit-content;
}

/* Top Container */

.top-container-header{
    text-align: left !important;
    margin: 1vh auto 0 1vw !important;
    height: fit-content !important;
}

.top-container-subheader{
    text-align: left !important;
    margin: 0 auto 0 1vw !important;
}

.top-container-text-wrapper{
    height: min-content;
    margin: 1vh 2vw 1vh 2vw !important;
    align-content: center;
}

.top-container-text-wrapper > p{
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-colour);
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
}

/* Estimate Containers */

.estimate-container-subheader{
    text-align: left !important;
    margin: 0 auto 0 1vw !important;
}

/* Buttons */

.pricing-button{
    margin: 1vh auto 3vh auto;
}

/* Text */

@media screen and (max-width: 600px) and (orientation:portrait)
{
    .section-header{
        font-size: 2rem;
        margin: auto 5vw auto 5vw;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .section-header{
        font-size: 2rem;
        margin: auto 5vw auto 5vw;
    }
}

.subsection-header{
    text-align: center;
}

.subsection-text{
    text-align: center;
    margin: auto 0 auto 0.5vw;
}

.subsection-text.inline{
    margin: 0;
    font-weight: 750;
}

.estimate-container-text-wrapper{
    height: min-content;
    min-height: 20vh;
    margin: 1vh 2vw 1vh 2vw !important;
    align-content: center;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .estimate-container-text-wrapper{
        min-height: 0;
        margin: 1vh 2vw 1vh 2vw !important;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .estimate-container-text-wrapper{
        min-height: 0;
        margin: 1vh 2vw 1vh 2vw !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .estimate-container-text-wrapper{
        min-height: 0;
        margin: 1vh 1vw 2vh 1vw !important;
    }
}

.estimate-container-text-wrapper > p{
    font-size: 1rem;
    font-weight: 250;
    color: var(--secondary-colour);
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
}

.pricing-feature-text{
    font-weight: 1000 !important;
    color: #777 !important;
    line-height: 2rem;
    margin: 0 auto auto 2vw !important;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .pricing-feature-text{
        margin: 0 auto 2vh 2vw !important;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .pricing-feature-text{
        margin: 0 auto 2vh 2vw !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .pricing-feature-text{
        margin: 0 auto 2vh 2vw !important;
    }
}