/* bootstrap 5 grid system: 
    xs < 576    
    sm >= 576    
    md >= 768    
    lg >= 992    
    xl >= 1200   
    xxl >= 1400 */

/*--------------------------------------------------------
CSS overview: 
  01. REBOOT
	01. CUSTOM OBJECTS
  02. GLOBAL
  03. OVERRIDE DEFAULT OBJECTS
	04. TOP HEADER
	05. FOOTER MENU
  06. BREADCRUMBS
  07. ABOUT PAGE
  08. ABOUT-US PAGE
  09. CONTACT-US PAGE
  10. NEWS PAGE
  11. RESPONSIVE DESIGN
--------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');   

/*--------------------------------------------------------
			REBOOT 
--------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; font:inherit; }
html { color-scheme: dark light; }
body { min-height: 100vh; }
img, picture, svg, video { display: block; max-width: 100%; }

/*--------------------------------------------------------
			CUSTOM OBJECTS 
--------------------------------------------------------*/
:root {
    /* colors */
    --clr-light-100:  rgb(255,255,255);
    --clr-light-200:  rgb(220,220,220);
    --clr-light-300:  rgb(180,180,180);
    --clr-medium-400: rgb(160,160,160);
    --clr-medium-500: rgb(120,120,120);
    --clr-medium-600: rgb(100,100,100);
    --clr-dark-700:   rgb(80,80,80);
    --clr-dark-800:   rgb(45,50,65);
    --clr-dark-900:   rgb(36,40,49);
    --clr-heading:    #242831;
    --clr-icon:       #00B6FD;
    --clr-warning:    #B21E27;

    /* font families */
    --ff-h1: 'Open Sans', sans-serif;
    --ff-h2: 'Open Sans', sans-serif;
    --ff-h3: 'Open Sans', sans-serif;
    --ff-h4: 'Open Sans', sans-serif;
    --ff-h5: 'Open Sans', sans-serif;
    --ff-h6: 'Open Sans', sans-serif;
    --ff-p1: 'Roboto', sans-serif;
}

/*--------------------------------------------------------
			GLOBAL STUFF: add to customize special elements 
--------------------------------------------------------*/
/* font sizes */ 
.fs-xs { font-size: 0.8rem; }
.fs-sm { font-size: 0.9rem; }
.fs-md { font-size: 1.0rem; }
.fs-lg { font-size: 1.3rem; }

/* font colors */
.fc-light   { color: var(--clr-light-100); }
.fc-light2  { color: var(--clr-light-200); }
.fc-light3  { color: var(--clr-light-300); }
.fc-medium  { color: var(--clr-medium-600); }
.fc-dark    { color: var(--clr-dark-900); }

/* font weight */
.fw-light   { font-weight: 300;}
.fw-normal  { font-weight: 400;}
.fw-bold    { font-weight: 700;}

/* font families */
.ff-p { font-family: var(--ff-p1); }
.ff-h { font-family: var(--ff-h1); }

/* background colors */
.bc-dark { background-color: #2D333F;}
.bc-dark2 { background-color: #242831;}

/* borders */
.border-a1 { border: 1px solid #ccc;}
.border-a2 { border: 1px solid #aaa;}
.border-a3 { border: 1px solid #999;}
.border-a4 { border: 1px solid #555;}
.border-a5 { border: 1px solid #444;}

/* spacers */
.spacer-25 { height: 25px; }
.spacer-50 { height: 50px; }

/* dividers */
.divider-1 { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; }
.divider-2 { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; padding-top: 15px;}

/* remove text decoration on base links */
.nolinks { color: #B21E27; text-decoration: none !important;}
.nolinks:hover { color:#B21E27; }

/* height */
.min-height-50 { min-height: 50px; }
.min-height-100 { min-height: 100px; }
.min-height-150 { min-height: 150px; }
.min-height-200 { min-height: 200px; }

/* A blurred white shadow, shifted 1px right and 1px down */
.shadowed-text-1 { text-shadow: 1px 1px 3px #252525; }
.shadowed-text-2 { text-shadow: 1px 1px 5px #777777; }

/*--------------------------------------------------------
			OVERRIDE DEFAULT OBJECTS 
--------------------------------------------------------*/
body { font-family: var(--ff-p1); padding-top: 150px; background-color: #1C2128; }
h1, h2, h3, h4, h5, h6 { font-family:var(--ff-h1); color: var(--clr-heading); }
h5.card-title { font-family: var(--ff-h1); }
h5.card-text { font-family: var(--ff-p1); }
p { font-family: var(--ff-p1); font-weight: 300;}
b { font-weight: 700; }
em { font-style: italic; }
strong { font-weight: 700; }

/*--------------------------------------------------------
			TOP HEADER 
--------------------------------------------------------*/
/* search input */
.form-control-xs { height: calc(1.3em + .25rem + 2px); padding: .25rem .25rem; font-size: .775rem; line-height: 1.4; border: 1px solid #444; background-color: #242831; }

/* search button */
.form-btn-control-sm { 
    height: calc(1.3em + .25rem + 2px);
    padding-top: .1em;
    padding-left: .5em;
    padding-right: .5em;
    font-size: .875rem;
    line-height: 1.4;
    /* color: #f1f1f1; */
    border-radius: 0;
}

/* google search box, could be others */
input::placeholder { color: #a5a5a5 !important; opacity: 1; }

/* logo and brand */
#brand { padding-left: 50px; color: var(--clr-light-100);  font-size: 1.0rem; }
#logo { height:50px; width:50px; margin-right: 5px; }
.brand { font-family: 'Open Sans', sans-serif; }

/* hamburger button for responsive site */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus { color: #aaa; outline:none; box-shadow:none; }

/* nav links that work with a text shadow for bold effect */
nav .navbar-nav li { display: inline-block; margin-right: 10px; font-size: 0.7em; }
nav .navbar-nav li a { color: #c6c6c6; text-decoration: none; font: 0.9rem 'Roboto Condensed'; letter-spacing: 0.03em; }
nav .navbar-nav li a:hover { text-shadow: 0 0 .01px #ffffff, 0 0 .01px #ffffff, 0 0 .01px #ffffff; }
  
.dropdown-menu {
  white-space: nowrap;
}

/*--------------------------------------------------------
			FOOTER MENU
--------------------------------------------------------*/
#myFooter { background-color: var(--clr-dark-900); color:var(--clr-light-300 ); }
#myFooter .row { margin-bottom: 0px; padding-bottom: 15px; padding-top: 15px; }
#myFooter table { border:none; border-collapse: collapse; width: 100%; }
#myFooter td { border:none; border-collapse: collapse; }
#myFooter .info { text-align: left; border-right:none; }
#myFooter ul { list-style-type: none; padding-left: 0; line-height: 1.3rem; color:var(--clr-light-300); }

/* heading titles */
#myFooter h5 { font-size: 14px; color:var(--clr-light-100); margin-top: 30px; font-family: 'proxima-nova', sans-serif; font-weight: 700; }

/* useful links */
#myFooter a { text-decoration: none; color:var(--clr-light-300); }
#myFooter a:hover, #myFooter a:focus { text-decoration: none; color: var(--clr-light-100); }

/* hours of operation */
#myFooterLI { font-family: var(--ff-t1); font-weight:300; color:var(--clr-light-300); }

/*--------------------------------------------------------
			BOTTOM FOOTER
--------------------------------------------------------*/
#bottomHeader { color:var(--clr-medium-400 ); background-color: #2D333F; }

/*--------------------------------------------------------
			BREADCRUMB 
--------------------------------------------------------*/
#fa-last { color:var(--clr-light-100) !important; }
#fa-house { color:var(--clr-light-100) !important; }
.first {  margin-top: 3px;}
/* .first ol {  } */
.first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
.active-1 { color:var(--clr-light-100) !important; }
.fa, i { color: rgb(0, 183, 255) !important; }
.breadcrumb>li+li:before { content: "" !important; }
.breadcrumb { padding: 0px; font-size: 14px; color: #f1f1f1 !important; letter-spacing: 0px; }
.breadcrumb-item a { text-decoration: none !important; color: #f1f1f1 !important; }
.breadcrumb-item a:focus,
.breadcrumb-item a:active { outline: none !important; box-shadow: none !important; }
.fa-caret-right { padding-left: 7px; font-size: 20px; vertical-align:middle; }
.fa-chevron-right { vertical-align:middle; color: #f1f1f1 !important; }
.breadcrumb-item+.breadcrumb-item::before { padding-right: 0px; float:none;}

/*--------------------------------------------------------
			ABOUT PAGE 
--------------------------------------------------------*/
/* Links on the about page */
.card-body a:link { color:var(--clr-light-100); text-decoration:none;}
.card-body a:visited, a:hover { color:var(--clr-light-100); font-weight: 700; }
.card-body a:active, a:focus { text-decoration:none;}

/*--------------------------------------------------------
			ABOUT US PAGE 
--------------------------------------------------------*/
#building { width: 100%; }

/*--------------------------------------------------------
			BOOTSTRAP CARDS 
--------------------------------------------------------*/
h6.card-title { font-family: var(--ff-h1); font-weight: 400; }
h6.card-text { font-family: var(--ff-p1); }
p.card-text { font-family: var(--ff-p1); color: var(--clr-light-300); }
.card img:hover { opacity: 0.75; }
.card-footer a:link { color:var(--clr-light-300); text-decoration:none; }
.card-footer a:visited { color:var(--clr-light-300); font-weight: 300; }
.card-footer a:hover { color:var(--clr-light-100); font-weight: 300; }
.card-footer a:active, a:focus { text-decoration:none; }

/*--------------------------------------------------------
			VARIOUS CLASSES 
--------------------------------------------------------*/
.warning { color: var(--clr-warning); font-style: italic;}


/*--------------------------------------------------------
			CONTACT US PAGE 
--------------------------------------------------------*/
.form, .contact-success { padding: 5%; background-color: #1C2128; overflow: hidden; border: 1px solid #555555; }
.contact-success { padding: 20px; color: #fff; font-size:11px; }
.form ul { margin: 0; padding: 0; list-style-type: none; }
.form  li { position: relative; }
.form input, .form textarea { width: 85%; margin-bottom: 12px; position: relative; background-color: #3E4753; border: 1px solid #555; color: #d5d5d5; }
.form textarea { width: 96%; height: 85px; }
.form input.submit { width: 110px; background-color: #dcdcdc; border: 1px solid gray; }
.form  li p, .form input.submit { margin-bottom: 0; }
.form input.submit:hover { color: #252525; font-weight: 700; margin-bottom: 0; background-color: #cacaca; }
.form em { color:#aaaaaa; display: inline; font-size: 11px;  font-style: normal; font-weight: bold; }
.form .contact-error { color: #f96e5b; font-size: 11px; font-weight: bold; position: absolute; top: 0; right: 60px; }
.form button.submit { width: 110px; background-color: #dcdcdc; border: 1px solid gray; }
.contact-info { list-style-type: none; padding: 0; margin: 0; }

/*--------------------------------------------------------
			Client Feedback Page 
--------------------------------------------------------*/
/* Overall review container */
.review {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 8px;
  background: #1C2128;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  border: 1px solid #555;
  margin-bottom: 1.75rem;
  margin-top: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Push badge to the far right */
.review-count {
    margin-left: auto;
    background: linear-gradient(135deg, #00B7FF, #00B7FF);
    color: #222;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(253,121,183,0.35);
    white-space: nowrap;
}
.review:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.09); }

/* Avatar Styling */
.review-avatar {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #dedede, #c9c9c9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-icon { width: 65%; height: 65%; fill: #6c6c6c; }

/* Body */
.review-body { flex: 1; }

/* Header row — name + stars */
.review-header { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5rem; margin-bottom: 0.2rem; font-size: 1.0rem; }

/* Customer name */
.review-name { margin: 0; font-size: 1.0rem; font-weight: 600; color: #f1f1f1; white-space: nowrap; }

/* Star rating */
.star-rating { display: flex; align-items: center; gap: 2px; margin-top: 2px; }

/* Filled star */
.star-filled { color: #ffb400; font-size: 1.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* Empty star */
.star-empty { color: #d6d6d6; opacity: 0.65; font-size: 1.2rem; }

/* Session type */
.review-session { font-size: 0.95rem; color: #888; margin-bottom: 0.45rem; font-style: italic; }

/* Message text */
.review-message { font-size: 1rem; color: #aaa; line-height: 1.55; margin-top: 0.25rem; }

/* Review Date */
.review-date { font-size: 1rem; color: #aaa; line-height: 1.55; margin-top: 0.25rem; }

/*--------------------------------------------------------
			RESPONSIVE MODE 
--------------------------------------------------------*/

@media only screen and (max-width: 600px) {
  body { padding-top: 115px; }
  #myFooter { text-align: center; }
  #myFooter .info { text-align: center; color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first { margin-top: 35px; }
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
  #HeroTitle { top:35%;}
  #breadcrumbRow { margin-top: -15px; }
  
  /* Avatar Styling */
  .review-avatar { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #dedede, #c9c9c9); display: flex; align-items: center; justify-content: center; }
  .avatar-icon { width: 45%; height: 45%; fill: #6c6c6c; }

  /* Customer name */
  .review-name { margin: 0; font-size: 0.9rem; font-weight: 600; color: #f1f1f1; white-space: nowrap; }

  /* Star rating */
  .star-rating { display: flex; align-items: center; gap: 2px; margin-top: 2px; }

  /* Filled star */
  .star-filled { color: #ffb400; font-size: 1.0rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

  /* Empty star */
  .star-empty { color: #d6d6d6; opacity: 0.65; font-size: 1.0rem; }

  /* Session type */
  .review-session { font-size: 0.85rem; color: #888; margin-bottom: 0.45rem; font-style: italic; }

  /* Message text */
  .review-message { font-size: 0.85rem; color: #aaa; line-height: 1.55; margin-top: 0.25rem; }

  /* Review Date */
  .review-date { font-size: 0.85rem; color: #aaa; line-height: 1.55; margin-top: 0.25rem; }

}

@media only screen and (min-width: 600px) {
  #myFooter .info { color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  #HeroTitle { top:30%;}
  #breadcrumbRow { margin-top: -30px; }
}

@media only screen and (min-width: 768px) {
  #myFooter .info { color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  #HeroTitle { top:20%;}
  #breadcrumbRow { margin-top: -30px; }
}

@media only screen and (min-width: 993px) {
 #myFooter div.col-12.col-md-4.col-lg-3 { border-right: 1px solid #555; }
  #myFooter .info { color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  #HeroTitle { top:20%;}
  #breadcrumbRow { margin-top: -30px; }
}