@font-face { font-family: "Urbanist Medium"; src: url("../fonts/Urbanist-Medium.ttf") format("truetype");  font-weight: 500;  font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/Urbanist-Regular.ttf") format("truetype");  font-weight: 400;  font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/Urbanist-Bold.ttf") format("truetype");  font-weight: 700;  }
:root {
    --font-urbanist-medium: "Urbanist Medium";
    --font-urbanist-regular: "Urbanist";
    --font-urbanist-bold: "Urbanist";
}

/* Video background layer */
.center-item {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* VIDEO AS BACKGROUND */
.video-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 🔑 fills screen properly */
  z-index: -1;
}

/* CONTENT ON TOP */
.video-text,
.banner-social {
  position: relative;
  z-index: 2;
}

/* Optional dark overlay for readability */
.center-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}




#navigation {  background-color: rgba(255, 255, 255, 0.9);  }
.dark #navigation.fixed { background-color: rgba(255, 255, 255, 0.9);  }
#navigation #toggle-slide { top:18px; color: #030504; }
#toggle-slide:hover::before,
#toggle-slide:hover::after,
#toggle-slide:hover i {
   background: #00aea4;
}
.navbar-toggle .icon-bar { background-color: #030504 !important; }
.navbar-toggle { margin: 35px 0 16px 20px; }
#navigation #toggle-slide.open { right: 20px;}
.dark #navigation.fixed #toggle-slide::before, .dark #navigation.fixed #toggle-slide::after, .dark #navigation.fixed #toggle-slide i {background: #030504; }
.navbar-default.sidebar-nav .navbar-nav li { margin: 1rem 0 0 0;}
#toggle-slide::before, #toggle-slide::after, #toggle-slide i {  background-color: #030504;  }
.lighttransparent .navbar-default .navbar-nav > li > a, .lightheader .navbar-default .navbar-nav > li > a, #navigation.fixed .navbar-default .navbar-nav > li > a, #navigation.boxednav .navbar-default .navbar-nav > li > a { color: #030504; }
.navbar-default .navbar-nav > li > a { font-family: var(--font-urbanist-medium); font-size: 14px; font-weight: 500; color: #030504;}
.navbar-default .navbar-nav > li > a::before { height: 2px;  background: #00aea4;}
.navbar-default .navbar-nav > li > a:hover { color: #00aea4; }
.dark #navigation.fixed .navbar-default .navbar-nav > li > a { color: #030504; }
.dark #navigation.fixed .navbar-default .navbar-nav > li > a:hover { color: #00aea4; }
.dark #navigation.fixed .navbar-default .navbar-nav > li > a::before { height: 2px;  background: #00aea4;}
.navbar-default.sidebar-nav .navbar-nav li a::before,
#navigation.fixed .navbar-default.sidebar-nav .navbar-nav li a::before{
   background: #00aea4;
   bottom: 0;
}

.navbar-default .navbar-nav > li > a.active {color: #00aea4;}
#navigation.fixed .navbar-default .navbar-nav > li > a.active {color: #00aea4;}
.navbar-default.sidebar-nav .navbar-nav li a:hover,
.navbar-default.sidebar-nav .navbar-nav li a:focus,
.navbar-default.sidebar-nav .navbar-nav li.active > a,
.navbar-default.sidebar-nav .navbar-nav li.active > a:hover, 
.navbar-default.sidebar-nav .navbar-nav li.active > a:focus,
#navigation.fixed .navbar-default.sidebar-nav .navbar-nav li a:hover,
#navigation.fixed .navbar-default.sidebar-nav .navbar-nav li a:focus,
#navigation.fixed .navbar-default.sidebar-nav .navbar-nav li.active > a,
#navigation.fixed .navbar-default.sidebar-nav .navbar-nav li.active > a:hover,
#navigation.fixed .navbar-default.sidebar-nav .navbar-nav li.active > a:focus{
   color: #00aea4;
}
.lightheader .navbar-default .navbar-nav > li > a:hover,
.lightheader .navbar-default .navbar-nav > li > a:focus,
.lightheader .navbar-default .navbar-nav > li.active > a,
.lightheader .navbar-default .navbar-nav > li.active > a:hover,
.lightheader .navbar-default .navbar-nav > li.active > a:focus,
.lightheader .navbar-default .navbar-nav > .open > a, 
.lightheader .navbar-default .navbar-nav > .open > a:focus, 
.lightheader .navbar-default .navbar-nav > .open > a:hover,
.lighttransparent .navbar-default .navbar-nav > li > a:hover,
.lighttransparent .navbar-default .navbar-nav > li > a:focus,
.lighttransparent .navbar-default .navbar-nav > li.active > a,
.lighttransparent .navbar-default .navbar-nav > li.active > a:hover,
.lighttransparent .navbar-default .navbar-nav > li.active > a:focus,
.lighttransparent .navbar-default .navbar-nav > .open > a, 
.lighttransparent .navbar-default .navbar-nav > .open > a:focus, 
.lighttransparent .navbar-default .navbar-nav > .open > a:hover {
	color:#00aea4;
}
.lighttransparent .navbar-default .navbar-nav > li > a::before, .lightheader .navbar-default .navbar-nav > li > a::before, #navigation.fixed .navbar-default .navbar-nav > li > a::before {
    background: #00aea4;
}
.video-text {
    position: relative;
    z-index: 2;
    margin: 0 20px;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
    top: 380px;
}
.letter-spacing-30{
    letter-spacing: -0.03em;
}
.letter-spacing-20{
    letter-spacing: -0.02em;
}
.black-color { color: #030504;}
.site-color { color: #00aea4; }

h1 { font-family: var(--font-urbanist-regular); font-size: 70px; font-weight: 700; }
h2 { font-family: var(--font-urbanist-regular); font-size: 40px; }
h3 { font-family: var(--font-urbanist-regular); font-size: 30px !important; }
h6 { font-family: var(--font-urbanist-regular); font-size: 24px !important; }
.bold-text { font-family: var(--font-urbanist-bold); font-weight: 700; }
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.2;
}
.slider-parallax-video{ height:770px !important; }
.bgwhite { background-color: #FFFFFF;}
.bgblack { background-color: #030504;}
.bgsite { background-color: #162b21;}
.bggreen { background-color: #162b21; }
.thecube .cube:before { background-color: #00aea4; }
.float-right { float: right;}
ul.social.white li a:hover, 
ul.social.white li a:focus{
    background-color:transparent;
    border: 0px solid #fff;
    color: #00aea4;
}
ul.social.white li a { border: 0px solid;}
ul.footer-link li a {
    color: #FFFFFF;
    font-family: var(--font-urbanist-regular);   
    height: 24px;
    width: 24px;
    font-size: 14px;
    margin: 10px 0px;
}
ul.footer-link li a:hover {
    font-family: var(--font-urbanist-regular);   
    color: #00aea4;
}
ul.social li a{
    display: block; 
    text-align: center;
    color: #030504;
}
ul.footer-link li { font-family: var(--font-urbanist-regular);   }
ul.footer-link li,
ul.footer-link li i,
ul.footer-link li .fa{ 
    color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 10px;
}
ul.social li a:hover, 
ul.social li a:focus{
    background: #00aea4;
    border: 1px solid #00aea4;
    color: #fff;
}
.padding {
    padding: 20rem 10rem;
}
.padding-1 {
    padding: 10rem 5rem;
}
.bgintro-yellow{
   background:
    url("../images/bg_shape_1.png") no-repeat bottom center,
    url("../images/bg_1.jpg") no-repeat top center;
    background-size: contain, cover;
    background-attachment: scroll, fixed;
  min-height: 1800px;
} 

.bgintro-shape{
    background: url("../images/bg_shape_1.png") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 1600px;
} 

.hero {
  position: relative;
  height: 1600px;
  overflow: hidden;
}


/* Background image */
.bg-layer {
  background: url("../images/bg_1b.jpg") no-repeat top center;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Black shape overlay (moves on scroll) */
.shape-layer {
  background: url("../images/bg_shape_1 1.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.2s linear;
}

/* Text content */
.content {
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  color: #fff;
  padding: 0 10%;
}

.content h3 {
  font-family: var(--font-urbanist-regular); 
  font-size: 100px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.content h3 span {
  color: #00aea4;
}

.litoria-hero{
  padding: 64px min(6vw, 80px) 40px;
 
}
.hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  align-items: start;
  gap: min(5vw, 64px);
}

.brand-gif{
    width: 200px; height: 180px; max-width: 100%;
}
.bottom-img { width:200px}
.back-top {  background-color: #00aea4; }
.padding_half_2 { padding: 2.375rem 0;}

.banner-social{
  position: absolute;
  right: 12px;              /* distance from the right edge */
  top: 48%;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--icon-gap);
  z-index: 2;
}
.banner-social .social.white li{
  display: grid;
  place-items: center;
}

.bg-valueadds{
    background:#27503E
}
.box-info p { font-family: var(--font-urbanist-regular);  font-size:25px; margin-left: 0; margin-right: 0;  }
.box-info .whitecolor:hover { color: #FFFFFF;}
.container-fluid {padding-left: 0%; padding-right: 0%;}


.container-padding{ padding: 0 6.625rem; }
.blogpost-text { font-family: var(--font-urbanist-regular); }
.blogpost-text h3 { font-family: var(--font-urbanist-regular); font-size: 25px !important; color: #FFFFFF; }  
a.viewmore { color: #FFF; font-family: var(--font-urbanist-medium); font-size: 16px; font-weight: 500; background-color: #00AEA4; text-decoration: none; padding: 10px;}
a.viewmore:hover { color: #030504; background-color: #FFF; text-decoration: none; }
.viewmore::after { height: 0;}
.metabox-wrapp.simple .metabox { color: #FFFFFF; font-family: var(--font-urbanist-medium); font-size: 16px; }
p { font-family: var(--font-urbanist-regular); }
.navbar-nav > li > .megamenu-content {
	width: 40% !important;
  font-family: var(--font-urbanist-regular);
}
.intro-text p { font-family: var(--font-urbanist-regular); font-size: 25px !important;  }
.intro-text ul,
.intro-text li {
    font-family: var(--font-urbanist-regular);
    font-size: 25px;
}

.intro-text ul {
    list-style-type: disc;      /* adds the dot */
    padding-left: 40px;         /* ensures the dot is visible */
}
.button.default { background-color: #00aea4; font-family: var(--font-urbanist-regular);  font-size: 18px !important;}
.button.default:hover, .button.default:focus{
    background: transparent;
    border:2px solid #00aea4;
    color: #FFFFFF;
}
.panel-default > .panel-heading { color:#FFF; border-top: 1px solid #FFF;}
.accordion .panel-body > p {
    display: block;
    padding: 0.25rem 15px;
    color: #FFF;
}
.accordion .panel-title > a::before {
  font: normal normal normal 20px / 1 FontAwesome;
  content: "\f105";                  /* left/closed */
  display: inline-block;
  transition: transform 200ms ease;
}
#logo-arrow .logo-item, #logo-transparent .logo-item { width: 150px !important; height: 150px;}

/* WHY LITORIA PAGE STYLES */
.why-litoria { position: relative; min-height: 150vh; overflow: hidden; }
.bg-why-litoria-layer { background: url("../images/bg/bg_3_why_litoria.jpg") top center / cover no-repeat fixed; position: absolute; inset: 0; z-index: 0; }
.shape-why-litoria-layer { background: url("../images/bg/bg_shape_2_small.png") center / contain no-repeat; position: absolute; inset: 0; z-index: 1; transition: transform 0.2s linear; transform: translate3d(0, 0, 0); }

/* VALUE ADDS PAGE STYLES */
.value-adds { position: relative; min-height: 150vh; overflow: hidden; }
.bg-value-adds-layer { background: url("../images/bg/bg_2_value_adds_new.jpg") top center / cover no-repeat fixed; position: absolute; inset: 0; z-index: 0; }
.shape-value-adds-layer { background: url("../images/bg/bg_shape_2_small.png") center / contain no-repeat; position: absolute; inset: 0; z-index: 1; transition: transform 0.2s linear; transform: translate3d(0, 0, 0); }

/* SECTOR PAGE STYLES */
.sector-page { position: relative; min-height: 150vh; overflow: hidden; }
.bg-sector-page-layer { background: url("../images/bg/bg_5_clients_sectors.jpg") center center / cover no-repeat fixed; position: absolute; inset: 0; z-index: 0; }
.shape-sector-page-layer { background: url("../images/bg/bg_shape_2_small_green.png") center / contain no-repeat; position: absolute; inset: 0; z-index: 1; transition: transform 0.2s linear; transform: translate3d(0, 0, 0); }

/* CONTACT US PAGE STYLES */
.contact-us { position: relative; min-height: 150vh; overflow: hidden; }
.bg-contact-us-layer { background: url("../images/bg/bg_6_contactus.jpg") center center / cover no-repeat fixed; position: absolute; inset: 0; z-index: 0; }
.shape-contact-us-layer { background: url("../images/bg/bg_shape_2_small.png") center / contain no-repeat; position: absolute; inset: 0; z-index: 1; transition: transform 0.2s linear; transform: translate3d(0, 0, 0); }
.address-bg { max-width: 100%; }

/* NEWS PAGE STYLES */
.news-pg {  position: relative; min-height: 150vh; overflow: hidden; }
.bg-news-layer { background: url("../images/bg/bg_3_news.jpg") top center / cover no-repeat fixed; position: absolute; inset: 0; z-index: 0; }
.shape-news-layer { background: url("../images/bg/bg_shape_2_small.png") center / contain no-repeat; position: absolute; inset: 0; z-index: 1; transition: transform 0.2s linear; transform: translate3d(0, 0, 0); }
#news p, #news ul, #news li { font-family: var(--font-urbanist-regular); font-size: 20px; }
#news ul {  list-style-type: disc;  padding-left: 40px; }
#news .blogpost-text h3 { font-family: var(--font-urbanist-regular); font-size: 35px !important; color: #FFFFFF; }  
#news .subtitle { font-family: var(--font-urbanist-regular); font-size: 25px !important; color: #FFFFFF; }  
#news-page-banner1 {  background: url("../images/p_news_article1_header_img.jpg") center / cover no-repeat fixed; position: relative; }
#news-page-banner2 {  background: url("../images/p_news_article2_header_img.jpg") center / cover no-repeat fixed; position: relative; }

/* BACKGROUND IMAGES FOR SERVICES PAGE */
.service-page-1{ background: url("../images/services/p_services1_bg_img.jpg") center / cover no-repeat; width: 100%; }     
.service-page-2{ background: url("../images/services/p_services2_bg_img.jpg") center / cover no-repeat; width: 100%;  }  
.service-page-3{ background: url("../images/services/p_services3_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-4{ background: url("../images/services/p_services4_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-5{ background: url("../images/services/p_services5_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-6{ background: url("../images/services/p_services6_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-7{ background: url("../images/services/p_services7_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-8{ background: url("../images/services/p_services8_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-9{ background: url("../images/services/p_services9_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-10{ background: url("../images/services/p_services10_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-11{ background: url("../images/services/p_services11_bg_img.jpg") center / cover no-repeat; width: 100%;  }
.service-page-12{ background: url("../images/services/p_services12_bg_img.jpg") center / cover no-repeat; width: 100%;  }

/* SAFARI BROWSER ONLY */
@supports (-webkit-touch-callout: none) {
  .bg-layer { background-attachment: scroll; }
  .bg-sector-page-layer { background-attachment: scroll; }
  .bg-contact-us-layer { background-attachment: scroll; }
  .bg-why-litoria-layer { background-attachment: scroll; }
  .bg-news-layer { background-attachment: scroll; }
  .bg-value-adds-layer { background-attachment: scroll; } 
}