/*!
Theme Name: HGP
Theme URI: http://underscores.me/
Author: P&C
Author URI: https://www.pitcherandcrow.co.uk/
Description: New Theme for HGP 
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hgptheme
Tags: Uk Property, Invsements, Developments, LLoyds

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

HGP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/


:root {
    --primary: #002c12;
    --secondary: #82ac2c; 
    --tertiary: #002e14; 

    --light: #fff; 
    --light2: #f2f2f2;
    --dark: #002e14; 
    --grey: #444;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--tertiary);
    background-color: var(--light2);
}


.mb-50 {margin-bottom: 50px;}
.mb-30 {margin-bottom: 30px;}
.mb-10 {margin-bottom: 10px;}
.mt-20 {margin-top: 20px}
.mt-60 {margin-top: 60px}
.m-50 {margin: 50px 0}

.pb-50 {padding-bottom: 50px;}
.w-60 {width:60%; margin: 0 auto;}
/*color*/
.hgp-light {color: var(--light)}
.hgp-secondary {color: var(--secondary)}
.hgp-primary {color: var(--primary);}
/*background*/
.bg-hgp-primary {background-color: var(--primary);}

hr {background-color: var(--secondary); height: 0.5px; border: none;}

/*links & buttons*/
header a {text-decoration: none; color: #fff;}
/*typography*/
h1, h2, h3, h4, h5 {margin: 0; line-height: 1.2;}
h1 {font-size: 3.8rem;}
h2 {font-size: 2.8rem;}
h3 {font-size: 2.4rem;}
p {line-height: 1.5;}
.small-text {font-size: 11px; font-weight: 300;}

.secondary-hero h1, .tertiary-hero h1, .article-hero h1 {font-size: 2.8rem;}
.value-slider h3 {font-size: 1.8rem;}

.hgp-bold {font-weight: 600;}
.hgp-regular {font-weight: 400;}
.hgp-text-light {font-weight: 300;}
.hgp-text-left {text-align: left;}

.fact-card h3 {font-size: 2.4rem;}

li::marker {color: var(--secondary); font-size: 1.4rem;}

.h2-center {text-align: center; margin-bottom: 50px;}

/*Block*/
section {width: 100%; position: relative;}
.hgp-block {width: 80%; margin: 0 auto; padding: 8%;}
.hgp-block-alt {width: 80%; margin: 0 auto; padding: 8% 8% 0;}
.hgp-block-info {width: 80%; margin: 0 auto; padding: 4% 8% 0;}
.hgp-block-info p, .hgp-block-info h3 {text-align: left;}
.hgp-block-cs {width: 80%; margin: 0 auto; padding: 4% 8%;}
.hgp-block-footer {width: 80%; margin: 0 auto; padding: 2% 8%;}
.hgp-block-sgl {width: 80%; margin: 0 auto; padding: 4% 8%;}
.hgp-block-nrw {width: 60%; margin: 0 auto; padding: 8%;}
.dbl-block {display: flex; flex-direction: row; gap: 5%}

.left-block, .right-block {width: 50%;}
.flexy-end {display: flex; justify-content: flex-end;}
.block-text p:first-of-type {margin-top: 0;}
.og-text p {font-size: 1.1rem}
.og-text p:first-of-type {font-size: 1.6rem; font-weight: 100;}

.img-content-block {display: flex; flex-direction: row;  height: 70vh}
.image-block, .content-block {width: 50%; display: flex;  align-items: center;}
.image-block img {width: 100%; height: 100%; object-fit: cover;}
.contents-wrap {padding: 100px;}
.pillar-contents-wrap {width: 100%; padding: 60px 100px;}

/*Rows*/
.block-row {text-align: center; padding-bottom: 2.5%}
.flex-row {display: flex; flex-direction: row; gap: 30px;}
.hgp-inner-block {display: flex; flex-direction: row; gap: 35px;}

.block-row .block-text {font-size: 1.2rem; padding: 10px 0 20px; position: relative; margin: 0;}

.pt-4 {padding-top: 4%} .p-4 {padding: 4% 0 5%;}
.mb-50 {margin-bottom: 50px;}

/*Header + Nav*/
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 110px;
    background-color: rgba(0, 44, 18, 0.8); /* Semi-transparent background */
    color: #fff;
    padding: 30px 0 20px;
    z-index: 100; /* Ensure the header is on top */
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%); /* Creates the angled edge */
    transition: background-color 0.3s, clip-path 0.3s, height 0.3s, padding 0.3s;  /* Smooth transition */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow initially */

}

.header-wrap {width: 80%; margin: 0 auto; padding: 0 5%; display: flex; flex-direction: row; justify-content: space-between}
.hgp-logo {width: 210px; height: auto;}

.scrolled {
  background-color: rgba(0, 44, 18, 1); /* Opaque background */
  clip-path: none;/* Straight horizontal line */
  height: 50px; /* Reduced height */
  padding: 20px 0;
  transition: background-color 0.5s, clip-path 0.5s, height 0.5s, padding 0.3s;  /* Smooth transition */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  z-index: 100;
}

.scrolled .hgp-logo {
  width: 150px; /* Reduced logo size */
  transition: width 0.3s; /* Smooth transition */
}

.moving {top: 12px; transition: top 0.5s;}

.menu {margin: 20px 0 0;}
.current-menu-item {width: auto; border-bottom:  2px solid var(--secondary);}

/*nav*/
.hide{top:-150px} .scrolled{top:0} .fill {background-color: #fff; box-shadow:0 4px 10px -10px rgba(0,0,0,.6); transition: all 0.3s ease; }
header .logo{text-decoration:none;display:block}
nav {position: fixed; top: 28px; right: 10%; z-index: 150; color: #fff; transition: top 0.5s;}
nav ul{list-style-type:none;margin:0;padding:0;display:flex;justify-content:flex-end}
nav ul li{display:inline;margin-left: 25px;}
nav ul li a{color:var(--primary-color);text-decoration:none;font-size:14px}
nav ul li a:hover{color:var(--secondary);}
.hamburger-icon, .overlay-menu {display: none;}

.menu-item-has-children {position: relative; display: flex; gap: 5px; align-items: center;}
.menu-item-has-children::after {content: "\2304"; margin-top: -10px;}
.menu-item-has-children .sub-menu {background-color: var(--primary); display: none; padding: 5px 10px 10px; position: absolute; top:100%; left: 0; border-bottom: 5px solid var(--secondary) ;}
.menu-item-has-children .sub-menu li{display: block; width: 130px; margin: 0;}
.menu-item-has-children:hover > .sub-menu {display:block }


/*Hero*/
.home-hero {width: 100%; height: 100vh; position: relative;}
.secondary-hero {width: 100%; height: 50vh; position: relative;}
.tertiary-hero {width: 100%; height: 50vh; position: relative;}
.article-hero {width: 100%; height: 45vh; position: relative;}

.home-hero img, .secondary-hero img, .tertiary-hero img, .article-hero img {width: 100%; height: 100%; object-fit: cover; display: block;}

.hero-text-wrap {
  height: 130px; /* Fixed height for containing the slides */
  overflow: hidden; /* Ensures slides won't spill out of the container */
  position: relative; /* Allows positioning the slides absolutely */
}

.hero-slide-1, .hero-slide-2, .hero-slide-3 {
  position: absolute; /* All slides will stack on top of each other */
  top: 0; /* Start each slide at the top of the container */
  left: 0;
  right: 0;
  transform: translateY(145px); /* Slide hidden below the visible area */
  opacity: 0; /* Start as invisible */
  transition: transform 0.6s ease, opacity 0.6s ease; /* Smooth transitions */
}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%);
    pointer-events: none; /* Ensures the overlay doesn't interfere with mouse events */
  }
  .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 98.2%;
    background: linear-gradient(to top , rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 50%);
    pointer-events: none; /* Ensures the overlay doesn't interfere with mouse events */
  }
  .card-overlay-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top , rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 50%);
    pointer-events: none; /* Ensures the overlay doesn't interfere with mouse events */
  }
.hero-content {position: absolute; height: fit-content; width:80%; top: 40%; left: 10%; display: flex; flex-direction: column; color: var(--light);}
.hero-content-home {position: absolute; height: 50vh; width:80%; top: 40%; left: 10%; display: flex; flex-direction: column; color: var(--light);}
.hero-content-2 {position: absolute; width:80%; top: 60%; left: 10%; display: flex; flex-direction: column; color: var(--light);}
.secondary-hero .hero-content, .tertiary-hero .hero-content {top: 50%;}
.secondary-hero .hero-content, .tertiary-hero .hero-content {width: 40%;}
.hero-text {align-content: flex-start; height: fit-content;}
.hero-btn {align-content: flex-end; height: 100%;}
.hero-btn-wrap {display: flex; flex-direction: row; gap: 10px; align-items: center;}
.btn-icon img{width: 40px; height: auto;}



 .home-img-grid {
    display: grid;
    gap: 2vh;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    max-width: 600px; /* Adjust this value as needed */
    width: 100%;
    grid-auto-flow: dense;
    align-self: flex-start;
}

.home-img-grid img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.home-img-grid img:nth-child(1),
.home-img-grid img:nth-child(2) {
align-self: end;
}
.home-img-grid img:nth-child(3) {
    grid-column: span 2;
}



/*cards*/
.value-card-deck {display: grid; column-gap: 20px; row-gap: 60px; padding: 20px; grid-template-columns: repeat(3, 1fr);}
.value-card {text-align: center;}
.value-card img {width: 100%; height: auto;}
.card-content {width: 90%; margin: 0 auto;}
.card-text {line-height: 1.5rem;}
.card-content h3 { padding: 20px 0 5px; font-size: 1.4rem;}
.fact-card .card-content h3 {padding: 20px 0 5px; font-size: 2.6rem;}

.fact-card {width: calc(100%/3);}
.fact-card .card-image img{max-width: 77px; height: 77px;}

.og-left, .og-right {width: 50%; display: flex;}
.og-left {justify-content: flex-end;} .og-right {justify-content: flex-start;}
.image-card {position: relative; width: 70%; height: 80%;}
.image-card img {width: 100%; height: 100%; object-fit: cover;}
.image-card-content {position: absolute; top: 69%; left: 50%; text-align: center; transform: translate(-50%); width: 90%; margin: 0 auto; font-size: 0.9rem;}
.image-card-title {font-weight: 600;}
/*case study*/
.card-block {display: grid; column-gap: 20px; row-gap: 60px; padding: 20px; grid-template-columns: repeat(3, 1fr);}
.card-img img{width: 100%; height: 270px; object-fit: cover;}
.card-img a:hover {opacity: 0.6;}
.card-body {text-align: center;}
.card-body h2 {font-size: 1.2rem; margin: 20px 0 30px; line-height: 1.4;}
.card-btn {margin-top: 20px; width: 100%; text-align: center;} .card-btn a {text-decoration: none; font-size: 0.8rem;} .view{background-color: var(--primary); color: var(--light); padding: 10px 15px; font-size: 0.8rem;}
.view:hover {background-color: var(--primary);}

.team-block {display: grid; column-gap: 20px; row-gap: 30px; padding: 20px; grid-template-columns: repeat(4, 1fr);}
.team-block {text-align: center;} .team-block h2, .main-team-block h2 {font-size: 1.5rem;}
.team-img img{width: 250px; height: 250px; object-fit: cover; border-radius: 50%; object-position: top;}
.team-body, .modal-left h2 {margin-top: 20px;} .team-body p{ margin:0; font-size: 1rem; color: var(--primary);} .team-body h2 {margin-bottom: 5px;}

.main-team-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.department-block {
    margin-bottom: 2rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #ccc;
}

.department-title {
    font-size: 2rem;
    margin-bottom: 3rem;
    font-weight: 300;
    color: var(--primary);
    margin-bottom: 25px;
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.team-card {
    text-align: center;
}



.linkedin-btn {background-color: var(--secondary); color: var(--light); padding: 7px 10px; display: flex; align-items: center; gap: 10px; margin-top: 35px;}
.linkedin-btn p {margin: 0;} .modal-left a {text-decoration: none;}
.linkedin-btn img {width: 30px;}
.blog-card-deck {display: grid; column-gap: 30px; row-gap: 30px; padding: 20px; grid-template-columns: repeat(3, 1fr);}
.blog-card {padding: 50px;}
.blog-card a {text-decoration: none;}
.blog-card h2 {font-size: 1.2rem; line-height: 1.4;}
.blog-card-deck a {text-decoration: none;}
.blog-card-deck a:hover {opacity: 0.8;}

.map-card {width: calc(33.33333%);}
.wpcf7 {width: 60%; margin: 0 auto; padding: 0; min-width: 500px;}
.wpcf7 p {padding: 0; margin: 0;}
.hgp-contact-row-split {display: flex; flex-direction: row; gap: 15px; width: 100%;}
.hgp-contact-form-cell, .hgp-contact-form-cell-white {width: 50%;}
.hgp-contact-form-cell p, .c4xd-partner-form-row p, .hgp-contact-form-cell-white p, .hgp-contact-form-row-white p {margin: 10px 0}
.hgp-contact-form-row textarea, .hgp-contact-form-row-white textarea {height: 150px}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    margin: 0;
    font-size: 14px;
    font-family: inherit;
    background-color: var(--primary);
    color: var(--light);
    border: none;
}



input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
    color: var(--light); /* Placeholder text color */;
}

input[type="submit"] {
    width: 100%;
    padding: 8px;
    border: none;
    background-color: var(--secondary);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
    font-family: inherit;
}

input[type="submit"]:hover {
    background-color: var(--tertiary);
}
.hgp-contact-form-cell-white input[type="text"]::placeholder,
.hgp-contact-form-cell-white input[type="email"]::placeholder,
.hgp-contact-form-cell-white input[type="password"]::placeholder,
.hgp-contact-form-row-white textarea::placeholder  
{color: var(--primary);}

 

.hgp-contact-form-cell-white input, .hgp-contact-form-row-white textarea {background-color: var(--light); color: var(--primary);}
/*statement-slider*/
.statement-slider {width: 100%; height: 50vh; position: relative; text-align: center;}
.statement-slider img {width: 100%; height: 100%; object-fit: cover; object-position: top;}
.statement-overlay {position: absolute; top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none; /* Ensures the overlay doesn't interfere with mouse events */}

.statement-content {position: absolute; height: 100%; width:80%; top: 0; left: 50%; transform: translate(-50%,0); display: flex; flex-direction: column; justify-content: center; color: var(--light);}
.statement-content h1 {font-size: 3.6rem;} .statement-content p {font-size: 1.2rem; font-weight: 600;}
.statement-text {text-align: center;}
.swiper {
    width: 100%;
    height: 100%;
  }
  .statement-text {
    opacity: 0;
    position: absolute;
    left: 50%;
    top:56%;
    transform: translate(-50%,0);
    transition: opacity 1s ease-in-out;
}

.statement-text.onstage {
    opacity: 1;
}


  .swiper-slide {margin-bottom: 0 !important;}
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper-button-next, .swiper-button-prev {color: var(--secondary);}
  .swiper-pagination-bullet {background-color: var(--light); opacity: 0.9; width: 12px; height: 12px;}
  .swiper-pagination-bullet-active {background-color: var(--secondary);}

  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 20%;}

/*case study*/
.case-study-details {display: flex; flex-direction: row; gap: 10px; color: var(--secondary); padding-bottom: 10px;}
.block-text .case-study-details:last-child {margin-bottom: 30px;}
.case-study-detail {font-weight: 600;}
.case-image {width: 100%; height: 100%; object-fit: cover;}
.developer-tag {background-color: var(--secondary); padding: 7px 30px; color: var(--light); width: fit-content; margin-top: 30px}
.case-post-nav {display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin: 0 auto 30px;}
.case-post-nav a {text-decoration: none;}
/*blog*/
article {width: 80%; margin: 0 auto;}
.blog-title {font-size: 2rem; margin: 30px 0 50px;}
.hgp-post-nav {display: flex; flex-direction: row; justify-content: space-between; width: 80%; margin: 0 auto;}
.next-article, .previous-article {width: 30%;}
.next-article {text-align: right;}
.hgp-post-nav a {color: var(--light); text-decoration: none;}
.hgp-post-nav h3 {font-size: 1.4rem; font-weight: 300; line-height: 1.2;}
.post-nav-icons {display: flex; align-items: center; gap: 15px; padding-bottom: 20px;}
.post-nav-icons-next {display: flex; align-items: center; gap: 15px; padding-bottom: 20px; justify-content: flex-end;}
/*contact*/
.contact-content {margin: 30px 0 0;}
.contact-icon {display: flex; align-items: center; gap: 15px;}
.contact-icon img {width: 28px; height: 28px;}
.contact-icon p {margin: 0; color: var(--secondary); font-size: 1.2rem; font-weight: 600;}
.contact-address {padding: 0 0 0 42px;}


.pillar-wrap {display:flex; flex-direction: row; width:100%; gap: 15px; margin: 5px 20px; align-items: center;}
.pilar-content {display: flex; flex-direction: row; gap: 5px}
.pilar-content p {font-size: 1.6rem; font-weight: 600;}
.pillar-icon img {width: 35px; height: auto;}



/*footer-styles*/
footer {background-color: var(--light);}
.footer-left {width: 50%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.footer-left img {overflow: visible;}
.footer-text {width: 60%;}
.footer-right {width: 50%; display: flex; flex-direction: column; align-items: flex-end;}
.footer-right ul {list-style: none;}
.footer-right .menu-item {font-size: 0.8rem; margin-bottom: 7px;}
.footer-left a, .footer-right a {text-decoration: none; color: var(--grey);}
.footer-left a:hover, .footer-right a:hover {text-decoration: none; color: var(--secondary);}
.footer-social {display: flex; gap: 15px}
.footer-social img{width: 100%; max-width: 48px;}
.footer-social a:hover {opacity: 0.6}


     
        
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background: none;
  border: none;
  font-size: 16px;
  text-align: left;
  outline: none;
  cursor: pointer;
  padding: 18px 18px 28px 18px;
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--primary);
}

.accordion-arrow {
  margin-right: 20px; /* Space between arrow and text */
  width: 20px; /* Set desired size of the arrow */
  transition: transform 0.3s ease; /* Smooth rotation */
  transform-origin: center; /* Rotate from the center of the image */
}

.accordion.active .accordion-arrow {
  transform: rotate(90deg); /* Rotate the arrow when active */
}

.panel, .alt-panel {
  display: none;
  padding: 0 0 18px 75px;
}


.panel p::before {
  content: "• "; /* Bullet point */
  font-size: 1em; /* Adjust size if needed */
  margin-right: 8px; /* Space between bullet and text */
  color: black; /* Change bullet color if needed */
}



.border-bottom {
  border-bottom: 1px solid var(--primary);
}

  


  /***modal**/
 .modal-trigger {background: none; border: none;}
.modal-trigger:hover {opacity: 0.8; cursor: pointer;}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--light);
    margin-top: 20px;
    padding: 70px 50px;
    overflow-y: auto;
    width: 65vw;
    max-height: 60vh;
}
.modal-inner
{
    display: flex;
    flex-direction: row;
    gap: 10%;
}
.modal-left {width: 25%;}
.modal-right {width: 65%; text-align: left; padding: 33px 0 20px;}
.modal-right p {margin-bottom: 30px}
.close {
    position: absolute;
    top: 0px;
    right: 25px;
    padding: 10px;
    cursor: pointer;
    color: var(--color-4);
    font-size: 50px;
}

@media screen and (max-width: 1500px) {

    .image-card-content {top:60%}

}


@media screen and (max-width: 1400px) {

    nav .container {
        padding: 0 20px;
        align-items: flex-start;
      }
      nav ul {
        display: none;
      }
      nav.scrolled ul {
        display: none;
      }
      nav.scrolled ul li {
        margin: 10px 0;
      }
    
      /* Show hamburger icon */
      .hamburger-wrap
      {position: relative;}
    
      .hamburger-icon {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: var(--primary-color);
        position: fixed; /* Changed from absolute to fixed */
        top: 30px;
        right: 10%;
        width: 30px;
        margin-top: 5px;
        z-index: 300; /* Ensures it's above other elements */
    }
    
    
      .hamburger-icon div {height: 22px;}
      
      .hamburger-icon span {
        display: block;
        width: 30px;
        height: 3px;
        margin-bottom: 5px;
        position: absolute;
        background: var(--light);
        transition: transform 0.4s, opacity 0.4s;
        z-index: 300;
      }
      
      .hamburger-icon span:nth-child(1) {
        top: 0;
      }
      
      .hamburger-icon span:nth-child(2) {
        top: 8px;
      }
      
      .hamburger-icon span:nth-child(3) {
        top: 16px;
      }
      
      .hamburger-icon.open span:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
      }
      
      .hamburger-icon.open span:nth-child(2) {
        opacity: 0;
      }
      
      .hamburger-icon.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
      }
    
      nav.scrolled .hamburger-icon {
        display: block;
    }
    /* Full screen overlay menu */
    .overlay-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--primary);
      z-index: 150;
      padding-top: 60px; /* Account for fixed navbar height */
      opacity: 0; /* Initially hidden */
    }
    
    .overlay-menu.show {
      display: block;
      opacity: 1; /* Show with fade-in effect */
      transition: opacity 0.4s ease;
    }
    
    
      .overlay-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 8vh 0 0;
        text-align: center;
      }
    
      .overlay-menu ul li {
        margin-top: 20px;
      }
    
      .overlay-menu ul li a {
        color: var(--light);
        font-size: 24px;
        text-decoration: none;
      }
      .overlay-menu .current-menu-item {border-bottom: none;}

      .overlay-menu .menu-item-has-children {position: relative; display: block;}
      .overlay-menu .menu-item-has-children .sub-menu {margin:0}
      .overlay-menu .menu-item-has-children::after {color:#fff}
      .overlay-menu .menu-item-has-children .sub-menu {display: none; top: 0; padding: 5px 10px 10px; position: relative; border-bottom: none;}
        .menu-item-has-children .sub-menu li{display: block; width: auto; margin: 0;}
        .menu-item-has-children:hover > .sub-menu {display:block }
  

}

@media screen and (max-width: 1200px) {

    .image-card-content {top:45%}

}

@media (max-width: 800px) {

    h1 {font-size: 3rem;}
    h2 {font-size: 3rem;}
    h3 {font-size: 2.4rem;}
    .hamburger-icon {
        top: 30px;
      }
    header {
        height: 100px;
        padding: 20px 0 20px;
    }
    .hgp-logo {width: 200px; height: auto;}
    .hgp-block {text-align: center; width: 86%; padding: 11% 7%;}
    .hgp-block-alt {text-align: center; width: 86%; padding: 11% 7% ;}
    .dbl-block {flex-direction: column;}
    .left-block, .right-block {width: 100% ; text-align: center;}
    .flex-row {flex-direction: column;}
    .fact-card {width: 100%;}
    .wpcf7 {width: 100%; min-width: 300px;}
    .hero-text-wrap {height: 300px; overflow: hidden;}
    .secondary-hero .hero-content, .tertiary-hero .hero-content {width: 80%}


    
    .statement-content {width: 80%; left: 10%}
      .med-flex-ch {flex-direction: column;}
      .med-flex-ch .c4xd-split-left {width: 80%; margin: 0 auto;}
      .c4xd-split-special {width: 100%;}
      .floating-points-c4xd {width: 100%}

      .hgp-contact-row-split {flex-direction: column; gap: 0;}
      .hgp-contact-form-cell {width: 100%;}
      .img-content-block {flex-direction: column; text-align: center;}
      .reverse {flex-direction: column-reverse;}
      .image-block, .content-block {width: 100%; display: flex;}
      .contents-wrap {padding: 55px;}
      .card-block, .team-block, .blog-card-deck, .value-card-deck {grid-template-columns: repeat(1, 1fr);}
      .block-text {text-align: center;}
      .case-study-details {justify-content: center;}
      .developer-tag {width: 86%; text-align: center; margin-bottom: 30px;}
      .contact-icon {justify-content: center;}

        .hgp-inner-block {flex-direction: column;}
        .og-left, .og-right {width: 100%; justify-content: center; align-items: center;}
        .image-card {width: 100%}
    
        .modal-content {height: 75vh; overflow: scroll;}
        .modal-inner {flex-direction: column; align-items: center; text-align: center;}
        .modal-left,.modal-right {width: 100%; text-align: center;}

 

        .map-card {width: 100%}
        


      .footer-left, .footer-right {width: 100%; align-items: center;}
      .footer-text {width: unset;}
      .footer-right ul {padding: 0;}




}




.department {margin: 0 0 30px;}

#load-more {
    display: block;
    width: 30%;
    padding: 10px;
    margin: 80px auto 50px;
    text-align: center;
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#load-more:hover {
    background-color: var(--secondary);
}

#load-more.disabled {
    background-color: #ececec; /* Grey out the button */
    color: #f9f9f9; /* Text color for the disabled button */
    cursor: not-allowed; /* Change cursor to indicate that the button is not clickable */
}

.page-filter-wrap {padding: 5px 0; width: 70%; margin: 15px auto 0; border-top: 1px solid var(--dark); border-bottom: 1px solid var(--dark); position: relative;}
.page-filter {width: 100%; background-color: var(--light2); border: none; }

.filter-block {margin-bottom: 25px;}
.filter-wrap {width: 60%; margin: 0 auto; display: flex; gap: 4%; align-items: end;}
.cs-drop{width: 40%; }
.cs-drop h3 {font-size: 1.8rem;}
.cs-drop select{width: 100%; margin: 12px 0 0 ; border: none; background-color: var(--light2); border-top: 1px solid #444; border-bottom: 1px solid #444; padding: 3px 0; -webkit-appearance: none !important; appearance: none;} 

.filter-wrap button {width: 20%; height: 30px; border: none; background-color: var(--primary); color: var(--light); cursor: pointer;}
.filter-wrap button:hover {opacity: 0.8;}

.hgp-team-filter {width: 60%; margin: 12px 0 0 ; border: none; background-color: var(--light2); border-top: 1px solid #444; border-bottom: 1px solid #444; padding: 3px 0; } 

.img-map img{width:100%;}



.pagination {
  display: flex;
  justify-content: center; /* Center the pagination */
  align-items: center;
  padding: 20px 0; /* Add padding for spacing */
  margin: 50px 0; /* Add margin for spacing */
  grid-column: span 3;
}

.page-numbers {
  display: inline-block;
  padding: 10px 15px; /* Padding around page numbers */
  margin: 0 5px; /* Space between buttons */
  background-color: var(--light2); /* Light background for buttons */
  color: var(--dark); /* Dark text color */
  text-decoration: none; /* Remove underline */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.page-numbers:hover {
  background-color: var(--primary); /* Change background on hover */
  color: white; /* Change text color on hover */
}

.current {
  background-color: var(--primary); /* Highlight current page */
  color: white; /* Current page text color */
  pointer-events: none; /* Prevent interaction with current page */
  font-weight: bold; /* Make current page bold */
}

.prev, .next {
  font-weight: bold; /* Bold style for prev/next buttons */
}

.prev:hover, .next:hover {
  background-color: var(--primary); /* Change background on hover */
  color: white; /* Change text color on hover */
}


@media (max-width: 600px) {

    .pillar-contents-wrap {padding: 50px 10px}
    .pillar-wrap {flex-direction: column; width:100%; align-items: center; margin: 15px 0 35px; gap: 0;}
    .pillar-content {width: 100%;} .pillar-content p {font-size: 1.2rem;}
  .hero-content-home {top: 32%}
  .secondary-hero, .tertiary-hero, .article-hero {width: 100%; height: 50vh; position: relative;}
  .secondary-hero img, .tertiary-hero img, .article-hero img {object-position: left;}
  .hero-content, .hero-content-2
  {top: 40%;}
  .secondary-hero .hero-content, .tertiary-hero .hero-content {top: 45%}
  .contact-row .block-text {text-align: left;}

        .lrg-title {height: 60vh;}
        .lrg-title .hero-content {top: 35%;}
  
  .block-row {text-align: left;}
  .block-row-central {text-align: center;}
  .hgp-block-cs {padding: 10% 4%;}
  .hgp-block-cs .left-block {text-align: left;}
  .hgp-block-cs .left-block a {color: var(--secondary);}
  .article-wrap .hgp-block{text-align: left;}
  .case-study-details {justify-content: flex-start;}
  .value-card-deck {row-gap: 20px;}
  .statement-slider img {object-position: left;}
    .page-numbers {
      padding: 8px 10px; /* Adjust padding for smaller screens */
      margin: 0 3px; /* Adjust margin for smaller screens */
      }
      .pagination {grid-column: span 1;}
  
      .hgp-block-sgl {
        width: 90%;
        margin: 0 auto;
        padding: 10% 5%;
        }
        .statement-text {width: 100%}
        .statement-content {
          width: 90%;
          left: 50%;
      }
      .footer-social 
      {margin-top: 50px}
      .footer-right {text-align: center; padding: 20px 0;}
      .hgp-block-footer {text-align: center; padding: 50px 0;}
      .img-content-block {height: unset;}
      .hgp-block-nrw {width: 90%; padding: 0; margin: 70px auto;}
      .filter-wrap {flex-direction: column; width: 90%}
      .cs-drop {width: 100%; padding-top: 25px;}
      .filter-wrap button {width: 100%; margin-top: 25px;}
      .hgp-contact-form-cell, .hgp-contact-form-cell-white {width: 100%;}
      .modal-right iframe {width: 100%}
      .contact-address {padding: 0;}
      .hgp-post-nav {flex-direction: column;}
      .next-article, .previous-article {width: 100%;}
      .next-article {text-align: center;}
      
      .panel {padding: 0 15px 18px 55px;}
      #department-select, .cs-drop select {
        color: var(--primary);
        text-align: center;
        -webkit-appearance: none !important;
        appearance: none !important;
        display: flex;
        justify-content: center;
        text-align-last: center; /* Ensure the last line of text aligns center */
    }
    .hgp-team-filter {margin: 0 auto;}
      .w-60 {width: 80%;}
  }

  @media only screen and (max-width: 1200px) and (orientation: landscape) {
    .secondary-hero, .tertiary-hero, .article-hero {width: 100%; height: 100vh; position: relative;}
    .secondary-hero .hero-content, .tertiary-hero .hero-content, .hero-content-2
  {top: 35%;}
  .img-content-block {height: unset;}
  .modal-right iframe {width: 100%}
}

[type=button], [type=select] {-webkit-appearance: none; appearance: none; color: var(--dark);}