199 lines
7.7 KiB
CSS
199 lines
7.7 KiB
CSS
:root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";}
|
||
.header-logo .logo img{width:260px;}
|
||
.th-menu-wrapper .mobile-logo img{width:180px;}
|
||
.th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);}
|
||
.breadcumb-wrapper{background-repeat:no-repeat;background-position:center center;background-image:url('/assets/images/breadcumb-bg.jpg');background-size:cover;}
|
||
.hero-inner{position:relative;background-color:var(--brand-dark, #101840);min-height:640px;}
|
||
.hero-5 .hero-inner{min-height:720px;}
|
||
.hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1;pointer-events:none;}
|
||
.hero-inner .container{position:relative;z-index:2;}
|
||
.hero-style5 .sub-title2.sub{color:#fff !important;}
|
||
.hero-style5 .hero-title,.hero-style5 .hero-text{color:#fff !important;}
|
||
.slider-area .slider-arrow{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.2);color:#fff;border:none;cursor:pointer;transition:0.3s;font-size:18px;}
|
||
.slider-area .slider-arrow:hover{background:var(--brand-primary, #FA2D39);}
|
||
.slider-area .slider-controller{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px;}
|
||
.slider-area .slider-pagination{display:flex;align-items:center;gap:6px;}
|
||
.slider-area .slider-pagination button{width:12px;height:12px;border-radius:50%;border:none;background:#999;opacity:0.4;cursor:pointer;padding:0;transition:0.3s;}
|
||
.slider-area .slider-pagination button.active{opacity:1;background:var(--brand-primary, #FA2D39);}
|
||
|
||
.slider-wrap .slider-arrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.2);
|
||
color: #fff;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
font-size: 18px;
|
||
}
|
||
.slider-wrap .slider-arrow:hover {
|
||
background: var(--brand-primary, #FA2D39);
|
||
}
|
||
|
||
/* Project section slider - light background, so arrows need dark colors */
|
||
.elementor-element-46cde4a .slider-arrow {
|
||
background: rgba(0,0,0,0.08);
|
||
color: #333;
|
||
}
|
||
.elementor-element-46cde4a .slider-arrow:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
.elementor-element-148606f .swiper-pagination-fraction .swiper-pagination-current {
|
||
color: #fff;
|
||
}
|
||
|
||
.promist-btn { justify-content: center; }
|
||
.promist-btn .promist-logo { transition: margin 0.3s; }
|
||
.promist-btn .fa-arrow-right { opacity: 0; transition: opacity 0.3s; }
|
||
.promist-btn:hover { background-color: #101840 !important; border-color: #101840 !important; }
|
||
.promist-btn:hover .promist-logo { margin-right: 8px; }
|
||
.promist-btn:hover .fa-arrow-right { opacity: 1; }
|
||
|
||
/* Tab menu spacing */
|
||
.tab-menu2 {
|
||
justify-content: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* ── Services Dropdown (2×4 grid, frosted glass) ── */
|
||
.header-layout5 .main-menu ul.sub-menu {
|
||
min-width: 480px;
|
||
padding: 20px 24px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px 24px;
|
||
left: -30px;
|
||
background: rgba(16, 25, 64, 0.88);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border-radius: 16px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||
}
|
||
.header-layout5 .main-menu ul.sub-menu li {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.header-layout5 .main-menu ul.sub-menu li a {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
padding: 10px 14px;
|
||
color: rgba(255,255,255,0.85);
|
||
border-radius: 8px;
|
||
transition: background 0.2s, color 0.2s;
|
||
display: block;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.header-layout5 .main-menu ul.sub-menu li a:hover {
|
||
background: rgba(255,255,255,0.1);
|
||
color: #fff;
|
||
padding-left: 14px;
|
||
}
|
||
/* Remove the diamond icon that collides with text on hover */
|
||
.header-layout5 .main-menu ul.sub-menu li a:before,
|
||
.header-layout5 .main-menu ul.sub-menu li a:hover:before {
|
||
display: none;
|
||
}
|
||
|
||
/* ── MOBILE RESPONSIVE OVERRIDES ── */
|
||
@media (max-width: 767px) {
|
||
/* === Header: reduce overlap and size === */
|
||
.header-layout5 { margin-bottom: 0 !important; }
|
||
.header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; }
|
||
.header-layout5 .header-logo { transform: none !important; padding: 8px 0 !important; }
|
||
.header-layout5 .header-logo img { max-width: 140px !important; }
|
||
.header-layout5 .header-button { transform: none !important; padding-top: 8px !important; }
|
||
.th-header { z-index: 41; }
|
||
|
||
/* === All section containers: tighter spacing === */
|
||
.space, .space-top { padding-top: 40px !important; }
|
||
.space, .space-bottom { padding-bottom: 40px !important; }
|
||
.e-con-full, .e-con-boxed { --container-default-padding-top: 0px !important; --container-default-padding-bottom: 0px !important; }
|
||
.title-area { margin-bottom: 16px !important; }
|
||
.sec-title { font-size: 22px !important; margin-bottom: 10px !important; }
|
||
.sub-title, .sub-title2 { font-size: 13px !important; }
|
||
.box-title { font-size: 18px !important; }
|
||
|
||
/* === Service cards === */
|
||
.service-block .box-content { margin: -24px 8px 0 !important; padding: 0 12px 12px !important; }
|
||
.service-block .box-title { font-size: 16px !important; }
|
||
.service-block .box-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; }
|
||
.service-card { padding: 16px !important; }
|
||
.service-card .box-number { font-size: 36px !important; }
|
||
.service-grid { padding: 16px !important; }
|
||
|
||
/* === Counter cards === */
|
||
.counter-card .box-number { font-size: 28px !important; }
|
||
.counter-card .box-text { font-size: 14px !important; }
|
||
|
||
/* === Gallery === */
|
||
.gallery-grid .icon-btn { opacity: 1 !important; transform: none !important; right: 8px !important; top: 8px !important; width: 32px !important; height: 32px !important; font-size: 11px !important; }
|
||
|
||
/* === Brand/Sponsor === */
|
||
.brand-sec3 .brand-inner { margin-top: -24px !important; padding: 12px 8px !important; }
|
||
.brand-card img { max-height: 24px !important; width: auto !important; }
|
||
|
||
/* === Project cards === */
|
||
.project-card .box-content { padding: 10px !important; }
|
||
.project-card .box-title { font-size: 15px !important; }
|
||
.filter-menu { margin-bottom: 20px !important; gap: 4px !important; }
|
||
.filter-menu .tab-btn { font-size: 12px !important; padding: 4px 12px !important; }
|
||
|
||
/* === Process === */
|
||
.process-box { padding: 12px 36px 12px 12px !important; }
|
||
.process-box .box-title { font-size: 15px !important; }
|
||
.process-card-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }
|
||
|
||
/* === Contact === */
|
||
.contact-area { padding: 16px !important; }
|
||
.contact-form input, .contact-form textarea { font-size: 13px !important; }
|
||
|
||
/* === Buttons === */
|
||
.th-btn { font-size: 13px !important; padding: 10px 20px !important; }
|
||
.th-btn2 { font-size: 13px !important; padding: 10px 20px !important; }
|
||
|
||
/* === Images === */
|
||
img { max-width: 100% !important; height: auto !important; }
|
||
.box-img img { width: 100% !important; object-fit: cover !important; }
|
||
.elementor-widget-container { overflow: hidden; }
|
||
|
||
/* === Breadcrumb === */
|
||
.breadcumb-wrapper { padding: 40px 0 !important; }
|
||
.breadcumb-wrapper .breadcumb-title { font-size: 22px !important; }
|
||
|
||
/* === Service detail sidebar === */
|
||
.service-sidebar { padding: 12px !important; }
|
||
}
|
||
|
||
/* ── Hero 5: restore floating arrows (remove white panel) ── */
|
||
.hero-5 .icon-box {
|
||
background: none;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
display: block;
|
||
align-items: unset;
|
||
gap: 0;
|
||
bottom: 32px;
|
||
right: 32px;
|
||
}
|
||
.hero-5 .icon-box .slider-arrow {
|
||
background-color: rgba(255,255,255,0.2);
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
.hero-5 .icon-box .slider-arrow:hover {
|
||
background-color: var(--brand-primary, #FA2D39);
|
||
border-color: transparent;
|
||
color: #fff;
|
||
}
|
||
@media (max-width: 575px) {
|
||
.hero-5 .icon-box {
|
||
bottom: 16px;
|
||
right: 16px;
|
||
}
|
||
}
|