/* MAIN STYLES */
html, body {
  height: 100%;  font-size: 10px; /* Easy to calculate rem sizes. */ 
}
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}
.headline {
    color: #5f8fdd;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 6rem;
    text-shadow: 
        -2px -2px 0 #fff, 
         2px -2px 0 #fff, 
        -2px  2px 0 #fff, 
         2px  2px 0 #fff,
         4px  4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow */
}
.headline2 {
    color: #5f8fdd;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 4.6rem;
    text-shadow: 
        -1px -1px 0 #fff, 
         1px -1px 0 #fff, 
        -1px  1px 0 #fff, 
         1px  1px 0 #fff,
         4px  4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow */
}
body {background-color:#fff; }

hr.hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(190,190,190, 1), rgba(0, 0, 0, 0)); }

li {color:#d3bda7; padding-bottom:15px; font-size: 1.5rem; line-height:1.7; }
.innerwrap ul li {color:#4b5788; padding-top:0px; font-size: 1.6rem; line-height:1; margin-left:40px; }

/* ELEMENTS */ 
.bluebar {color:#fff; text-align:center; padding:40px 0;}
.bluebar2 {background-color:#192955; color:#fff; text-align:center; padding:40px 0;}
.bluebar3 {color:#fff; text-align:center; padding:40px 0; background: rgb(80,107,153,1);
background: linear-gradient(185deg, rgba(80,107,153,1) 0%, rgba(94,126,182,1) 27%, rgba(64,84,119,1) 100%);}
.whitebar {background-color:#fff; color:#777; text-align:center; padding:0px 0;}
.darkbar {background-color:#333; text-align:center; padding:40px 0;}
.darkbar p {color:#dbdbdbd; text-align:center;}
.darkbargrid p {color:#dbdbdb; text-align:left;}
.timegrid .phead  {margin-top:-10px; border-bottom:dotted 2px #78B1F4; color:#78B1F4; text-align:left;}
.faque {background-color:#526f8c; color:#fff; text-align:center; padding:40px 0; background-image: faqback.png;}
.faq {
    background-color: #526f8c;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    background-image: url('pics/faqback2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.faqblu {
    color: #fff;
    text-align: center;
    padding: 40px 0;
    background-image: url('pics/faqback2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	display:inline;
}
.dblue {
    background-color: #E4E1E3;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    background-image: url('pics/faqback.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center; /* Adjusted background-position */
}
.dblueb {
    background-color:#514eaa;
    color: #999;
    text-align: center;
    padding: 40px 0;
	margin-top:-12px!important;
}
.pinstripes {
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
  background-image: repeating-linear-gradient(405deg, #5F8FDD, #5F8FDD 39px, #639fe8 39px, #639fe8 40px);
}
.pinstripesb {
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
  background-image: repeating-linear-gradient(405deg, #637aa5, #637aa5 39px, #7087b2 39px, #7087b2 40px);
}

.faded {width:100%; border: none; height: 1px; margin:30px auto; background: linear-gradient(to right, transparent, transparent 1%, #999 50%, transparent 99%, transparent 100%);}
button { margin-top:10px; padding:2px 20px; border:solid 2px #999; border-radius:4px; background-color:#f4dd8b;}
button:hover {padding:6px 32px; border:solid 2px #fff; border-radius:4px; background:#3998d3; color:#fff;}
.probutton {display: inline-block; background-color:#4b85dd; border:2px solid #fff;padding:6px 32px;text-align:center;text-decoration:none;font-size:1.6rem; border-radius:8px; color:#fff;	margin-bottom:20px;cursor:pointer;justify-content:center;margin:0 auto; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2),  inset 0 -4px 10px rgba(0, 0, 0, 0.2);}
.probutton:hover { border:2px solid #fff;padding:6px 32px;text-align:center;text-decoration:none;font-size:1.6rem; border-radius:8px; }
  .listbutton:hover{	background-color:#07b3f7; color:#fff;	padding:2px 6px;  } 
  .listbutton  a:hover {color:#fff;}
  .listbutton {color:#fff; border: solid 1px #999; padding:2px 6px; margin:}

	
	 .probutton3 {display: inline-block; background-color:#f7e08c; border:2px solid #fff;padding:5px 14px;text-align:center;text-decoration:none;font-size:1.4rem; border-radius:8px; color:#555;	cursor:pointer;justify-content:center;margin:5px; }
   .probutton3  a {color:#909eb2;}
  .probutton3:hover{	background-color:#6aa9cc;	color:#fff!important;	padding:5px 14px;} 
    .probutton3  a:hover {color:#fff;}
	
.number-icon {
  text-align: center;
  width: 40px;
  height: 40px;
  border: 3px dotted #61d8a5; /* Dotted border */
  border-radius: 50%; /* Make it circular */
  color: #fff; /* White text */
  font-size: 18px; /* Adjust text size */
  background-color:#4f74a3;
  line-height: 40px; /* Vertically center the text */
  display: inline-block; /* Ensure it behaves like a block element */
  vertical-align: middle;
}

	
.opaque {opacity:0.7;}
.opaque:hover {opacity:1;}
a {color:#FFCC99; text-decoration:none;}
a:hover {color:#FFF; text-decoration:none!important;}

.image-hover {
    transition: opacity 0.3s; /* Smooth transition for opacity change */
    cursor: pointer; /* Change cursor to hand symbol */
}
.image-hover:hover {
    opacity: 0.7; /* Set opacity to 0.7 on hover */
}

.btn-header{	display:flex;	flex-basis:20%;background-color:rgba(220,160,120, 0.8);color:black;border:2px solid #fff;padding:10px 30px;text-align:center;text-decoration:none;font-size:130%;	color:#fff;	text-transform:uppercase;margin-bottom:20px;cursor:pointer;justify-content:center;margin:0 2px;margin-top:30px;}.btn-header:hover{	background-color:rgba(244,244,244,0.7);	color:#12130F;	padding:10px 30px;} a{text-decoration:none;}

.firm { margin-top:10px; font-size:1.3rem; padding:3px 26px 5px;  border:solid 2px #d3bda7; border-radius:4px; background:none; color:#d3bda7;}
.firm:hover {border:solid 2px #fff; padding:3px 26px 5px; border-radius:4px; background:#3998d3; color:#fff; }

.callme { margin-top:10px; font-size:1.3rem; padding:5px 26px 6px;  border:solid 2px #d6c59e; border-radius:4px; background:#bfad80; color:#fff; margin-bottom:10px;}
.callme:hover {border:solid 2px #fff; padding:5px 26px 6px; border-radius:4px; background:#86AAE0; color:#fff; }

.specialty { margin-top:10px; font-size:1.1rem; padding:1px 14px 2px;  border:solid 1px #777; border-radius:4px; background:#444; color:#d3bda7;}
.specialty:hover {border:solid 1px #fff; padding:1px 14px 2px; border-radius:4px; background:#757775; color:#fff; }
.specialty-div {margin-top:-10px;}

.watch { margin-top:10px; padding:12px 30px;  border:solid 2px #fff; border-radius:4px; background:#10bfef; color:#fff; padding:10px 30px;text-align:center;text-decoration:none;font-size:140%; text-transform:uppercase;margin-bottom:20px;cursor:pointer;justify-content:center;margin:0 2px;margin-top:30px;}
.watch:hover {padding:9.5px 40px; border:solid 2px #fff; border-radius:4px; background:#3998d3; color:#fff; font-size:150%; }

.float_right { float:right; }
.fullwide {width:100%;}
.separator {
    position:relative; margin-top:-40px; z-index:1;
	height: 50px;
    width: 100%;
    background-image: url('pics/diamond.png');
    background-repeat: repeat; 
    display: inline-block; 
    vertical-align: middle; 
}
.sepgold {
    position: relative;
    margin-top: -100px;
    z-index: 1;
    height: 100px;
    width: 100%;
    background-image: url('pics/0wave2.png');
    background-size: 100% 100px;
    display: inline-block;
    vertical-align: middle;
}

.sepdb {
    position: relative;
    margin-top: -100px;
    z-index: 1;
    height: 100px;
    width: 100%;
    background-image: url('pics/0wave2.png');
    background-size: 100% 100px;
    display: inline-block;
    vertical-align: middle;
}
.sepdb2 {
    position: relative;
    margin-top: -90px;
	z-index: 1;
    height: 120px;
    width: 100%;
    background-image: url('pics/0wave0.png');
    background-size: 100% 100px;
    /* display: inline-block;
    vertical-align: middle; */
}

 @media (max-width: 770px) { 
 .sepdb2 { margin-top: -40px;}
 }

/* FONTS */
/* font Sizes */
h1 {font-size: 4.0rem;}
h2 {font-size: 3.6rem;}
h3 {font-size: 3.2rem;}
h4 {font-size: 2.8rem;}
h5 {font-size: 2.4rem;}
h6 {font-size: 2.2rem;}
p {font-size: 2rem; padding-top:20px; padding-bottom:20px;}

/* Import Oswald 500 from Google Fonts for H1 to H3 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

/* Import Oswald 300 from Google Fonts for H4 to H6 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');

/* Import Raleway 300 and Italic from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400i&display=swap');

/* Apply fonts to elements */
/* Oswald 500 for H1 to H3 */
h1, h2, h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}

/* Oswald 300 for H4 to H6 */
h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

/* Raleway 300 for other text */
body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}

/* Raleway Italic for italicized text */
em, i {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
}


/* Apply Oswald 500 to H1 to H3 */
h1, h2, h3, .oswald500  {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

/* Apply Oswald 300 to H4 to H6 */
h4, h5, h6, .oswald300  {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

/* Apply Raleway 300 to other text */
body, p, li, .raleway {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}

.writ { font-size:4rem;}
.writname {font-family: "Raleway";   font-weight: 300; font-size:1.6rem;}
.erase {font-family: "Erase"; } /* Use to clear fonts */

@media (max-width: 900px) {
.signature, .writ {font-size:6rem;}
}
  
  @media (max-width: 495px) {
.signature, .writ {font-size:4rem;}
}

/* COLORS */
.white {color:#fff;}
.golden {color:#FFCC99;}
.dusk {color:#7f6b57;}
.icon {width:35px; height:35px; margin:5px; opacity:0.8;}
.icon:hover {opacity:1.0;}

.container {width: 100%; margin-right: auto; margin-left: auto;}
.innerwrap {width: 70%; margin-right: auto; margin-left: auto;}
.innerwrap p { font-size:1.8rem; line-height:1.5;}
.gallery_container {width: 80%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}


/* ALIGNMENT */
.text-center {
  text-align: center !important;
}

/* Top nav */
.top-nav {
  background-color: none; /*rgba(98, 113, 127, 0);  transparent */
  position: fixed; /* Make it sticky */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 1em 0px;
  font-size: 1.6rem;
  transition: background-color 0.4s ease; /* Smooth transition */
}

/* Add this class when scrolling down */
.top-nav.scrolled {
  background-color: rgba(52,53,53, 0.3); /* Fully opaque blue */
    border-bottom: solid 2px rgba(200,200,200,0.3);
}


.logo_head { margin-top:80px; margin-left:20px; width:80%; max-width:300px; height:auto; position:relative; z-index:999; }
.author_head {font-size:3rem; margin-left:20px;}

@media (max-width: 1000px) {
.logo_head { margin-top:70px; margin-left:20px; width:70%; max-width:240px; height:auto; position:relative; z-index:999; }
}

@media (max-width: 800px) {
.logo_head { margin-top:70px; margin-left:20px; width:80%; max-width:240px; height:auto; position:relative; z-index:999; }
.author_head {font-size:2rem;}
}

@media (max-width: 600px) {
.logo_head { margin-top:70px; margin-left:20px; width:80%; max-width:180px; height:auto; position:relative; z-index:999; }
}
  
.header_wrap, {top: 0; width: 100%; padding: 3px 0px 0; margin-left: auto; margin-right: auto; background-color: rgba(3, 32, 98, 0.5);  color: #f2c79d; border-bottom: solid 1px #a57f59; z-index: 100; }


/* ZZZ */
.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: -20px 50px 0 0!important;
  padding: 0;
  position: relative; 
  z-index: 1;
}

.menu > li {
  display: flex;
  justify-content: center;
  margin: 0 5px;
  padding: 5px 15px 10px;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid #d3c57e;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.menu > li:not(:last-child) {
  border-bottom: 2px solid #d3c57e;
}


.menu > li a {
  color: #f2c79d;
}

.menu > li a:hover {
  color: #fff;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before,
.menu-button::after {
  content: "";
  margin-top: -8px;
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: -18px;
  transform: rotate(-405deg);
}

/* Dropdown Styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 2;
  min-width: 220px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 2;
  list-style-type: none;
  border-radius: 5px;
  background-color: rgba(61, 84, 91, 0.9);
  margin-top: 40px;
  margin-left: -50px;
}

.dropdown-content li {
  padding: 8px;
  font-size: 1.5rem;
  background-color: rgba(0, 0, 0, 0.7);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  text-decoration: none;
  color: #333;
  display: block;
}

.dropdown-content a:hover {
  color: #3b82f6;
}

@media (max-width: 840px) {
  .menu-button-container {
    display: flex;
  }

  .menu {
    position: absolute;
    top: 120px;
    margin-top: 80px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0s linear 400ms;
  }

  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: auto;
    padding: 0.5em;
    visibility: visible;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0s;
  }
  
 .dropdown-content { margin-top: 30px;}
}


/* HERO */
.hero_pic {width:100%; height:auto; padding-bottom:12px;
    background-size:100% 100%;
    background-repeat:no-repeat;
	z-index: -100; }
	
.hero_div_medium, .hero_div_small {display:none;}	

@media (max-width: 900px) {
.hero_div_large, .hero_div_small {display:none;}	
.hero_div_medium {display:inline;}	
}
  
  @media (max-width: 495px) {
.hero_div_large, .hero_div_medium {display:none;}	
.hero_div_small {display:inline;}	
  }

/* VIDEO MODAL */
  /* Styles for the modal overlay */.modal-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 999;  }  /* Styles for the modal container */.modal-container {display: none; /* Hide the modal container by default */position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: none;padding: 0px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);width: 75%;max-width: 80%; /* Make the modal responsive */max-height: 90%;height: auto; /* Make the modal responsive */box-sizing: border-box;  }  /* Styles for the close button */.modal-close {/* No changes here */  }  /* Style the video container with 16:9 aspect ratio */.modal-video-container {position: relative;padding-bottom: 56.15%; /* 16:9 aspect ratio. Was 56.25% */  }  /* Style the video */.modal-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: solid 1px orange;  }   .my-modal-close  {font-size: 3.4rem;font-weight: 400;color: orange;padding-top: 0px;margin-top: -44px;top: 20px;margin-bottom: 30px;z-index: 900;position: relative;text-align: right;margin-right: 0px;  }
  
  @media (max-width: 700px) {
.modal-container {display: none; /* Hide the modal container by default */position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #222;padding: 0px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);max-width: 95%;width: 100%; }
}