/* ================================
   HOPE CIRENCESTER — BRAND VARIABLES
   ================================ */

:root {
  --deep-blue: #0F2D4D;
  --gold: #D4A017;
  --light-blue: #77ACE4;
  --teal: #2C7A7B;
  --dark-red: #621339;
  --warm-grey: #f2f2f0;

  --white: #FFFFFF;
  --dark-grey: #424242;

  --dark-gold:#BC8D15;
  --dark-teal:#1F5556;
  --deep-red: #4D0F2D;

  --radius: 8px;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ================================
   GLOBAL RESET & BASE
   ================================ */

body {
  margin: 0;
  padding: 0 !important;
 font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
 font-optical-sizing: auto;
  color: var(--deep-blue);
  background: var(--warm-grey);
}

h1, h2, h3, h4 {
 font-family: "Cormorant Garamond", serif !important;
  font-optical-sizing: auto;
  color: var(--deep-blue);
  margin-top: 0;
}

a {
  color: var(--deep-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: var(--gold);
}

.h1, h1 {
    font-size: 3.5rem !important;
}
.h5,.h6,h5,h6{
 font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
 font-optical-sizing: auto;
  color: var(--teal);
}
/* Color classes */
.hopeblue {
  color: var(--deep-blue);
}
.hopebluebkgd, .hopebluebkd {
 background-color: var(--deep-blue);
 color:var(--warm-grey);
}
.hopebluebkgd a, .hopebluebkd a {
 	font-family: 'Montserrat Bold', sans-serif !important;
  background-color: var(--deep-blue);
 color:var(--warm-grey) !important;
}
.hopegreybkgd, .hopegreybkd {
 background-color: var(--warm-grey);
 color:var(--deep-blue);
}
.hopeyellow, .hopegold
{
   color:var(--gold);
}
.hopeyellowbkgd, .hopeyellowbkd {
 background-color: var(--gold);
 color: var(--dark-grey);
}
.hopeyellow-border-bottom {
  border-bottom: 3px solid;
  border-bottom-color:var(--gold);
}
.hopeteal {
 color:var(--teal);
}
.hopesoftgrey {
 color:var(--warm-grey);
}
.border-primary, .border-blue {
 border:1px solid var(--deep-blue);
 padding:5px;
}
.border-secondary, .border-gold {
 border:1px solid var(--gold);
 padding:5px;
}
.border-success, .border-teal {
 border:1px solid var(--teal);
 padding:5px;
}
.border-bt-gold, .border-tb-gold {
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
 padding:5px;
}
.solid-gold {
 background-color: var(--gold);
 color:white;
}
/* Buttons */
.btn-info, .btn-blue,.btn-primary
{
   background-color:var(--deep-blue);
   color:var(--warm-grey);
   text-decoration: none;
   border-radius:15px !important;
}
.btn-info:hover,.btn-blue:hover
{
   background-color:var(--deep-blue);
    text-decoration: none;
}
.btn-secondary, .btn-yellow
{
   background-color:var(--gold);
   color:white;
   text-decoration: none;
     border-radius:15px !important;
}
.btn-secondary:hover, .btn-yellow:hover
{
      background-color:var(--dark-gold);
      color:var(--warm-grey);
       text-decoration: none;
}
.btn-warning, .btn-orange
{
   background-color:var(--gold);
   color:white;
   text-decoration: none;
     border-radius:15px !important;
}
.btn-warning:hover, .btn-orange:hover{
 background-color:var(--dark-gold);
 color:var(--warm-grey);
  text-decoration: none;
}
.btn-success, .btn-green
{
   background-color:var(--teal);
   color:var(--warm-grey);
   text-decoration: none;
     border-radius:15px !important;
}
.btn-success:hover, .btn-green:hover
{
 background-color:var(--dark-teal);
  text-decoration: none;
}
.btn-danger, .btn-red
{
   background-color:var(--dark-red);
   color:var(--warm-grey);
   text-decoration: none;
     border-radius:15px !important;
}
.btn-danger:hover, .btn-red:hover
{
  background-color:var(--deep-red);
 text-decoration: none;
}
/* ================================
    TOP NAVIGATION STYLING
    ============================== */
/* top nav links */

.hopetopnav {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
   
}

.hopetopnav ul.nav li a {
    margin-right: 20px;
    font-family: 'Montserrat Bold', sans-serif !important;
    color: var(--deep-blue);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 10%;

}
/* Hover effect */
.hopetopnav ul.nav li a:hover {
    background-color: var(--warm-grey);
    transform: translateY(-2px);
}

/* Active link style */
.hopetopnav ul.nav li a.active {
    background-color: var(--warm-grey);
    font-weight: 600;
}
/* second level links */
.hopemidnav .navbar-nav li a:hover
{
  text-decoration:none;
}
.hopemidnav .dropdown-menu, .hopemidnav .dropdown-menu li
{
   background-color: var(--deep-blue) !important;
   color:var(--warm-grey) !important;
}
.hopemidnav .dropdown-menu li a:hover, .hopemidnav .dropdown-menu li:hover
{
   background-color:var(--warm-grey);
  color: var(--dark-grey) !important;
}
.hopemidnav .dropdown-item.active, .hopemidnav .dropdown-item:active
{
   background-color:var(--warm-grey);
   color:var(--dark-grey) !important;
}
.icon-bar
{
 background-color: var(--warm-grey) !important;
}
/* ================================
   FOOTER
   ================================ */

footer {
  background: var(--deep-blue);
  color: var(--soft-gold);
  padding: 40px;
  text-align: center;
}

footer a {
  color: var(--soft-gold);
}

/* Full-width hero section */
.hc-hero {
    width: 100%;
    min-height: 450px;
    position: relative;
    overflow: hidden;
}
/* utilities */
.limit-aspect-ratio{
  width: 100%;
  aspect-ratio: 1 / 1;  /* defining the aspect ratio of the image */
  object-fit: cover;    /* making sure the image isn't distorted */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .hopetopnav ul.nav li a {
    margin-right: 00px;
    padding: 0.75rem 1rem;
    font-size: 1.2rem;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 .hopetopnav ul.nav li a {
    margin-right: 00px;
    padding: 0.75rem 1rem;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
 .hopetopnav ul.nav li a {
 margin-right: 0px;
    padding: 0.75rem 1rem;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.hopetopnav ul.nav li a {
 margin-right: 0px;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
 
}
/* hide on mobile site */
@media only screen and (max-width: 600px){
  .hideonmobile, .hide-on-mobile
  {
   display:none !important;
  }
  .border-gold {
   border:none;
  }
}
/* This for a fad out at the bottom of an image or slider container */
.curved-div, .faded-btm {
  position: relative;
}

.curved-div::after, .faded-btm::after {
 content: "";
    width: 100%;
    height: 80px;
    display: block;
    position: absolute;
    background: rgba(150, 123, 19, 1);
    background: -webkit-gradient(linear, 0% 0% 0% 100%, from(rgba(150, 123, 19, 0.1)), to(rgba(242, 242, 252, 1)));
    background: -webkit-linear-gradient(top, rgba(150, 123, 19, 0), rgba(242, 242, 252, 1));
    background: -moz-linear-gradient(top, rgba(150, 123, 19, 0), rgba(242, 242, 252, 1));
    background: -ms-linear-gradient(top, rgba(150, 123, 19, 0), rgba(242, 242, 252, 1));
    background: -o-linear-gradient(top, rgba(150, 123, 19, 0), rgba(242, 242, 252, 1));
    bottom: 0;
    left: 0;
    z-index: 10;
  );
}
/* make an image a circle */
.img-circle, .img-circle img
{
  border-radius: 50%;
}
.img-pill, .img-pill img
{
  border-radius: 50rem !important;
}