/*!
Theme Name: Bizzen Child
Theme URI: https://bizzen-wp.laralink.com/
Author: Your Name
Author URI: https://example.com/
Description: A child theme for Bizzen WordPress Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bizzen-child
Domain Path: /languages
Template: bizzen

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

/* ========================================
   CSS Variables
   ======================================== */

html:root {
  --primary-color: #f54848;
  --secondary-color: #b2a5a2;
  --heading-color: #1F1F1F;
  --primary-black-color: #3a3a3a;
  --gray-color: #F4F8EC;
  --white-color: #ffffff;
  --text-color: #797E88;
  --border-color: #D8DDE1;
  --heading-font: "Plus Jakarta Sans", sans-serif;
  --body-font: "Kanit", sans-serif;
}

/* ========================================
   Common CSS Overrides
   ======================================== */

/* Add your common style overrides here */
/* Examples: containers, utilities, display classes, etc. */

/* ========================================
   Core CSS Overrides
   ======================================== */

/* Add your core component overrides here */
/* Examples: buttons, forms, navigation, hero sections, etc. */

/* ========================================
   Header Navigation Menu Customizations
   ======================================== */

.header-two .header-navigation {
    background: #0000008c;
}

/* ========================================
   Hero Slider Styles
   ======================================== */

.bizzen-hero_two {
    position: relative;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: auto;
}

.hero-slider.swiper {
    margin: 0;
    padding: 0;
}

.hero-slider .swiper-wrapper {
    display: flex;
    transition-timing-function: linear;
}

.hero-slider .swiper-slide {
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

.single-slider {
    position: relative;
    display: block;
}

/* Slider Navigation Buttons */
.hero-prev,
.hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.hero-prev:hover,
.hero-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.hero-prev {
    left: 20px;
}

.hero-next {
    right: 20px;
}

/* Slider Pagination */
.hero-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.hero-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-pagination .swiper-pagination-bullet-active {
    background-color: white;
    width: 30px;
    border-radius: 6px;
}

.bizzen-hero_two .image-layer:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(36 36 36 / 70%);
    z-index: -1;
}


.bizzen-hero_two .hero-content .hero-button-wrap .theme-btn.style-one {
    color: #ffffff;
    background-color: var(--primary-color);
}


.bizzen-project-item.style-two .project-thumbnail .hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(31 31 31 / 42%);
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    padding: 30px;
}

.page-hero {
    padding: 160px 0 45px;
}
/* ========================================
   Responsive Styles
   ======================================== */

@media (max-width: 768px) {
    .hero-prev,
    .hero-next {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .hero-prev {
        left: 10px;
    }

    .hero-next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    /* Mobile specific styles */
}