/* ================================================
   Unified Button Styles for Homepage
   ================================================ */

/* Base Button Style - Matches contact-one__btn-box design */
.thm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
    -webkit-appearance: none;
    outline: none !important;
    background: var(--otto-gradient-pink-purple);
    color: var(--techguru-white);
    font-size: var(--otto-font-size-md);
    line-height: var(--otto-line-height-button);
    font-weight: var(--otto-font-medium);
    padding: 18px 25px 17px;
    overflow: hidden;
    border-radius: 12px;
    border: none;
    transition: all 0.5s linear;
    text-transform: capitalize;
    z-index: 1;
    cursor: pointer;
}

.thm-btn::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 50%;
    height: 0;
    visibility: hidden;
    background-color: var(--techguru-base);
    opacity: 0;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}

.thm-btn:hover:before {
    width: 100%;
    height: 100%;
    visibility: visible;
    opacity: 1;
}

.thm-btn::after {
    position: absolute;
    background-color: var(--techguru-base);
    bottom: 0;
    right: 0;
    content: "";
    width: 50%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}

.thm-btn:hover::after {
    width: 100%;
    height: 100%;
    visibility: visible;
    opacity: 1;
}

.thm-btn:hover {
    color: var(--techguru-black);
}

/* Remove border from all button instances */
.contact-one__btn-box .thm-btn,
.blog-two__btn-box .thm-btn,
.blog-two__top-btn-box .thm-btn,
.blog-two__btn-box-two .thm-btn {
    border: none;
}

/* Modern Gradient Buttons (Slider) */
.modern-gradient-btn-primary,
.modern-gradient-btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 25px 17px;
    font-size: var(--otto-font-size-md);
    font-weight: var(--otto-font-medium);
    color: var(--techguru-white);
    background: var(--otto-gradient-pink-purple);
    border: none;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.5s linear;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}

.modern-gradient-btn-primary::before,
.modern-gradient-btn-secondary::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 50%;
    height: 0;
    visibility: hidden;
    background-color: var(--techguru-base);
    opacity: 0;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}

.modern-gradient-btn-primary:hover::before,
.modern-gradient-btn-secondary:hover::before {
    width: 100%;
    height: 100%;
    visibility: visible;
    opacity: 1;
}

.modern-gradient-btn-primary::after,
.modern-gradient-btn-secondary::after {
    position: absolute;
    background-color: var(--techguru-base);
    bottom: 0;
    right: 0;
    content: "";
    width: 50%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}

.modern-gradient-btn-primary:hover::after,
.modern-gradient-btn-secondary:hover::after {
    width: 100%;
    height: 100%;
    visibility: visible;
    opacity: 1;
}

.modern-gradient-btn-primary:hover,
.modern-gradient-btn-secondary:hover {
    color: var(--techguru-black);
}

/* Secondary button slight variation */
.modern-gradient-btn-secondary {
    background: var(--otto-gradient-primary);
}

/* Ensure consistent styling across all button containers */
.main-slider-two__btn-box-1 a,
.main-slider-two__btn-box-2 a {
    border: none;
}

/* Blog buttons consistency */
.blog-two__btn-box .thm-btn,
.blog-two__btn-box-two .thm-btn {
    padding: 13px 25px 13px;
    border-radius: 22px;
    border: none;
}

/* Top button box */
.blog-two__top-btn-box .thm-btn {
    border: none;
}

/* Contact form button */
.contact-one__btn-box .thm-btn {
    border: none;
    width: auto;
    display: inline-flex;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .thm-btn,
    .modern-gradient-btn-primary,
    .modern-gradient-btn-secondary {
        padding: 15px 20px 14px;
        font-size: 14px;
    }
    
    .blog-two__btn-box .thm-btn,
    .blog-two__btn-box-two .thm-btn {
        padding: 11px 20px 11px;
    }
}

@media (max-width: 480px) {
    .thm-btn,
    .modern-gradient-btn-primary,
    .modern-gradient-btn-secondary {
        padding: 13px 18px 12px;
        font-size: 13px;
    }
}