/*
 * GPAC Page Title Styling for Global Payments Forms
 * 
 * This file contains the page title section styling that matches
 * the main website design for payment pages.
 */

/* ==========================================================================
   PAGE TITLE SECTION - Matching Main Website Design
   ========================================================================== */

/* Page Title Container */
.page-title-section,
.elementor-location-single .elementor-section:first-child,
.elementor-location-archive .elementor-section:first-child {
    background: linear-gradient(135deg, rgba(15, 28, 77, 0.95) 0%, rgba(15, 28, 77, 0.85) 100%) !important;
    padding: 80px 0 60px 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Page Title Container Background Pattern */
.page-title-section::before,
.elementor-location-single .elementor-section:first-child::before,
.elementor-location-archive .elementor-section:first-child::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 28, 77, 0.8) !important;
    z-index: 1 !important;
}

/* Page Title Content */
.page-title-section .elementor-container,
.elementor-location-single .elementor-section:first-child .elementor-container,
.elementor-location-archive .elementor-section:first-child .elementor-container {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
}

/* Page Title Text */
.page-title-section h1,
.elementor-location-single .elementor-section:first-child h1,
.elementor-location-archive .elementor-section:first-child h1,
.entry-title,
h1.entry-title {
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 72px !important;
    font-weight: 400 !important;
    line-height: 100% !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
}

/* Highlight text in page title */
.page-title-section h1 .highlight,
.elementor-location-single .elementor-section:first-child h1 .highlight,
.elementor-location-archive .elementor-section:first-child h1 .highlight,
.entry-title .highlight,
h1.entry-title .highlight {
    color: #FBC81A !important;
}

/* Page Title Subtitle */
.page-title-section .page-subtitle,
.elementor-location-single .elementor-section:first-child .page-subtitle,
.elementor-location-archive .elementor-section:first-child .page-subtitle {
    font-family: "Barlow", sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   RESPONSIVE PAGE TITLE
   ========================================================================== */

@media (max-width: 1480px) {
    .page-title-section h1,
    .elementor-location-single .elementor-section:first-child h1,
    .elementor-location-archive .elementor-section:first-child h1,
    .entry-title,
    h1.entry-title {
        font-size: 60px !important;
    }
}

@media (max-width: 1024px) {
    .page-title-section,
    .elementor-location-single .elementor-section:first-child,
    .elementor-location-archive .elementor-section:first-child {
        padding: 60px 0 50px 0 !important;
    }
    
    .page-title-section h1,
    .elementor-location-single .elementor-section:first-child h1,
    .elementor-location-archive .elementor-section:first-child h1,
    .entry-title,
    h1.entry-title {
        font-size: 50px !important;
    }
}

@media (max-width: 768px) {
    .page-title-section,
    .elementor-location-single .elementor-section:first-child,
    .elementor-location-archive .elementor-section:first-child {
        padding: 40px 0 30px 0 !important;
    }
    
    .page-title-section h1,
    .elementor-location-single .elementor-section:first-child h1,
    .elementor-location-archive .elementor-section:first-child h1,
    .entry-title,
    h1.entry-title {
        font-size: 36px !important;
    }
}