/**
 * Theme Name:     Astra Child
 * Author:         Brainstorm Force
 * Template:       astra
 * Text Domain:	   astra-child
 * Description:    The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
 */

body{
	font-family: "Inter", Sans-serif !important;
}
/* Slider Container */
.kea-testimonial-slider {
    width: 100%;
}

/* Testimonial Layout */
.kea-testimonial-item {
    text-align: center;
/*     padding: 40px 20px; */
}

.testimonial-image img {
    max-width: 100%;
    margin: 0 auto;
	width:300px;
}

.testimonial-content {
    max-width: 800px;
    margin: 0 auto 20px;
}

.testimonial-read-more {
    display: inline-block;
    margin-bottom: 30px;
    color: #d71920;
    font-weight: 600;
    text-decoration: none;
}

/* Services Grid */
.kea-services-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.service-item {
    position: relative;
	height: 280px; 
    overflow: hidden;
}

.service-large {
    grid-column: span 2;
}

.service-item img {
    width: 100%;
    height: 280px !important;
    object-fit: cover;
	display: block;
}

.service-title {
    position: absolute;
    inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;          /* vertical center */
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 15px;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.service-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 1;
}
/* Arrow base */
.kea-arrow {
    position: absolute;
    top: 100px; /* aligns near logo */
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

/* Left arrow */
.kea-prev {
    left: calc(50% - 260px);
}

.kea-prev::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 24px solid #0b2b3c; /* dark blue */
}

/* Right arrow */
.kea-next {
    right: calc(50% - 215px);
}

.kea-next::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 24px solid #0b2b3c;
}
button.kea-arrow.kea-next.slick-arrow,
button.kea-arrow.kea-prev.slick-arrow{
    background-color: unset;
    border-color: unset;
	box-shadow: unset;
}
/* Hover effect */
.kea-arrow:hover::before {
    opacity: 0.7;
}
.manguna-banner::before {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.0) 100%);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.facilities_pemba {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.industry-card {
    position: relative;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
}
.industry-card h3{
	color: #fff;
}
.industry-overlay {
    position: absolute;
    inset: 0;
    padding: 20px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: flex;
    flex-direction: column;
}
.facilities-overlay{
	position: absolute;
    inset: 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    flex-direction: column;	
}
/* .case-btn {
    color: #B20000;
    font-weight: 600;
    margin-top: 10px;
    display: inline-block;
} */
.case-btn {
	font-family: "Inter", Sans-serif;
    font-weight: 400;
    color: #fff;
    align-self: flex-start;
}
.request-quote p{
	margin-bottom: 0px;	
}
.request-quote h3, .request-quote a, .request-quote a:hover{
	color: #fff;
	text-decoration: none !important;
}

.request-quote {
	position: relative;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
	
    background: #13262F;    
    display: flex;
    flex-direction: column;
    justify-content: space-between;;
    padding: 20px;
}

/* Popup */
.industry-popup {
    position: fixed;
    inset: 0;
    background: rgba(39, 43, 42, 0.5);
    display: none;
    z-index: 9999;
}

.popup-inner {
    max-width: 1000px;
    margin: 80px auto;
    position: relative;
}
.popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(39, 43, 42, 0.2); /* full image overlay */
    z-index: 1;
}
.popup-image {
    width: 50%;
    background-size: cover;
    background-position: center;
}

.popup-content h3 {
	color: #fff;
    font-size: 32px;
	font-weight: 600;
    margin-bottom: 15px;
}
.popup-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    padding: 40px;
    z-index: 2;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.popup-text {
	color: #fff;
    font-size: 16px;
    line-height: 1.7;
}
.popup-bg {
    position: relative;
    width: 100%;
    height: 500px;               /* required */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Close button */
.popup-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}
.industry-title {
	color: #fff !important;
	font-family: "Inter", Sans-serif;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 10px!important;
}
.industry-content {
	font-family: "Inter", Sans-serif;
    font-size: 16px;
    line-height: 1.5;
    flex-grow: 1; /* pushes button to bottom */
}

p.industry-content {
    margin-bottom: 0px;
}
.spatialbtn-submit input,
.logisticsbtn-submit input{
    background: #B20000;
    color: #fff;
	border-radius:0px;
}
.col-float, .cdi-menu ul li {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}
.cdi-menu ul li {
    transition: transform 0.35s ease;
    will-change: transform;
}
.col-float:hover{
    transform: translateY(-12px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.cdi-menu ul li:hover {
	transform: translateY(-12px);
}
.foo-links li{
	pointer-events: none;       
    cursor: not-allowed;         
    opacity: 0.5;                
    color: #999;                 
    text-decoration: none; 
}
.core-wrapper {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 15px;
    min-height: 520px;
}

/* LEFT COLUMN */
.core-left {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
}

/* LEFT BOTTOM SPLIT */
.core-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* ===============================
   CARD BASE
================================ */

.core-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 🔑 pushes content to bottom */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.core-card p{
	color: #fff;
	margin:0;
}
/* Heights */
.core-card.large {
    min-height: 260px;
}

.core-card.small {
    min-height: 245px;
}

.core-card.side {
    min-height: 100%;
}

/* ===============================
   FULL IMAGE OVERLAY (CARDS)
================================ */

.core-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 100%
    );
    display: flex;
    align-items: flex-end;
    z-index: 1;
}
.core-overlay h3 {
	color: #fff;
    font-size: 22px;
    margin-bottom: 8px;
    line-height: 1.2;
}
.core-overlay p {
    margin-bottom: 10px;
    font-size: 14px;
	color: #fff;
}

.core-readmore {
	color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
	padding: 20px;
}

/* Optional hover polish */
.core-card:hover {
    transform: scale(1.01);
    transition: transform 0.3s ease;
}

/* ===============================
   POPUP BACKDROP
================================ */

.core-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;

    display: none;                /* hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
}



/* ===============================
   POPUP BOX (NOT FULL WIDTH)
================================ */

.core-popup-box {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 600px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
}

/* FULL IMAGE OVERLAY (POPUP) */
.core-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;   /* 👈 pushes content to bottom */
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 100%
    );
}
.core-overlay-inner {
    width: 100%;
/*     padding: 24px; */
}


/* POPUP CONTENT (RIGHT SIDE) */
.core-popup-content {
    position: relative;
    z-index: 2;
    width: 45%;
    margin-left: auto;
    height: 100%;
    padding: 60px;
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.overlay h3{
	 color: #fff;
}
.core-popup-content h2 {
	 color: #fff;
    font-size: 32px;
    margin-bottom: 15px;
}

.core-popup-content p {
    margin-bottom: 12px;
    line-height: 1.6;
}

/* CLOSE BUTTON */
.core-popup-close {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 34px;
    color: #fff;
    cursor: pointer;
    z-index: 3;
}
.core-card .core-content,
.core-card h3,
.core-card p,
.core-card a {
    padding-left: 20px;
    padding-right: 20px;
}
.core-card .core-content {
    padding-bottom: 24px; /* bottom breathing space */
}
/* GRID */
.logistic-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.logistic-card {
    background: #0A2A3A;
    color: #fff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logistic-card h3,
.logistic-facilities-card h3{
	 color: #fff;
    font-size: 20px;
}

.logistic-card p,
.logistic-facilities-card p{
    font-size: 14px;
    line-height: 1.6;
	 margin-bottom: 0;
}

.logistic-expand-btn {
    background: none;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-align:left;
}
.logistic-expand-btn:hover, 
.logistic-expand-btn:focus{
	background:unset;
	border-color: unset;
}

/* POPUP */
.logistic-popup {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.logistic-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.logistic-popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1100px;
    background: #000;
    display: flex;
}

/* IMAGE SECTION */
.logistic-popup-image {
    width: 60%;
}

.logistic-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TEXT SECTION */
.logistic-popup-text {
    width: 40%;
    background: rgba(39,43,42,0.7);
    color: #fff;
    padding: 40px;
    overflow-y: auto;
}

.logistic-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}
.logistic-facilities-card{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px;
    color: #fff;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
	overflow: hidden;
}


/* Optional overlay for readability */
.logistic-facilities-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 0;
}

.logistic-facilities-card > * {
    position: relative;
    z-index: 1;
}
.logistic-services-grid .logistic-card:first-child {
    height: 400px;
}

/* Second, Third & Fourth cards */
.logistic-services-grid .logistic-card:nth-child(2),
.logistic-services-grid .logistic-card:nth-child(3),
.logistic-services-grid .logistic-card:nth-child(4) {
    height: 350px;
}
.logistic-services-grid .logistic-card:nth-child(2) .logistic-content,
.logistic-services-grid .logistic-card:nth-child(3) .logistic-content,
.logistic-services-grid .logistic-card:nth-child(4) .logistic-content,
.logistic-services-grid .logistic-card:nth-child(2) .logistic-content button,
.logistic-services-grid .logistic-card:nth-child(3) .logistic-content button,
.logistic-services-grid .logistic-card:nth-child(4) .logistic-content button{
	color: #000;
}

.logistic-services-grid .logistic-card:nth-child(2) .logistic-content,
.logistic-services-grid .logistic-card:nth-child(4) .logistic-content {
    margin-bottom: -65%;		
}
.logistic-services-grid .logistic-card:nth-child(3) .logistic-content {
    margin-bottom: -72%;
}
/* Optional – keeps content aligned nicely */
.logistic-services-grid .logistic-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.logistic-card,
.logistic-facilities-card,
.industry-card{
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

.logistic-card:hover,
.logistic-facilities-card:hover,
.industry-card:hover{
    transform: translateY(-10px);
}

.manguna-industries-wrapper {
    display: flex;
    height: 420px;
    overflow: hidden;
    gap: 20px;
}

.manguna-left {
    flex: 2;
    position: relative;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
}

/* Background image layer - z-index 0 */
.manguna-left-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Overlay layer - z-index 1 */
.manguna-left-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 43, 42, 0.5);
    z-index: 1;
    transition: background 0.3s;
}

/* Optional: Lighter overlay on hover */
.manguna-left:hover .manguna-left-overlay {
    background: rgba(39, 43, 42, 0.3);
}

/* Content layer - z-index 2 */
.manguna-left-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}

.find-more {
    font-size: 18px;
    color: #fff;
}

.manguna-left h2 {
    color: #fff;
    font-size: 28px;
    margin-top: 10px;
}

.manguna-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.manguna-item {
    padding: 20px 24px;    
    background: #072536;
    cursor: pointer;
    transition: background 0.3s;
    height: 150px;
    display: flex;
    align-items: center;
    font-size: 24px;
}
.manguna-item h3{
	color: #fff;
	margin: 0px;
}
.manguna-item h3
.manguna-item:hover {
    background: #0A2A3A;
}

/* Manual Frontdesk Item Styling */
.manguna-item-manual {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    cursor: default;
}

.manguna-item-manual:hover {
    background: #072536; /* No hover effect for manual item */
}

.manguna-item-manual h3 {
    color: #fff;
    font-size: 24px;
    margin: 0;
    line-height: 1.3;
}

.frontdesk-button {
    color: #fff;
    text-decoration: none !important;
    font-size: 14px;
    display: inline-block;
    transition: opacity 0.3s;
}

.frontdesk-button:hover {
    opacity: 0.8;
}

/* ========== POPUP STYLES ========== */

/* Page-level dark overlay */
.manguna-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none !important;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.manguna-popup.active {
    display: flex !important;
}

/* Popup container - now acts as the background holder */
.manguna-popup-inner {
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    min-height: 500px;
    overflow: hidden;
    border-radius: 6px;
}

/* Full background image layer */
.manguna-popup .popup-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

/* Dark overlay on top of image */
.manguna-popup-inner .popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(39, 43, 42, 0.4);
    z-index: 1;
}

/* Content positioned on top of everything */
.manguna-popup .popup-content {
    position: absolute;
    inset: 0;
    padding: 50px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    z-index: 2;
}

.manguna-popup .popup-content h2 {
	color: #ffffff;
    margin-bottom: 20px;
    font-size: 32px;
}

.manguna-popup .popup-text {
    line-height: 1.6;
}

/* Close button */
.manguna-popup .popup-close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 30px;
    color: #ffffff;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.3s;
}

.manguna-popup .popup-close:hover {
    opacity: 0.7;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner.manguna-btn {
	font-size: 18px;
    background-color: unset;
    box-shadow: unset;
    color: #B20000;
}
.mangunabtn-submit {
    text-align: right;
    margin-left: 50px;
}
.manguna-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 60px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B20000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 25px center !important;
    background-size: 24px !important;
}







/* RESPONSIVE */
@media (max-width: 992px) {
    .manguna-industries-wrapper {
        flex-direction: column;
        height: auto;
    }
    
    .manguna-popup .popup-content {
        padding: 30px;
    }
    
    .manguna-popup .popup-content h2 {
        font-size: 24px;
    }
}


/* Mobile fix */
@media (max-width: 767px) {
    .kea-arrow {
        top: 110px;
    }

    .kea-prev {
        left: 15px;
    }

    .kea-next {
        right: 15px;
    }
	.industries-grid {
       grid-template-columns: repeat(1, 1fr);
       gap: 15px;
    }

    .industry-card {
        min-height: 220px;
    }

    .industry-overlay {
        padding: 15px;
    }

    .industry-overlay h3 {
        font-size: 18px;
    }

    .industry-overlay p {
        font-size: 14px;
    }

    .case-btn {
        font-size: 14px;
    }

    /* Popup */
    .popup-inner {
        margin: 40px 15px;
    }

    .popup-image {
        min-height: 220px;
    }

    .popup-content h3 {
        font-size: 20px;
    }

    .popup-text {
        font-size: 14px;
        line-height: 1.6;
    }
	.industry-title {
        font-size: 18px;
    }
    .industry-content {
        font-size: 14px;
    }
	.popup-bg {
        min-height: 360px;
    }

    .popup-content {
        padding: 20px;
    }

    .popup-close {
        top: 10px;
        right: 10px;
        z-index: 5;
    }
	.core-bottom {
        grid-template-columns: 1fr;
    }

    .core-popup-box {
        max-width: 100%;
        height: auto;
    }

    .core-popup-content {
        width: 100%;
        padding: 30px;
        background: rgba(0,0,0,0.6);
    }
    .core-popup-overlay {
        background: rgba(0,0,0,0.6);
    }
	.manguna-popup-inner {
        flex-direction: column;
        max-height: 90vh;
    }

    .manguna-popup .popup-bg {
        width: 100%;
        min-height: 240px;
    }

    .manguna-popup .popup-content {
        width: 100%;
        padding: 28px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .kea-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .service-large {
        grid-column: span 2;
    }
    .industry-card {
        min-height: 240px;
    }   
	.logistic-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .logistic-popup-content {
        flex-direction: column;
        height: auto;
    }

    .logistic-popup-image,
    .logistic-popup-text {
        width: 100%;
        height: auto;
    }

    .logistic-popup-image img {
        height: auto;
    }
}
@media(min-width:1024px) and (max-width:1300px){
	.facility-title h2 {
		width: 90%;
	}
	.industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
	.core-wrapper {
        grid-template-columns: 1fr;
    }

    .core-popup-box {
        height: auto;
        min-height: 420px;
    }

    .core-popup-content {
        width: 60%;
        padding: 40px;
    }
	.logistic-facilities-card p {
		width: 50%;
	}
}
@media (max-width: 600px) {
    .kea-services-grid {
        grid-template-columns: 1fr;
    }
	.service-item {
        height: 220px;
    }
	.logistic-services-grid {
        grid-template-columns: 1fr;
    }
}
/* Center popup on tablet & mobile */
@media (max-width: 1024px) {

    .industry-popup {
        display: none; /* stays hidden until JS fadeIn */
        align-items: center;
        justify-content: center;
        padding: 15px;
    }

    .industry-popup[style*="display: block"] {
        display: flex !important;
    }

    .popup-inner {
        margin: 0 !important;
        max-width: 95%;
        width: 100%;
    }

    .popup-bg {
        height: auto;
        min-height: 420px;
    }

    .popup-content {
        position: relative;
        width: 100%;
        padding: 25px;
    }
}