:root { --hhg-red: #37517e; --hhg-red-dark: #2a3f61; --hhg-red-light: #47b2e4; --hhg-primary: #37517e; --hhg-primary-dark: #2a3f61;
--hhg-primary-light: #47b2e4;
--hhg-accent: #47b2e4; --hhg-navy: #0a1f44; --hhg-black: #1a1a1a;
--hhg-dark: #2d2d2d;
--hhg-gray: #666666;
--hhg-gray-light: #f3f5fa;
--hhg-gray-medium: #e0e0e0;
--hhg-white: #ffffff;
--hhg-footer-bg: #0a1f44;
--hhg-footer-top: #0f2a52;
--hhg-font-primary: 'Noto Sans', sans-serif;
--hhg-font-secondary: 'Noto Sans', sans-serif;
--hhg-font-serif: Georgia, 'Lora', serif;
--hhg-font-arabic: 'Noto Sans Arabic', sans-serif;
--hhg-header-height: 80px;
--hhg-container-max: 1280px;
--hhg-container-wide: 1400px;
--hhg-transition: 0.3s ease;
--hhg-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
--hhg-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--hhg-font-primary);
font-size: 16px;
line-height: 1.7;
color: var(--hhg-black);
background-color: var(--hhg-white);
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--hhg-red);
text-decoration: none;
transition: color var(--hhg-transition);
}
a:hover {
color: var(--hhg-red-dark);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--hhg-font-serif);
font-weight: 700;
line-height: 1.3;
color: var(--hhg-black);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; } .hhg-container {
width: 100%;
max-width: var(--hhg-container-max);
margin: 0 auto;
padding: 0 20px;
} .hhg-btn {
display: inline-block;
padding: 12px 32px;
font-size: 0.95rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
border-radius: 0;
transition: all var(--hhg-transition);
cursor: pointer;
border: 2px solid transparent;
text-decoration: none;
transform: skewX(-8deg);
}
.hhg-btn > *,
.hhg-btn span {
display: inline-block;
transform: skewX(8deg);
}
.hhg-btn-primary {
background-color: var(--hhg-red);
color: var(--hhg-white);
border-color: var(--hhg-red);
}
.hhg-btn-primary:hover {
background-color: var(--hhg-red-dark);
border-color: var(--hhg-red-dark);
color: var(--hhg-white);
}
.hhg-btn-outline {
background-color: transparent;
color: var(--hhg-white);
border-color: var(--hhg-white);
}
.hhg-btn-outline:hover {
background-color: var(--hhg-white);
color: var(--hhg-red);
} .hhg-section-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 16px;
position: relative;
font-style: normal;
font-family: var(--hhg-font-serif);
}
.hhg-section-subtitle {
font-size: 1rem;
color: var(--hhg-gray);
max-width: 700px;
line-height: 1.6;
}
.hhg-section-header {
margin-bottom: 40px;
}
.hhg-section-header-flex {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.hhg-section-cta {
text-align: center;
margin-top: 40px;
} .hhg-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--hhg-white);
box-shadow: var(--hhg-shadow);
height: var(--hhg-header-height);
transition: all var(--hhg-transition);
}
.hhg-header-inner {
max-width: var(--hhg-container-wide);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 30px;
} .hhg-logo a {
display: flex;
align-items: center;
}
.hhg-logo img,
.hhg-logo-img {
max-height: 55px;
width: auto;
}
.hhg-logo-text {
display: flex;
flex-direction: column;
text-decoration: none;
}
.hhg-logo-main {
font-size: 1.4rem;
font-weight: 800;
color: var(--hhg-red);
line-height: 1.2;
}
.hhg-logo-sub {
font-size: 0.7rem;
color: var(--hhg-gray);
letter-spacing: 0.5px;
} .hhg-nav {
flex: 1;
display: flex;
justify-content: center;
}
.hhg-menu {
list-style: none;
display: flex;
gap: 0;
margin: 0;
padding: 0;
}
.hhg-menu-item {
position: relative;
}
.hhg-menu-link {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 16px;
font-size: 0.9rem;
font-weight: 500;
color: var(--hhg-black);
text-decoration: none;
transition: color var(--hhg-transition);
white-space: nowrap;
}
.hhg-menu-link:hover,
.hhg-menu-item.current-menu-item > .hhg-menu-link,
.hhg-menu-item.current-menu-ancestor > .hhg-menu-link {
color: var(--hhg-red);
}
.hhg-menu-link i {
font-size: 0.65rem;
transition: transform var(--hhg-transition);
} .hhg-submenu {
list-style: none;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--hhg-white);
box-shadow: var(--hhg-shadow-hover);
border-top: 3px solid var(--hhg-red);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--hhg-transition);
z-index: 100;
padding: 8px 0;
}
.hhg-menu-item:hover > .hhg-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hhg-submenu .hhg-menu-link {
padding: 8px 20px;
font-size: 0.85rem;
}
.hhg-submenu .hhg-menu-link:hover {
background: var(--hhg-gray-light);
color: var(--hhg-red);
} .hhg-header-social {
display: flex;
gap: 12px;
align-items: center;
}
.hhg-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--hhg-black);
font-size: 1rem;
transition: color var(--hhg-transition);
}
.hhg-social-icon:hover {
color: var(--hhg-red);
} .hhg-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.hhg-menu-toggle span {
display: block;
width: 28px;
height: 3px;
background: var(--hhg-black);
border-radius: 2px;
transition: all var(--hhg-transition);
}
.hhg-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}
.hhg-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.hhg-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
} .hhg-hero {
position: relative;
height: 85vh;
min-height: 550px;
max-height: 900px;
margin-top: var(--hhg-header-height);
overflow: hidden;
}
.hhg-hero-slider {
position: absolute;
inset: 0;
z-index: 1;
}
.hhg-hero-slider .swiper-wrapper,
.hhg-hero-slider .swiper-slide {
height: 100%;
}
.hhg-hero-slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hhg-hero-placeholder {
background: linear-gradient(135deg, #2d2d2d 0%, #555 100%);
}
.hhg-hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
display: flex;
align-items: center;
}
.hhg-hero-content {
max-width: 600px;
color: var(--hhg-white);
}
.hhg-hero-title {
font-size: 3.5rem;
font-weight: 700;
font-family: var(--hhg-font-serif);
color: var(--hhg-white);
margin-bottom: 16px;
line-height: 1.15;
}
.hhg-hero-text {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 30px;
opacity: 0.9;
}
.hhg-hero-content .hhg-btn {
margin-right: 12px;
margin-bottom: 12px;
} .hhg-hero-slide-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0 60px;
color: var(--hhg-white);
z-index: 3;
max-width: 620px;
}
.hhg-hero-slide-content h2 {
font-size: 2.2rem;
font-weight: 700;
color: var(--hhg-white);
margin-bottom: 14px;
line-height: 1.2;
}
.hhg-hero-slide-content p {
font-size: 0.95rem;
color: rgba(255,255,255,0.9);
max-width: 550px;
line-height: 1.7;
text-align: justify;
}
.hhg-hero-slide-content .hhg-hero-btn {
display: inline-block;
margin-top: 20px;
padding: 12px 32px;
border: none;
color: var(--hhg-dark);
font-size: 1rem;
font-weight: 400;
text-decoration: none;
transition: all var(--hhg-transition);
background: var(--hhg-white);
transform: skewX(-8deg);
}
.hhg-hero-slide-content .hhg-hero-btn span {
display: inline-block;
transform: skewX(8deg);
}
.hhg-hero-slide-content .hhg-hero-btn:hover {
background: rgba(255,255,255,0.85);
color: var(--hhg-dark);
} .hhg-hero .swiper-pagination {
bottom: 20px;
z-index: 5;
}
.hhg-hero .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: rgba(255,255,255,0.5);
opacity: 1;
}
.hhg-hero .swiper-pagination-bullet-active {
background: var(--hhg-white);
} .hhg-stats {
padding: 80px 0;
background: var(--hhg-gray-light);
}
.hhg-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.hhg-stat-item {
text-align: left;
}
.hhg-stat-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--hhg-red);
line-height: 1;
margin-bottom: 4px;
font-family: var(--hhg-font-primary);
}
.hhg-stat-label {
font-size: 1rem;
font-weight: 600;
color: var(--hhg-black);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
.hhg-stat-desc {
font-size: 0.9rem;
color: var(--hhg-gray);
line-height: 1.6;
} .hhg-quote-section {
padding: 80px 0;
}
.hhg-quote-red {
background: var(--hhg-red);
color: var(--hhg-white);
}
.hhg-quote-dark {
background: var(--hhg-dark);
color: var(--hhg-white);
}
.hhg-quote-wrapper {
text-align: center;
max-width: 850px;
margin: 0 auto;
}
.hhg-quote-arabic {
font-family: var(--hhg-font-arabic);
direction: rtl;
margin-bottom: 24px;
}
.hhg-quote-arabic p {
font-size: 1.3rem;
line-height: 2;
color: var(--hhg-white);
}
.hhg-quote-arabic cite,
.hhg-quote-english cite {
display: block;
font-style: normal;
font-size: 0.9rem;
opacity: 0.8;
margin-top: 8px;
}
.hhg-quote-english p {
font-family: var(--hhg-font-primary);
font-style: italic;
font-size: 1.15rem;
line-height: 1.8;
color: var(--hhg-white);
} .hhg-quote-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hhg-quote-text-col blockquote {
margin-bottom: 24px;
}
.hhg-founder-placeholder {
width: 100%;
aspect-ratio: 3/4;
background: rgba(255,255,255,0.1);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(255,255,255,0.3);
} .hhg-about-section {
padding: 0;
}
.hhg-about-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
}
.hhg-about-image {
position: relative;
overflow: hidden;
}
.hhg-about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hhg-about-placeholder {
width: 100%;
height: 100%;
min-height: 400px;
background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--hhg-gray-medium);
}
.hhg-about-content {
padding: 80px 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hhg-about-content .hhg-btn {
align-self: flex-start;
}
.hhg-about-text p {
margin-bottom: 16px;
color: var(--hhg-gray);
line-height: 1.8;
} .hhg-vm-section {
padding: 80px 0;
background: var(--hhg-gray-light);
}
.hhg-vm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hhg-vm-block {
margin-bottom: 40px;
}
.hhg-vm-block:last-child {
margin-bottom: 0;
}
.hhg-vm-block p {
color: var(--hhg-gray);
line-height: 1.8;
}
.hhg-vm-image {
position: relative;
}
.hhg-vm-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--hhg-gray-medium), #c0c0c0);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--hhg-white);
} .hhg-products-section {
padding: 80px 0;
background: var(--hhg-white);
}
.hhg-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;
}
.hhg-product-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 16px;
background: var(--hhg-white);
border: 1px solid var(--hhg-gray-medium);
border-radius: 0;
transition: all var(--hhg-transition);
text-decoration: none;
color: var(--hhg-black);
}
.hhg-product-card:hover {
box-shadow: var(--hhg-shadow-hover);
border-color: var(--hhg-red);
transform: translateY(-4px);
color: var(--hhg-black);
}
.hhg-product-image {
width: 110px;
height: 110px;
overflow: hidden;
border-radius: 0;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.hhg-product-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--hhg-transition);
}
.hhg-product-card:hover .hhg-product-image img {
transform: scale(1.05);
}
.hhg-product-placeholder,
.hhg-product-icon {
width: 110px;
height: 110px;
background: var(--hhg-gray-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--hhg-red);
border-radius: 0;
margin: 0 auto 14px;
}
.hhg-product-name {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
}
.hhg-product-desc {
font-size: 0.85rem;
color: var(--hhg-gray);
line-height: 1.6;
margin-top: 8px;
} .hhg-products-grid-full {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 30px;
}
.hhg-products-grid-full .hhg-product-card {
padding: 30px 20px;
} .hhg-standards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;
}
.hhg-standard-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
background: var(--hhg-white);
border: 1px solid var(--hhg-gray-medium);
border-radius: 0;
transition: all var(--hhg-transition);
}
.hhg-standard-card:hover {
box-shadow: var(--hhg-shadow-hover);
border-color: var(--hhg-red);
transform: translateY(-4px);
}
.hhg-standard-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--hhg-gray-light);
border-radius: 50%;
margin-bottom: 12px;
font-size: 1.8rem;
color: var(--hhg-red);
}
.hhg-standard-icon img {
width: 52px;
height: 52px;
object-fit: contain;
}
.hhg-standard-card h4 {
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
}
.hhg-standard-card p {
font-size: 0.8rem;
color: var(--hhg-gray);
line-height: 1.5;
} .hhg-projects-section {
padding: 80px 0;
background: var(--hhg-gray-light);
}
.hhg-projects-carousel {
overflow: hidden;
padding: 0 20px;
}
.hhg-project-card {
display: block;
text-decoration: none;
color: var(--hhg-black);
background: var(--hhg-white);
border-radius: 0;
overflow: hidden;
box-shadow: var(--hhg-shadow);
transition: all var(--hhg-transition);
}
.hhg-project-card:hover {
box-shadow: var(--hhg-shadow-hover);
transform: translateY(-4px);
color: var(--hhg-black);
}
.hhg-project-image {
width: 100%;
aspect-ratio: 3/2;
overflow: hidden;
}
.hhg-project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--hhg-transition);
}
.hhg-project-card:hover .hhg-project-image img {
transform: scale(1.05);
}
.hhg-project-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e0e0e0, #ccc);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--hhg-gray);
}
.hhg-project-name {
padding: 16px 20px;
font-size: 1rem;
font-weight: 600;
}
#projectsSlider {
overflow: visible;
padding-bottom: 50px;
}
#projectsSlider .swiper-slide {
width: 320px;
}
#projectsPagination {
text-align: center;
}
#projectsPagination .swiper-pagination-bullet {
background: var(--hhg-red);
} .hhg-news-section {
padding: 80px 0;
background: var(--hhg-white);
}
.hhg-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
}
.hhg-news-card {
background: var(--hhg-white);
border-radius: 0;
overflow: hidden;
box-shadow: var(--hhg-shadow);
transition: all var(--hhg-transition);
}
.hhg-news-card:hover {
box-shadow: var(--hhg-shadow-hover);
transform: translateY(-4px);
}
.hhg-news-image {
display: block;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
}
.hhg-news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--hhg-transition);
}
.hhg-news-card:hover .hhg-news-image img {
transform: scale(1.05);
}
.hhg-news-placeholder {
width: 100%;
height: 100%;
background: var(--hhg-gray-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--hhg-gray-medium);
}
.hhg-news-content {
padding: 20px 24px;
}
.hhg-news-title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.4;
}
.hhg-news-title a {
color: var(--hhg-black);
text-decoration: none;
}
.hhg-news-title a:hover {
color: var(--hhg-red);
}
.hhg-news-excerpt {
font-size: 0.9rem;
color: var(--hhg-gray);
margin-bottom: 14px;
line-height: 1.6;
}
.hhg-read-more {
font-size: 0.85rem;
font-weight: 600;
color: var(--hhg-red);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hhg-read-more:hover {
color: var(--hhg-red-dark);
}
.hhg-no-news {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: var(--hhg-gray);
} .hhg-video-section {
position: relative;
height: 450px;
overflow: hidden;
}
.hhg-video-bg {
position: absolute;
inset: 0;
}
.hhg-video-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hhg-video-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
}
.hhg-video-content {
text-align: center;
color: var(--hhg-white);
max-width: 600px;
padding: 0 20px;
}
.hhg-video-content h2 {
font-size: 2rem;
font-weight: 700;
color: var(--hhg-white);
margin-bottom: 16px;
}
.hhg-video-content p {
font-size: 1rem;
color: rgba(255,255,255,0.85);
margin-bottom: 30px;
line-height: 1.7;
}
.hhg-video-play {
display: inline-block;
transition: transform var(--hhg-transition);
}
.hhg-video-play img {
width: 80px;
height: 80px;
filter: brightness(0) invert(1);
}
.hhg-video-play:hover {
transform: scale(1.15);
} .hhg-page-banner {
position: relative;
height: 300px;
margin-top: var(--hhg-header-height);
overflow: hidden;
}
.hhg-page-banner-bg {
position: absolute;
inset: 0;
}
.hhg-page-banner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hhg-page-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
display: flex;
align-items: flex-end;
}
.hhg-page-banner:not(:has(.hhg-page-banner-bg img)) .hhg-page-banner-overlay {
background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
}
.hhg-page-banner-title {
position: relative;
padding-bottom: 30px;
}
.hhg-page-banner-title::before {
content: '';
position: absolute;
bottom: 0;
left: -40px;
right: 50%;
height: 100%;
background: var(--hhg-red);
transform: skewX(-15deg);
transform-origin: bottom left;
z-index: 0;
opacity: 0.95;
}
.hhg-page-banner-title h1 {
position: relative;
z-index: 1;
color: var(--hhg-white);
font-size: 2rem;
font-family: var(--hhg-font-serif);
padding: 16px 30px;
} .hhg-breadcrumbs {
position: relative;
z-index: 1;
padding: 0 30px 16px;
font-size: 0.85rem;
}
.hhg-breadcrumbs a {
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: color var(--hhg-transition);
}
.hhg-breadcrumbs a:hover {
color: var(--hhg-white);
}
.hhg-breadcrumb-sep {
margin: 0 8px;
color: rgba(255,255,255,0.5);
}
.hhg-breadcrumb-current {
color: var(--hhg-white);
font-weight: 600;
} .hhg-page-content {
padding: 60px 0;
}
.hhg-article-content {
max-width: 900px;
line-height: 1.8;
color: var(--hhg-dark);
}
.hhg-article-content p {
margin-bottom: 16px;
}
.hhg-article-content h2 {
margin-top: 32px;
margin-bottom: 16px;
}
.hhg-article-content ul,
.hhg-article-content ol {
margin: 16px 0;
padding-left: 24px;
}
.hhg-article-content li {
margin-bottom: 8px;
}
.hhg-article-content img {
border-radius: 0;
margin: 24px 0;
} .hhg-article-meta {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--hhg-gray-medium);
}
.hhg-article-meta span {
font-size: 0.9rem;
color: var(--hhg-gray);
}
.hhg-article-meta i {
margin-right: 6px;
color: var(--hhg-red);
} .hhg-post-nav {
display: flex;
justify-content: space-between;
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid var(--hhg-gray-medium);
}
.hhg-post-nav a {
font-size: 0.9rem;
color: var(--hhg-gray);
}
.hhg-post-nav a:hover {
color: var(--hhg-red);
} .hhg-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.hhg-archive-card {
background: var(--hhg-white);
border-radius: 0;
overflow: hidden;
box-shadow: var(--hhg-shadow);
transition: all var(--hhg-transition);
}
.hhg-archive-card:hover {
box-shadow: var(--hhg-shadow-hover);
transform: translateY(-3px);
}
.hhg-archive-image {
display: block;
width: 100%;
aspect-ratio: 3/2;
overflow: hidden;
}
.hhg-archive-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hhg-archive-placeholder {
width: 100%;
height: 100%;
background: var(--hhg-gray-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--hhg-gray-medium);
}
.hhg-archive-content {
padding: 20px;
}
.hhg-archive-content h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.hhg-archive-content h3 a {
color: var(--hhg-black);
}
.hhg-archive-content h3 a:hover {
color: var(--hhg-red);
}
.hhg-archive-content p {
font-size: 0.9rem;
color: var(--hhg-gray);
margin-bottom: 12px;
} .hhg-pagination {
margin-top: 50px;
text-align: center;
}
.hhg-pagination .nav-links {
display: flex;
justify-content: center;
gap: 8px;
}
.hhg-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 0;
font-size: 0.9rem;
background: var(--hhg-gray-light);
color: var(--hhg-black);
text-decoration: none;
transition: all var(--hhg-transition);
}
.hhg-pagination .page-numbers.current,
.hhg-pagination .page-numbers:hover {
background: var(--hhg-red);
color: var(--hhg-white);
} .hhg-contact-intro {
padding: 60px 0;
background: var(--hhg-white);
}
.hhg-contact-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
align-items: start;
}
.hhg-contact-intro-heading h2 {
font-size: 2.2rem;
font-family: var(--hhg-font-serif);
line-height: 1.3;
}
.hhg-contact-intro-text p {
color: var(--hhg-gray);
line-height: 1.8;
}
.hhg-contact-section {
padding: 60px 0;
background: var(--hhg-gray-light);
}
.hhg-contact-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
} .hhg-contact-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.hhg-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hhg-form-row:last-of-type {
grid-template-columns: 1fr;
}
.hhg-contact-form input,
.hhg-contact-form select,
.hhg-contact-form textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--hhg-gray-medium);
border-radius: 0;
font-family: var(--hhg-font-primary);
font-size: 0.95rem;
transition: border-color var(--hhg-transition);
background: var(--hhg-white);
}
.hhg-contact-form input:focus,
.hhg-contact-form select:focus,
.hhg-contact-form textarea:focus {
outline: none;
border-color: var(--hhg-red);
} .hhg-contact-info-col h3 {
font-size: 1.1rem;
margin-bottom: 20px;
font-weight: 700;
}
.hhg-contact-info-list {
list-style: none;
padding: 0;
}
.hhg-contact-info-list li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
font-size: 0.95rem;
}
.hhg-contact-info-list i {
color: var(--hhg-red);
margin-top: 3px;
width: 20px;
text-align: center;
}
.hhg-contact-info-list a {
color: var(--hhg-black);
}
.hhg-contact-info-list a:hover {
color: var(--hhg-red);
} .hhg-map-section {
margin-top: var(--hhg-header-height);
}
.hhg-map-container {
width: 100%;
height: 350px;
overflow: hidden;
}
.hhg-map-container iframe {
width: 100%;
height: 100%;
border: 0;
} .hhg-contact-social {
display: flex;
gap: 10px;
margin-top: 20px;
}
.hhg-contact-social a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--hhg-red);
color: var(--hhg-white);
font-size: 0.9rem;
transition: all var(--hhg-transition);
}
.hhg-contact-social a:hover {
background: var(--hhg-red-dark);
color: var(--hhg-white);
transform: translateY(-2px);
} .hhg-contact-form-col h3 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 20px;
}
.hhg-contact-form-col .wpcf7 input,
.hhg-contact-form-col .wpcf7 select,
.hhg-contact-form-col .wpcf7 textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--hhg-gray-medium);
border-radius: 0;
font-family: var(--hhg-font-primary);
font-size: 0.95rem;
transition: border-color var(--hhg-transition);
background: var(--hhg-white);
}
.hhg-contact-form-col .wpcf7 input:focus,
.hhg-contact-form-col .wpcf7 select:focus,
.hhg-contact-form-col .wpcf7 textarea:focus {
outline: none;
border-color: var(--hhg-red);
}
.hhg-contact-form-col .wpcf7-submit {
background: var(--hhg-red);
color: var(--hhg-white);
border: none;
padding: 12px 32px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
border-radius: 0;
transition: background var(--hhg-transition);
}
.hhg-contact-form-col .wpcf7-submit:hover {
background: var(--hhg-red-dark);
} .hhg-footer {
background: var(--hhg-white);
border-top: 1px solid var(--hhg-gray-medium);
color: var(--hhg-dark);
}
.hhg-footer-main {
padding: 60px 0 40px;
}
.hhg-footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 40px;
}
.hhg-footer-col {
min-width: 0;
}
.hhg-footer-about img,
.hhg-footer-logo img {
max-height: 55px;
margin-bottom: 20px;
}
.hhg-footer-desc {
font-size: 0.9rem;
color: var(--hhg-gray);
line-height: 1.8;
text-align: justify;
}
.hhg-footer-title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 22px;
color: var(--hhg-dark);
}
.hhg-footer-links {
list-style: none;
padding: 0;
}
.hhg-footer-links li {
margin-bottom: 12px;
}
.hhg-footer-links a {
font-size: 0.9rem;
color: var(--hhg-gray);
transition: color var(--hhg-transition);
text-decoration: none;
}
.hhg-footer-links a:hover {
color: var(--hhg-red);
}
.hhg-footer-news {
list-style: none;
padding: 0;
}
.hhg-footer-news li {
margin-bottom: 16px;
}
.hhg-footer-news a {
font-size: 0.9rem;
font-weight: 600;
color: var(--hhg-dark);
line-height: 1.5;
display: block;
transition: color var(--hhg-transition);
text-decoration: none;
}
.hhg-footer-news a:hover {
color: var(--hhg-red);
}
.hhg-footer-contact {
list-style: none;
padding: 0;
}
.hhg-footer-contact li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 16px;
font-size: 0.9rem;
color: var(--hhg-gray);
line-height: 1.6;
}
.hhg-footer-contact i {
color: var(--hhg-dark);
margin-top: 4px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.hhg-footer-contact a {
color: var(--hhg-gray);
text-decoration: none;
transition: color var(--hhg-transition);
}
.hhg-footer-contact a:hover {
color: var(--hhg-red);
} .hhg-footer-bottom {
padding: 16px 0;
border-top: 1px solid var(--hhg-gray-medium);
}
.hhg-footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.hhg-footer-bottom p {
font-size: 0.85rem;
color: var(--hhg-gray);
margin: 0;
}
.hhg-footer-hhg-logo {
display: flex;
align-items: center;
flex-shrink: 0;
opacity: 0.85;
transition: opacity var(--hhg-transition);
}
.hhg-footer-hhg-logo:hover {
opacity: 1;
}
.hhg-footer-hhg-logo img {
height: 36px;
width: auto;
display: block;
} @media (max-width: 1024px) {
.hhg-hero-title {
font-size: 2.5rem;
}
.hhg-stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.hhg-about-split {
grid-template-columns: 1fr;
}
.hhg-about-content {
padding: 40px 30px;
}
.hhg-vm-grid {
grid-template-columns: 1fr;
}
.hhg-quote-split {
grid-template-columns: 1fr;
}
.hhg-founder-placeholder {
display: none;
}
.hhg-footer-grid {
grid-template-columns: 1fr 1fr;
}
.hhg-contact-grid {
grid-template-columns: 1fr;
}
.hhg-contact-intro-grid {
grid-template-columns: 1fr;
}
.hhg-tech-layout {
grid-template-columns: 1fr;
}
.hhg-tech-sidebar {
position: static;
}
.hhg-hero-slide-content h2 {
font-size: 1.6rem;
}
.hhg-hero-slide-content {
padding: 0 30px;
}
}
@media (max-width: 768px) {
:root {
--hhg-header-height: 65px;
} .hhg-menu-toggle {
display: flex;
}
.hhg-nav {
position: fixed;
top: var(--hhg-header-height);
left: 0;
right: 0;
bottom: 0;
background: var(--hhg-white);
flex-direction: column;
justify-content: flex-start;
padding: 20px;
transform: translateX(-100%);
transition: transform var(--hhg-transition);
overflow-y: auto;
z-index: 999;
}
.hhg-nav.active {
transform: translateX(0);
}
.hhg-menu {
flex-direction: column;
}
.hhg-menu-link {
padding: 14px 0;
font-size: 1rem;
border-bottom: 1px solid var(--hhg-gray-light);
}
.hhg-submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border-top: none;
padding-left: 20px;
background: var(--hhg-gray-light);
}
.hhg-header-social {
display: none;
} .hhg-hero {
height: 70vh;
min-height: 400px;
}
.hhg-hero-title {
font-size: 2rem;
}
.hhg-hero-text {
font-size: 0.9rem;
} .hhg-stats-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.hhg-stat-number {
font-size: 2.5rem;
} .hhg-news-grid {
grid-template-columns: 1fr;
} .hhg-archive-grid {
grid-template-columns: 1fr;
} .hhg-products-grid {
grid-template-columns: repeat(2, 1fr);
}
.hhg-products-grid-full {
grid-template-columns: repeat(2, 1fr);
} .hhg-page-banner {
height: 200px;
}
.hhg-page-banner-title h1 {
font-size: 1.5rem;
} .hhg-video-section {
height: 300px;
}
.hhg-video-content h2 {
font-size: 1.5rem;
} .hhg-download-card {
flex-direction: column;
text-align: center;
} .hhg-certificates-grid {
grid-template-columns: repeat(2, 1fr);
} .hhg-news-grid-page {
grid-template-columns: 1fr;
} .hhg-footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.hhg-footer-bottom-inner {
flex-direction: column;
text-align: center;
gap: 12px;
} .hhg-section-header-flex {
flex-direction: column;
} .hhg-form-row {
grid-template-columns: 1fr;
} .hhg-quote-arabic p {
font-size: 1.1rem;
}
.hhg-quote-english p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.hhg-hero-title {
font-size: 1.6rem;
}
.hhg-btn {
padding: 10px 24px;
font-size: 0.85rem;
}
.hhg-products-grid,
.hhg-products-grid-full {
grid-template-columns: 1fr;
}
.hhg-standards-grid {
grid-template-columns: 1fr;
}
.hhg-certificates-grid {
grid-template-columns: 1fr;
}
.hhg-downloads-grid {
grid-template-columns: 1fr;
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
.hhg-section-title {
font-size: 1.5rem;
}
.hhg-hero-slide-content {
padding: 0 20px;
max-width: 100%;
}
.hhg-hero-slide-content h2 {
font-size: 1.3rem;
}
.hhg-hero-slide-content p {
font-size: 0.85rem;
}
.hhg-hero-slide-content .hhg-hero-btn {
padding: 8px 20px;
font-size: 0.8rem;
}
} .hhg-certificates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
.hhg-certificate-card {
position: relative;
border-radius: 0;
overflow: hidden;
box-shadow: var(--hhg-shadow);
transition: all var(--hhg-transition);
cursor: pointer;
}
.hhg-certificate-card:hover {
box-shadow: var(--hhg-shadow-hover);
transform: translateY(-4px);
}
.hhg-certificate-image {
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
}
.hhg-certificate-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--hhg-transition);
}
.hhg-certificate-card:hover .hhg-certificate-image img {
transform: scale(1.05);
}
.hhg-certificate-overlay {
position: absolute;
inset: 0;
background: rgba(55,81,126,0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--hhg-transition);
color: var(--hhg-white);
text-align: center;
padding: 20px;
}
.hhg-certificate-card:hover .hhg-certificate-overlay {
opacity: 1;
}
.hhg-certificate-overlay i {
font-size: 2rem;
margin-bottom: 10px;
}
.hhg-certificate-overlay span {
font-size: 0.9rem;
font-weight: 600;
} .hhg-downloads-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
align-items: stretch;
}
.hhg-download-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: var(--hhg-white);
border: 1px solid var(--hhg-gray-medium);
border-radius: 0;
transition: all var(--hhg-transition);
height: 100%;
}
.hhg-download-card:hover {
box-shadow: var(--hhg-shadow-hover);
border-color: var(--hhg-red);
}
.hhg-download-image {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 0;
overflow: hidden;
}
.hhg-download-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hhg-download-info {
flex: 1;
min-width: 0;
}
.hhg-download-info h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.4;
} .hhg-news-grid-page {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}
.hhg-news-card-page {
background: var(--hhg-white);
border-radius: 0;
overflow: hidden;
box-shadow: var(--hhg-shadow);
transition: all var(--hhg-transition);
}
.hhg-news-card-page:hover {
box-shadow: var(--hhg-shadow-hover);
transform: translateY(-4px);
}
.hhg-news-card-image {
display: block;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
}
.hhg-news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--hhg-transition);
}
.hhg-news-card-page:hover .hhg-news-card-image img {
transform: scale(1.05);
}
.hhg-news-card-content {
padding: 20px 24px;
}
.hhg-news-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--hhg-gray);
margin-bottom: 8px;
}
.hhg-news-date i {
color: var(--hhg-red);
}
.hhg-news-card-content h3 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.4;
}
.hhg-news-card-content p {
font-size: 0.9rem;
color: var(--hhg-gray);
margin-bottom: 14px;
line-height: 1.6;
} .hhg-tech-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
align-items: flex-start;
}
.hhg-tech-sidebar {
position: sticky;
top: calc(var(--hhg-header-height) + 20px);
}
.hhg-tech-sidebar h3 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--hhg-red);
}
.hhg-tech-nav {
list-style: none;
padding: 0;
margin: 0;
}
.hhg-tech-nav li {
margin-bottom: 2px;
}
.hhg-tech-nav a,
.hhg-tech-nav .page_item a {
display: block;
padding: 10px 16px;
font-size: 0.9rem;
color: var(--hhg-dark);
text-decoration: none;
border-radius: 0;
transition: all var(--hhg-transition);
border-left: 3px solid transparent;
}
.hhg-tech-nav a:hover,
.hhg-tech-nav .page_item a:hover,
.hhg-tech-nav .current_page_item > a {
background: var(--hhg-gray-light);
color: var(--hhg-red);
border-left-color: var(--hhg-red);
}
.hhg-tech-nav .children {
list-style: none;
padding-left: 16px;
margin: 0;
}
.hhg-tech-content {
min-width: 0;
} .hhg-mb-40 {
margin-bottom: 40px;
}
.hhg-mt-60 {
margin-top: 60px;
}
.hhg-btn-sm {
padding: 8px 20px;
font-size: 0.85rem;
}
.hhg-main {
min-height: 50vh;
}
.hhg-article {
margin-bottom: 40px;
}
.hhg-no-content {
text-align: center;
padding: 60px 20px;
color: var(--hhg-gray);
}
.hhg-no-content i {
font-size: 3rem;
color: var(--hhg-gray-medium);
margin-bottom: 16px;
display: block;
} .hhg-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.hhg-fade-in.visible {
opacity: 1;
transform: translateY(0);
} ::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--hhg-gray-light);
}
::-webkit-scrollbar-thumb {
background: var(--hhg-red);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--hhg-red-dark);
} ::selection {
background: var(--hhg-red);
color: var(--hhg-white);
} .aligncenter {
display: block;
margin: 0 auto;
}
.alignleft {
float: left;
margin: 0 20px 20px 0;
}
.alignright {
float: right;
margin: 0 0 20px 20px;
}
.wp-caption {
max-width: 100%;
}
.wp-caption-text {
font-size: 0.85rem;
color: var(--hhg-gray);
margin-top: 8px;
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
} .hhg-breadcrumbs-section {
background: var(--hhg-gray-light);
padding: 14px 0;
border-bottom: 1px solid var(--hhg-gray-medium);
}
.hhg-breadcrumbs-section .hhg-breadcrumbs {
padding: 0;
font-size: 0.85rem;
color: var(--hhg-gray);
}
.hhg-breadcrumbs-section .hhg-breadcrumbs a {
color: var(--hhg-red);
text-decoration: none;
transition: color var(--hhg-transition);
}
.hhg-breadcrumbs-section .hhg-breadcrumbs a:hover {
color: var(--hhg-red-dark);
}
.hhg-breadcrumbs-section .hhg-breadcrumb-sep {
color: var(--hhg-gray);
}
.hhg-breadcrumbs-section .hhg-breadcrumb-current {
color: var(--hhg-black);
font-weight: 600;
} .hhg-news-single .hhg-article-title {
font-size: 2rem;
font-weight: 700;
color: var(--hhg-red);
margin-bottom: 12px;
}
.hhg-news-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}
.hhg-gallery-item {
position: relative;
border-radius: 0;
overflow: hidden;
box-shadow: var(--hhg-shadow);
}
.hhg-gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform var(--hhg-transition);
}
.hhg-gallery-item:hover img {
transform: scale(1.03);
} .hhg-enquiry-form .wpcf7 {
max-width: 800px;
margin: 0 auto;
}
.hhg-enquiry-form .wpcf7 input[type="text"],
.hhg-enquiry-form .wpcf7 input[type="email"],
.hhg-enquiry-form .wpcf7 input[type="tel"],
.hhg-enquiry-form .wpcf7 textarea,
.hhg-enquiry-form .wpcf7 select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--hhg-gray-medium);
border-radius: 0;
font-family: var(--hhg-font-primary);
font-size: 0.95rem;
transition: border-color var(--hhg-transition);
}
.hhg-enquiry-form .wpcf7 input:focus,
.hhg-enquiry-form .wpcf7 textarea:focus,
.hhg-enquiry-form .wpcf7 select:focus {
outline: none;
border-color: var(--hhg-red);
}
.hhg-enquiry-form .wpcf7 input[type="submit"] {
background: var(--hhg-red);
color: var(--hhg-white);
border: none;
padding: 12px 32px;
border-radius: 0;
cursor: pointer;
font-weight: 600;
transition: background var(--hhg-transition);
}
.hhg-enquiry-form .wpcf7 input[type="submit"]:hover {
background: var(--hhg-red-dark);
} a.hhg-product-card {
text-decoration: none;
color: inherit;
display: flex;
}
a.hhg-product-card:hover {
color: inherit;
} .hhg-back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 44px;
height: 44px;
background: var(--hhg-red);
color: var(--hhg-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
text-decoration: none;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--hhg-transition);
z-index: 999;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.hhg-back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hhg-back-to-top:hover {
background: var(--hhg-red-dark);
color: var(--hhg-white);
transform: translateY(-3px);
} .hhg-gallery-item a {
display: block;
position: relative;
}
.hhg-gallery-zoom {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(55, 81, 126, 0.5);
color: #fff;
font-size: 24px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.hhg-gallery-item a:hover .hhg-gallery-zoom {
opacity: 1;
}