/* =========================================================
   DexShell Technology & Construction Page
   /waterproof-sock-technology/ (Changed to /dexshell-technology/)
   ========================================================= */

/* =========================================================
   Page-level adjustments
   ========================================================= */

h3 {
	margin-block-start: 0 !important;
}


body .nfd-container:not(.alignfull) {
	padding-inline: unset !important;
}


.wp-block-list {
	list-style: disc;
	padding-left: 20px;
}


.wp-block-cover .wp-block-cover__inner-container {
	text-shadow: 2px 2px 5px rgba(0,0,0,0.85);
}


.nfd-container .nfd-gap-md p {
	color:#fff !important;
}



/* =========================================================
   Technology Hero
========================================================= */

.technologyHero {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;
    max-width: none;
    min-height: clamp(520px, 44vw, 660px);

    margin: 0;
    overflow: hidden;
    box-sizing: border-box;

    background-color: #06111d;
    background-image: var(--tech-hero-desktop);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

.technologyHero--left {
    background-position: center left !important;
}

.technologyHero--center {
    background-position: center center !important;
}

.technologyHero--right {
    background-position: center right !important;
}


/* Overlay */

.technologyHero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(3, 11, 21, 0.68) 0%,
            rgba(3, 11, 21, 0.36) 48%,
            rgba(3, 11, 21, 0.08) 100%
        );
}


/* Hero content */

.technologyHero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

.technologyHero__content {
    max-width: 650px;
    padding: 80px 0;
    color: #fff;
}

.technologyHero__kicker {
    margin: 0 0 18px;
    color: #13a8e5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.technologyHero__heading {
    max-width: 650px;
    margin: 0 0 24px;
    color: #fff;

    font-size: clamp(46px, 5vw, 74px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.technologyHero__text {
    max-width: 610px;
    margin: 0;
    color: rgba(255,255,255,.9);

    font-size: 19px;
    line-height: 1.55;
}


/* =========================================================
   Hero Responsive
========================================================= */

@media (max-width: 1024px) {

    .technologyHero {
        min-height: 560px;
        background-position: 62% center;
    }

    .technologyHero__inner {
        padding-inline: 36px;
    }

    .technologyHero__content {
        max-width: 570px;
        padding: 64px 0;
    }

    .technologyHero__heading {
        font-size: clamp(42px, 6.2vw, 58px);
    }

}


@media (max-width: 767px) {

    .technologyHero {
        align-items: flex-end;

        min-height: clamp(420px, 54vh, 480px);
        min-height: clamp(420px, 54svh, 480px);

        background-image: var(--tech-hero-mobile);
        background-position: 66% center;
    }

    .technologyHero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 11, 21, 0.04) 0%,
                rgba(3, 11, 21, 0.42) 45%,
                rgba(3, 11, 21, 0.92) 100%
            );
    }

    .technologyHero__inner {
        padding-inline: 22px;
    }

    .technologyHero__content {
        max-width: 100%;
        padding: 0 0 38px;
    }

    .technologyHero__kicker {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: .18em;
    }

    .technologyHero__heading {
        max-width: 360px;
        margin-bottom: 18px;

        font-size: clamp(34px, 10vw, 42px);
        line-height: 1.05;
    }

    .technologyHero__text {
        max-width: 350px;
        font-size: 15.5px;
        line-height: 1.5;
    }

}


@media (max-width: 420px) {

    .technologyHero {
        min-height: clamp(400px, 52vh, 460px);
        min-height: clamp(400px, 52svh, 460px);
    }

    .technologyHero__inner {
        padding-inline: 18px;
    }

    .technologyHero__heading {
        max-width: 330px;
        font-size: 36px;
    }

    .technologyHero__text {
        max-width: 330px;
        font-size: 15px;
    }

}

/* =========================================================
   Technology System Section
   ========================================================= */


.technology-system-section {

	padding:80px 0;

}



.technology-eyebrow {

	margin-bottom:0px;

	color:#0ca5e8;

	font-size:14px;

	font-weight:700;

	letter-spacing:.18em;

	text-transform:uppercase;

}



.technology-system-section h2 {

	max-width:850px;

	margin-bottom:30px;

	font-size:clamp(38px,4vw,56px);

	line-height:1.1;

	letter-spacing:-.02em;

}



.technology-system-section > p {

	max-width:900px;

	font-size:18px;

	line-height:1.7;

}



.technology-system-section .wp-block-columns {

	margin-top:60px;

	gap:40px;

}



.technology-system-section .wp-block-column {

	padding:36px;

	border:1px solid #e5e5e5;

}

.technology-system-section figure {
	margin-bottom:60px;
}




/* =========================================================
   Technology Movement / Construction Section
   ========================================================= */


.technology-movement-section {

	margin-top:100px;

	padding:70px;

	background:#06111d;

	color:white;

}


.technology-movement-section h3 {

	color:white;

}




/* =========================================================
   Proprietary Technologies Section
   ========================================================= */


.technology-platform-section {

	padding:100px 0;

}



.technology-platform-intro {

	max-width:900px;

	margin-bottom:60px;

}



.technology-platform-kicker {

	margin-bottom:18px;

	color:#13a8e5;

	font-size:14px;

	font-weight:700;

	letter-spacing:.18em;

	text-transform:uppercase;

}



.technology-platform-section h2 {

	max-width:900px;

	margin-bottom:25px;

	font-size:clamp(38px,4vw,56px);

	line-height:1.1;

	letter-spacing:-.02em;

}



.technology-platform-intro p {

	max-width:900px;

	font-size:20px;

	line-height:1.6;

}




/* Technology Cards */


.technology-platform-grid {

	display:grid;

	grid-template-columns:repeat(3,1fr);

	gap:40px;

	margin-top:60px;

}



.technology-platform-card {

	padding:40px;

	background:#06111d;

	color:white;

}



.technology-platform-card h3 {

	margin-bottom:18px;

	color:#13a8e5;

	font-size:30px;

}



.technology-platform-card strong {

	display:block;

	margin-bottom:12px;

	font-size:18px;

}



.technology-platform-card p {

	margin:0;

	opacity:.85;

	font-size:16px;

	line-height:1.6;

}




/* =========================================================
   Technology Cards Responsive
   ========================================================= */


@media(max-width:1024px){


	.technology-platform-grid {

		grid-template-columns:1fr;

	}


}



@media(max-width:767px){


	.technology-platform-section {

		padding:70px 0;

	}


	.technology-platform-card {

		padding:30px;

	}

}


/* =========================================================
   Proprietary Technology Cards
   ========================================================= */

.tech-columns {
	align-items: stretch;
}


.tech-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}


.tech-columns > .wp-block-column .wp-block-buttons {
	margin-top: auto;
}