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

@font-face {
    font-family: theme_font_b;
    src: url('../assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf');
}

@font-face {
    font-family: theme_font_a;
    src: url('../assets/fonts/Cormorant_Garamond/CormorantGaramond-Regular.ttf');
}

@font-face {
    font-family: theme_font_c;
    src: url('../assets/fonts/dobkin-script/DobkinScript.ttf');
}

:root {
    --primary-color: #B0D8E8;
    --light-primary-color: #dfebf0;
    --sec-color: #405861;
    --rare-theme-color: #fff6f0;
    --heading-text-color: #405861;
    --text-color: #879296;
    --dark-text-color: #455C65;
    --side-menu-bg-color: #F8F6F4;
    --footer-bg-color: #F7F5F3;
    --font-white: white;

}

body{
    background: white !important;
}

.heading-txt{
    /* background: linear-gradient(to right, 
                    var(--theme-color-b), 
                    var(--theme-color-a),
                    var(--theme-color-b), 
                    var(--theme-color-a),
                    var(--theme-color-b), 
                    var(--theme-color-a)
                    ); */
    color: rgb(54, 54, 54);
    background-clip: text;
    -webkit-background-clip: text;
    /* backdrop-filter: blur(8px); */
    font-size: 2.5em;
    text-align: center;
}

@media only screen and (min-width: 100px){
    .heading-txt{
        font-size: 1em;
    }
}

@media only screen and (min-width: 768px){
    .heading-txt{
        font-size: 1.5em;
    }
}

@media only screen and (min-width: 1200px){
    .heading-txt{
        font-size: 2.5em;
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none !important;
    color: var(--dark-text-color) !important;
}

input{
    border: 1px solid rgb(223, 223, 223);
    padding: 1em 1.5em;
    outline: none;
    width: 100%;
    /* max-width: 400px; */
}

textarea{
    border: 1px solid rgb(223, 223, 223);
    padding: 1em 1.5em;
    outline: none;
    width: 100%;
    max-width: 100%;
    resize: none !important;
}

.text-anchor{
    position: relative;
    padding: 0.1em 0.5em;
    transition: all 0.2s ease-in-out;
    z-index: 99;
    color: var(--dark-text-color) !important;
}

.text-anchor::after{
    content: " ";
    position: absolute;
    width: 80%;
    background: var(--light-primary-color);
    height: 0.7em;
    border-top-right-radius: 40%;
    bottom: 0.1em;
    left: 0;
    right: 0;
    z-index: -9;
    transition: width 300ms ease-in-out;
}

.text-anchor:hover::after{
    width: 100%;
}

.btn-primary {
    padding: 0.8em 2em;
    background: var(--primary-color);
    color: var(--font-white) ;
    cursor: pointer;
    border: none;
    text-align: center;
    position: relative;
    font-size: 1em;
    text-transform: uppercase;
    z-index: 99;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.btn-primary::after{
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sec-color);
    transition: width 0.25s ease-in;
    width: 0%;
    z-index: -9;
}

.btn-primary:hover::after{
    width: 100%;
}

/* .btn-primary:hover {
    box-shadow: 0em 0.2em 0.5em 0em rgba(0, 0, 0, 0.2);
    color: var(--font-black);
} */

hr {
    width: 80%;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0.2;
}

.page-heading-text {
    font-size: 2.5em;
    color: var(--font-black);
    text-align: center;
}

.w-100{
    width: 100%;
}

.w-90{
    width: 90%;
}

.w-80{
    width: 80%;
}

.w-70{
    width: 70%;
}

.w-60{
    width: 60%;
}

.w-50{
    width: 50%;
}

.w-40{
    width: 40%;
}

.w-30{
    width: 30%;
}

.w-20{
    width: 20%;
}

.w-10{
    width: 10%;
}

.gap-1{
    gap: 1em;
}

.gap-2{
    gap: 2em;
}

.gap-3{
    gap: 3em;
}
.gap-4{
    gap: 4em;
}
.gap-5{
    gap: 5em;
}

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

.flex{
    display: flex;
}

.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column{
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    .page-heading-text {
        font-size: 1.5em;
    }
}