:root
{
    --yellow: #f5f410;
    --magenta: #8B008B;
}

@media only screen and (max-width: 600px) 
{
    iframe
    {
        width: 100%;
        height: 500px;
    }
    
    .section-box
    {
        border: 1px solid lightgrey;
        box-shadow: 2px 2px 2px 2px lightgrey;
        margin: 2%;
    }
    
    section
    {
        padding-top: 6%;
         padding-bottom: 4%; 
    }  
    
    .mb-h {display: none;}

    .section_img
    {
        width: 80%;
        height: 250px;
    }

}

@media only screen and (min-width: 601px) 
{
    
    iframe
    {
        width: 100%;
        height: 800px;
    }
    
    .nav_ht { height: 18%; }
    
    .w-fc
    {
        max-width: fit-content;
        min-width: 120px;
    }

    .section-box
    {
        border: 1px solid lightgrey;
        box-shadow: 2px 2px 2px 2px lightgrey;
        margin: 1%;
    }
    
    .win-h {display: none;}
    
    section
    {
        padding-top: 3%;
         padding-bottom: 4%; 
    }

    .section_img
    {
        width: 80%;
        height: 400px;
    }

}


/* Overrirding bootstrap Classes */


.navbar-collapse
{
    background-color: white;
    z-index: 1;
    padding: 10px;
    line-height: 50px;
}

/* Other Classes */
.bg_gwhite
{
    background-color: ghostwhite;
}

.bg_white
{
    background-color: white;
}

.bg_yellow
{
    background-color: var(--yellow);
}

.bg_black
{
    background-color: black;
}

.bg_gray
{
    background-color: lightgray;
}

.bg_none
{
    background-color: transparent;
}

.logo_img
{
    width: 140px; 
    height: 120px;
}

.yellow_btn
{
    border: 2px solid black;
    background-color: var(--yellow);
    border-radius: 20px;
    padding: 8px;
    /* box-shadow: 0px 2px 0px 0px black; */
    text-align: center;
    color: black;
}

.black_btn
{
    border: 2px solid black;
    background-color: black;
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0px 2px 0px 0px black;
    text-align: center;
    color: white;
}

.mg_10
{
    margin: 10px 10px 10px 10px;
}

.mg_15
{
    margin: 15px 15px 15px 15px;
}

.w_100
{
    width: 100%;
}


.black_nav
{
    background-color: black;
    color: white;
    border-radius: 20px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px;
}

.hr_magenta
{
    background-color: var(--magenta);
    width: 100%;
    border: 1px solid var(--magenta);
}

.black_nav::-webkit-scrollbar {
    width: 5px;
    height: 5px; /* Hides the scrollbar */
}

.card
{
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.circle_card
{
    width: 100px;
    height: 100px;
    background-color: var(--magenta);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    /* font-size: 20px; */
    padding: 10px;
    border-radius: 67%;
}

.f_100
{
    /* font-size: calc(10px + 2vw); Dynamically adjust font size based on the div's width */
    font-size: 100%;

}


a:hover
{
    text-decoration: none;    
}


/* Font Colors */
.text-black{color: black;}
.text-magenta{color: var(--magenta) !important;}
.text-red{color: red;}
.text-gray{color: lightgray !important;}
.text-green{color: green;}


.box
{
    box-shadow: 2px 2px 5px 2px lightgray; 
    padding: 15px;
    margin-bottom: 20px;
    z-index: 1;
}

.f-14
{
    font-size: 14px;
}

.pd-0{padding: 0px !important;}

/* font-sizes */
.f-10{ font-size: 10px;}
.f-12{ font-size: 12px;}
.f-16{ font-size: 16px;}

/* paddings */
.pd-10{ padding: 10px;}


/* footer */
footer{ margin-bottom: 0px !important;}

.cr_p{ cursor: pointer; color: black;}


::-webkit-scrollbar {
    width: 0.2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: white
}
::-webkit-scrollbar-track-piece {
    background: white
}
::-webkit-scrollbar-thumb {
    background: white
}