body{overflow-x: hidden;}
.border-L{border-left: solid 2px #505050;}
/* ===== Base ===== */
:root{
  --dark: #333333;        
  --muted: #6b6b6b;      
  --light: #f5f7fa;      
  --border: #e9e9e9;      
  --accent: #00a1f1;      
  --hero-overlay: rgba(0,0,0,.5);
  --nav-fixed-bg: rgba(40,40,40,.92);
  
}

/* === Webfont: Afacad Flux with swap + metric overrides (fix Lighthouse warning) === */
@font-face{
  font-family: "Afacad Flux";
  src: url("/fonts/afacad-flux.woff2") format("woff2"); 
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;

  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;

 
  unicode-range: U+000-5FF;
}

*{ box-sizing: border-box; }
a{ text-decoration: none; }

/* ===== NAVBAR (separate) ===== */
#siteNav{
  background:#ffffff;                
  border-bottom:1px solid var(--border);
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.brand-logo{ height:100px; width:auto; }
nav ul li {font-size: 1.1em;}
nav ul li strong{color: #00a1f1;}

/* ===== NAVBAR (fixed on scroll) ===== */
#siteNav.nav-fixed{
  position:fixed; top:0; left:0; right:0;
  background: var(--nav-fixed-bg);                     
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.12);
}
#siteNav.nav-fixed .nav-link{ color: var(--light); }     
#siteNav.nav-fixed .dropdown-content{
  background:#2a2a2a; border-color:#2a2a2a;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
#siteNav.nav-fixed .dropdown-content a{
  color:#f0f0f0;
}
#siteNav.nav-fixed .dropdown-content a:hover{
  background:#383838;
}

/* ===== HERO ===== */
.hero{
  background-size:cover;
  height: 80vh;
  background-position:center bottom;
  padding:200px 160px;
  /* border-bottom:5px solid #efffdd; */
  
}
.hero p span {letter-spacing: 3px;}
.hero-overlay{
  background: var(--hero-overlay);
  width:100%; height:100%;
  padding:160px 160px;

}

h1{ color:#fff;letter-spacing:.3px; font-family: "Afacad Flux", sans-serif; font-size:3.5em;}
.accent{ color: var(--accent); }

/* ===== Responsive ===== */
@media (max-width: 991px){
  .navbar-nav{ text-align:right; }
  .dropdown-content{ right:0; left:auto; }
   .consult { display: none !important; }
}
@media (max-width: 700px) { .consult{display: none;} }

.head-text a{text-decoration: none; color: #ffffff;}
.head-text a:hover{color: #2a2a2a;}
.demo {
	text-align: start;
	margin-top:0px;
}
.demo1{text-align: center;}
.mt {
  margin-top: 20px;
}
.large {
  width: 280px;
}
.diagonal {
  position: relative;
  line-height: 50px;
  background: #0a70b0;
  color: white;
  border: none;
  font-size: 1.7em;
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  z-index: 1;
  padding: 0px;
}
.diagonal:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 1000%;
  background:  #00a1f1;
  z-index: -1;
  transform-origin: 0% 0%;
  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
  transform: translateY(10%) translateX(16%) rotate(-45deg);
  transition: transform .3s;
}
.diagonal:hover::after {
  transform: translateY(10%) translateX(-25px) rotate(-45deg);
}
.diagonal2 {
  position: relative;
  line-height: 50px;
  background: #0a70b0;
  color: white;
  border: none;
  font-size: 1.7em;
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  z-index: 1;
  padding: 0px;
}
.diagonal2:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 1000%;
  background:  #fb9516;
  z-index: -1;
  transform-origin: 0% 0%;
  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
  transform: translateY(10%) translateX(16%) rotate(-45deg);
  transition: transform .3s;
}
.diagonal2:hover::after {
  transform: translateY(10%) translateX(-25px) rotate(-45deg);
}

input.new-diagonal {
  position: relative;
  line-height: 50px;
  background: #0a70b0;
  color: white;
  border: none;
  margin-top: 20px;
  border-radius: 10px;
  font-size: 1.7em;
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  z-index: 1;
  padding: 0px;
  transition: 1S;
}
input.new-diagonal:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 1000%;
  background:  #00a1f1;
  z-index: -1;
  transform-origin: 0% 0%;
  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
  transform: translateY(10%) translateX(16%) rotate(-45deg);
  transition: transform .3s;
}
input.new-diagonal:hover {
  background-color: #00a1f1; transition: 1S;
}
.section1 a{color: white;}
.section1 i{color: #9cc05c;}
.med {width: 210px;}
.sml{width: 100%; font-size:1.1em ;}
 


/* section2 */
.section2{background-color: #eeeeee;padding-bottom: 100px;}



/* section3 */
.section3{background-color: transparent; height: 50vh; }
.section3 h3 span {color:#ffc87c ;}
.sec3-inside{margin-top: -100px;height: 20vh;}
.section-services .single-service {
    position: relative;
    margin-top: 30px;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 30px;
    padding: 40px 30px;
    overflow: hidden;
}

.section-services .single-service .content {
	position: relative;
	z-index: 20;
}

.section-services .single-service .circle-before {
    position: absolute;
    top: 0;
    right: 0px;
    transform: translate(40%, -40%);
    width: 150px;
    height: 150px;
    background-color: #00a1f1;
    border: 6px solid #ff9600;
    border-radius: 50%;
    opacity: 0.5;
    z-index: 10;
    transition: all .6s;
}

.section-services .single-service:hover .circle-before {
	width: 100%;
	height: 100%;
	transform: none;
	border: 0;
	border-radius: 0;
	opacity: 1;
}

.section-services .single-service .icon {
	display: inline-block;
	margin-bottom: 26px;
    width: 70px;
    height: 70px;
    background-color: #0a70b0;
    border-radius: 5px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    transition: all .3s;
}

.section-services .single-service:hover .icon {
	background-color: #fff;
	color: #0a70b0;
}

.section-services .single-service .title {
    margin-bottom: 18px;
	font-weight: 700;
    font-size: 23px;
    transition: color .3s;
}

.section-services .single-service:hover .title {
	color: #fff;
}

.section-services .single-service .description {
    margin-bottom: 20px;
    font-size: 14px;
    transition: color .3s;
}

.section-services .single-service:hover .description {
	color: #fff;
}

.section-services .single-service a {
	position: relative;
	font-size: 18px;
    color: #202020;
    text-decoration: none;
    font-weight: 500;
    transition: color .3s;
}

.section-services .single-service:hover a {
	color: #fff;
}

.section-services .single-service a:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #00a1f1;
	transition: background-color .3s;
}

.section-services .single-service:hover a:after {
	background-color: #fff;
}

/* section4 */
.section4{background-color: #eeeeee;}
/* section6 */
.section6{background-color: #eeeeee;}
/* Form */
.form{background-size: cover; background-position: center; background-attachment: fixed;}
form .form-control{margin-top: 20px;padding-top: 10px; padding-bottom: 10px;color: #7bb2ce;padding-left: 30px; border-bottom: #00a1f1 2px solid;background-color: rgba(255, 255, 255, 1 );}
.form-control::placeholder{color: #7bb2ce}
form.CUS input.subject { display: none; }




/* new form */



/* Gallery */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 
.gallery {
    --anim-time--hi: 266ms;
    --anim-time--med: 400ms;
    --anim-time--lo: 600ms;

    display: flex;
    place-content: center;
    max-width: clamp(30rem, 95%, 50rem);
    width: max(22.5rem, 100%);
    min-height: 70vh;
    margin-inline: auto;
    padding: clamp(0px, (30rem  - 100vw) * 9999, 1rem);
   
}

.gallery__content--flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.gallery__content--flow > *  {
    flex-grow: 1;
    flex-basis: calc((30rem - 100% - 1rem) * 999);
}

figure {
    display: flex;
    min-width: 14rem;
    max-height: 16rem;
    position: relative;
    border-radius: .35rem;
    box-shadow:
    rgb(40, 40, 40, 0.1) 0px 2px 3px,
    rgb(20, 20, 20, 0.2) 0px 5px 8px,
    rgb(0, 0, 0, 0.25) 0px 10px 12px;
    overflow: hidden;
    transition: transform var(--anim-time--med) ease;
    background-color: #0a70b0;
}

figure::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        hsla(0, 0%, 0%, 0.8) 0%,
        hsla(0, 0%, 0%, 0.7) 12%,
        hsla(0, 0%, 0%, 0.2) 41.6%,
        hsla(0, 0%, 0%, 0.125) 50%,
        hsla(0, 0%, 0%, 0.01) 59.9%,
        hsla(0, 0%, 0%, 0) 100%
    );
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--anim-time--med), var(--anim-time--med);
    transition-timing-function: ease, ease;
      z-index: 4;
}

.header__caption {
    z-index: 10;
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    align-self: flex-end;
    width: 100%;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: center;
    text-align: center;
    transform: translateY(100%);
    transition: transform var(--anim-time--hi) linear,
    opacity var(--anim-time--hi) linear;
}

figure:hover::before {
    opacity: 0.8;
}

figure:hover{border-bottom: 5px solid #00a1f1;}
figure:hover .header__caption {
    transform: translateY(0);
    opacity: 1;
}
figure:hover img{
    transform: scale(1);
}
.title {
    color: #fff;
    
}

.title--primary {
    font-size: 1.25rem;
    font-weight: bold;
}

.title--secondary {
    text-transform:uppercase;
    font-weight: bold;
}

/* img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 100%;
  transform: scale(1.15);
    aspect-ratio: 16 / 13;
    transition: 400ms ease-in-out;
} */



/* section8 */
.section8{background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}
/* footer */
footer{background-color: #333333; border-top: 3px solid #00a1f1;background-position: center; background-repeat: no-repeat;  background-size: cover;}
footer p{color: white;}
footer h3{color: #00a1f1;}
footer a{color: white;}
footer a:hover{color: #00a1f1;}
footer i{color: #00a1f1; font-size: x-large;}
footer button a:hover{color: #292929;}
.copyright{border-top: 1px solid #2985b3;}



/* locations */
.custom-section {
  
  width: 80%;
  display: grid;
  place-items: center;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width:100%;
  padding: 0 1em 1em 1em;
  text-align: center;
}
.card {
  width: 100%;
  height: 100%;
  padding: .5em 1.5em;
  background: linear-gradient(#ffffff 50%, #0a70b0 50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
}
h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f194c;
  margin: 1em 0;
}
p {
  color: #575a7b;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.icon-wrapper {
  background-color: #0a70b0;
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
.card:hover {
  background-position: 0 100%;
}
.card:hover .icon-wrapper {
  background-color: #ffffff;
  color: #0a70b0;
}
.card:hover h3 {
  color: #ffffff;
}
.card:hover p {
  color: #f0f0f0;
}
@media screen and (min-width: 768px) {
  section {
    padding: 0 2em;
  }
  .column {
    flex: 0 50%;
    max-width: 50%;
  }
}
@media screen and (min-width: 992px) {
  section {
    padding: 1em 3em;
  }
  .column {
    flex: 0 0 33.33%;
    max-width: 25%;
  }
}



@media (max-width: 1200px){
  .footer-col{width: 50%;}
}

@media (max-width: 1100px){
  h1{font-size:3em;}
}
@media (max-width: 992px){
  .head-text{position: absolute; left: 25%; top: 30%;width: 50%;}
 .section1 .sec1-text{padding-left:7%;}
 .section4{margin-top: 370px;}
 form .form-control{padding-left: 30px;}
 .reset, .send{width: 100%;}
}
@media (max-width: 770px){
 .section1{padding-top: 170px;}
 .border-L{border-left: none; padding-top: 20px;}
 .float{width: 80%; right: 10%;}
 h1{font-size:2.5em;}
.hero-overlay{width:100%;}
.section4{margin-top: 800px;}
.section4 h2 {margin-top: 30px;}
.custom-form{width: 100%;}
.footer-col{width: 90%;}
#siteNav{padding-left: 0;}
}
@media (max-width: 535px){
  .hero p span {letter-spacing: 0px;}
  .head-text{width:70%;left: 15%;}
  .section1{padding-top: 200px; text-align: center;}
 .float{right: 10%;top: -20px;}
 .two:before{display: none;}
 .section1:hover h2{letter-spacing:5px}
  h1{font-size:2em;}
}