/* Custom styling for the single read more button to match service cards */
.services .service-item a {
    color: inherit;
    text-decoration: none !important;
}

.services .service-item a:hover {
    color: inherit;
    text-decoration: none !important;
}

/* Custom styling for the Read More button */
.services .service-item.read-more-button {
    padding: 15px 20px !important;
    /* Reduced from default padding */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Center the link and make it full width */
.services .service-item.read-more-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Style the h3 text - smaller font size and proper centering */
.services .service-item.read-more-button h3 {
    font-size: 1.1rem !important;
    /* Smaller than default h3 size */
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Add hover effect for the read-more-button */
.services .service-item.read-more-button:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* Override main.css hover rules with higher specificity */
.services .service-item.read-more-button:hover h3 {
    color: #ffc107 !important;
    /* Yellow color on hover - overrides main.css */
    transition: color 0.3s ease !important;
}

/* Additional selector for direct h3 hover within the button */
.services .service-item.read-more-button h3:hover {
    color: #ffc107 !important;
    /* Yellow color on hover */
    transition: color 0.3s ease !important;
}

/* Read More card: base styles - background #2f577f */
.services .service-item.read-more-button {
    background-color: #2f577f !important;
    /* opsional: sesuaikan kontras/shadow */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Make text white by default (container, link, heading) */
.services .service-item.read-more-button,
.services .service-item.read-more-button a,
.services .service-item.read-more-button h3 {
    color: #ffffff !important;
}

/* Remove decorative underline/border from h3 in this button */
.services .service-item.read-more-button h3 {
    border: none !important;
}

/* Keep hover: only text to yellow, background stays #34495e */
.services .service-item.read-more-button:hover,
.services .service-item.read-more-button:hover a,
.services .service-item.read-more-button:hover h3 {
    color: #ffc107 !important;
}

/* Prevent other hover rules from changing h3 color */
.services .service-item.read-more-button:hover h3 {
    color: #ffc107 !important;
}

/* Ensure no underlines appear on the read-more button */
.services .service-item.read-more-button a,
.services .service-item.read-more-button a:hover,
.services .service-item.read-more-button a:focus,
.services .service-item.read-more-button a:active,
.services .service-item.read-more-button a:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
    box-shadow: none !important;
}

/* Target the h3 element specifically to remove any underlines */
.services .service-item.read-more-button h3,
.services .service-item.read-more-button a h3,
.services .service-item.read-more-button a:hover h3,
.services .service-item.read-more-button a:focus h3,
.services .service-item.read-more-button a:active h3 {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/*
 Additional aggressive underline removal for the entire button container */
.services .service-item.read-more-button,
.services .service-item.read-more-button * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

/* Override any Bootstrap or template underline styles */
.service-item.read-more-button a {
    text-decoration: none !important;
}

.service-item.read-more-button a:hover {
    text-decoration: none !important;
}

/* Remove any pseudo-element underlines */
.services .service-item.read-more-button a::before,
.services .service-item.read-more-button a::after,
.services .service-item.read-more-button h3::before,
.services .service-item.read-more-button h3::after {
    display: none !important;
    content: none !important;
    border-bottom: none !important;
}

/* Make the text slightly bigger in the Get Started section */
.get-started .content-text p {
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
}

.get-started .content-text h3 {
    font-size: 1.6rem !important;
}

/* UpConstruction-style dark overlay for hero section */
.hero.section.dark-background {
    position: relative !important;
}

.hero.section.dark-background::before {
    display: none !important;
}

/* Overlay already removed in main.css */

/* Ensure text appears above the overlay */
.hero .info {
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure carousel images are behind the overlay */
.hero .carousel-item {
    position: relative !important;
    z-index: 0 !important;
}

.hero .carousel-item img {
    position: relative !important;
    z-index: 0 !important;
}

/* Make the entire stats boxes bigger in Data Perusahaan section */
.stats-counter .stats-item {
    padding: 30px 25px !important;
    min-height: 150px !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    background: white !important;
    transform: scale(1.1) !important;
    margin: 10px !important;
}

/* Make the icons bigger */
.stats-counter .stats-item i {
    font-size: 3rem !important;
    margin-right: 20px !important;
}

/* Make the numbers bigger */
.stats-counter .purecounter {
    font-size: 3rem !important;
    font-weight: bold !important;
    color: var(--heading-color) !important;
    line-height: 1.2 !important;
}

/* Make the text labels bigger */
.stats-counter .stats-item p {
    font-size: 1.2rem !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

/* Change only the orange diagonal section (left side) to pastel gray with whitish tone */
.get-started .diagonal-left {
    background: linear-gradient(135deg, #e5e9ec 0%, #e5e9ec 100%) !important;
    position: relative !important;
}

/* Override any existing orange background on the left side only */
.diagonal-left {
    background-color: #e5e9ec !important;
    position: relative !important;
}

/* Add reverse diagonal cut to the left side - upside down mirror of the right side */
.get-started .diagonal-left::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -60px;
    width: 120px;
    height: 100%;
    min-height: 500px;
    background: linear-gradient(135deg, #e5e9ec 0%, #e5e9ec 100%);
    transform: skewX(10deg);
    z-index: 0;
}


/* Remove all overlays from hero section */
.hero.section.dark-background::before {
    display: none !important;
}

.hero .info {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Nu
clear option: Remove ALL possible overlays from hero section */
.hero::before,
.hero::after,
.hero .carousel::before,
.hero .carousel::after,
.hero .carousel-item::after,
.hero section::before,
.hero section::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
}

/* Overlay removed in main.css - no override needed */
/* Ensure t
he diagonal section has proper height and positioning */
.get-started.diagonal-section {
    overflow: hidden;
    position: relative;
}

.get-started .row.g-0 {
    min-height: 500px;
    align-items: center;
}

/* Make sure content stays above the diagonal cut */
.get-started .content-image,
.get-started .content-text {
    position: relative;
    z-index: 3;
    padding: 40px;
}

/* Remove diagonal cut completely on mobile - make it square layout */
@media (max-width: 768px) {
    .get-started .diagonal-left::after {
        display: none !important;
    }
    
    .get-started .diagonal-right::before {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .get-started .diagonal-left::after {
        display: none !important;
    }
    
    .get-started .diagonal-right::before {
        display: none !important;
    }
}

/* ULTIMATE OVERRIDE - Force blue background for read-more-button */
.services .container .row.mt-4 .col-12 .service-item.read-more-button {
    background-color: #2f577f !important;
    background: #2f577f !important;
}

/* Additional override with even higher specificity */
.services .container .row.mt-4 .col-12.d-flex.justify-content-center .service-item.read-more-button {
    background-color: #2f577f !important;
    background: #2f577f !important;
}