/*
 Theme Name: STLPAK - Global Packaging Solutions
 Author: STLPAK
 Author URI: https://stlpak.com/
 Description: Custom child theme for STLPAK Global Packaging Solutions website. Based on Astra theme with custom styling and functionality.
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: astra-child-stlpak
 Template: astra
*/

/* Home 9 */
.hp9s1Box {
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    display: inline-block;
    max-width: 270px;
    border-radius: 30px;
}

/* STLPAK Quality Features Section */
.quality-features-section {
    padding: 0 0 80px;
    background: #fdfdfd;
    position: relative;
}

.quality-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    auto-rows: 240px;
    max-width: 1320px;
    margin: 0 auto;
}


/* Fix: wrapper links transparent to grid to preserve layout */
.quality-feature-link { display: contents !important; }
/* Base styles for all feature items */
.quality-feature-item {
    position: relative;
    border-radius: 32px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Large Card - Manufacturing Excellence */
.quality-feature-item.large-card {
    grid-column: span 2;
    grid-row: span 2;
    background-color: rgb(248 250 252);
    padding: 40px;
}

.quality-feature-item.large-card:hover {
    box-shadow: 0 25px 50px rgba(11, 30, 59, 0.05);
    transform: translateY(-4px);
}

.quality-feature-item.large-card .feature-icon {
    width: 56px;
    height: 56px;
    background: var(--color-brand-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.quality-feature-item.large-card .feature-icon svg {
    color: #fff;
}

.quality-feature-item.large-card:hover .feature-icon {
    transform: scale(1.1);
}

.quality-feature-item.large-card .feature-title {
    font-size: 28px;
    font-weight: 700;
    color: #0b1e3b;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.quality-feature-item.large-card .feature-description {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

.quality-feature-item.large-card .feature-footer {
    margin-top: auto;
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
}

.quality-feature-item.large-card .feature-year .year-label {
    font-size: 12px;
    font-weight: 600;
    color: #16529b;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.quality-feature-item.large-card .feature-year .year-value {
    font-size: 48px;
    font-weight: 700;
    color: #e2e8f0;
    transition: color 0.3s ease;
}

.quality-feature-item.large-card:hover .year-value {
    color: #16529b;
}

.quality-feature-item.large-card .feature-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s ease;
}

.quality-feature-item.large-card:hover .feature-arrow {
    background: #16529b;
    color: #fff;
}

/* Dark Card - Factory Direct Pricing */
.quality-feature-item.dark-card {
    grid-column: span 2;
    background: #0b1e3b;
    color: #fff;
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.quality-feature-item.dark-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0b1e3b 0%, #16529b 100%);
    opacity: 0.9;
    z-index: 1;
}

.quality-feature-item.dark-card .feature-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.quality-feature-item.dark-card .feature-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
}

.quality-feature-item.dark-card .feature-description {
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    font-weight: 300;
}

.quality-feature-item.dark-card .dollar-bg {
    position: absolute;
    right: -20px;
    bottom: -20px;
    opacity: 0.25;
    transform: rotate(-12deg);
    transition: all 0.7s ease;
}

.quality-feature-item.dark-card:hover .dollar-bg {
    transform: rotate(12deg) scale(1.2);
    opacity: 0.35;
}

/* Small Cards */
.quality-feature-item.small-card {
    background: #fff;
    border: 1px solid rgb(241 245 249);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.quality-feature-item.small-card:hover {
    border-color: rgba(22, 82, 155, 0.3);
}

.quality-feature-item.small-card.brand-card {
    background: rgba(22, 82, 155, 0.05);
    border: none;
}

.quality-feature-item.small-card.brand-card:hover {
    background: rgba(22, 82, 155, 0.1);
}

.quality-feature-item.small-card .feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-brand-primary);
    background: #f0f7ff;
    transition: all 0.3s ease;
}

.quality-feature-item.small-card .feature-icon svg {
    opacity: 1;
}

.quality-feature-item.brand-card .feature-icon {
    background: #fff;
}

.quality-feature-item.small-card:hover .feature-icon {
    background: var(--color-brand-primary);
    color: #fff;
}

.quality-feature-item.small-card .feature-title {
    font-size: 20px;
    font-weight: 700;
    color: #0b1e3b;
    margin-bottom: 8px;
}

.quality-feature-item.small-card .feature-description {
    font-size: 14px;
    color: #64748b;
}

/* Wide Card - Quality Certified */
.quality-feature-item.wide-card {
    grid-column: span 4;
    background: #fff;
    border: 1px solid rgb(241 245 249);
    padding: 32px 48px;
}

.quality-feature-item.wide-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.quality-feature-item.wide-card .feature-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.quality-feature-item.wide-card .quality-info {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 5;
}

.certification-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    flex: 7;
}

.quality-feature-item.wide-card .quality-icon {
    width: 80px;
    height: 80px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16529b;
    flex-shrink: 0;
}

.quality-feature-item.wide-card .feature-title {
    font-size: 24px;
    font-weight: 700;
    color: #0b1e3b;
    margin-bottom: 4px;
}

.quality-feature-item.wide-card .feature-description {
    font-size: 14px;
    color: #64748b;
}

.cert-badge {
    padding: 10px 20px;
    background: #f8fafc;
    color: #64748b;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cert-badge:hover {
    background: #16529b;
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .quality-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .quality-feature-item.large-card {
        grid-column: span 2;
        grid-row: span 1;
        padding: 32px;
    }

    .quality-feature-item.dark-card {
        grid-column: span 2;
    }

    .quality-feature-item.wide-card {
        grid-column: span 2;
        padding: 24px;
    }

    .quality-feature-item.wide-card .feature-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .quality-feature-item.wide-card .quality-info {
        flex-direction: column;
        gap: 16px;
        flex: 1;
    }

    .certification-badges {
        justify-content: center;
        flex: 1;
    }
}

@media (max-width: 767px) {
    .quality-features-section {
        padding: 40px 20px;
    }

    .quality-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .quality-feature-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        padding: 24px !important;
    }

    .quality-feature-item.large-card .feature-title {
        font-size: 24px;
    }

    .quality-feature-item.dark-card .feature-title {
        font-size: 20px;
    }

    .quality-feature-item.wide-card .feature-content {
        gap: 20px;
    }

    .quality-feature-item.wide-card .quality-info {
        gap: 16px;
    }

    .quality-feature-item.wide-card .quality-icon {
        width: 60px;
        height: 60px;
    }

    .certification-badges {
        gap: 8px;
    }

    .cert-badge {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Home 10 - Tech Hero Section */
#tech-hero-section {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #fdfdfd;
    padding: 80px 0 40px;
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#canvas-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: linear-gradient(to bottom, transparent, #fdfdfd 80%);
    pointer-events: none;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.hero-content .container {
    display: flex;
    align-items: center;
}

.hero-content .row {
    width: 100%;
}

/* Blur Overlay Mask */
.hero-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 1;
}

.hero-text-container {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.0);
    padding: 40px 0;
    border-radius: 30px;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

/* Hero Title Styles */
.hero-text-container h1 {
    color: #0b1e3b;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
    text-align: left;
}

/* Hero Features Container */
.hero-text-container .anim-entry.delay-3 {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    justify-content: flex-start;
}

.feature-point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 20px;
    text-align: left;
}

/* 只为没有内联样式的 feature-icon 设置默认值 */
.quality-feature-item .feature-icon:not([style]) {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    min-width: auto;
    text-align: left;
}

.feature-text {
    color: #4a5a75;
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.3;
    text-align: left;
}

.btn-hero-primary {
    padding: 12px 35px;
    background: #0b1e3b;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    letter-spacing: 0.5px;
    border: 1px solid #0b1e3b;
}

.btn-hero-outline {
    padding: 12px 35px;
    background: rgba(255,255,255,0.5);
    color: #0b1e3b;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    letter-spacing: 0.5px;
    border: 1px solid rgba(11, 30, 59, 0.1);
}

/* Gradient Animation */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.gradient-text-anim {
    /* Seamless A -> B -> A pattern for continuous looping */
    background: linear-gradient(120deg, #16529b 0%, #4ecdc4 50%, #16529b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Linear 6s = Slow, steady liquid flow, no back-and-forth sway */
    animation: gradientMove 6s linear infinite;
}

/* Entrance Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.anim-entry {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

.btn-hero-primary:hover {
    background: #16529b !important;
    border-color: #16529b !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(22, 82, 155, 0.15);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus {
    color: #fff;
}

.btn-hero-outline:hover {
    background: #fff !important;
    border-color: #0b1e3b !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #tech-hero-section {
        height: auto !important;
        padding: 60px 0;
    }

    #tech-hero-section h1 {
        font-size: 2.2rem !important;
    }

    #tech-hero-section p {
        font-size: 1rem !important;
    }

    .hero-text-container {
        padding: 30px 0 !important;
        text-align: center !important;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-content {
        padding: 0 20px !important;
        align-items: center !important;
    }

    .hero-text-container h1,
    .hero-text-container p {
        text-align: center;
    }

    .hero-actions {
        justify-content: center !important;
    }

    .container {
        padding: 0 15px !important;
    }

    /* Feature points mobile layout */
    .anim-entry.delay-3 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .feature-point {
        flex: 0 0 calc(50% - 10px) !important;
        margin-bottom: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .feature-icon {
        font-size: 18px !important;
        margin-bottom: 3px !important;
    }

    .feature-text {
        font-size: 0.8rem !important;
    }
}

.hp9s1Box {
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    display: inline-block;
    max-width: 270px;
    border-radius: 30px;
    padding: 20px 20px 40px;
    text-align: left;
	transition: all .3s;
}
.hp9s1Box:hover{
	background: #16529b;
	color: #fff;
}
.hp9s1Title{margin:10px 0;}
.hp9s1Title a{
	font-size: 22px;
	color: #000000;
}
.hp9s1Box:hover .hp9s1Title a{color: #fff;}
.hp9Section2, .hp9Section6{
	background-size: cover;
	position: relative;
}
.hp9s2List ul{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
.hp9s2List ul:after{
	content: "";
    display: block;
    clear: both;
}
.hp9s2List ul li{
	padding-left: 35px;
	position: relative;
	margin-bottom: 20px;
	color: #fff;
	width: 50%;
	float: left;
}
.hp9s2List ul li:before{
	position: absolute;
	content: '';
	top: 3px;
	left: 0;
	width: 22px;
	height: 21px;
	background: url(/wp-content/uploads/2022/01/checkList.png) 0 0 no-repeat;
}
.hp9s2List ul li a{color: #fff;}
.hp9s2List ul li a:hover{color: #666;}
.hp9s2Content{color: #fff;}
.hp9s4Content .tableScroll {overflow-x: auto;}
.hp9s4Content table, .hp9s4Content table tr, .hp9s4Content table th, .hp9s4Content table td{
	border: none ;
	background: none ;
	font-weight: 500;
}
.hp9s4Content table th{
	text-align: right;
	color: #00307d;
}
.hp9Section5 .col20 {width: 20%;}
.hp9s5Img{transition: all .3s;}
.hp9s5Box:hover .hp9s5Img{transform: scale(1.1);}
.hp9s5PaddTop {padding-top: 220px;}
.hp9s5PaddTop .hp9s5Title{
	padding-top: 70px;
	font-size: 22px;
	color: #000;
	position: relative;
}
.hp9s5PaddTop .hp9s5Title:before, .hp9s5PaddBottom .hp9s5Text:before{
	position: absolute;
	content: '';
	left: 50%;
	margin-left: -5px;
	width: 9px;
	height: 46px;
	background: url(/wp-content/uploads/2022/03/hp9s5Icon.png) 0 0 no-repeat;
}
.hp9s5PaddTop .hp9s5Title:before{top: 10px;}
.hp9s5PaddBottom .hp9s5Text:before{bottom: 10px;}
.hp9s5Title{
	font-size: 22px;
	color: #000;
}
.hp9s5PaddBottom .hp9s5Text{
	padding-bottom: 70px;
	position: relative;
}
.hp9Section6{color: #fff;}
.hp9s6Box{text-align: center;}
.hp9s6Title{font-size: 40px;}
.hp9s6VideoWraper{text-align: right;}
.hp9s7Box{
	max-width: 370px;
	display: inline-block;
}
.hp9s7Img{
	border: 1px solid #e5e5e5;
	border-radius: 40px;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	overflow: hidden;
}
.hp9s7Img a{display: block;}
.hp9s7Box:hover .hp9s7Img a{transform: scale(1.1);}
.hp9s7Title{margin: 30px 0 10px;}
.hp9s7Title a{
	color: #000;
	font-size: 22px;
	font-weight: 500;
}
.hp9s7Box:hover .hp9s7Title a{color: #16529b;}
.hp9Section8 {position: relative;}
.hp9Section8:before{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: #16529b;
	z-index: -1;
}
.hp9s8Wraper {
    background: #f3f3f3;
    padding: 60px 60px 30px;
    border-radius: 30px;
}
.hp9s8Content{
	text-align: center;
	border-right: 1px solid #9e9e9e;
	padding-right: 20px;
}
.hp9s8Title {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    margin: 40px 0 10px;
}
.hp9s8Text {
    font-size: 14px;
    color: #4b4b4b;
}
.hp9s8Wraper .homeSlider .slide{
	border-radius: 40px;
	overflow: hidden;
}
ul.hp9Testimonials {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
ul.hp9Testimonials li.slide{
	margin: 0 15px;
	text-align: center;
	color: #fff;
	font-weight: 300;
}
ul.hp9Testimonials .slick-arrow{
	position: absolute;
	top: 70px;
	width: 56px;
	height: 56px;
	background: url(/wp-content/uploads/2021/01/lp4SliderArrowHvr.png) 0 0 no-repeat;
	text-indent: -99999999999px;
	padding: 0;
	z-index: 1;
}
ul.hp9Testimonials .slick-prev{left: -35px;}
ul.hp9Testimonials .slick-next{
	right: -35px;
	transform: rotate(180deg);
}
.hp9s9Img {
    display: inline-block;
    border-radius: 100%;
    overflow: hidden;
    margin: 40px 0 5px;
    border: 2px solid #16529b;
    box-shadow: 0 0 0 1px #fff;
}
.hp9s9Title b{
	font-size: 16px;
	display: block;
	font-weight: 400;
}
.hp9s7Text, .hp9s10Text, .hp9s11Text{
	font-size: 26px;
	font-weight: 300;
}
.hp9s10Box{
	max-width: 370px;
	display: inline-block;
	text-align: left;
}
.hp9s10Img{overflow: hidden;}
.hp9s10Img a{display: block;}
.hp9s10Box:hover .hp9s10Img a{transform: scale(1.1);}
.hp9s10Title{margin: 20px 0 10px;}
.hp9s10Title a{
	font-size: 22px;
	font-weight: 500;
	color: #000;
}
.hp9s10Box:hover .hp9s10Title a{color: #16529b;}
.hp9s10Text2{
	padding-left: 10px;
	position: relative;
}
.hp9s10Text2:before{
	position: absolute;
	content: '';
	top: 7px;
	left: 0;
	width: 3px;
	height: calc(100% - 10px);
	background: #16529b;
}
.hp9FAQs .accordiaBox {
    background: #fff;
    padding: 16px 20px;
    margin-bottom: 15px;
}
.hp9FAQs .accordion {
    color: #001620;
    font-weight: 500;
	padding-right: 20px;
	cursor: pointer;
	position: relative;
}
.hp9FAQs .accordion:before{
	position: absolute;
	content: "\e900";
	top: 0;
	right: 0;
	font-family: Astra;
	transform: rotate(0deg);
	font-size: 20px;
	font-weight: 700;
	color: #4b4b4b;
	transition: all .3s;
}
.hp9FAQs .accordiaBox.active .accordion:before{
	transform: rotate(180deg);
	color: #16529b;
}
.hp9FAQs .panel {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #16529b;
}
.hp9FAQs .accordiaBox.active .panel{display: block;}
.hp9Section12 h2{margin: 0 ;}
.hp9Section12 h2 b{
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 56px;
}
ul.hp9Brands{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
ul.hp9Brands li{
	display: inline-block;
	margin: 0 6px 12px;
}
.hp9Section13 {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hp9Section4 ul.homeSlider, .hp9Section8 ul.homeSlider  {max-width: 570px;}

/* Home 10 */
/* hp10s2Box, hp10s2Img, hp10s2Title 样式已移除 - Section 2的特色优势展示组件已清理，用于全新重新设计 */
/* hp10CTA, hp10s3Box styles removed - Featured Food Packaging section removed for redesign */
.hp10Banner {padding: 70px 0 60px;}
.hp10FAQs {
    border-radius: 5px;
    background: #ffffff;
    border: solid 1px #dfdfdf;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .1);
}
.hp10FAQs .accordiaBox {
    border-bottom: 1px solid #dfdfdf;
    padding: 15px 30px;
}

.hp10FAQs .panel{display: none;}
.hp10FAQs .accordiaBox.active .panel{display: block;}
.hp10FAQs .accordion {
    font-size: 22px;
    color: #03363D;
    font-weight: 500;
    cursor: pointer;
	position: relative;
	padding: 10px 0;
}
.hp10FAQs .accordion:before{
	position: absolute;
	content: "\e900";
	top: 14px;
	right: 0;
	font-family: Astra;
	font-size: 16px;
	font-weight: 700;
	transform: rotate(0deg);
	transition: all .3s;
	color: #03363D;
}
.hp10FAQs .accordiaBox.active .accordion:before{transform: rotate(180deg);}

/* Home 11 */
.hp11s1Title {text-transform: uppercase;}
ul.hp11s1Brands{
	margin: 0 ;
	padding: 0 40px ;
	list-style-type: none;
}
ul.hp11s1Brands li.slide{
	outline: none;
	padding: 0 15px;
}
ul.hp11s1Brands li.slick-slide img {display: inline-block;}
.hp11s2BoxWrapper {
	padding: 35px 20px 35px 45%;
	background-repeat: no-repeat;
	background-position: left bottom;
}
.hp11s2Title {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}
.hp11s3subHeading {font-size: 22px;}
.hp11s3Box{text-align: left;}
.hp11s3Img{position: relative;}
.hp11s3ImgCaption{
	position: absolute;
	content: '';
	top: 10px;
	right: 10px;
	padding: 5px 12px 6px;
    border-radius: 30px;
    font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #16529b;
	min-width: 90px;
}
.hp11s3Title {
    font-weight: 600;
    margin: 10px 0 0;
    text-transform: uppercase;
}
.hp11s4Box{
	position: relative;
    display: table;
    table-layout: fixed;
    height: 100%;
}
.hp11s4Box1{
	display: table-cell;
	vertical-align: middle;
	width: 60%;
    padding: 0 140px;
    color: #fff;
}
.hp11s4Box1 ul{
	margin-top: 40px ;
	padding: 0 ;
	list-style-type: none;
}
.hp11s4Box1 ul li{
	margin-bottom: 25px;
	position: relative;
	padding-left: 35px;
}
.hp11s4Box1 ul li img.hp11s4Icon{
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
}
.hp11s4Box1 ul li b{
	text-transform: uppercase;
	letter-spacing: 2px;
}
.hp11s4Box2{
	display: table-cell;
	vertical-align: top;
	width: 40%;
	text-align: center;
}
.hp11s4Box2Content{padding: 140px 70px 0;}
.hp11s4Video a{
	display: inline-block;
	padding-left: 40px;
	position: relative;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
}
.hp11s4Video a:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	background: url(/wp-content/uploads/2021/01/h3PlayIconSM.png) 0 0 no-repeat;
	background-size: 100%;
	transition: all .3s;
}
.hp11s4Video a:hover:before{transform: scale(1.1);}
.hp11s5Box {
	background: #ebf0f3;
    min-height: 385px;
	padding: 35px 20px 20px;
	text-align: left;
}
.hp11Quote img{height: 30px;}
.hp11s5Title {
    padding: 10px 0;
    font-size: 22px;
    color: #000;
    line-height: 24px;
}
.hp11s5Btn {padding-top: 50px;}
.hp11s6Box {
    position: relative;
    background: #fff;
    padding: 40px;
	z-index: 2;
}
.hp11s6BoxRight{margin-left: -240px;}
.hp11s6BoxLeft{margin-right: -240px;}
.hp11s6SubHeading {
    text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
}
.hp11s6Btn a{
	display: inline-block;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	border-bottom: 1px solid #16529b;
	line-height: 1;
}
.hp11s6Btn a:hover{border-color: #000;}
.hp11s6Btns {text-align: center;}
.hp11s6Btns a.commonBtn{margin: 0 10px;}
.hp11FAQs .accordiaBox {
    border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb;
	margin-top: -1px;
	position: relative;
}
.hp11FAQs .accordion {
	color: #000;
    padding: 18px 20px 18px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
	cursor: pointer;
	position: relative;
}
.hp11FAQs .accordion:before{
	position: absolute;
    content: '+';
    top: 10px;
    right: 0;
    font-size: 28px;
    font-weight: 400;
    color: #16529b;
	transition: all .3s;
}
.hp11FAQs .accordiaBox.active .accordion:before{
	transform: rotate(135deg);
}
.hp11FAQs .panel{display: none;}
.hp11FAQs .accordiaBox.active .panel{display: block;}
.hp11s8Brands ul{
	margin: 40px 0 0 ;
	padding: 0 ;
	list-style-type: none;
}
.hp11s8Brands ul li{display: inline-block;}
.hp11s9Img{
	display: inline-block;
	max-width: 270px;
	overflow: hidden;
}
.hp11s9Img a{display: block}
.hp11s9Img a:hover{transform: scale(1.1);}
.hp11Section10, .lp7Section8{position: relative;}
.hp11Section10:before, .lp7Section8:before{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 25%;
	background: #000;
}
.hp11s10Box {
    display: table;
}
.hp11s10Left, .hp11s10Right{
	display: table-cell;
	width: 50%;
}
.hp11s10Right{
	padding: 0 20px;
	vertical-align: middle;
}

/* Home 12 */
.page-template-template-home12 #content a{text-decoration: underline;}
.page-template-template-home12  .ast-sticky-active{background: #16529b;}
.hp12s1Box{
	display: inline-block;
	max-width: 370px;
}
.hp12s1Img {
    width: 50px;
    float: left;
}
.hp12s1Content{
	width: calc(100% - 50px);
	float: left;
	padding-left: 15px;
}
.hp12s1Title{
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 10px;
}
.hp12s1Text{
	color: #acc6ff;
	font-size: 14px;
	font-weight: 300;
}
.hp12Section2{position: relative;}
.hp12Section2:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 20%;
	background: #16529b;
}
.hp12Section3 {
	background-repeat: no-repeat;
	background-position: 0 center;
}
.hp12s3Content{
	font-size: 14px;
}
.hp12Section3 ul{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
.hp12Section3 ul li{
	margin-bottom: 25px;
	padding-left: 35px;
	position: relative;
}
.hp12Section3 ul li:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 22px;
	height: 21px;
	background: url(/wp-content/uploads/2022/01/checkList2.png) 0 0 no-repeat;
}
.hp12s4Box{
	max-width: 320px;
	display: inline-block;
	text-align: left;
}
.hp12s4Img a{
	display: inline-block;
	position: relative;
}
.hp12s4Img a:before{
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	width: 0%;
	height: 0%;
	background: rgba(0,0,0,.4);
	transition: all .3s;
}
.hp12s4Box:hover .hp12s4Img a:before{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hp12s4Img a:after{
	position: absolute;
	content: "\e8b6";
	top: 50%;
	left: 50%;
	margin: -21px 0 0 -15px;
    font-family: Astra;
	font-size: 30px;
    font-style: normal;
    font-weight: 400;
	color: #fff;
	display: none;
}
.hp12s4Box:hover .hp12s4Img a:after{display: block;}
.hp12s4Title {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    margin: 10px 0;
}
.hp12s4Title a{
	color: #000;
	text-decoration: none ;
}
.hp12s4Box:hover .hp12s4Title a{color: #16529b;}
.hp12Section5{
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.hp12s4Text, .hp12s5Text{font-size: 14px;}
.hp12s5Box {max-width: 305px;}
.hp12s5Title {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin: 20px 0 10px;
}
.hp12s5Text{color: #ccc;}
ul.hp12s12brands{
    margin: 0 ;
    padding: 0 ;
    list-style-type: none;
	text-align: center;
}
ul.hp12s12brands li{
	display: inline-block;
	margin: 0 5px 10px;
}
.hp12s8Content {padding: 20px 0 20px 55px;}
.hp12s8Content ul{
    margin: 25px 0 15px ;
    padding: 0 ;
    list-style-type: none;
	position: relative;
}
.hp12s8Content ul:after {
    content: "";
    display: block;
    clear: both;
}
.hp12s8Content ul li{
	float: left;
	width: 50%;
	padding-left: 20px;
	margin-bottom: 30px;
	position: relative;
	color: #000;
	font-size: 18px;
}
.hp12s8Content ul li:before{
	position: absolute;
	content: '';
	top: 9px;
	left: 0;
	width: 8px;
	height: 8px;
	background: #16529b;
	border-radius: 100%;
}
ul.hp12s9List{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
ul.hp12s9List li{
	width: calc(33% - 20px);
	float: left;
	margin: 0 10px 15px;
	padding: 35px 10px;
	border: 2px solid #eaedf4;
	font-size: 18px;
	color: #060a12;
	text-align: center;
	transition: all .3s;
	background: 101% 101% no-repeat;
}
ul.hp12s9List li a{
	color: #060a12;
	text-decoration: none ;
}
ul.hp12s9List li:hover{
	border: 2px solid #16529b;
	background: url(/wp-content/uploads/2022/07/s9ListIcon.png) 101% 101% no-repeat #16529b;
	color: #fff;
}
ul.hp12s9List li:hover a{color: #fff;}
.hp12Form, .quickQuote{
	box-shadow: 0 0 80px 13px rgba(141, 153, 204, .10);
	padding: 50px 35px 45px;
	border: 1px solid #ecf1f6;
}
.hp12FormTitle{
	font-size: 32px;
	font-weight: 700;
	color: #060a12;
	margin-bottom: 25px;
	text-align: center;
}
.hp12Form input[type="text"], .hp12Form input[type="email"], .hp12Form textarea, .quickQuote input[type="text"], .quickQuote input[type="email"], .quickQuote textarea{
	width: 100%;
	background: #f5f7fb;
	border: 1px solid #f5f7fb ;
	border-radius: 0 ;
	padding: 20px;
	margin-bottom: 10px;
}
.hp12Form input[type="text"]:active, .hp12Form input[type="email"]:active, .hp12Form textarea:active, .hp12Form input[type="text"]:focus, .hp12Form input[type="email"]:focus, .hp12Form textarea:focus, .quickQuote input[type="text"]:active, .quickQuote input[type="email"]:active, .quickQuote textarea:active, .quickQuote input[type="text"]:focus, .quickQuote input[type="email"]:focus, .quickQuote textarea:focus{
	background: #fff;
	border: 1px solid #ecf1f6;
}
.hp12Form input[type="text"]::placeholder, .hp12Form input[type="email"]::placeholder, .hp12Form textarea::placeholder, .quickQuote input[type="text"]::placeholder, .quickQuote input[type="email"]::placeholder, .quickQuote textarea::placeholder{
	color: #b0b1b5;
}
.hp12Form textarea{height: 180px;}
.quickQuote textarea{height: 120px;}
.hp12Form input[type="submit"], .quickQuote input[type="submit"]{
	display: block;
	width: 100%;
	padding: 24px;
}
.quickQuote{padding: 20px;}
.quickQuoteTitle {
    font-size: 22px;
    font-weight: 600;
    color: #060a12;
    margin-bottom: 10px;
}
.quickQuote input[type=text], .quickQuote input[type=email], .quickQuote textarea {
    padding: 10px;
    margin-bottom: 8px;
}
.quickQuote .uploadBTNLabel {padding: 18px 45px 18px 25px;}
.quickQuote input[type=submit]{padding: 18px;}
.hp12Section6Content{
	padding: 30px 0 0 55px;
}
.hp12Section6 h2 b{color: #16529b;}
.hp12s6Box{
	position: relative;
	padding: 20px 0 0;
}
.hp12s6Box:after, .hp12s7List ul:after{
    content: "";
    display: block;
    clear: both;
}
.hp12s6Img{
	width: 40px;
	float: left;
}
.hp12s6Content{
	width: calc(100% - 40px);
	float: left;
	padding-left: 20px;
}
.hp12s6Title {
    font-size: 18px;
    color: #060a12;
    font-weight: 600;
    margin-bottom: 10px;
}
.hp12s6Text{font-size: 14px;}
.hp12Section7, .hp12Section11 {position: relative;}
.hp12Section7:before, .hp12Section11:before {
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: 85%;
	height: 60%;
	background: #f5f6f9;
}
ul.hp12s7Slider{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
ul.hp12s7Slider li{outline: none;}
ul.hp12s7Slider .slick-arrow{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 61px;
	height: 61px;
	background: url(/wp-content/uploads/2022/07/s8Arrow.png) 0 0 no-repeat;
	text-indent: -99999999px;
	z-index: 1;
	padding: 0;
}
ul.hp12s7Slider .slick-next{
	background-position: -61px 0;
	left: 70px;
}
ul.hp12s7Slider .slick-prev:hover{background-position: 0 -61px;}
ul.hp12s7Slider .slick-next:hover{background-position: -61px -61px;}
.hp12s7Img{position: relative;}
.hp12s7Img .hp12s7Btn{
	position: absolute;
	bottom: 0;
}
.hp12s7Content{padding-top: 70px;}
.hp12s7List{padding-top: 150px;}
.hp12s7List ul{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
	position: relative;
}
.hp12s7List ul li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 30px;
	width: 50%;
	float: left;
}
.hp12s7List ul li:before{
	position: absolute;
	content: '';
	top: 5px;
	left: 0;
	width: 18px;
	height: 12px;
	background: url(/wp-content/uploads/2022/07/checkIcon2.png) 0 0 no-repeat;
}
.hp12Section11:before {
	width: 65%;
	height: 50%;
}
ul.hp12s11Slider {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
}
ul.hp12s11Slider li{
	outline: none;
	margin: 0 15px;
}
.hp12s11Box{position: relative;}
.hp12s11Content{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	color: #fff;
}
.hp12s11Title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}
.hp12s11Text{display: none;}
.hp12s11Box:hover .hp12s11Text{display: block;}
.hp12s11Btn{
	position: absolute;
	bottom: 20px;
}
.hp12s11Btn .commonBtn{
	padding: 15px 30px;
	border-radius: 40px;
}
ul.hp12s11Slider .slick-arrow{
	position: absolute;
	content: "";
	left: calc(50% - 40px);
	bottom: -50px;
	width: 40px;
	height: 40px;
	background: url(/wp-content/uploads/2022/07/s11Arrow.png) no-repeat;
	text-indent: -9999999px;
	padding: 0;
	z-index: 1;
}
ul.hp12s11Slider .slick-prev{
	border-right: 1px solid #cbcbcb;
	background-position: 0 10px;
}
ul.hp12s11Slider .slick-next{
	left: 50%;
	background-position: 0 12px;
	transform: rotate(180deg);
}
.hp12Section10{
	position: relative;
	background-size: cover;
	background-position: center;
}
ul.hp12s10Slider {
	margin: 0 -15px ;
	padding: 0 ;
	list-style-type: none;
}
.hp12s10Slider li{
	outline: none;
	margin: 0 15px;
}
.hp12s10Box{
	background: #fff;
	border-radius: 40px;
	padding: 30px;
}
.hp12s10Img{
	float: left;
	width: 80px;
	border-radius: 100%;
	overflow: hidden;
}
.hp12s10Content{
	width: calc(100% - 80px);
	float: left;
	padding: 0 0 0 20px;
}
.hp12s10Name {
    font-size: 20px;
    font-weight: 600;
    color: #060a12;
    margin-top: 12px;
}
.hp12s10Slider .slick-arrow{
	position: absolute;
	content: '';
	top: -70px;
	width: 35px;
	height: 25px;
	background: url(/wp-content/uploads/2022/07/s10Arrow.png) no-repeat;
	text-indent: -9999999px;
	z-index: 1;
	padding: 0;
}
.hp12s10Slider .slick-prev{
	background-position: 0 4px;
	right: 50px;
}
.hp12s10Slider .slick-next {
    transform: rotate(180deg);
    background-position: 0 5px;
    right: 15px;
    border-right: 1px solid #fff;
}

/* Customer Success Stories Section */
.customer-stories-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f5f8fc 0%, #e8f1fb 100%);
    position: relative;
    overflow: hidden;
}

/* Lucide Icons Styles */
.customer-stories-section i[data-lucide] {
    width: auto;
    height: auto;
}

.badge-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
}

.duration-icon {
    width: 14px;
    height: 14px;
    color: currentColor;
}

.check-icon {
    width: 20px;
    height: 20px;
    color: #10b981;
}

.customer-stories-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    transform: rotate(35deg);
    pointer-events: none;
}

/* Header Styles */
.stories-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(22, 82, 155, 0.3);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.stories-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 20px;
    line-height: 1.2;
}

.highlight-text {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.stories-subtitle {
    font-size: 20px;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Stories Grid */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Story Cards */
.story-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: none;
    border: none;
    overflow: hidden;
}

.story-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Featured Card */
.story-card.featured {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    color: white;
    transform: scale(1.05);
}

.featured-badge {
    position: absolute;
    top: 20px;
    right: 30px;
    background: var(--color-accent);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 191, 99, 0.3);
}

/* Title Icon - inline with title */
.title-icon {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    color: var(--color-brand-primary);
    vertical-align: bottom;
    flex-shrink: 0;
}

.story-card.featured .title-icon {
    color: white;
}

/* Card Title */
.story-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-text-main);
    display: flex;
    align-items: flex-end;
    line-height: 1.3;
}

.story-card.featured .story-title {
    color: white;
}

/* Partnership Info */
.partnership-info {
    margin-bottom: 16px;
}

.partnership-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 82, 155, 0.08);
    color: var(--color-brand-primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.story-card.featured .partnership-duration {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* Brand Logos */
.brand-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.brand-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.brand-logo-item:hover {
    background: rgba(22, 82, 155, 0.05);
}

.brand-logo-item img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Story Description */
.story-description {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
}

.story-card.featured .story-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Story Metrics */
.story-metrics {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.metric {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 82, 155, 0.1);
    border-radius: 10px;
    color: var(--color-brand-primary);
    flex-shrink: 0;
}

.metric-icon i[data-lucide] {
    width: 20px;
    height: 20px;
}

.story-card.featured .metric-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.metric-text {
    color: #475569;
    font-weight: 500;
}

.story-card.featured .metric-text {
    color: white;
}

/* Customer Quote */
.customer-quote {
    margin: 0;
    padding: 20px;
    background: #f8fafc;
    border-left: 4px solid var(--color-brand-primary);
    border-radius: 0 12px 12px 0;
    position: relative;
}

.story-card.featured .customer-quote {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: white;
}

.customer-quote p {
    margin: 0;
    color: #475569;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
}

.story-card.featured .customer-quote p {
    color: white;
}

/* Card Stats */
.card-stats {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.story-card.featured .card-stats {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--color-brand-primary);
    line-height: 1;
}

.story-card.featured .stat-value {
    color: white;
}

.stat-label {
    display: block;
    font-size: 14px;
    color: #64748b;
    margin-top: 4px;
}

.story-card.featured .stat-label {
    color: rgba(255, 255, 255, 0.8);
}

/* CTA Section */
.stories-cta {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #e2e8f0;
    position: relative;
    z-index: 1;
}

.cta-text {
    font-size: 20px;
    color: #475569;
    margin-bottom: 24px;
    font-weight: 500;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(22, 82, 155, 0.3);
}

.btn-primary:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(22, 82, 155, 0.4);
}

.btn-secondary {
    background: white;
    color: var(--color-brand-primary);
    border: 2px solid var(--color-brand-primary);
}

.btn-secondary:hover {
    background: rgba(22, 82, 155, 0.05);
    color: var(--color-brand-primary);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .customer-stories-section {
        padding: 60px 0;
    }

    .stories-title {
        font-size: 36px;
    }

    .stories-subtitle {
        font-size: 18px;
    }

    .stories-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .story-card {
        padding: 30px 24px;
    }

    .story-card.featured {
        transform: none;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Animation for scroll */
.story-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.story-card:nth-child(1) { animation-delay: 0.1s; }
.story-card:nth-child(2) { animation-delay: 0.2s; }
.story-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Testimonial Card Styles */
.story-card.testimonial-card {
    background: white;
    padding: 32px 32px 0 32px;
    border-radius: 24px;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.story-card.testimonial-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.quote-icon {
    color: #e0e7ff;
    margin-bottom: 24px;
    width: 36px;
    height: 36px;
}

.testimonial-quote {
    margin: 0;
    flex-grow: 1;
    border-left: 4px solid rgba(0, 0, 0, 0.1);
    padding-left: 24px;
}

.testimonial-quote p {
    font-size: 18px;
    color: #475569;
    line-height: 1.5;
    font-style: italic;
    margin-bottom:0;
}

.testimonial-author {
    padding-top: 24px;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
}

.author-avatar {
    width: 120px;
    height: 120px;
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-details {
    flex: 1;
}

.author-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.author-title {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.testimonial-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.metric-item {
    background: #f8fafc;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-brand-primary);
    margin-bottom: 4px;
}

.metric-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure featured testimonial maintains its special styling */
.story-card.featured.testimonial-card {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    color: white;
    border: none;
    padding: 32px 32px 0 32px;
}

.story-card.featured.testimonial-card .quote-icon {
    color: rgba(255, 255, 255, 0.2);
}

.story-card.featured.testimonial-card .testimonial-quote {
    border-left-color: rgba(255, 255, 255, 0.3);
}

.story-card.featured.testimonial-card .testimonial-quote p {
    color: white;
}

/* Remove border-top from featured testimonial author */

.story-card.featured.testimonial-card .author-name {
    color: white;
}

.story-card.featured.testimonial-card .author-title {
    color: rgba(255, 255, 255, 0.8);
}

.story-card.featured.testimonial-card .metric-item {
    background: rgba(255, 255, 255, 0.1);
}

.story-card.featured.testimonial-card .metric-value {
    color: white;
}

.story-card.featured.testimonial-card .metric-label {
    color: rgba(255, 255, 255, 0.8);
}/*----------------------------------------------
  Resource Center - Compact & Elegant
----------------------------------------------*/
.resource-center-section {
    background: #ffffff;
    padding: 50px 0;
}

/* Section Header */
.resource-center-section .section-header {
    padding-bottom: 0;
    border-bottom: none;
}

.resource-center-section .section-header h2 {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 20px;
    line-height: 1.2;
}

.resource-center-section .section-header p {
    font-size: 20px;
    color: #64748b;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Section Headers - Simplified */
.knowledge-header,
.faq-header,
.guides-header {
    margin-bottom: 20px;
}

.knowledge-header h3,
.faq-header h3,
.guides-header h3 {
    font-size: 24px;
    font-weight: 600;
    color: #03363D;
    margin: 0;
    display: flex;
    align-items: center;
}

.knowledge-header h3 i,
.faq-header h3 i,
.guides-header h3 i {
    font-size: 26px;
    color: #16529b;
    margin-right: 14px;
}

.knowledge-header p,
.faq-header p,
.guides-header p {
    font-size: 14px;
    color: #94a3b8;
    margin: 3px 0 0;
    font-weight: 400;
}

/* Sections Spacing */
.knowledge-base-section,
.faq-section {
    margin-bottom: 30px;
}

/* Row containers for equal height cards */
.row.equal-height-cards {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.row.equal-height-cards .col-md-4,
.row.equal-height-cards .col-md-6 {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    margin-bottom: 24px;
}

/* Reset Bootstrap column widths */
.row.equal-height-cards .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row.equal-height-cards .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

/* For smaller screens */
@media (max-width: 768px) {
    .row.equal-height-cards .col-md-4,
    .row.equal-height-cards .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
}

/* Category Styles - Using card variants */
.kb-category,
.faq-category,
.guide-category {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 24px;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.kb-category:hover {
    background-color: #f8fafc;
}

/* faq-category and guide-category styles are now merged above */

/* Hover effects for all category types */
.kb-category:hover,
.faq-category:hover,
.guide-category:hover {
    background-color: #f8fafc;
    border-color: #f8fafc;
}

.kb-category h4,
.faq-category h4,
.guide-category h4 {
    font-size: 18px;
    font-weight: 600;
    color: #03363D;
    margin: 0 0 6px;
}

.kb-category p,
.faq-category p,
.guide-category p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 12px;
    line-height: 1.4;
}

/* Resource Links - Clean */
.resource-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex-grow: 1;
}

.resource-list li {
    margin-bottom: 8px;
}

.resource-list li:last-child {
    margin-bottom: 0;
}

.resource-list li {
    padding-left: 0;
    list-style-type: none;
}

.resource-list li a {
    color: #475569;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
    padding-left: 0;
}

.resource-list li a::before {
    content: '›';
    color: #16529b;
    margin-right: 8px;
    font-size: 18px;
    font-weight: 300;
}

.resource-list li a:hover {
    color: #16529b;
}

/* Quick Links - Minimal */
.quick-links-card {
    background: none;
    border: none;
    padding: 0;
}

.quick-links-card .card-body {
    padding: 0;
}

.quick-links-card h5 {
    font-size: 20px;
    font-weight: 600;
    color: #03363D;
    margin-bottom: 20px;
}

.quick-links-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-link-btn {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #64748b;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.quick-link-btn:hover {
    background: #f1f5f9;
    color: #16529b;
    transform: translateX(4px);
}

.quick-link-btn i {
    margin-right: 12px;
    font-size: 16px;
    opacity: 0.7;
}

/* FAQ Cards - Light */
.faq-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.faq-card:hover {
    background-color: #f8fafc;
    border-color: #f8fafc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-card h6 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
}

.faq-card p {
    font-size: 14px;
    color: #94a3b8;
    margin: 0 0 12px;
    line-height: 1.5;
}

.faq-card .btn-link {
    color: #16529b;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 0;
}

.faq-card .btn-link:hover {
    text-decoration: underline;
}

/* Guide Cards - Simple */
.guide-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 28px;
    height: 100%;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.guide-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #f1f5f9;
    transition: background 0.2s ease;
}

.guide-card:hover {
    background-color: #f8fafc;
    border-color: #f8fafc;
}

.guide-card:hover::before {
    background: #16529b;
}

.guide-card h6 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px;
}

.guide-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px;
    line-height: 1.5;
}

.guide-card .btn-link {
    color: #16529b;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.guide-card .btn-link::after {
    content: '→';
    margin-left: 6px;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.guide-card .btn-link:hover::after {
    transform: translateX(3px);
}

/* Buttons - Simple Text Links */
.btn-text-link {
    display: inline-block;
    color: #16529b;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s ease;
    padding-top: auto;
    margin-top: auto;
}

.btn-text-link:hover {
    color: #03363D;
    text-decoration: underline;
}

.section-btn-container {
    text-align: center;
    margin-top: 40px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .resource-center-section {
        padding: 50px 0;
    }

    .resource-center-section .section-header h2 {
        font-size: 36px;
    }

    .knowledge-header h3,
    .faq-header h3,
    .guides-header h3 {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .resource-center-section {
        padding: 40px 0;
    }

    .resource-center-section .section-header h2 {
        font-size: 30px;
    }

    .knowledge-header h3,
    .faq-header h3,
    .guides-header h3 {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .knowledge-header h3 i,
    .faq-header h3 i,
    .guides-header h3 i {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .knowledge-header a.btn-text-link,
    .faq-header a.btn-text-link {
        align-self: stretch;
        text-align: center;
        padding: 12px 0;
        border-top: 1px solid #f1f5f9;
        margin-top: 20px;
    }

    .knowledge-base-section,
    .faq-section {
        margin-bottom: 30px;
    }

    .faq-card,
    .guide-card {
        padding: 20px;
    }

    .quick-links-wrapper {
        gap: 8px;
    }

    .quick-link-btn {
        padding: 14px 18px;
    }
}

@media (max-width: 480px) {
    .resource-center-section .section-header h2 {
        font-size: 26px;
    }

    .resource-center-section .section-header p {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .resource-list li a,
    .quick-link-btn {
        font-size: 15px;
    }

    .btn-primary-custom,
    .btn-outline-custom {
        padding: 11px 28px;
        font-size: 14px;
    }
}

/*----------------------------------------------
  Featured Series Section (New)
----------------------------------------------*/
.featured-series-section {
    padding: 80px 0;
    overflow-x: visible; /* Allow horizontal overflow for carousel */
    overflow-y: hidden; /* Hide vertical overflow */
    background-color: #f8fafc; /* bg-slate-50 */
}

/* Header Grid */
.series-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    gap: 32px;
}

@media (max-width: 768px) {
    .series-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 40px;
    }
}

.series-header .header-content {
    /* width限制已移除，允许内容自然流动 */
}

.series-header .sub-title {
    color: #16529b; /* text-brand-600 */
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}

.series-header .main-title {
    font-size: 48px; /* text-5xl */
    font-weight: 700;
    color: #0f172a; /* text-slate-900 */
    margin: 0 0 16px 0;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .series-header .main-title {
        font-size: 36px; /* text-4xl */
    }
}

.series-header .description {
    margin-top: 16px;
    margin-bottom: 0;
    color: #64748b; /* text-slate-500 */
    font-size: 18px; /* text-lg */
    font-weight: 300; /* font-light */
    line-height: 1.6;
}

/* Featured Series Navigation Buttons */
.series-header .header-actions {
    display: flex;
    gap: 12px;
}

.featured-series-section .series-header .series-nav-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #e2e8f0; /* border-slate-200 */
    background: #ffffff;
    color: #94a3b8; /* text-slate-400 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1;
}

.featured-series-section .series-header .series-nav-btn:hover {
    border-color: #16529b;
    color: #16529b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.featured-series-section .series-header .series-nav-btn:active {
    transform: scale(0.95);
}

.featured-series-section .series-header .series-nav-btn.next-btn:hover {
    background-color: #16529b;
    border-color: #16529b;
    color: #ffffff;
}

/* Carousel - 基于参考结构的实现 */
.series-carousel {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding-bottom: 48px; /* pb-12 */

    /* 关键的对齐计算 */
    padding-left: max(24px, calc((100vw - 1320px) / 2 + 15px)); /* max(1.5rem, calc((100vw-80rem)/2)) + container padding */
    padding-right: 100px; /* 右侧额外空间 */

    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

.series-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 确保所有父级都不裁切悬浮效果 */
.featured-series-section {
    overflow: visible;
}

.series-carousel {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding-bottom: 20px;

    /* 关键的对齐计算 */
    padding-left: max(24px, calc((100vw - 1320px) / 2 + 15px)); /* max(1.5rem, calc((100vw-80rem)/2)) + container padding */
    padding-right: 100px; /* 右侧额外空间 */
    padding-top: 20px; /* 上方空间 */

    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

/* 确保卡片悬浮效果不被裁切 */
.series-card {
    margin-bottom: 20px; /* 为上方悬浮预留空间 */
}

/* Create invisible element to extend scrollable area */
.series-carousel::after {
    content: '';
    display: block;
    width: 100px; /* Ensure final scroll shows last card completely */
    height: 1px;
    flex-shrink: 0;
}

.series-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Card Styles */
.resource-center-section .series-card,
.featured-series-section .series-card {
    min-width: 420px;
    scroll-snap-align: start;
    background: #ffffff;
    border: 1px solid #f1f5f9; /* border-slate-100 */
    border-radius: 24px; /* rounded-3xl */
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .resource-center-section .series-card,
    .featured-series-section .series-card {
        min-width: 300px;
    }
}

.resource-center-section .series-card:hover,
.featured-series-section .series-card:hover {
    box-shadow: 0 25px 50px -12px rgba(22, 82, 155, 0.1); /* shadow-brand-900/10 */
    transform: translateY(-4px);
}

/* Card Image */
.resource-center-section .card-image,
.featured-series-section .card-image {
    height: 320px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.resource-center-section .card-image img,
.featured-series-section .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform; /* 优化性能 */
}

.resource-center-section .series-card:hover .card-image img,
.featured-series-section .series-card:hover .card-image img {
    transform: scale(1.05);
}

.resource-center-section .image-overlay,
.featured-series-section .image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(22, 82, 155, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.resource-center-section .series-card:hover .image-overlay,
.featured-series-section .series-card:hover .image-overlay {
    opacity: 1;
}

/* Card Content */
.resource-center-section .card-content,
.featured-series-section .card-content {
    padding: 32px;
}

.resource-center-section .card-category,
.featured-series-section .card-category {
    font-size: 12px;
    font-weight: 700;
    color: #16529b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.resource-center-section .card-title,
.featured-series-section .card-title {
    font-size: 24px; /* text-2xl */
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    transition: color 0.3s ease;
}

.resource-center-section .series-card:hover .card-title,
.featured-series-section .series-card:hover .card-title {
    color: #16529b;
}

.resource-center-section .card-desc,
.featured-series-section .card-desc {
    color: #64748b;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Link with Arrow */
.resource-center-section .card-link,
.featured-series-section .card-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

.resource-center-section .series-card:hover .card-link,
.featured-series-section .series-card:hover .card-link {
    color: #16529b;
    border-color: #16529b;
}

.resource-center-section .card-link svg,
.featured-series-section .card-link svg {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.resource-center-section .series-card:hover .card-link svg,
.featured-series-section .series-card:hover .card-link svg {
    transform: translateX(4px);
}.contact-section {
    background: var(--color-brand-primary);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: rotate(45deg);
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: rotate(45deg) translate(0, 0);
    }
    100% {
        transform: rotate(45deg) translate(50px, 50px);
    }
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* Left Column - Contact Info */
.contact-info {
    color: #ffffff;
}

.contact-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.contact-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #ffffff;
}

.contact-description {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 35px;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.contact-icon svg {
    color: #ffffff;
    width: 24px;
    height: 24px;
}

.contact-details h4 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
}

.contact-details a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}

.contact-details a:hover {
    color: #ffffff;
}

.contact-details p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* Right Column - Contact Form */
.contact-form-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

/* Override Astra theme styles with higher specificity */
.contact-section .contact-form .form-input,
.contact-section .contact-form .form-textarea,
.contact-section .contact-form .form-select,
.contact-section input.form-input,
.contact-section textarea.form-textarea,
.contact-section select.form-select {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    opacity: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.contact-section .contact-form .form-select,
.contact-section select.form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    background-color: #f8fafc !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

.contact-section .contact-form .form-select:hover,
.contact-section select.form-select:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    background-color: #f8fafc !important;
}

.contact-section .contact-form .form-input:focus,
.contact-section .contact-form .form-textarea:focus,
.contact-section input.form-input:focus,
.contact-section textarea.form-textarea:focus {
    border-color: var(--color-brand-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px var(--color-brand-primary) !important;
    outline: none !important;
}

.contact-section .contact-form .form-select:focus,
.contact-section select.form-select:focus {
    border-color: var(--color-brand-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px var(--color-brand-primary) !important;
    outline: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2C67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
}

.contact-section .contact-form .form-input::placeholder,
.contact-section .contact-form .form-textarea::placeholder,
.contact-section input.form-input::placeholder,
.contact-section textarea.form-textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.contact-section .contact-form .form-textarea,
.contact-section textarea.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-actions {
    padding-top: 16px;
    margin-top: 8px;
}

/* Override Astra button styles with higher specificity */
.contact-section .contact-form button.submit-btn,
.contact-section button.submit-btn {
    width: 100% !important;
    padding: 16px !important;
    background: var(--color-brand-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: auto !important;
    box-shadow: 0 10px 25px rgba(15, 44, 103, 0.3) !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    margin-top: 0 !important;
}

.form-disclaimer {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 16px;
    margin-bottom: 0;
}

.contact-section .contact-form button.submit-btn:hover,
.contact-section button.submit-btn:hover {
    background: #0a1633 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px rgba(15, 44, 103, 0.4) !important;
    color: #fff !important;
}

.contact-section .contact-form button.submit-btn:focus,
.contact-section button.submit-btn:focus {
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(22, 82, 155, 0.1) !important;
}

.contact-section .contact-form button.submit-btn:active,
.contact-section button.submit-btn:active {
    transform: translateY(0) !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-section {
        padding: 80px 0;
    }

    .contact-content {
        gap: 50px;
    }

    .contact-title {
        font-size: 42px;
    }

    .contact-form-wrapper {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-title {
        font-size: 36px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .contact-form-wrapper {
        padding: 35px;
    }
}

@media (max-width: 480px) {
    .contact-title {
        font-size: 32px;
    }

    .contact-form-wrapper {
        padding: 30px 25px;
    }

    .contact-item {
        gap: 15px;
    }

    .contact-icon {
        width: 50px;
        height: 50px;
    }
}

/*
Theme Name: STLPAK - Global Packaging Solutions
Author: STLPAK
Author URI: https://stlpak.com/
Description: Custom child theme for STLPAK Global Packaging Solutions website. Based on Astra theme with custom styling and functionality.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-stlpak
Template: astra
*/

/* Base Reset & Global Styles */
.ast-search-menu-icon.slide-search input.search-field {
    width: inherit ;
}

* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
a:empty {visibility: none;}
.gallery:after{
	content: "";
    display: block;
    clear: both;
}
.gallery-item{float: left;}
.gallery-caption {
    background: transparent ;
    border: none ;
}

/* Utility Classes */
.greySection {background: #f6f6f6;}
.darkGreySection {background: #e9e9e9;}
.blueSection {background: #16529b;}
.ltBlueSection {background: #f4f6f9;}
.clrWhite {color: #fff ;}
.clrBlue {color: #16529b ;}

/* Media */
.visible-sm {display: none;}
@media(min-width: 1200px) and (max-width: 1339px){
  .hp11s4Box1 {padding: 0 60px;}
  .hp11s4Box2Content {padding: 140px 30px 0;}
}
@media(min-width: 1200px) {
  .bannerHeading {
    font-size: 44px;
    line-height: 54px;
  }
  .bannerText {
    font-size: 22px;
    line-height: 24px;
  }
  .about6Banner .bannerHeading {
    font-size: 60px;
    font-weight: 800;
  }
  .about6Banner .bannerText {
	font-size: 30px;
	line-height: 32px;
  }
  .pc2BannerTitle {
  	font-size: 40px;
	line-height: 48px;
  }
  .pc2BannerTitle b {font-size: 30px;}
  .hp13Col20{width: 20%;}
}
@media(min-width: 992px) and (max-width: 1199px){
  /* .faqWrapper {padding-left: 0;} DEPRECATED - was only used in template-home.php homeContactSection */
  .bannerWraper .bannerContent {
	max-width: 970px;
	margin-top: 4%;
  }
  .pc3Banner .bannerContent {margin-top: 0;}
  .bannerText {padding: 5px 0 0;}
  .quickQuote {padding: 15px;}
  .xyzBanner .banerContentWrapper {padding-top: 2%;}
  .xyzBanner .banerContent {padding: 20px;}
  .about2Banner .bannerContent {padding-top: 9%;}
  .h3Sec4Content {padding-bottom: 30px;}
  .h3CertificateWrapper {margin: 30px auto 0;}
  .homeSliderLGTitle:before, .homeSliderLGTitle:after {display: none;}
  .page-template-template-home4 .site-content h1, .page-template-template-home4 .site-content h2{font-size: 38px ;}
  .hp4SearchBar .searchTitle {font-size: 32px;}
  .cu4contactForm, .cu4contactDetails {
	float: none;
	width: 100%;
  }
  .h5TabsWrapper ul.tabs li{margin-right: 10px;}
  .pc4quickQuote {padding: 15px;}
  .hp6Section1{
	background: #fff ;
	padding: 0;
  }
  .hp6Section1Img{margin-top: 30px;}
  .hp6Section1Details h1 {margin-top: 0;}
  .hp6s3Product {padding-bottom: 10px;}
  .hp6Section4Content {
    top: 25px;
    left: 40px;
    min-height: auto;
    padding: 20px;
  }
  .hp6s5FeaturedBox {padding: 20px;}
  ul.hp6s10List li a {
    font-size: 16px;
    font-weight: 500;
  }
  .hp6s11ProductTitle {font-size: 22px;}
  .hp6s11ProductTitle:before {top: 6px;}
  .hp6s12Img {width: 220px;}
  .hp6s12Title {
    width: calc(100% - 220px);
    padding: 40px 10px 0;
  }
  .hp6Section12 h2{font-size: 34px ;}
  .pc3BannerHeading {
    font-size: 40px;
    line-height: 48px;
  }
  .pc3BannerLayer, .pc3Form{padding: 15px;}
  .pc3FormTitle {
    font-size: 22px;
    padding-bottom: 20px;
  }
  ul.detailProductSlider .slick-slide {max-height: 400px;}
  ul.productSliderPager .slick-slide {max-height: 82px;}
  .pd6liderWraper ul.productSliderPager .slick-slide {max-height: 56px;}
  .hp8QuickQuote {padding: 20px;}
  .hp8QuickQuoteTitle {font-size: 26px;}
  .hp9s1Box {
    border-radius: 15px;
    padding: 15px;
  }
  .hp9s8Wraper {padding: 30px 20px 30px;}
  .hp9Section12 h2 b {font-size: 48px;}
  .hp9s6VideoWraper {text-align: center;}
  .pc6BannerContent {
    margin-top: 2%;
    padding: 15px;
    max-width: 580px;
  }
  .pc3s5Content {width: calc(100% - 270px);}
  .hp11Section8 {text-align: center;}
  .hp11s4Box1 {padding: 0 50px;}
  .hp11s4Box2Content {padding: 100px 20px 0;}
  .hp11s6Box {padding: 20px;}
  .lp7s3Title, .hp11s3Title, .lp7s7Text{text-transform: none;}
  .lp7s5Box1 {padding: 10px 20px;}
  .hp12Section3{background: #fff ;}
  .hp12Section6Content, .hp12s8Content{padding: 0 0 0 15px;}
  .hp12s7Content {padding-top: 0;}
  .hp12s7List {padding-top: 40px;}
  .hp12Section7:before {width: 95%;}
  .hp12s7List ul li, .hp12s8Content ul li{
	margin-bottom: 10px;
    font-size: 14px;
  }
  ul.hp12s9List li {
    margin: 0 10px 10px;
    padding: 15px 5px;
  }
  .hp12s10Box {
    border-radius: 10px;
    padding: 10px;
  }
  .hp12s11Title {font-size: 24px;}
  .hp13Col20{width: 20%;}
  .hp13s5Box {
    margin: 0 6px 10px;
    width: 170px;
  }
  .hp13s1wrapper {margin-top: 60px;}
  .hp13s4Title {padding: 25px 0 15px;}
  .hp13s4Text {padding: 0;}
  .hp13s6Box {padding: 20px;}
  .hp14Tabs ul.tabs {margin: 10px 0 0 ;}
  .hp14s4Box {max-width: 333px;}
  .hp14Section1{margin-top: 60px;}
  .hp15PostWrapper {padding: 15px;}
  .hp15s9Content {padding: 35px 50px;}
  .hp15PostBox1 {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  ul.hp15brands li {max-width: 235px;}
  .hp15s8Title, .hp15PostTitle a{font-size: 20px;}
  .hp15s1Text {margin-top: 0;}
  .hp15s2Title {font-size: 26px;}
  .hp16Section1 {padding: 70px 0 30px;}
  .hp16s1Content {padding: 0 0 0 15px;}
  .hp16Section2 {padding-bottom: 70px;}
  .hp16s2Box {max-width: 320px;}
  .hp16s3RowRight .hp13s3Content {padding-left: 15px;}
  .hp16s3Row {padding-bottom: 70px;}
  .hp16Section4 {
    border-radius: 0;
	padding: 40px 0;
  }	
  .hp16Section5 {margin: 70px 0;}
  .hp16s5Content {padding: 0 0 0 15px ;}	
  .hp16s5Text ul {margin: 25px 0 15px ;}
  .hp16s5Text ul li {
    padding-left: 15px;
    font-size: 16px;
  }	
  .hp16s5Text ul li:before {top: 3px;}
  .hp16Section6 {padding: 55px 0 50px;}
  .hp16s6Title {padding: 25px;}
  .hp16Section7 {padding: 70px 0;}
  .hp16s7Box {margin-top: 50px;}
  .hp16s8Content {padding: 30px;}
  .hp16Section9 {padding: 40px 0 50px;}
}
@media(min-width: 768px) and (max-width: 991px){
  .hidden-sm {display: none ;}
  .visible-sm {display: block ;}
  ul.productSliderPager .slick-slide {max-height: 140px;}
  .pd6liderWraper ul.productSliderPager .slick-slide {max-height: 125px;}
  .au6s2Box {padding: 70px 10px 20px;}
  .hp14s4Box {max-width: 375px;}
}
@media(max-width: 991px){
  .responsiveMargin {margin-top: 30px;}
  /* .faqWrapper {margin: 0 auto;} DEPRECATED - was only used in template-home.php homeContactSection */
  .footer-adv-overlay .col1 {margin-bottom: 30px;}
  .dblBtn a.commonBtn {margin: 0 10px;}
  .bannerWraper .bannerContent {margin-top: 4%;}
  .pc3Banner .bannerContent {margin-top: 0;}
  .formSection:before {display: none;}
  .contactPageWraper {background: #f5f5f5;}
  .featuredTitle {padding-top: 20px;}
  /* .sec6Box {padding: 20px 20px 0;} DEPRECATED - was only used in template-home.php homeSection6 */
  /* .sec5Box {margin: 0 0 30px;} DEPRECATED - was only used in template-home.php homeSection5 */
  .productContent {padding: 20px;}
  /* .faqWrapper {padding-left: 0;} DEPRECATED - was only used in template-home.php homeContactSection */
  .cBannerContent {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .categoryFormSection {padding: 10px 0;}
  .quickQuote {padding: 15px;}
  .cPageformSection:before{display: none;}
  .locationSection {padding-left: 15px ;}
  .bannerWraper .bannerContent {max-width: 750px;}
  .bannerText {padding: 5px 0 0;}
  .xyzBanner .banerBtn {display: none;}
  .xyzBanner .banerText {padding: 30px 0 0;}
  .about2Banner .bannerContent {padding-top: 9%;}
  .about2SecBoxWrapper:before {display: none;}
  .timelineWrapper:before {display: none;}
  .timelineBox {margin: 0 0 30px;}
  .timelineBox:before, .timelineBox:after {display: none;}
  .timelineBoxLeft .timelineTitle, .timelineBoxLeft .timelineText {text-align: left;}
  .LP2ProductImg, .LP2ProductContent {
  	width: 100%;
	float: none;
  }
  .LP2ProductContent {padding: 30px 0 0;}
  .LP2ProductImg {max-width: 370px;}
  .h3Sec4Content {padding-bottom: 30px;}
  .h3CertificateWrapper {margin: 60px auto 0;}
  .pc2BannerBtn {display: none;}
  .taAboutTeamBox {margin-bottom: 60px;}
  .MThomeContactForm {padding: 0 40px 55px;}
  .homeSliderLGTitle {
    font-size: 24px;
    line-height: 24px;
	padding: 12px 10px;
  }
  .homeSliderLGTitle:before, .homeSliderLGTitle:after {display: none;}
  .page-template-template-home4 .site-content h1, .page-template-template-home4 .site-content h2{font-size: 38px ;}
  .hp4SliderBox {padding: 30px 0;}
  .hp4SliderBoxDetails {padding: 0;}
  .hp4SliderBox:before {width: 100%;}
  .hp4Team1, .hp4Team3{text-align: center;}
  .h5TabsWrapper ul.tabs li {margin-bottom: 15px;}
  .cu4contactForm, .cu4contactDetails {
	float: none;
	width: 100%;
  }
  .h5section1 {margin-top: 50px;}
  .pc4quickQuote {padding: 15px;}
  .hp6Section1Img {margin-top: 30px;}
  .hp6Section1{
	background: #fff ;
	padding: 0;
  }
  .hp6Section4Content {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    min-height: auto;
    padding: 0;
  }
  .hp6s5FeaturedBox {padding: 15px;}
  .hp6s5ProductText {min-height: 215px;}
  .pc3BannerHeading {
    font-size: 36px;
    line-height: 44px;
  }
  .pc3BannerLayer, .pc3Form{padding: 15px;}
  .pc3FormTitle {
    font-size: 22px;
    padding-bottom: 20px;
  }
  ul.pc3ProductSlider .slick-prev {left: 0;}
  ul.pc3ProductSlider .slick-next {right: 0;}
  .pd7s8Box {padding: 15px;}
  .pd7s8Box>a {padding-left: 95px;}
  .pd7s8DTitle {font-size: 20px;}
  .pd7s8Text {
    font-size: 26px;
    line-height: 36px;
  }
  .pc5ssContent ul li {padding: 5px 15px;}
  .pc3s5Content {
	padding-left: 15px;
	width: calc(100% - 270px);
  }
  ul.pc3TestimonialSlider .pc3TestimonialBox {padding: 0 40px;}
  .lp6Section1 h1 {font-size: 36px ;}
  .lp6s2Heading {
    font-size: 26px;
    margin-bottom: 10px;
  }
  .lp6s1SubHeading {font-size: 20px;}
  .hp7s2Video {
    position: relative;
    left: 0;
    width: 100%;
    margin-top: 30px;
  }
  .hp7s2Video a:after{display: none;}
  .hp7s2Video a:before {left: 50%;}
  .hp8s11Content {padding: 10px;}
  .hp8QuickQuote {padding: 20px;}
  .hp8s7Text {min-height: auto;}
  .hp9s6VideoWraper {text-align: center;}
  .hp9s8Content {border-right: none;}
  .pc6s1Box {padding: 80px 15px 15px;}
  .pc6s4Box{padding: 15px;}
  .pc6BannerContent {
    position: relative;
    top: inherit;
    margin-top: -40px;
    max-width: 570px;
	padding: 15px;
	box-shadow: 0px 0px 4px 2px #efefef;
  }
  .pc5ScrollSection{display: none;}
  .hp11s4Box {display: block;}
  .hp11s4Box1 {
    display: block;
    width: 100%;
    padding: 60px;
  }
  .hp11s4Box2{padding: 0 60px;}
  .hp11s4Box2Content {padding: 60px 0 0;}
  .hp11s6Box {
    margin: 0;
    max-width: 670px;
  }
  .hp11s8Brands ul li {max-width: 140px;}
  .hp11s10Box {
	display: block;
	max-width: 570px;
	margin: 0 auto;
  }
  .hp11s10Left, .hp11s10Right, .lp7s7Box, .lp7s5Box1, .lp7s5Box2{
    display: block;
    width: 100%;
  }
  .hp11s10Right{padding: 25px;}
  .hp11Section8 {text-align: center;}
  .hp11s8Brands ul li{margin-bottom: 10px;}
  .hp11FAQs .accordion {
    text-transform: none;
    letter-spacing: 0;
  }
  .lp7s7Box, .lp7s5Box1{padding: 25px;}
  .lp7s1Text, .lp7s3Title, .hp11s3Title, .lp7s7Text, .lp7s6Title a{text-transform: none;}
  .hp12Section3{background: #fff ;}
  .hp12Section6Content, .hp12s8Content{padding: 0 0 0 15px;}
  .hp12s7Content {padding-top: 0;}
  .hp12s7List {padding: 10px 0;}
  .hp12Section7:before {width: 95%;}
  .hp12s7List ul li, .hp12s8Content ul li{
	margin-bottom: 10px;
    font-size: 14px;
  }
  ul.hp12s9List li {
    margin: 0 10px 10px;
    padding: 15px 5px;
	font-size: 16px;
  }
  .hp12s10Box {
    border-radius: 10px;
    padding: 10px;
  }
  ul.hp12s12brands {text-align: center;}
  ul.hp12s7Slider .slick-arrow {bottom: -65px;}
  .hp13s3List {padding-top: 0;}
  ul.hp13s3Slider .slick-arrow {bottom: -60px;}
  .hp13s1wrapper {margin-top: 60px;}
  .hp13s4Title {padding: 25px 0 15px;}
  .hp13s4Text {padding: 0;}
  .hp13s6Box {padding: 20px;}
  .hp14s1Box {max-width: 100%;}
  .hp14Tabs ul.tabs {margin: 10px 0 0 ;}
  .hp14Section2 {margin-bottom: 80px;}
  .hp14Section6 {margin: 80px 0;}
  .hp14Section9 {margin-bottom: 70px;}
  .hp14s3Text {padding: 20px 0;}
  .hp14Section5:before {
	width: 100%;
	height: 46%;
  }
  .hp14s10Title a {font-size: 18px;}
  .hp14Section12 {
	padding: 80px 0;
	text-align: center;
  }
  .hp14s12Btn {
	text-align: center;
	margin-top: 30px;
  }
  .hp14Section3:before {width: 55%;}
  .hp14Section8 {border-radius: 0;}
  .hp14Section1{margin-top: 60px;}
  .hp15s1Text {margin-top: 30px;}
  .hp15s1Text ul li {margin-bottom: 10px;}
  .hp15s2Title {
    font-size: 20px;
    font-weight: 600;
  }
  .hp15s2Text {font-weight: 400;}
  .hp15Section4:before {
    width: 100%;
    height: 460px;
  }
  .hp15s4Box:before {font-size: 40px;}
  .hp15s4Content {
    position: relative;
    color: #3a3c51;
	padding: 20px 0 0;
  }
  .hp15s4Title a{color: #3a3c51;}
  .hp15Section5 {padding: 50px 0;}
  .hp15s4Box {margin-bottom: 0;}
  ul.hp15brands li {margin-bottom: 10px;}
  .hp15s8Title, .hp15PostTitle a{font-size: 20px;}
  .hp15s8Title {min-height: 60px;}
  .hp15s7Box2 {margin-top: 30px;}
  .hp16Section1 {padding: 70px 0 30px;}
  .hp16s1Content {padding: 0 0 0 15px;}
  .hp16Section2 {padding-bottom: 70px;}
  .hp16s2Box {max-width: 360px;}
  .hp16s3RowRight .hp13s3Content {padding-left: 15px;}
  .hp16s3Row {padding-bottom: 70px;}
  .hp16Section4 {
    border-radius: 0;
	padding: 40px 0;
  }	
  .hp16s3Btn {padding-top: 20px;}
  .hp16s3Content h4 {margin-top: 0;}
  .hp16s3Text {max-width: 100%;}
  .hp16Section5 {margin: 70px 0;}
  .hp16s5Content {padding: 0 0 0 15px ;}	
  .hp16s5Text ul {margin: 25px 0 15px ;}
  .hp16s5Text ul li {
    padding-left: 15px;
    font-size: 16px;
  }	
  .hp16s5Text ul li:before {top: 3px;}
  .hp16Section6 {padding: 55px 0 50px;}
  .hp16s6Title {
    padding: 20px;
    font-size: 16px;
  }
  .hp16Section7 {padding: 70px 0;}
  .hp16s7Box {margin-top: 50px;}
  .hp16s8Content {padding: 30px;}
  .hp16Section9 {padding: 40px 0 50px;}
  .hp16s3RowRight .hp16s3Content{padding-left: 0;}
  .pc3BannerDetails br{display: none;}
}
@media(max-width: 767px){
  .hidden-xs{display: none;}
  .tabsWrapper {padding: 10px;}
  .tabsWrapper ul.tabs li {
  	display: block;
	width: auto;
	margin: 0 0 15px;
	text-align: center;
  }
  .bannerWraper .bannerContent {max-width: 480px;}
  .h3Certificates ul li {margin: 20px 10px 0;}
  .pc2TabsWrapper ul.tabs li {
  	width: auto;
	display: block;
  }
  .taTimelineBox {margin-bottom: 30px;}
  .pd2ContactForm textarea {min-height: 130px;}
  .MThomeContactForm {padding: 0 20px 45px;}
  .hp4SearchBar .searchTitle{font-size: 26px}
  .h5TabsWrapper ul.tabs li{
	display: block;
	width: auto;
	text-align: center;
	 margin-right: 0 ; 
  }
  .cu4contactForm {padding: 15px;}
  .cu4contactDetails {padding: 15px;}
  .gallery-item {max-width: 100% ;}
  .pc3BannerHeading {
    font-size: 30px;
    line-height: 36px;
  }
  .c1ProductContent {padding: 10px;}
  .hp6s5ProductText {min-height: auto ;}
  ul.hp6s10List li {
    width: 100%;
    margin: 0;
  }
  .hp6s12Img {width: 220px;}
  .hp6s12Title {width: calc(100% - 220px);}
  .hp6s12Title a {font-size: 20px;}
  .hp6s3Product {padding-bottom: 10px;}
  .pd6s1Tabs, .pd6s1DetailsBody{padding: 15px;}
  .pd6s1Tabs ul.tabs li {
    display: block ;
    margin: 0 ;
  }
  .lp5BannerHeading {
    font-size: 34px;
    line-height: 40px;
  }
  ul.detailProductSlider .slick-slide {max-height: 320px;}
  ul.productSliderPager .slick-slide {max-height: 94px;}
  .pd6liderWraper ul.detailProductSlider .slick-slide {max-height: 290px;}
  .pd6liderWraper ul.productSliderPager .slick-slide {max-height: 88px;}
  .pd7s3Tabs ul.tabs {
    position: relative;
    top: 0;
    margin: 0 0 15px ;
  }
  .pc3s5Content {
    padding: 20px 0 0 0;
    width: 100%;
  }
  .lp6s2Row1, .lp6s2Row2{padding: 10px 10px 15px;}
  .lp6s2Heading {
    font-size: 22px;
    line-height: 28px;
  }
  .lp6s2SubHeading {font-size: 16px;}
  .footer-adv-overlay .widget-title{margin-bottom: 20px ;}
  .dblBtn a.commonBtn {
	display: block;
	margin: 5px 0;
  }
  .hp9Section5 .col20 {
    width: 100%;
    margin-bottom: 30px;
  }
  .hp9s5PaddTop {padding-top: 0;}
  .hp9s6Box {text-align: left;}
  .hp9s7Title {margin: 10px 0;}
  .hp9s8Wraper {
    padding: 10px;
    border-radius: 10px;
  }
  ul.hp9Brands {text-align: center;}
  .pc6BannerContent {max-width: 480px;}
  /* .hp10s3Content padding removed - Featured Food Packaging section removed */
  .hp10FAQs .accordiaBox {padding: 0 15px;}
  .hp10FAQs .accordion {
    font-size: 18px;
    line-height: 24px;
  }
  .hp10CTA {
    text-align: center;
    margin-top: 10px;
  }
    .pc7s3Tabs ul.tabs li {padding: 12px 10px;}
  .hp11s2BoxWrapper {padding: 35px 20px 270px 20px;}
  .hp11s5Img, .hp11s5Btn {padding-top: 30px;}
  .hp12s1Box {max-width: 100%;}
  ul.hp12s9List li {width: calc(50% - 20px);}
  .headerTopbar ul li {margin-bottom: 15px;}
  .hp14Section1 {
    margin: 0 auto 40px;
    box-shadow: none;
  }
  .hp14Tabs ul.tabs li {
    margin: 0 0 10px;
    text-transform: none;
    display: block;
  }
  .hp14s4Box {
    float: none;
    margin: 0 auto;
  }
  .hp14Section4 {margin: 70px 0;}
  .hp14Section5 {padding: 60px 0;}
  .hp14s5Text1 ul li {width: 100%;}
  .hp15Section1 {padding: 70px 0 60px;}
  .hp15Col20 {
    width: 33% ;
    float: left;
  }
  .hp15Section3 {padding: 60px 0 50px;}
  .hp15Section4 {padding-top: 50px;}
  .hp15Section6 {padding-top: 60px;}
  .hp15s7Content {
    margin: -40px auto 0;
    padding: 20px 20px 5px;
  }
  .hp15s8Title, .hp15s8Text {min-height: auto;}
  .hp15s9Content {padding: 15px;}
  .hp15PostWrapper {padding: 15px;}
  .hp15PostBox1 {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .hp16s2Box {
    max-width: 390px;
    margin: 0 auto;
	float: none;
  }
  .hp16s5Text ul li {width: 100%;}
  .pc3Banner .bannerContent {
	position: relative;
	margin-top: -100px;
  }
  .pc3Banner .pc3BannerDetails {
    background: rgba(0,0,0,.6);
    padding: 15px;
  }
  .pc3Banner2 .bannerContent {
    position: relative;
    margin-top: -60px ;
  }
  .pc3s5ProductImg{width: 100%;}
}
@media(max-width: 479px){
  .hidden-sXs{display: none;}
  .aboutList ul {padding: 15px 15px 1px ;}
  .tabsWrapper ul.tabs li {
    padding: 0 0 15px;
    margin-right: 0;
    display: block;
  }
  .ast-article-post, .single .ast-article-single {padding: 15px ;}
  .bannerWraper .bannerContent {max-width: 320px;}
  .xyzBanner .banerText {display: none;}
  .xyzFeaturedPointBox {padding-left: 0;}
  .LP2dblBtn a.commonBtn {margin: 5px 0;}
  .about2Sec5Box{min-height: auto;}
  .h3FeaturedImg, .h3FeaturedContent {
  	width: auto;
	float: none;
  }
  .h3FeaturedContent {padding: 30px 0 0 0;}
  .h3CertificateWrapper {padding: 10px;}
  .h3Certificates ul li{margin: 20px 4px 0;}
  .pc2BannerContent {padding: 20px;}
  .taTimelineBoxLeft:before, .taTimelineBoxRight:before {top: 0px;}
  .taTimelineYearLeft, .taTimelineYearRight{top: 35px;}
  .MTcontactPageForm {padding: 30px 10px;}
  .MTnameField, .MTemailField {margin-bottom: 30px;}
  .labelContainer {margin-bottom: 20px;}
  .page-template-template-home4 .site-content h1, .page-template-template-home4 .site-content h2 {font-size: 34px ;}
  .hp4SearchBar .searchTitle {font-size: 18px;}
  .hp4TeamImg {padding: 30px 30px 0;}
  .hp4ContactForm {padding: 15px;}
  .page-template-template-home4 .headerTopBar ul li.phone {margin: 0 0 20px;}
  .page-template-template-home4 .headerTopBar ul {text-align: center;}
  .au5teamImg, .au5teamContent, .pc4supportImg, .pc4supportContent {float: none;}
  .au5teamContent, .pc4supportContent {
	padding: 30px 0 0;
	width: 100%;
  }
  .cu4contactForm {padding: 30px 20px 40px;}
  .cu4contactDetails {padding: 30px 20px 30px;}
  .pd4DetailHeading {padding: 10px 10px 5px;}
  .pd4DetailContent {padding: 10px;}
  .hp6s11ProductTitle {font-size: 20px;}
  .hp6s12ResourceBox {
    max-width: 270px;
    margin: 0 auto;
  }
  .hp6s12Img {width: 270px;}
  .hp6s12Title {
    width: 100%;
    padding: 20px;
  }
  .hp6Section1Details h1, .hp6Section2Details h2, .hp6Section6 h2, .hp6s7Details h2 {font-size: 36px;}
  .hp6Btn {padding: 13px 10px;}
  a.pd6QuoteBtn {padding: 15px 15px;}
  .pc5s5Content {padding: 15px;}
  ul.detailProductSlider .slick-slide {max-height: 210px;}
  .pd6liderWraper ul.detailProductSlider .slick-slide {max-height: 200px;}
  .h5TabsWrapper .tab-content, .h5TabsWrapper .tab-content2 {padding: 10px;}
  .pc3s5Btns a.commonBtn{
	display: block;
	margin: 5px 0;
  }
  .lp6Section1 h1 {font-size: 32px ;}
  .lp6s2Content {
    width: 100%;
    padding: 10px 0 0;
  }
  .doubleBtn a.commonBtn {
    margin: 0 0 10px;
    display: block;
  }
  .about6Banner .bannerText{display: none;}
  .hp9s1Box {
    border-radius: 15px;
    padding: 15px;
  }
  .hp9s2List ul li {width: 100%;}
  .hp9FAQs .accordiaBox {
    padding: 10px 10px;
    margin-bottom: 10px;
  }
  .bannerHeading {padding-bottom: 10px;}
  .pc6BannerContent {max-width: 320px;}
  .hp10Banner {padding: 30px 0 20px;}
  .pc7s3Tabs ul.tabs li {
    padding: 10px 0;
    display: block;
  }
  .hp11s6Box {padding: 15px;}
  .hp11s6Btns a.commonBtn {margin: 5px 2px;}
  .hp11s10Right {padding: 15px;}
  .hp12Section2:before {height: 10%;}
  .hp12Form {padding: 15px;}
  .hp12Form input[type=text], .hp12Form input[type=email], .hp12Form textarea {padding: 10px;}
  .hp12Form .uploadBTNLabel {padding: 25px 15px 25px 15px;}
  .hp12s7List ul li, .hp12s8Content ul li, ul.hp12s9List li{width: 100%;}
  .hp14Tabs ul.tabs li {
    margin-right: 0;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .hp14Tabs2 ul.tabs2 li {padding: 20px;}
  .hp15Col20 {width: 50% ;}
  .hp15s7Content {
    margin: 20px 0 0;
    width: 100%;
  }
  .hp15s1Btn {
    bottom: 5px;
    right: 5px;
  }
  .hp16s8Content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
  }
  .pc3Banner2 .bannerText {
    font-size: 14px;
    line-height: 21px;
  }
}
/* ==========================================================================
   StlPak Premium Header Styles
   ========================================================================== */

:root {
  /* Color Variables */
  --color-brand-primary: #16529b;
  --color-brand-hover: #0a3d7a;
  --color-brand-secondary: #4CAF50;
  --color-text-main: #333333;
  --color-text-muted: #666666;
  --color-text-light: #999999;
  --color-text-inverse: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-border: #e0e0e0;

  /* Font Variables */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shadow Variables */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
}/* Utility Classes - Only essential styles */

/* Container with responsive widths */
.container{
	margin-right:auto;
	margin-left:auto;
	padding-left:15px;
	padding-right:15px
}

@media (min-width: 320px) and (max-width: 479px) {
	.container{width:320px}
	.cust-row{margin:0 -15px}
}
@media (min-width: 480px) and (max-width: 767px) {
	.container{width:480px}
	.cust-row{margin:0 -15px}
}
@media (min-width: 768px) {
	.container{width:750px}
}
@media (max-width: 991px) {
	.cust-row{margin:0 -15px ;}
}
@media (min-width: 992px) {
	.container{width:970px}
	.container770{width:770px}
}
@media (min-width: 1200px) and (max-width: 1399px) {
	.container{width:1170px}
}
@media (min-width: 1400px) {
	.container{width:1320px}
}

/* Text Alignment */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-justify{text-align:justify}

/* Clearfix */
.clearfix{clear:both}

/* Row utility - used in many templates */
.cust-row{
	margin:0 -30px ;
}

/* Common padding classes */
.paddTop5{padding-top:5px}
.paddBottom5{padding-bottom:5px}
.paddTop10{padding-top:10px}
.paddBottom10{padding-bottom:10px}
.paddTop15{padding-top:15px}
.paddBottom15{padding-bottom:15px}
.paddTop20{padding-top:20px}
.paddBottom20{padding-bottom:20px}
.paddTop25{padding-top:25px}
.paddBottom25{padding-bottom:25px}
.paddTop30{padding-top:30px}
.paddBottom30{padding-bottom:30px}
.paddTop35{padding-top:35px}
.paddBottom35{padding-bottom:35px}
.paddTop40{padding-top:40px}
.paddBottom40{padding-bottom:40px}
.paddTop45{padding-top:45px}
.paddBottom45{padding-bottom:45px}
.paddTop50{padding-top:50px}
.paddBottom50{padding-bottom:50px}
.paddTop70{padding-top:70px}
.paddBottom70{padding-bottom:70px}

/* RowFlex utilities */
.rowFlex{
	display: flex;
	align-items: center;
}
.rowFlexEnd{
	display: flex;
	align-items: end;
}

/* Hidden utility */
.hidden{display: none;}

/* Basic transitions */
a, button, input[type="submit"]{transition:all .3s}

/* Remove outline from form elements */
input, textarea, button, select{outline:none}/*
Theme Name: STLPAK - Global Packaging Solutions
Author: STLPAK
Author URI: https://stlpak.com/
Description: Custom child theme for STLPAK Global Packaging Solutions website. Based on Astra theme with custom styling and functionality.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-stlpk
Template: astra
*/

/* Main CSS file - imports remaining modular styles */
/* Note: header.css and footer.css are loaded via functions.php for better control */

/* Import base styles */

/* Import component styles */

/* Page-specific styles will be loaded via functions.php */




@media(max-width:768px){}

@media(max-width:768px){}



@media(max-width:768px){}





@media(max-width:900px){}

/* v20260701-final-contact */

/* Contact Section */
#stl-quote-form .container{width:min(1160px,calc(100% - 48px));max-width:1160px;margin:0 auto}
#stl-quote-form .contact-content{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(460px,1.1fr);gap:84px;align-items:start}
#stl-quote-form .contact-form-wrap{width:100%;max-width:none;min-width:0;padding:34px 38px;border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,0.12)}
#stl-quote-form .contact-form-wrap .ff-btn-submit,#stl-quote-form .contact-form-wrap button[type=submit]{width:100%;min-height:50px}
@media(max-width:900px){#stl-quote-form .container{width:min(100% - 32px,640px)}#stl-quote-form .contact-content{grid-template-columns:1fr;gap:32px}#stl-quote-form .contact-form-wrap{padding:26px 20px}}



/*----------------------------------------------
  Factory / Manufacturing Section
----------------------------------------------*/
.stlpak-factory-section {
    background-color: #f8fafc;
    padding: 0 0 60px;
}

.stlpak-factory-grid {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 40px;
    align-items: center;
}

.stlpak-factory-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(135deg, #0b1e3b 0%, #16529b 100%);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.stlpak-factory-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.stlpak-factory-content {
    display: flex;
    flex-direction: column;
}

.stlpak-factory-eyebrow {
    margin: 0 0 16px;
    color: #16529b;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 12px;
    text-transform: uppercase;
}

.stlpak-factory-title {
    margin: 0 0 16px;
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}

.stlpak-factory-text {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.65;
    color: #64748b;
}

.stlpak-factory-link {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #16529b;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.stlpak-factory-link:hover {
    color: #0a3d7a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Factory photo carousel - full width below the grid (pure CSS, scroll-snap, no JS) */
.stlpak-factory-carousel {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stlpak-factory-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(25% - 12px);
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px;
}

.stlpak-factory-track::-webkit-scrollbar {
    display: none;
}

.stlpak-factory-slide {
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.stlpak-factory-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
}

.stlpak-factory-slide figcaption {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #0f172a;
}

.stlpak-factory-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.stlpak-factory-dots a {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.3s ease;
}

.stlpak-factory-dots a:hover,
.stlpak-factory-dots a:focus {
    background: #16529b;
}

@media (max-width: 1199px) {
    .stlpak-factory-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .stlpak-factory-content {
        order: -1;
    }

    .stlpak-factory-title {
        font-size: 30px;
    }

    .stlpak-factory-carousel {
        margin-top: 28px;
    }

    .stlpak-factory-track {
        grid-auto-columns: 45%;
    }
}

@media (max-width: 767px) {
    .stlpak-factory-section {
        padding-bottom: 40px;
    }

    .stlpak-factory-title {
        font-size: 28px;
    }

    .stlpak-factory-text {
        font-size: 15px;
    }

    .stlpak-factory-carousel {
        margin-top: 24px;
    }

    .stlpak-factory-track {
        grid-auto-columns: 86%;
    }

    .stlpak-factory-slide figcaption {
        font-size: 12px;
    }
}


/*----------------------------------------------
  Success Case Cards (customer-stories modules 2 & 3)
----------------------------------------------*/
.story-card.testimonial-card,
.story-card.featured.testimonial-card {
    padding-bottom: 32px;
}
.story-card.testimonial-card .stlpak-case-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid var(--color-brand-primary);
    color: var(--color-brand-primary);
    background: #ffffff;
    transition: all 0.2s ease;
}
.story-card.testimonial-card .stlpak-case-link:hover {
    background: rgba(22, 82, 155, 0.06);
    transform: translateY(-2px);
}
.story-card.featured.testimonial-card .stlpak-case-link {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-brand-primary);
}
.story-card.featured.testimonial-card .stlpak-case-link:hover {
    background: rgba(255, 255, 255, 0.88);
}

/* CTA row layout: heading + buttons on one centered line (2026-08-17 v2) */
.stories-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    text-align: left;
}
.stories-cta .cta-text {
    margin-bottom: 0;
    flex: 0 1 auto;
    white-space: nowrap;
}
.stories-cta .cta-buttons {
    flex: 0 0 auto;
    justify-content: center;
    flex-wrap: nowrap;
}
@media (max-width: 768px) {
    .stories-cta {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .stories-cta .cta-text {
        margin-bottom: 4px;
    }
    .stories-cta .cta-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

.stories-cta .btn {
    min-width: 0;
    padding: 12px 24px;
    font-size: 15px;
}
@media (max-width: 1024px) {
    .stories-cta { gap: 16px; }
}