/*!
Theme Name: infinite-general
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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: infinite-general
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

infinite-general 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.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


:root {
	--aqua-blue: #003eab;
	--aqua-black: #041E2D;
	--aqua-pink: #e5017d;
	--aqua-light: #f1f6ff;
	--aqua-yellow: #f1e700;
	--nav-height: 5rem;
	--gradient-width: 50px; 
}

.w-100 {
	width: 100%!important;
}

/* MAIN BANNER - section 1  */

/* 1. Mobile & Tablet: Replace the black background with your new color */
.overlay {
    background-color: rgba(5, 29, 46, 1) !important;
	opacity: 0.6!important;
    /* Elementor's default opacity of 0.6 will naturally make this a nice semi-transparent blue on mobile */
}

/* 2. Desktop (over 1200px): Apply the gradient fade */
@media (min-width: 1200px) {
    .overlay {
        /* Force opacity to 1 so the left side is 100% solid */
        opacity: 1 !important; 
        
        /* Kill the solid background color so the gradient can show */
        background-color: transparent !important; 
        
        /* The custom gradient using your exact color */
        background: linear-gradient(to right, rgba(5, 29, 46, 1) 0%, rgba(5, 29, 46, 0.8) 45%, rgba(5, 29, 46, 0) 100%) !important;
    }
}

/* SECTION 2 - info boxex  */

@media (min-width: 768px) {
    #why .row {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 992px) {
	.col-xs-12.col-sm-6.col-md-3.pad-bottom-md {
		padding-bottom: 50px!important;
	} 
    .info-box {
        height: auto !important;
        min-height: 0 !important; /* Adding this just in case a min-height is also forcing it open */
    }
}

/* SECTION 3  */

#promo {
	padding-block: 100px;
}

@media (max-width: 1450px) {
	.promo .relative .img-wrapper {
		left: -100px!important;
	}
}
@media (max-width: 1250px) {
	.promo .relative .img-wrapper {
		left: -200px!important;
	}
}
@media (max-width: 992px) {
	.promo .relative .img-wrapper {
		left: -300px!important;
	}
}

/* END OF SECTION 3  */

/* SECTION 5 - three elements  */

.section .line-box .row .col-xs-12 .ccz_line {
	width: 100%!important;
}
.section .line-box .row .col-xs-12 .ccz_line .ccz_box {
	max-width: 320px; 
	order: none; 
	padding: 15px;
	text-align: center!important;
}
@media (max-width: 767px) {
	.section .line-box .row .col-xs-12 .ccz_line h2 {
		margin-bottom: 40px;
	}
}
@media (max-width: 715px) {
	.section .line-box .row .col-xs-12 .ccz_line .ccz_box {
		padding: 5px;
	}
}

/* SECTION 6  */

.equipment-inner {
	position: relative;
	height: 620px;
}
.equipment .heading {
	margin-bottom: 25px!important;
}
.equipment-slider {
	bottom: 180px!important;
}
.equipment-advantages {
	position: absolute;
	bottom: 0!important;
	left: 0!important;
	right: 0!important;
}
/* 1. Reset the wrapper box and give it a stable, predictable height */
.equipment .image-wrapper {
    aspect-ratio: auto !important;
    max-width: 370px !important;
    height: 375px !important; /* Keeps the slider height consistent */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
.equipment .image-wrapper img {
	margin-bottom: 0!important;
}

/* 2. Fix the image so it scales down instead of blowing up */
.equipment-image {
    width: auto !important;        /* Cancels original 100% width */
    height: auto !important;       /* Cancels original 100% height */
    max-width: 100% !important;    /* Prevents spilling horizontally */
    max-height: 330px !important;  /* Controls the image size - lower this to make it smaller! */
    object-fit: contain !important;/* Ensures zero cropping happens */
    margin-bottom: 15px !important;/* Clean gap above the H4 title */
}
.equipment .image-wrapper h4 {
	position: relative;
	color: white;
	font-weight: 600;
	z-index: 100!important;
}
@media (max-width: 1200px) {
	.equipment-slider {
		right: 5px!important;
		bottom: 204px!important;
	}

}
@media (max-width: 992px) {
	.equipment-characteristic {
		max-width: 400px;
		margin: 47px 0 47px 40px!important;
		padding: 14px 20px!important;
	}
	.equipment-slider {
		position: absolute!important;
		max-width: 300px!important;
		right: 0px !important;
		bottom: 154px !important;
	}
	.equipment-advantages {
		padding: 28px 24px!important;
	}

}
@media (max-width: 767px) {
	.equipment-inner {
		display: flex!important;
		justify-content: center!important;
	}
	.equipment-characteristic {
		margin-left: 0!important;
		align-self: flex-start!important;
	}
	.equipment-slider {
		display: none!important;
	}
	.equipment-advantages {
		padding: 28px 24px!important;
		grid-template-columns: 1fr 1fr!important;
	}

}
@media (max-width: 500px) {
	.equipment-inner {
		display: flex!important;
		justify-content: center!important;
	}

	.equipment-advantages {
		grid-template-columns: 1fr!important;
	}

}


/* --- PROTAGONIST SECTION --- */
.section-protagonist {
    position: relative;
    background-color: var(--aqua-black); 
    padding: 160px 0;
    z-index: 1; /* Establishes a local stacking context */
	overflow: hidden;
}
@media (max-width: 1400px) {
	.section-protagonist {
		padding: 120px 0;
	}
}

/* Shared styles for both stripes */
.section-protagonist::before,
.section-protagonist::after {
	background: repeating-linear-gradient(
        -45deg,
        var(--aqua-yellow) 0,
        var(--aqua-yellow) var(--gradient-width),
        #000 var(--gradient-width),
        #000 calc(var(--gradient-width) * 2)
    );
	content: "";
	height: 1.25rem;
	left: 0;
	position: absolute;
	right: 0;
	width: 100%;
	z-index: 10;
}

/* Position top stripe */
.section-protagonist::before {
	top: 0;
}

/* Position bottom stripe */
.section-protagonist::after {
	bottom: 0;
}

.z-index-content {
    position: relative;
    z-index: 5; /* Keeps text above the dark background */
}

/* Protagonist Positioning (Desktop) */
.protagonist-image-wrapper {
    position: absolute;
    bottom: -57px; 
    right: 0; 
    width: 32%; 
    max-width: 800px;
    z-index: 10; 
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none; 
}
@media (max-width: 1450px) {
	.protagonist-image-wrapper {
		width: 38%; 
	}
}
@media (max-width: 1200px) {
	.protagonist-image-wrapper {
		width: 43%; 
	}
}

.protagonist-img {
    max-width: 100%;
    height: auto;
    display: block;
    pointer-events: auto; /* Re-enables clicking on the actual image if needed */
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 991px) {
    .section-protagonist {
        padding: 60px 0;
    }
    
    .section-content-row {
        text-align: center;
    }

    .section-protagonist::before,
    .section-protagonist::after {
        height: 45px;
    }
    
    .section-protagonist::before { top: -30px; }
    .section-protagonist::after { bottom: -30px; }
	
	.heading.text-white {
		margin-top: 30px;
	}
	
    .protagonist-image-wrapper {
        position: relative; 
        margin-bottom: -33px; 
        width: 100%;
        max-width: 100%;
        margin-top: 0px;
        display: flex;
        justify-content: center;
        z-index: 5; /* Keeps him behind the bottom stripe (which is z-index: 10) */
    }

    .protagonist-img {
        max-width: 60%; 
        margin: 0 auto;
    }
}
@media (max-width: 500px) {
	.protagonist-img {
        max-width: 80%; 
    }
}

/* SECTIN 7? - STRIPE SECTION  */

.stripe-section {
    width: 100%;
    overflow: hidden; 
    line-height: 0;   
}

.stripe-img {
    width: 100%;
    height: auto;
    display: block;      
    object-fit: contain;
}
@media (max-width: 500px) {
	.stripe-section {
		overflow: visible; 
	}

	.stripe-img {
		object-fit: cover;
		height: 37px;
	}
}
@media (max-width: 400px) {
	.stripe-img {
		object-fit: cover;
		height: 28px;
	}
}


/* LAST SECTION  */

.bg-img-full.section.quote-section {
	background-color: var(--aqua-black)!important;
}

/* FOOTER  */

.footer-social-png {
    width: 70px;
    height: 70px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain; /* Ensures the icon doesn't stretch or distort */
}
.footer-social-png {
    /* 1. Make the image adapt smoothly to its parent's constraints */
    width: 100% !important;
    height: 100% !important;
    
    /* 2. Set the desktop maximum limits so it matches the 70px SVGs */
    max-width: 70px;
    max-height: 70px;
	padding: 5px;
    
    /* 3. Layout hygiene */
    display: block;
    object-fit: contain;
    margin: 0 auto;
    
    /* 4. Smooth opacity hover effect since SVG 'fill' won't work on a PNG */
    transition: opacity 0.3s ease;
}

.footer-social-png:hover {
    opacity: 0.7;
}
@media (max-width: 767px) {
    /* 1. Force the SVG icons to scale down to mobile size */
    .social li a svg {
        width: 55px !important;
        height: 55px !important;
    }

    /* 2. Force the new PNG icon to match the exact same mobile size */
    .footer-social-png {
        width: 55px !important;
        height: 55px !important;
		padding: 3px;
    }
    
    /* 3. Ensure the anchor boxes align perfectly */
    .social li a {
        width: 55px !important;
        height: 55px !important;
        line-height: 55px !important;
        display: inline-block !important;
    }
}

/* Desktop Styles for the PNG (so it matches the 70px desktop SVGs) */
@media (min-width: 768px) {
    .footer-social-png {
        width: 70px !important;
        height: 70px !important;
        display: block !important;
        object-fit: contain !important;
    }
}