:root { --header: "Roboto Condensed", sans-serif; --subheader: "Inter Tight", sans-serif, system-ui; --bodytext: "Inter", sans-serif, system-ui; --primary: #cd4d00; --highlight: #f26722; --dark: #3e3e3e; --mute: #303e49; --sliderHeight: 600px; }
body { color: var(--mute); }
body.subpage { margin-top: 86px; }
body::-webkit-scrollbar-track { background-color: rgb(255, 255, 255); }
body::-webkit-scrollbar { width: 7px; background-color: rgb(255, 255, 255); }
body::-webkit-scrollbar-thumb { background-color: var(--highlight); }
a { color: var(--primary); font-weight: 500; }
hr { margin-top: 20px; margin-bottom: 20px; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(220, 220, 220); }
#modalData iframe { width: 100%; }
button.close {
  color: rgb(255, 255, 255); background: var(--dark); right: 0px; position: absolute; z-index: 99; top: 0px; width: 25px; height: 25px; line-height: 20px; font-size: 1.2em; opacity: 1; text-shadow: none; border-top-right-radius: 0.5rem;
  & span { line-height: 0; display: inline-block; }
  &:hover { background: var(--highlight); }
}
header.Header {
  position: fixed; z-index: 99; top: 0px; background: var(--white);
  & .logo {
  & .navIcon {
  display: none;
  & button {
  background: none; border: 0px;
  & svg { transition: 1s; }
}
}
  & img { max-width: 140px; padding: 5px; }
}
  & .main-navigation {
  & ul {
  & li {
  & a {
  color: var(--text); padding: 30px 10px; font-size: 1.1rem;
  &:hover { background: var(--primary); color: var(--white); }
}
  &.home a {
  font-size: 0px; text-align: center; padding: 33px 10px; margin: 0px;
  &::before { content: ""; display: block; width: 20px; height: 20px; margin: 0px; line-height: 1; background: url("/image/cache/house-door-fill.svg") center center no-repeat; }
  &:hover::before { filter: brightness(0.5) invert(1); }
}
  & ul {
  & li a {
  color: var(--white); padding: 10px 15px;
  &:hover { background: var(--white); color: var(--primary); }
}
}
}
}
}
  &.toFixed {
  background: var(--white); box-shadow: rgba(9, 9, 9, 0.3) 0px 0px 1px;
  & .main-navigation {
  & ul {
  & li {
  & a {
  color: var(--dark);
  &:hover { background: var(--primary); color: var(--white); }
}
  &:hover a { background: var(--primary); color: var(--white); }
  & ul {
  & li a {
  padding: 10px 15px;
  &:hover { background: var(--white); color: var(--primary); }
}
}
}
}
}
  & .navigation {
  & .iconMenu {
  & button { color: var(--white); }
}
}
  & .navIcon button svg { fill: var(--primary); transition: 1s; }
}
}
body.subpage header.Header { background: var(--white); box-shadow: rgba(9, 9, 9, 0.3) 0px 0px 1px; }
.slider-block { position: relative; background: var(--dark); }
.controls {
  position: absolute; top: 30%; z-index: 1;
  & span {
  display: flex; width: 30px; height: 30px; background: var(--primary); margin: 1px 0px; font-size: 0px; align-items: center; justify-content: center; cursor: pointer; border-top-right-radius: 3px; border-bottom-right-radius: 3px;
  &::before { content: ""; font-size: 16px; color: var(--white); font-family: bootstrap-icons !important; }
  &#playControl::before { content: ""; }
  &#playControl.playing::before { content: ""; }
  &#soundControl::before { content: ""; }
  &#soundControl.muted::before { content: ""; }
}
}
.sliderSection {
  z-index: 1; position: relative; top: 0px; width: 100%; left: 0px;
  &.mainSlider { margin-top: 86px; }
  & .slide {
  & .caption {
  & :is(h1, h2, h3, h4) { font-family: Inter, sans-serif, system-ui; }
  & .h1, & h1 {
  font-size: calc(2.5rem + 1.5vw);
  @media (min-width: 1200px) {
  font-size: 4rem;
}
}
  & .h2, & h2 {
  font-size: calc(1.2rem + 0.5vw); font-weight: 600;
  @media (min-width: 1200px) {
  font-size: 3.5rem;
}
}
  & .h3, & h3 {
  font-size: calc(1rem + 0.075vw);
  @media (min-width: 1200px) {
  font-size: 3rem;
}
}
  & p, & div {
  font-size: calc(1rem + 0.05vw);
  @media (min-width: 1200px) {
  font-size: 1.6rem;
}
}
  & .line { width: 250px; height: 3px; background: var(--primary); display: inline-block; }
}
}
}
.subpageHeader-block {
  & .pageHeader {
  background: var(--dark);
  & img { width: 100%; max-height: 560px; object-fit: cover; }
}
}
.breadcrumb { padding: 10px 0px; background: var(--offwhite); font-size: 0.85em; }
.titleBlock {
  padding: 30px 0px;
  &.white { color: var(--white); }
  & span { font-size: 1.3rem; font-family: var(--bodytext); font-weight: 500; margin: 0px 0px 10px; position: relative; display: inline-block; color: var(--primary); }
  & .title { font-size: 2.65em; font-weight: 600; font-family: var(--special); line-height: 1; }
}
.sideNav ul { margin-bottom: 15px; }
.sideNav .highlight span, .sideNav .highlight a { background: var(--primary); color: var(--white); }
#changeparameters_1 { display: none; }
.taoGalleryBox .overlay { background: color-mix(in srgb,var(--mute) 85%,transparent) !important; }
.gallery_paging_links span a, .gallery_next_link_inactive, .gallery_prev_link_inactive { margin: 0px 1px !important; }
.imageGallery {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0px; width: 100%; height: auto;
  & .ligBox { max-width: none; }
  @media (min-width: 0px) and (max-width: 1190px) {
  grid-template-columns: repeat(4, 1fr);
}
  @media (min-width: 0px) and (max-width: 778px) {
  grid-template-columns: repeat(3, 1fr);
}
  @media (min-width: 0px) and (max-width: 479px) {
  grid-template-columns: repeat(2, 1fr);
}
}
.galleryEmbed a {
  display: flex; width: 100%; max-height: 100%; gap: 4%; flex-wrap: wrap;
  & span { width: 45%; margin: 5px; }
  & img { padding: 8px; border: 1px solid rgb(221, 221, 221); height: 100%; width: 100%; max-height: 280px; object-fit: cover; }
}
.introBlocks {
  margin-top: -2em;
  & .introBlock {
  height: 100%;
  & a {
  z-index: 2; display: flex; height: 100%; align-items: center; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; color: var(--dark); padding: 30px 15px; border: 1px solid rgb(245, 245, 245); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 25px 1px; background-color: rgb(255, 255, 255); position: relative;
  &::after { content: ""; display: block; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0px; top: 0px; background: rgb(245, 245, 245); clip-path: polygon(0px 0px, 25% 0px, 45% 100%, 0% 100%); transition: background 0.3s; }
  & span.details {
  position: relative; z-index: 1;
  & span { display: block; margin-bottom: 10px; color: var(--dark); }
}
  & span.icon {
  position: relative; z-index: 1;
  & img { display: block; width: 180px; transition: filter 0.3s; box-shadow: none; }
}
  &:hover {
  border: 1px solid  var(--primary);
  &::after { background: var(--primary); }
  & .icon img { filter: brightness(0) invert(100%); }
}
}
}
  @media (min-width: 0px) and (max-width: 991px) {
  margin-top: 0em;
  & .introBlock { margin-top: 3em; }
}
}
.aboutContent {
  background-repeat: no-repeat; background-size: cover;
  &.lazyloaded { background-image: url("/image/cache/about-bg21.jpg"); }
  & img { border-radius: 50%; width: 75%; height: 75%; object-fit: fill; box-shadow: -7px -7px  var(--primary); }
  & .aboutText {
  padding: 15px;
  & ul {
  padding: 0px; margin: 0px; list-style: none;
  & li {
  margin-bottom: 10px; display: flex;
  &::before { content: url("/image/cache/checkmark.svg"); width: 20px; height: 20px; margin-right: 5px; }
}
}
}
  @media (min-width: 0px) and (max-width: 991px) {
  background-size: auto;
}
}
.serviceIntro { padding: 40px 0px 50px; }
.serviceIntro .lead { font-size: 1rem; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; }
.serviceIntro h2 { font-size: 2rem; font-weight: 700; margin-bottom: 18px; }
.serviceIntro p { max-width: 800px; margin: 0px auto; line-height: 1.65; opacity: 0.9; }
.serviceIntro { padding: 40px 0px 50px; }
.serviceIntro .lead { font-size: 1rem; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; }
.serviceIntro h2 { font-size: 2rem; font-weight: 700; margin-bottom: 18px; }
.serviceIntro p { max-width: 800px; margin: 0px auto; line-height: 1.65; opacity: 0.9; }
.serviceIntro { padding: 40px 0px 50px; }
.serviceIntro .lead { font-size: 1rem; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; }
.serviceIntro h2 { font-size: 2rem; font-weight: 700; margin-bottom: 18px; }
.serviceIntro p { max-width: 800px; margin: 0px auto; line-height: 1.65; opacity: 0.9; }
.serviceBlocks { background: rgb(248, 249, 251); padding-bottom: 40px; }
.serviceBlocks .serviceBlock { position: relative; display: flex; gap: 36px; padding: 60px; margin-bottom: 40px; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 28px; overflow: hidden; align-items: flex-start !important; }
.serviceBlocks .serviceBlock .icon { position: relative; z-index: 2; flex: 0 0 140px; width: 140px; min-width: 140px; align-self: flex-start !important; }
.serviceBlocks .serviceBlock .icon img { display: block; width: 95px; height: auto; max-width: none; }
.serviceBlocks .serviceBlock#nagfa .icon img { width: 105px; }
.serviceBlocks .serviceBlock .serviceContent { position: relative; z-index: 2; flex: 1 1 0%; }
.serviceBlocks .serviceBlock .lead { margin: 0px 0px 12px; line-height: 1.25; }
.serviceBlocks .serviceBlock .lead strong { display: block; font-size: 1.4rem; font-weight: 700; }
.serviceBlocks .serviceBlock .lead span { display: block; margin-top: 4px; font-size: 1.05rem; font-weight: 500; opacity: 0.85; }
.serviceBlocks .serviceBlock p { margin: 0px 0px 16px; line-height: 1.65; }
.serviceBlocks .serviceBlock ul { margin: 10px 0px 18px; padding-left: 22px; }
.serviceBlocks .serviceBlock li { margin-bottom: 14px; line-height: 1.6; }
.serviceBlocks .serviceBlock li strong { display: inline-block; margin-bottom: 3px; }
.serviceBlocks .serviceBlock a.button { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 10px 24px; min-height: 44px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.serviceBlocks .serviceBlock .serviceLinks { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.serviceBlocks .serviceBlock .serviceLinks p { margin: 0px 0px 6px; line-height: 1.5; }
.serviceBlocks .serviceBlock .serviceLinks a { display: inline-block; margin-bottom: 18px; font-weight: 600; font-size: 1.05rem; text-decoration: none; border-bottom: 2px solid transparent; transition: 0.15s; }
.serviceBlocks .serviceBlock .serviceLinks a:hover { border-bottom-color: var(--primary); }
@media (max-width: 991px) {
  .serviceBlocks .serviceBlock { padding: 45px 35px; gap: 26px; }
  .serviceBlocks .serviceBlock::before { width: 40%; height: 60%; }
  .serviceBlocks .serviceBlock .icon { flex: 0 0 120px; width: 120px; min-width: 120px; }
  .serviceBlocks .serviceBlock .icon img { width: 82px; }
}
@media (max-width: 779px) {
  .serviceBlocks .serviceBlock { flex-direction: column; gap: 18px; }
  .serviceBlocks .serviceBlock::before { width: 100%; height: 150px; clip-path: polygon(0px 0px, 100% 0px, 0px 70%); }
  .serviceBlocks .serviceBlock .icon { width: auto; min-width: 0px; }
  .serviceBlocks .serviceBlock .icon img { width: 75px; }
}

.section-bridge { color: rgb(85, 85, 85); margin-top: 80px; margin-bottom: 45px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; font-size: 0.95rem; }

.countersBlock {
  background-size: cover; color: var(--white); padding: 15px; background-color: var(--dark); background-repeat: no-repeat;
  & .Counter { font-size: 4em; font-weight: bold; display: block; line-height: normal; }
}

#clientsBlock { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#clientsBlock hr { margin: 0 0 .75rem 0; }

#clientsBlock .clientsLabel{
  margin: 0 0 .75rem 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dark);
  opacity: .85;
}

#clientsBlock .clientSlider{ margin-top: 0; }

/* ===== Clients / Trust Logos ===== */
#clientsBlock { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#clientsBlock hr { margin: 0 0 .75rem 0; }

#clientsBlock .clientsLabel{
  margin: 0 0 .75rem 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dark);
  opacity: .85;
}

/* Normalize logo sizing so large/tall logos don't break the row */
#clientsBlock .clientBlock{ padding: .5rem 0; }

#clientsBlock .clientLogo{
  height: 80px;                 /* controls the row height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;             /* prevents visual spill */
}

#clientsBlock .clientLogo img{
  max-height: 80px;             /* match container height */
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;          /* keep proportions */
  display: block;
}

/* Slightly taller on small screens */
@media (max-width: 768px){
  #clientsBlock .clientLogo{ height: 64px; }
  #clientsBlock .clientLogo img{ max-height: 64px; }
}

.testimonialsBlock {
  background: var(--white); border: 1px solid rgb(248, 247, 253); position: relative;
  &::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
  & .testimonial { position: relative; z-index: 1; padding: 35px; }
  & .icon { display: block; margin: 0px auto 10px; width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: transparent; transition: 0.5s; text-align: center; }
  & .cName {
  display: block; text-align: center; font-weight: 500;
  & b { display: block; color: var(--primary); }
}
  & p { text-align: center; }
  &:hover {
  & .icon {
  background: var(--primary); color: var(--white); transition: 0.5s;
  & span { color: var(--white); transition: 0.5s; }
}
}
  & .testimonialSlider {
  & .tao-dots {
  display: flex; justify-content: center;
  & .tao-dot {
  background: var(--gray); margin: 15px 5px; height: 5px; width: 25px;
  & span { font-size: 0px; }
  &.active { background: var(--primary); }
}
}
  @media (min-width: 0px) and (max-width: 779px) {
  background: none;
}
}
}
.clientSlider.sliderSection {
  height: auto;
  @media (min-width: 0px) and (max-width: 779px) {
  background: none;
}
}
.clientBlock {
  padding: 30px;
  & img {
  opacity: 0.7; filter: grayscale(1); transition: 0.3s; max-width: 200px;
  &:hover { opacity: 1; filter: none; transition: 0.3s; }
}
}
footer#footer {
  background: var(--dark);
  & .col-12.order-md-0 { border-left: 1px solid var(--primary); }
  & .col-12.order-md-1 { border-left: 1px solid var(--primary); }
  & iframe { min-height: 480px; filter: grayscale(1) invert(0.89) brightness(1.5); }
  & .footerDetails { padding-left: 45px; }
  & .address {
  padding-top: 45px; line-height: normal;
  & img { max-width: 125px; filter: brightness(0) invert(1); }
  & p {
  font-size: 0.95em; font-weight: 300; line-height: 1.5; display: flex;
  & svg { width: 28px; height: 28px; margin-left: -28px; }
  & a { font-weight: 300; }
}
}
  & .footerNav {
  padding-top: 45px;
  & ul {
  margin: 0px; padding: 0px; flex-wrap: nowrap; list-style: none;
  & li {
  display: block;
  flex: 0 0 auto;
  min-width: 33%;
  
  
  
  
  & a { color: var(--white); display: inline-block; font-size: 1em; padding-bottom: 8px; }
  & ul { display: block; }
  & ul li { padding: 1px 15px; width: auto; }
  & ul li a { font-size: 1em; font-weight: 400; padding: 5px 0px; }
}
  & a:hover { color: var(--highlight); }
}
  @media (min-width: 0px) and (max-width: 779px) {
  & ul {
  flex-direction: column;
  & li { width: 100%; }
}
}
}
  & .copyright {
  background-color: color-mix(in srgb, var(--gray) 3%, transparent); color: var(--white); font-size: 0.8rem; margin-top: 30px; padding: 10px 0px; text-align: left;
  & .subfooter-nav {
  & ul { margin: 0px; padding: 0px; }
  & ul li {
  display: inline-block !important; vertical-align: middle;
  & a {
  color: var(--white); padding: 0px 10px 0px 0px !important;
  &:hover { background: none !important; }
}
}
}
  & span { display: block; text-align: right; }
  @media (min-width: 0px) and (max-width: 779px) {
  & .subfooter-nav { justify-content: center; }
  & span { text-align: center; }
}
}
}
#social { background: transparent; padding: 0px; }
@media (min-width: 0px) and (max-width: 991px) {
  footer#footer iframe { min-height: 300px; }
}
@media (min-width: 0px) and (max-width: 779px) {
  .sliderSection { position: relative; height: auto; background: var(--dark); }
  .sliderSection {
  & .slide { }
}
}
@media (min-width: 0px) and (max-width: 779px) {
  footer#footer .col-12.order-md-0 { border-right: 0px; border-left: 0px; border-image: initial; border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary); }
  footer#footer .col-12.order-md-1 { border-top: 0px; border-right: 0px; border-left: 0px; border-image: initial; border-bottom: 2px solid var(--primary); }
}
@media (min-width: 0px) and (max-width: 579px) {
  .sliderSection { }
}
@media (min-width: 0px) and (max-width: 479px) {
  .sliderSection { }
}