/* 
Global Frontend Styles for page builder
This file replaces the theme's style.css logic.
*/

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #000000;
}

/* Container */
.container,
.site-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Special Elite', cursive;
    /* Using plugin's font */
    color: #2c3e50;
    margin-bottom: 1rem;
}

a {
    color: #2271b1;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Menu Stying (Basic) */
.pb-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #333;
    display: flex;
}

.pb-menu li {
    margin: 0;
}

.pb-menu li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
}

.pb-menu li a:hover {
    background: #555;
    text-decoration: none;
}

/* ============================================
   HERO SLIDER (Swiper) – Styles for arrows, bullets & positioning
   ============================================ */

/* Force slider container to fill absolute parent */
.hero-bg-slider.swiper {
    height: 100% !important;
}

.hero-bg-slider .swiper-slide {
    background-size: cover !important;
    background-position: center !important;
}

/* Keep navigation and bullets above content */
.hero-bg-slider .swiper-button-prev,
.hero-bg-slider .swiper-button-next,
.hero-bg-slider .swiper-pagination {
    z-index: 15;
}

/* Remove Swiper's default arrow pseudo-elements */
.hero-bg-slider .swiper-button-prev::after,
.hero-bg-slider .swiper-button-next::after {
    display: none;
}

/* Style the custom arrow icons (Font Awesome) */
.hero-bg-slider .swiper-button-prev i,
.hero-bg-slider .swiper-button-next i {
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.hero-bg-slider .swiper-button-prev:hover i,
.hero-bg-slider .swiper-button-next:hover i {
    transform: scale(1.05);
}

/* ----- Arrow vertical positioning ----- */
.hero-bg-slider.swiper-nav-top .swiper-button-prev,
.hero-bg-slider.swiper-nav-top .swiper-button-next {
    top: 20px;
    margin-top: 0;
}

.hero-bg-slider.swiper-nav-middle .swiper-button-prev,
.hero-bg-slider.swiper-nav-middle .swiper-button-next {
    top: 50%;
    margin-top: -20px; /* half of arrow height */
}

.hero-bg-slider.swiper-nav-bottom .swiper-button-prev,
.hero-bg-slider.swiper-nav-bottom .swiper-button-next {
    top: auto;
    bottom: 20px;
    margin-top: 0;
}

/* ----- Pagination bullets ----- */
.hero-bg-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    transition: all 0.2s ease;
    margin: 0 6px;
}

.hero-bg-slider .swiper-pagination-bullet-active {
    background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* ----- Bullet positioning (8 presets) ----- */
.hero-bg-slider.swiper-bullets-top_left .swiper-pagination {
    top: 20px;
    bottom: auto;
    left: 20px;
    right: auto;
    text-align: left;
}

.hero-bg-slider.swiper-bullets-top_center .swiper-pagination {
    top: 20px;
    bottom: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.hero-bg-slider.swiper-bullets-top_right .swiper-pagination {
    top: 20px;
    bottom: auto;
    left: auto;
    right: 20px;
    text-align: right;
}

.hero-bg-slider.swiper-bullets-middle_left .swiper-pagination {
    top: 50%;
    bottom: auto;
    left: 20px;
    right: auto;
    transform: translateY(-50%);
    width: auto;
}

.hero-bg-slider.swiper-bullets-middle_right .swiper-pagination {
    top: 50%;
    bottom: auto;
    left: auto;
    right: 20px;
    transform: translateY(-50%);
    width: auto;
}

.hero-bg-slider.swiper-bullets-bottom_left .swiper-pagination {
    bottom: 20px;
    top: auto;
    left: 20px;
    right: auto;
    text-align: left;
}

.hero-bg-slider.swiper-bullets-bottom_center .swiper-pagination {
    bottom: 20px;
    top: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.hero-bg-slider.swiper-bullets-bottom_right .swiper-pagination {
    bottom: 20px;
    top: auto;
    left: auto;
    right: 20px;
    text-align: right;
}

/* Make bullets vertical for middle-left and middle-right positions */
.hero-bg-slider.swiper-bullets-middle_left .swiper-pagination,
.hero-bg-slider.swiper-bullets-middle_right .swiper-pagination {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto !important;
}

/* Adjust individual bullet spacing */
.hero-bg-slider.swiper-bullets-middle_left .swiper-pagination-bullet,
.hero-bg-slider.swiper-bullets-middle_right .swiper-pagination-bullet {
    margin: 0 !important;
}

/* ========== BULLET STYLES ========== */

/* Base bullet styles – size and gap from variables */
.pb-bullet-style-default .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-scale .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-ring .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-square .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-square-active .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-expanding-line .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-line-numbers .hero-bg-slider .swiper-pagination-bullet,
.pb-bullet-style-stacked-lines .hero-bg-slider .swiper-pagination-bullet {
    width: var(--swiper-bullet-size, 12px);
    height: var(--swiper-bullet-size, 12px);
    margin: 0 calc(var(--swiper-bullet-gap, 8px) / 2);
    transition: all 0.2s ease;
    opacity: 0.7;
    background: var(--swiper-pagination-bullet-color, rgba(255,255,255,0.6));
}

/* For vertical bullets (middle-left/right), use vertical gap */
.hero-bg-slider.swiper-bullets-middle_left .swiper-pagination-bullet,
.hero-bg-slider.swiper-bullets-middle_right .swiper-pagination-bullet {
    margin: calc(var(--swiper-bullet-gap) / 2) 0 !important;
}

/* Default: circular dots, active scales 1.2x */
.pb-bullet-style-default .hero-bg-slider .swiper-pagination-bullet {
    border-radius: 50%;
}
.pb-bullet-style-default .hero-bg-slider .swiper-pagination-bullet-active {
    transform: scale(1.2);
    background: var(--swiper-pagination-bullet-active-color, #2271b1);
    opacity: 1;
}

/* Scale up: active becomes 2.5x larger */
.pb-bullet-style-scale .hero-bg-slider .swiper-pagination-bullet {
    border-radius: 50%;
}
.pb-bullet-style-scale .hero-bg-slider .swiper-pagination-bullet-active {
    transform: scale(2.5);
    opacity: 1;
    background: var(--swiper-pagination-bullet-active-color, #2271b1);
}

/* Ring: active bullet has a transparent center with a ring */
.pb-bullet-style-ring .hero-bg-slider .swiper-pagination-bullet {
    border-radius: 50%;
    background: transparent !important;
    box-shadow: 0 0 0 2px var(--swiper-pagination-bullet-color, rgba(255,255,255,0.6));
    opacity: 1;
}
.pb-bullet-style-ring .hero-bg-slider .swiper-pagination-bullet-active {
    box-shadow: 0 0 0 4px var(--swiper-pagination-bullet-active-color, #2271b1);
    background: var(--swiper-pagination-bullet-active-color, #2271b1) !important;
}

/* Square: always square, active scales */
.pb-bullet-style-square .hero-bg-slider .swiper-pagination-bullet {
    border-radius: 0;
}
.pb-bullet-style-square .hero-bg-slider .swiper-pagination-bullet-active {
    transform: scale(1.2);
    background: var(--swiper-pagination-bullet-active-color, #2271b1);
}

/* Square active: inactive are circles, active becomes square */
.pb-bullet-style-square-active .hero-bg-slider .swiper-pagination-bullet {
    border-radius: 50%;
}
.pb-bullet-style-square-active .hero-bg-slider .swiper-pagination-bullet-active {
    border-radius: 0;
    transform: none;
    background: var(--swiper-pagination-bullet-active-color, #2271b1);
}

/* Expanding line: uses variable for thickness and length */
.pb-bullet-style-expanding-line .hero-bg-slider .swiper-pagination-bullet {
    width: calc(var(--swiper-bullet-size, 12px) * 1.666);
    height: calc(var(--swiper-bullet-size, 12px) * 0.333);
    border-radius: 2px;
}
.pb-bullet-style-expanding-line .hero-bg-slider .swiper-pagination-bullet-active {
    width: calc(var(--swiper-bullet-size, 12px) * 3.333);
}
/* For vertical bullets – rotate the line */
.pb-bullet-style-expanding-line.hero-bg-slider.swiper-bullets-middle_left .swiper-pagination-bullet,
.pb-bullet-style-expanding-line.hero-bg-slider.swiper-bullets-middle_right .swiper-pagination-bullet {
    width: calc(var(--swiper-bullet-size, 12px) * 0.333);
    height: calc(var(--swiper-bullet-size, 12px) * 1.666);
}
.pb-bullet-style-expanding-line.hero-bg-slider.swiper-bullets-middle_left .swiper-pagination-bullet-active,
.pb-bullet-style-expanding-line.hero-bg-slider.swiper-bullets-middle_right .swiper-pagination-bullet-active {
    height: calc(var(--swiper-bullet-size, 12px) * 3.333);
    width: calc(var(--swiper-bullet-size, 12px) * 0.333);
}


/* Stacked Lines – vertical expanding bars */
.pb-bullet-style-stacked-lines .hero-bg-slider .swiper-pagination-bullet {
    width: calc(var(--swiper-bullet-size, 12px) * 0.5);
    height: calc(var(--swiper-bullet-size, 12px) * 1.2);
    border-radius: 2px;
}
.pb-bullet-style-stacked-lines .hero-bg-slider .swiper-pagination-bullet-active {
    height: calc(var(--swiper-bullet-size, 12px) * 2);
    background: var(--swiper-pagination-bullet-active-color, #2271b1);
}
/* For horizontal bullets, stacked lines become horizontal bars */
.pb-bullet-style-stacked-lines .hero-bg-slider .swiper-pagination-bullet {
    width: calc(var(--swiper-bullet-size, 12px) * 1.2);
    height: calc(var(--swiper-bullet-size, 12px) * 0.5);
}
.pb-bullet-style-stacked-lines .hero-bg-slider .swiper-pagination-bullet-active {
    width: calc(var(--swiper-bullet-size, 12px) * 2);
    height: calc(var(--swiper-bullet-size, 12px) * 0.5);
}