@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');


/* Custom CSS */
:root {
    --light-blue-color: #5A4BDA;
    --dark-blue-color: #4437B8;
    --darkest-blue-color: #1B2124;
    --yellow-color: #FBDE47;
    --white-color: #fff;
    --light-gray-color: #F8F9FA;
    --dark-gray-color: #EEEEEE;
    --light-pink-color: #FFF2F2;
    --dark-color: #000;
    --black-color: #333;
    --light-black-color: rgb(61 61 61);
    --border-color: #D9DCE1;
    --light-purple-color:#F1EFFF;
    --light-green-color:#DFF1E4;
    --smoky-black-color:#100c08;

    --resource-card: rgb(241, 250, 255);
    --resource-card-hover: rgb(218, 242, 255);

    --resource-card2: rgb(255, 249, 238);
    --resource-card2-hover: rgb(255, 239, 210);

    --resource-card3: rgb(232, 255, 246);
    --resource-card3-hover: rgb(211, 255, 238);
    
    --purple-gray-color:#a7a6ba;


    /* Font size */
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-23: 23px;
    --fs-24: 24px;
    --fs-25: 25px;
    --fs-26: 26px;
    --fs-27: 27px;
    --fs-28: 28px;
    --fs-29: 29px;
    --fs-30: 30px;
    --fs-31: 31px;
    --fs-32: 32px;
    --fs-33: 33px;
    --fs-34: 34px;
    --fs-35: 35px;
    --fs-40: 40px;
    --fs-1_6: 1.6rem;

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.blue-bg {
    background-color: var(--light-blue-color) !important;
}

.yellow-bg {
    background-color: var(--yellow-color) !important;
}

.red-bg {
    background-color: #ff7272 !important;
}

.btn-primary{
    background-color: var(--light-blue-color) !important;
    border-color: var(--light-blue-color) !important;
    
}

.reddit {
    font-family: "Reddit Sans", sans-serif !important;
}


body {
    font-family: "Reddit Sans", sans-serif !important;
    background-color: var(--white-color) !important;
}


.cw_head {
    font-weight: 700;
    font-size: clamp(var(--fs-20), 3vw + .5rem, var(--fs-32));
    line-height: 1.6rem;
    padding-bottom: 3px !important;
}

.cw_subhead {
    font-size: clamp(var(--fs-12), 2vw + .125rem, var(--fs-17));
    font-weight: 500;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center;
    color: var(--light-black-color);
    /* padding-bottom: 16px; */
}

.cw_section {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    margin-right: auto;
    margin-left: auto;
    padding: 65px 16px;
    width: 100%;
}

.padding_x_25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.margin_x_25 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.mw80 {
    max-width: 72rem;
    width: 100%;
}

.platform-head h1 {
    /* color: #1B2124; */
    margin-bottom: 6px !important;
    font-size: var(--fs-40) !important;
    line-height: 50px !important;
}

@media (max-width: 768px) {
    .platform-head h1 {
        padding-left: 50px !important;
        padding-right: 50px !important;
        font-size: var(--fs-1_6) !important;
        line-height: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .mw80{
        max-width: 80%;
    }
   
}

.padding_y_header {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

@media(min-width:768px) {
    .cw_head {
        /* font-size: 32px; */
        line-height: 38px;
    }

    .cw_subhead {
        /* font-size: 17px; */
        line-height: 1.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cw_section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .padding_y_header {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

}

@media(min-width:1024px) {
    /* .cw_section {
        max-width: 72rem;
    } */
}

@media(min-width:1280px) {
    .cw_section {
        padding-right: 0px;
        padding-left: 0px;
    }
}