/* -------------START GLOBAL STYLES-----------  */
 :root{
    --grey: #f2efef;
    --white: white;
    --yellow: #FFD166; /* Soft yellow for links */
    --brown: #6A4C39; /* Deep brown for navbar background */
    --orange: #FF8C42; /* Warm orange for hover */
    --blue: #457B9D; /* Accent dark blue background */
}
 /* -------------END GLOBAL STYLES-----------  */


 /* -------------START TEXT STYLES-----------  */
.text-heading-dark{
    font-family: "Lora", serif;
    font-weight: 600;
    font-style: normal;
    color: var(--brown);
}
  
.text-paragraph-dark{
    font-family: "IBM Plex Serif", serif;
    font-weight: 400;
    font-style: normal;
}

.text-heading-orange{
    font-family: "Lora", serif;
    font-weight: 600;
    font-style: normal;
    color: var(--orange);
}
.text-heading-blue{
    font-family: "Lora", serif;
    font-weight: 600;
    font-style: normal;
    color: var(--blue);
}
.text-paragraph-light{
    font-family: "IBM Plex Serif", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
} 
.text-underline-orange{
    text-decoration: underline;
    text-decoration-color: var(--orange);
}
.text-links-yellow{
    font-family: "IBM Plex Serif", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--yellow);
}
/* -------------END TEXT STYLES-----------  */

/* --------------START CUSTOM BUTTONS  ------------- */
.btn-primary {
    background-color: #FF8C42; /* Warm orange */
    border-color: #FF8C42;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #FFD166; /* Soft yellow on hover */
    border-color: #FFD166;
    color: #6A4C39; /* Deep brown text */
}

.btn-outline-primary {
    color: var(--orange) !important; /* Change text color */
    border-color: var(--orange) !important; /* Change border color */
}

.btn-outline-primary:hover {
    background-color: var(--orange) !important; /* Change background color on hover */
    color: white !important; /* Change text color on hover */
}

.btn-outline-light {
    border-color: #FFFFFF;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #A8DADC; /* Sky blue hover effect */
    color: #6A4C39; /* Deep brown text */
}

/* --------------END CUSTOM BUTTONS  ------------- */

/* --------------CUSTOM WIDTH SECTION ------------- */

@media (min-width: 768px) {
    .w-md-50 {
        width: 50% !important;
    }
    .w-md-75{
        width: 75% !important;
    }
}

/* --------------END CUSTOM WIDTH SECTION  ------------- */


/*SEPARATOR DIV */
.separator{
    width: 100%;
    height: 15vh;
}