/* Global header background */
#Top_bar {
  background-color: #000 !important; /* solid black */
}

/* Menu links */
#Top_bar .menu > li > a {
  color: #fff !important; /* white text */
}

/* Menu hover effect */
#Top_bar .menu > li > a:hover {
  color: #f0f0f0 !important; /* lighter white on hover */
}

/* Responsive menu toggle (hamburger icon) */
.responsive-menu-toggle i {
  color: #fff !important;
}



/* Dropdown menu styling */
#Top_bar .menu li.menu-item-has-children:hover > .sub-menu {
  display: block;
}

#Top_bar .menu .sub-menu {
  display: none;
  position: absolute;
  background-color: #000;
  min-width: 200px;
  z-index: 9999;
  padding: 0;
  margin: 0;
  list-style: none;
}

#Top_bar .menu .sub-menu li a {
  color: #fff !important;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

#Top_bar .menu .sub-menu li a:hover {
  background-color: #111;
  color: #f0f0f0 !important;
}

/* Arrow indicator for dropdowns */
#Top_bar .menu li.menu-item-has-children > a:after {
  content: " ▾";
  font-size: 0.8em;
  color: #fff;
  margin-left: 5px;
}



.gallery {
  display: flex;
  flex-wrap: wrap;   /* allows multiple rows */
  gap: 20px;         /* spacing between items */
  margin: 60px 30px 0 30px; /* top + left/right margins */
}




/* Default: 3 columns per row */
.gallery-item {
  flex: 1 1 calc(33.333% - 20px);
}

/* Tablet: 2 columns per row */
@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 calc(50% - 20px);
  }
}

/* Mobile: 1 column per row */
@media (max-width: 480px) {
  .gallery-item {
    flex: 1 1 100%;
  }
}



.slider-wrapper {
  position: relative;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 8px;
  cursor: pointer;
  opacity: 0;              /* hidden by default */
  transition: opacity 0.3s;
}

.prev { left: 15px; }
.next { right: 15px; }

.slider-wrapper:hover .prev,
.slider-wrapper:hover .next {
  opacity: 1;              /* show arrows only on hover */
}



.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}


.slide {
  display: none;
}

.slide.active {
  display: block;
}

.gallery-text {
  margin-top: 8px;   /* gap between image and text block */
  font-size: 14px;
  color: #555;
  line-height: 1.2;
}

.gallery-text strong {
  font-weight: 600;   /* lighter than default bold (700) */
  font-size: 14px;
  display: block;
  margin-bottom: 0;
  line-height: 1.3;
}


/* ===== CLEAN OLD WP STYLE ===== */

/* Body */
body,
button,
input,
textarea,
select {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    color: #333;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Hero Title */
h1 {
    font-size: 38px;
    letter-spacing: 1.5px;
}

/* Section Titles */
h2 { font-size: 32px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

/* Navigation */
#menu>ul>li>a {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;          /* refined size */
    letter-spacing: 0.3px;    /* refined spacing */
    text-transform: uppercase;
}


/* Reduce spacing between menu items */
#menu>ul>li>a {
    padding-left: 8px;
    padding-right: 8px;
}

h1, h2, h3 {
    letter-spacing: 0.8px;
    line-height: 1.3;
}

/* ===== Static Banner Replacement ===== */

.static-banner {
    position: relative;
    width: 100%;
    height: 600px;   /* adjust height if needed */
    overflow: hidden;
}

.static-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Oswald', sans-serif;
    font-size: 46px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}



 
  .portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

/* Ensure portfolio items are evenly spaced */
.portfolio-item {
  flex: 0 0 33.333%;         /* 3 per row */
  max-width: 33.333%;
  padding: 10px;             /* equal padding */
  box-sizing: border-box;
  text-align: center;
}



.portfolio-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  position: relative;
}

.image_wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  text-align: center;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image_wrapper:hover .overlay {
  opacity: 1;
}

.project-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.project-title {
  margin: 10px 0 5px;
  font-size: 16px;
  font-weight: 500;
  text-transform: none; /* ensures normal case */
}

.portfolio-filter {
  margin: 40px 0 20px; /* gap above filter bar */
  text-align: center;
}

.portfolio-filter label {
  margin: 0 15px;
  font-weight: 600;
}

.portfolio-filter select {
  margin-left: 5px;
  padding: 5px 10px;
}

.project-title {
  text-transform: none; /* ensures normal case */
}


/* Optional: cleaner look for filter buttons */
.filter-btn {
  border: none !important;
  background: transparent;   /* keeps it minimal */
  color: inherit;            /* matches surrounding text color */
  padding: 6px 12px;         /* adds breathing space */
  cursor: pointer;           /* ensures it feels clickable */
}

/* Optional: subtle hover effect */
.filter-btn:hover {
  background-color: rgba(255,255,255,0.1); /* light overlay */
  transition: background-color 0.2s ease;
}







.filter-row {
  display: flex;
  justify-content: center;
  gap: 30px; /* spacing between buttons */
  flex-wrap: wrap;
}

.filter-dropdown {
  position: relative;
}


.filter-row label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-row select {
  padding: 5px 10px;
}


.filter-btn {
  background: #0073e6;
  color: #fff;
  border: none;
  padding: 6px 14px; /* reduced height */
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2; /* keeps text compact */
}


.filter-btn:hover {
  background: #005bb5;
}

.filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  display: none;
  min-width: 150px;
  z-index: 10;
}

.filter-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

.filter-menu li:hover {
  background: #f0f0f0;
}

/* Show dropdown on hover */
.filter-dropdown:hover .filter-menu {
  display: block;
}

.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centers items */
  margin: 0 auto;            /* equal left/right margins */
  max-width: 1200px;         /* optional: keeps grid contained */
  padding: 0 20px;           /* balanced breathing space */
}





/* Responsive adjustments */
@media (max-width: 1024px) {
  .portfolio-item {
    flex: 0 0 33.33%;
    max-width: 33.33%; /* 3 per row */
  }
}

@media (max-width: 768px) {
  .portfolio-item {
    flex: 0 0 50%;
    max-width: 50%; /* 2 per row */
  }
}

@media (max-width: 480px) {
  .portfolio-item {
    flex: 0 0 100%;
    max-width: 100%; /* 1 per row */
  }
}


/* Stable equal gallery grid */
.project-gallery .column.one-third {
    margin-bottom: 20px;
}

.project-gallery .image_frame {
    overflow: hidden;
}

.project-gallery .image_frame .image_wrapper {
    padding-bottom: 75%;   /* 4:3 ratio box */
    position: relative;
}

.project-gallery .image_frame .image_wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}




.open-positions .position-block {
  background: #f9f9f9;       /* light background for separation */
  padding: 2px 16px;        /* reduced padding for compact height */
  margin-bottom: 10px;       /* spacing between blocks */
  border-radius: 6px;        /* rounded corners for modern look */
}

.open-positions .position-block h4 {
  margin: 0 0 6px 0;         /* small gap below title */
}

.open-positions .position-block p {
  margin: 0;                 /* no extra gap above/below text */
}



/* Remove global section spacing */


/* Remove gap under Google map */






/* Remove empty section gap */


/* Remove extra spacing before footer */




/* Contact section spacing control */
.section.highlight-left {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-bottom: 0 !important;
}


.section_map_override {
    padding-top: 0 !important;
}

.section.the_content {
    margin: 0 !important;
    padding: 0 !important;
}

body.contact-page #Subheader {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.contact-page #Content {
    padding-top: 0 !important;
}

body.contact-page .content_wrapper {
    padding-top: 0 !important;
}

body.contact-page .sections_group {
    padding-top: 0 !important;
}

body.contact-page .sections_group .section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ===== MOBILE MENU FIX ===== */

/* Mobile menu background */
.responsive-menu-toggle {
    position: relative;
    z-index: 1000;
}

/* Style for the mobile menu panel */
#Top_bar .menu_wrapper .responsive-menu-toggle.active + #menu {
    background-color: #000 !important;
    padding: 20px !important;
}

/* Mobile menu container when active */
#Top_bar .responsive-menu-toggle.active ~ .menu_wrapper #menu {
    background-color: #000 !important;
}

/* Mobile menu items */
@media only screen and (max-width: 1239px) {
    #Top_bar .menu_wrapper #menu {
        background-color: #000 !important;
    }
    
    #Top_bar .menu_wrapper #menu > ul li a {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #333 !important;
    }
    
    #Top_bar .menu_wrapper #menu > ul li a:hover {
        color: #f0f0f0 !important;
        background-color: #222 !important;
    }
    
    /* Submenu items in mobile */
    #Top_bar .menu_wrapper #menu ul.sub-menu li a {
        color: #fff !important;
        background-color: #111 !important;
        padding-left: 30px !important;
    }
    
    /* Dropdown arrows in mobile */
    #Top_bar .menu li.menu-item-has-children > a:after {
        color: #fff !important;
    }
    
    /* Ensure the menu panel itself has black background */
    #Top_bar .menu_wrapper {
        background-color: transparent;
    }
    
    #Top_bar .menu_wrapper #menu {
        background-color: #000 !important;
    }
}

/* ===== PAGE SPACING CONTROLS ===== */

/* Only remove spacing on contact page */
body.contact-page .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.contact-page .section_map_override {
    margin-bottom: 0 !important;
}

body.contact-page .google-map-wrapper {
    margin-bottom: 0 !important;
}

body.contact-page .google-map iframe {
    display: block;
}

body.contact-page .section:empty {
    display: none;
}

body.contact-page #Content {
    padding-bottom: 0 !important;
}

body.contact-page .sections_group {
    margin-bottom: 0 !important;
}

/* ===== ABOUT PAGE SPACING FIXES ===== */

/* Ensure about page sections have proper spacing */
body.about-page .section {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* Specific fix for OUR TEAM section (dark background) */
body.about-page .section.dark {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* Specific fix for OUR PHILOSOPHY section */
body.about-page .section.column-margin-20px {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* Ensure first section has top padding */
body.about-page .section:first-of-type {
    padding-top: 60px !important;
}


.social-icons-wrapper {
  width: 100%;
  display: flex;
  justify-content: center; /* Centers horizontally */
}

.contact_icons {
  margin: 0;
}

.contact_icons a {
  margin: 0 10px;
  color: #333; /* optional */
  text-decoration: none;
}



.about-section .column_attr.about-overlay{
    background: rgba(255,255,255,0.20) !important; /* more transparent */
    padding: 40px 50px;
    max-width: 750px;
    margin: auto;
    text-align: center;
}


.about-section .about-overlay h2,
.about-section .about-overlay p,
.about-section .about-overlay strong{
    color: #ffffff !important;
}

.about-section .about-overlay h2,
.about-section .about-overlay p{
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


.about-section{
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.about-section{
    background-size: cover;
    background-position: center center;
}


/* Mobile responsive adjustment */
@media only screen and (max-width: 767px){

    .about-section{
        min-height: 500px; /* optional improvement for better mobile height */
    }

    .about-section .column_attr.about-overlay{
        padding: 15px 10px !important;   /* reduce side space */
        max-width: 95%;
    }

    .about-section h2{
        font-size: 24px;
    }

    .about-section p{
        font-size: 14px;
        line-height: 1.7;
    }

}


.philosophy-section{
    background:#ffffff;
    padding:120px 0;
}

.philosophy-container{
    width:600px;
    margin:0 auto;
}

.philosophy-container h3{
    font-size:28px;
    letter-spacing:1px;
    margin-bottom:25px;
}

.philosophy-container p{
    font-size:15px;
    line-height:1.8;
    text-align:left;
}

.philosophy-container .author{
    margin-top:20px;
}

.principal-photo{
    margin-top:40px;
}

.principal-photo img{
    width:170px;
}


@media only screen and (max-width: 767px){

    .philosophy-container{
        width:90%;
        margin:0 auto;
    }

    .principal-photo img{
        width:140px;
    }

}


/* Scoped only to portfolio section */
.portfolio-grid .image_wrapper {
  position: relative;
  overflow: hidden;
}

.portfolio-grid .image_wrapper img {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

.portfolio-grid .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6); /* dim effect */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers title vertically */
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
}

.portfolio-grid .image_wrapper:hover img {
  opacity: 0.5; /* dim image */
}

.portfolio-grid .image_wrapper:hover .overlay {
  opacity: 1; /* show overlay */
}

.portfolio-grid .project-title {
  margin: 0;
  font-size: 16px;
  font-weight: thin;
  color: #fff; /* white text */
}

/* Scoped only to portfolio section */
.portfolio-grid .project-link {
  margin-top: 60px; /* space below title */
  color: #fff; /* white text */
 /* text-decoration: underline; /* simple link style */
  font-size: 14px;
  font-weight: 300; /* lighter/thinner text */
}


/* Horizontal project details */
.project-details-bar{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

.project-details-bar .detail-item{
    flex:1;
    min-width:200px;
}

.project-details-bar h6{
    margin-bottom:5px;
    font-weight:600;
}

.project-details-bar p{
    margin:0;
}


/* WHAT WE OFFER SECTION */

.offer-section{
    background:#ffffff;
    padding:120px 0;
}

.offer-container{
    max-width:760px;
    margin:0 auto;
}

.offer-title{
    font-size:28px;
    border-bottom:2px solid #222;
    display:inline-block;
    padding-bottom:6px;
    margin-bottom:50px;
}

/* grid layout */

.offer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px 70px;
}

/* service cards */

.offer-card{
    background:#ededed;
    border-radius:12px;
    padding:25px 35px;
    display:flex;
    align-items:center;
    gap:20px;
    min-height:90px;
    transition:all .25s ease;
}

.offer-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* icon */

.offer-icon{
    width:40px;
    text-align:center;
}

.offer-icon img{
    width:50px;
    height:auto;
}

/* text */



.offer-card .offer-text{
    font-family:'Oswald', sans-serif !important;
    font-weight:400;
    font-size:22px;
    letter-spacing:1.5px;
    line-height:1.6;
}

.offer-section{
    padding-top:150px;
    padding-bottom:150px;
}


/* MOBILE */

@media only screen and (max-width: 767px){

    .offer-container{
        width:90%;
        margin:0 auto;
    }

    .offer-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .offer-card{
        padding:25px;
    }

    .offer-text{
        font-size:16px;
    }

     .offer-section{
        padding-top:80px;
        padding-bottom:80px;
    }

}


/* Override heading styles */
h3, h4 {
  text-transform: none;      /* show text exactly as typed */
  letter-spacing: normal;    /* optional: remove extra spacing */
}



/* Contact Info Styling */
.section.contact-info .column_attr {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #222;
  text-align: center;
}

/* Contact Form Inputs */
#contactform input[type="text"],
#contactform input[type="email"],
#contactform input[type="submit"],
#contactform textarea {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  width: 100% !important;
  margin-bottom: 15px !important;
  padding: 12px !important;
  border: 1px solid #ccc !important;
  box-sizing: border-box !important;
}

/* Send Message Button */
#contactform input[type="submit"] {
  background-color: #777 !important;   /* grey default */
  color: #fff !important;              /* white text */
  border: none !important;
  cursor: pointer !important;
  padding: 12px 25px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  transition: background-color 0.3s ease !important;
}

#contactform input[type="submit"]:hover {
  background-color: #000 !important;   /* black on hover */
  color: #fff !important;
}

/* Contact Info Icons */
.section.contact-info i {
  font-size: 28px !important;   /* bigger size */
  color: #000 !important;       /* solid black */
  margin-right: 12px !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: 400;
}

/* Optional: make them outlined/line-style */
.section.contact-info i::before {
  -webkit-text-stroke: 1px #000;   /* thin outline */
  color: transparent;              /* hollow fill */
}




/* REMOVE FIXED BOXED WIDTH */

body{
    min-width: unset !important;
    padding: 0 !important;
}

#Wrapper{
    max-width:1400px;     /* adjust as you like */
    width:100%;
    margin:0 auto;
    overflow:visible;
}


@media only screen and (max-width: 767px){

    #Wrapper{
        max-width:100%;
        padding:0;
    }

}


@media only screen and (max-width: 767px){

    .offer-section{
        padding-top:70px;
        padding-bottom:70px;
    }

}


/* Ensure parent container is centered */

.container{
    max-width:1350px !important;
    width:100% !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}



.section_wrapper{
    max-width:1350px;
    margin:0 auto;
    padding-left:0 !important;
    padding-right:0 !important;
}

.items_group{
    padding-left:20px;
    padding-right:20px;
}



/* FORCE PROJECT GRID TO USE FULL WIDTH */

.portfolio_group{
    width:100% !important;
}

/* FORCE EACH ITEM TO FIT PERFECTLY */

.portfolio_group .portfolio-item{
    width:33.3333% !important;   /* 3 columns */
    padding:10px;
    box-sizing:border-box;
}


/.portfolio_group{
    padding-right:20px;
}

.portfolio_group .portfolio-item{
    width:calc(33.333% - 5px) !important;
}


.portfolio_group{
    padding-right:0 !important;
    margin-right:0 !important;
}


/* Unified portfolio grid */
.portfolio-grid,
.portfolio_group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center items */
  margin: 0 auto;            /* equal margins */
  max-width: 1200px;
  padding: 0 15px;           /* balanced breathing space */
  box-sizing: border-box;
}

/* Unified portfolio items */
.portfolio-item,
.portfolio_group .portfolio-item {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

/* Tablet view: 2 per row */
@media (max-width: 768px) {
  .portfolio-item,
  .portfolio_group .portfolio-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 480px) {
  .portfolio-item,
  .portfolio_group .portfolio-item {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;   /* adds spacing between stacked items */
  }
}

/* Home page only: eliminate extra space after footer */
body.home-page {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* full viewport height */
  overflow-y: auto;
  overflow-x: hidden;
}

body.home-page #Footer {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  bottom: 0;
}

/* Home page only: stretch slider container */
body.home-page .static-banner {
  height: 700px;          /* adjust until the gap is visually filled */
  overflow: hidden;       /* prevents overlap with footer/social icons */
  background-color: #000; /* optional: ensures black background fills */
}

body.home-page .static-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* keeps image proportional */
}


/* Services page only: natural section height, sticky footer */
body.services-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* full viewport height */
  margin: 0;
}

body.services-page #Wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.services-page #Content {
  flex: 1; /* expands to push footer down */
}

body.services-page .offer-section {
  min-height: auto; /* keep natural height */
  padding-bottom: 60px; /* add breathing room above footer */
}


/* Services page only: change social media section background to white */
body.services-page .widgets_wrapper {
  background-color: #fff !important;
}



/* 27/03/2026 correction- Force portfolio grid to use full width */
.portfolio-grid {
  max-width: 95% !important;   /* remove 1200px cap */
  padding: 0 !important;        /* no side padding */
  margin: 0 auto !important;    /* center if needed */
  justify-content: flex-start !important; /* align items to left edge */
}

/* Make items larger */
.portfolio-item {
  flex: 0 0 33.333% !important;     /* 4 per row, bigger images */
  max-width: 33.333% !important;
  padding: 10px !important;      /* tighter spacing */
  box-sizing: border-box;
}

/* Image scaling */
.portfolio-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* Desktop / default: 3 per row */
.portfolio-item {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
  padding: 10px !important;
  box-sizing: border-box;
}

/* Tablet: 2 per row */
@media (max-width: 768px) {
  .portfolio-item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile: 1 per row */
@media (max-width: 480px) {
  .portfolio-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Projects page only: remove bottom gap under copyright bar */
body.projects-page #Footer .footer_copy {
  margin: 0 !important;
  padding: 1px 0 !important;   /* slim height */
}

/* Projects page only: unify background above social icons */
body.projects-page .widgets_wrapper {
  background-color: #fff !important;   /* make it white */
  margin-top: 0 !important;            /* no extra strip */
  padding-top: 30px !important;        /* controlled gap above icons */
  padding-bottom: 20px !important;
}

/* Add controlled spacing after project grid */
body.projects-page .portfolio-grid {
  margin-bottom: 50px !important;      /* gap before social icons */
}
/* Wrapper centers the heading */
.projects-heading-wrapper {
  text-align: center;
  margin: 40px 0 20px 0;
}

/* Heading shrinks to text width */
.projects-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #333;
  display: inline-block;   /* shrink to text width */
  position: relative;
}

/* Underline exactly matches text width */
.projects-heading::after {
  content: "";
  display: block;
  width: 100%;             /* same width as text */
  height: 2px;
  background-color: #333;
  margin-top: 8px;
}


/* HEADER MENU COLOR ACTIVE*/
/* Active menu item color */
#Top_bar .menu > li.current_page_item > a {
    color: #fe8f3e !important;  /* choose your highlight color */
}


/* PROJECT DETAILS CONTAINER STRETCH*/

/* Project detail page: stretch gallery container */
body.projects-page .section_wrapper,
body.projects-page .items_group,
body.projects-page .project-gallery .column_attr {
  max-width: 100% !important;   /* remove fixed width cap */
  width: 100% !important;
  padding-left: 0 !important;   /* remove large side padding */
  padding-right: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* Gallery columns: reduce margins between images */
body.projects-page .project-gallery .column.one-fourth {
  width: 24% !important;        /* slightly wider than default */
  margin: 0 0.5% 15px 0.5% !important;
}

@media only screen and (max-width: 767px) {
  /* Gallery container fills screen */
  body.projects-page .project-gallery .column_attr {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Each image takes full width */
  body.projects-page .project-gallery .column.one-fourth {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
  }

  /* Images scale properly */
  body.projects-page .project-gallery img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}



/* Apply Oswald font site-wide */
body, h1, h2, h3, h4, h5, h6, p, li, a, span, div {
  font-family: 'Oswald', sans-serif !important;
}

/* Headings slightly bolder */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500;
}

/* Body text lighter */
p, li, a, span, div {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 400;
}


/* Footer widget wrapper background stays white */
footer .widgets_wrapper {
  background-color: #fff !important;
  padding: 10px 0;
  text-align: center;
}

/* Social media icons: larger and tighter spacing */
footer .contact_icons a i {
  font-size: 28px !important;   /* make icons bigger */
  margin: 0 1px !important;     /* reduce gap between icons */
  vertical-align: middle;
  color: inherit !important;    /* keep original colors */
}

/* Footer widget wrapper background stays white */
footer .widgets_wrapper {
  background-color: #fff !important;
  padding: 20px 0;
  text-align: center;
}

/* Social media icons: larger and tighter spacing */
footer .contact_icons a i {
  font-size: 28px !important;   /* bigger icons */
  margin: 0 3px !important;     /* reduced gap */
  vertical-align: middle;
  color: inherit !important;    /* keep original colors */
}

/* Mobile tweak: keep icons centered and evenly spaced */
@media only screen and (max-width: 767px) {
  footer .contact_icons {
    display: flex;
    justify-content: center;    /* center icons horizontally */
    flex-wrap: wrap;            /* allow wrapping if needed */
    gap: 10px;                  /* consistent spacing between icons */
  }

  footer .contact_icons a i {
    font-size: 36px !important; /* slightly larger on mobile */
    margin: 0 !important;       /* remove extra margins */
  }
}


/* Careers page mobile layout fix */
@media only screen and (max-width: 767px) {
  /* Stretch the main section wrapper */
  body.careers-page .section_wrapper,
  body.careers-page .items_group,
  body.careers-page .column {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  /* Ensure images scale full width */
  body.careers-page .column_image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Text blocks stretch across screen */
  body.careers-page .column_attr {
    width: 100% !important;
    padding: 5px !important;
  }
}

/* Mobile view: reduce icon size and keep centered */
@media only screen and (max-width: 767px) {
  footer .contact_icons a i {
    font-size: 22px !important;   /* smaller size for mobile */
    margin: 0 5px !important;     /* balanced spacing */
  }

  footer .contact_icons {
    display: flex;
    justify-content: center;      /* center icons horizontally */
    flex-wrap: wrap;
    gap: 8px;                     /* consistent spacing between icons */
  }
}


/* ABOUT US PAGE MOBILE AND DESKTOP CORRECTION*/

/* About page: stretch WHO WE ARE and PHILOSOPHY sections */
body.about-page .about-section .section_wrapper,
body.about-page .philosophy-section .section_wrapper {
  max-width: 100% !important;   /* remove fixed width cap */
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* Columns inside these sections should also stretch */
body.about-page .about-section .column,
body.about-page .philosophy-section .philosophy-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Mobile view adjustments */
@media only screen and (max-width: 767px) {
  body.about-page .about-section .section_wrapper,
  body.about-page .philosophy-section .section_wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.about-page .about-section .column_attr,
  body.about-page .philosophy-section .philosophy-container {
    width: 100% !important;
    padding: 10px !important;
  }

  body.about-page .philosophy-section img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* About page: adjust PHILOSOPHY section */
body.about-page .philosophy-section .section_wrapper {
  max-width: 90% !important;    /* narrower than full width on desktop */
  margin: 0 auto !important;    /* center the section */
  padding-left: 130px !important;
  padding-right: 130px !important;
  box-sizing: border-box;
}

/* Mobile view tweaks */
@media only screen and (max-width: 767px) {
  body.about-page .philosophy-section .section_wrapper {
    max-width: 100% !important;
    padding-left: 12px !important;   /* slim margins */
    padding-right: 12px !important;
  }

  /* Text stretches full width */
  body.about-page .philosophy-section .philosophy-container {
    width: 100% !important;
    padding: 10px !important;
  }

  /* Photo left-aligned on mobile */
  body.about-page .philosophy-section .principal-photo {
    text-align: left !important;
  }

  body.about-page .philosophy-section .principal-photo img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;   /* left aligned instead of centered */
    margin: 0;
  }
}

/* PROJECT FILTER TITLE FONT CHANGE */

/* Project filter titles: use Oswald font */
.filter-menu li,
.filter-menu li a,
.portfolio-filter li,
.portfolio-filter li a {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 400;   /* medium weight for clarity */
  text-transform: uppercase; /* optional: keep consistent with headings */
  letter-spacing: 1px; /* optional: improve readability */
}



/* Careers page FAQ: remove all boxes, fills, and borders */
body.careers-page .faq .question .title,
body.careers-page .faq .question .answer {
  background: #fff !important;   /* force white background */
  border: none !important;       /* remove borders */
  box-shadow: none !important;   /* remove any shadow */
  padding: 10px 0 !important;    /* keep clean spacing */
}

/* Remove any colored box around icons */
body.careers-page .faq .question .title i {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #333;                   /* keep icon simple */
  margin-right: 8px;
}

/* Clean text styling */
body.careers-page .faq .question .title {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 400;
  color: #333;
}

body.careers-page .faq .question .answer p {
  font-family: 'Open Sans', sans-serif !important;
  color: #444;
  margin: 0;
}

/* Careers page FAQ: make Q&A plain white, no boxes */
body.careers-page .faq .question,
body.careers-page .faq .question.active,
body.careers-page .faq .question .title,
body.careers-page .faq .question .answer {
  background: #fff !important;   /* force white background */
  border: none !important;       /* remove all borders */
  box-shadow: none !important;   /* remove any shadow */
}

/* Remove grey square around the toggle icon */
body.careers-page .faq .question .title i {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #333;                   /* simple icon color */
  margin-right: 8px;
}

/* Add spacing between image and FAQ section */
body.careers-page .column_image {
  margin-bottom: 30px !important;
}

/* Optional: keep items separated with a subtle divider */
body.careers-page .faq .question {
  border-bottom: 1px solid #eee; /* light divider line */
  margin-bottom: 12px;
}


/* Careers page FAQ: unify fonts */
body.careers-page .faq .question .title {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #333 !important;
}

body.careers-page .faq .question .answer,
body.careers-page .faq .question .answer p,
body.careers-page .faq .question .answer span {
  font-family: 'Oswald', sans-serif !important; /* consistent answer font */
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #444 !important;
}

/* Careers page FAQ container spacing */
body.careers-page .faq {
  margin-left: 30px !important;   /* pushes accordion away from image */
  max-width: 90% !important;      /* keeps it narrower for balance */
}

/* Extra vertical gap between image and accordion */
body.careers-page .column_image {
  margin-bottom: 40px !important; /* space below image column */
}

/* Mobile view adjustments */
@media only screen and (max-width: 768px) {
  .contact-info .items_group {
    display: block !important;   /* Stack items vertically */
    text-align: left !important; /* Force left alignment */
  }

  .contact-info .column.one-third {
    width: 100% !important;      /* Full width for each item */
    margin-bottom: 20px;         /* Space between items */
    text-align: left !important; /* Ensure text stays left aligned */
  }

  .contact-info .column_attr {
    display: flex;               /* Keep icon + text inline */
    align-items: flex-start;     /* Align icon to top */
    text-align: left !important; /* Left align text */
  }

  .contact-info .column_attr i {
    margin-right: 10px;
    font-size: 22px;
    color: #0073e6;
  }

  .contact-info .column_attr p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;            /* Explicit left alignment */
  }
}

/* TITLE UNDERLINE*/
/* About page: underline section headings */
body.about-page h2,
body.about-page h3,
body.about-page h4 {
  text-decoration: underline !important;
  text-underline-offset: 4px;      /* adds breathing space below text */
  text-decoration-thickness: 2px;  /* makes underline slightly bolder */
}







