/* Section Title */
.Section-title {
    font-weight: 800;
    text-align: center;
    padding-bottom: 50px;
    color: var(--text-dark);
    margin:0;
}
.Section-title div{
    margin-bottom: 5px;
}
.Section-title span {
    color: var(--primary-color);
}

:root {
--buttonColorPrimary: rgba(0, 123, 246, 1);
--buttonColorPrimaryHover: rgba(0, 123, 246, 0.8);
--buttonColorPrimaryActive: rgba(0, 123, 246, 0.6);
--buttonColorSecondary: rgba(231, 32, 109, 1);
--buttonColorSecondaryHover: rgba(231, 32, 109, 0.8);
--buttonColorSecondaryActive: rgba(231, 32, 109, 0.6); 
--buttonColorDanger: rgba(255, 0, 0, 1);
--buttonColorDangerHover: rgba(255, 0, 0, 0.8);
--buttonColorDangerActive: rgba(255, 0, 0, 0.6);
--buttonColorSuccess: rgba(0, 255, 0, 1);
--buttonColorSuccessHover: rgba(0, 255, 0, 0.8);
--buttonColorSuccessActive: rgba(0, 255, 0, 0.6);
--buttonColorWarning: rgba(255, 255, 0, 1);
--buttonColorWarningHover: rgba(255, 255, 0, 0.8);
--buttonColorWarningActive: rgba(255, 255, 0, 0.6);
--buttonColorInfo: rgba(0, 255, 255, 1);
--buttonColorInfoHover: rgba(0, 255, 255, 0.8);
--buttonColorInfoActive: rgba(0, 255, 255, 0.6);
--buttonColorLight: rgba(255, 255, 255, 1);
--buttonColorLightHover: rgba(255, 255, 255, 0.8);
--buttonColorLightActive: rgba(255, 255, 255, 0.6);
--buttonColorDark: rgba(0, 0, 0, 1);
--buttonColorDarkHover: rgba(0, 0, 0, 0.8);
--buttonColorDarkActive: rgba(0, 0, 0, 0.6);
--buttonColorLink: rgba(0, 123, 246, 1);
--buttonColorLinkHover: rgba(0, 123, 246, 0.8);
--buttonColorLinkActive: rgba(0, 123, 246, 0.6);
}


$button-primary: rgb(0, 123, 246, 1);
$button-primary-hover: rgba(0, 123, 246, 0.8);
$button-primary-active: rgba(0, 123, 246, 0.6);
$button-secondary: rgba(231, 32, 109, 1);
$button-secondary-hover: rgba(231, 32, 109, 0.8);
$button-secondary-active: rgba(231, 32, 109, 0.6);
$button-danger: rgba(255, 0, 0, 1);
$button-danger-hover: rgba(255, 0, 0, 0.8);
$button-danger-active: rgba(255, 0, 0, 0.6);
$button-success: rgba(0, 255, 0, 1);
$button-success-hover: rgba(0, 255, 0, 0.8);
$button-success-active: rgba(0, 255, 0, 0.6);
$button-warning: rgba(255, 255, 0, 1);
$button-warning-hover: rgba(255, 255, 0, 0.8);
$button-warning-active: rgba(255, 255, 0, 0.6);
$button-info: rgba(0, 255, 255, 1);
$button-info-hover: rgba(0, 255, 255, 0.8);
$button-info-active: rgba(0, 255, 255, 0.6);
$button-light: rgba(255, 255, 255, 1);
$button-light-hover: rgba(255, 255, 255, 0.8);
$button-light-active: rgba(255, 255, 255, 0.6);
$button-dark: rgba(0, 0, 0, 1);
$button-dark-hover: rgba(0, 0, 0, 0.8);
$button-dark-active: rgba(0, 0, 0, 0.6);
$button-link: rgba(0, 123, 246, 1);
$button-link-hover: rgba(0, 123, 246, 0.8);
$button-link-active: rgba(0, 123, 246, 0.6);


// Button base styling
.animated-button {
    position: relative;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #007bf6, #0067ce);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 246, 0.4);
    min-width: 140px;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    text-decoration: none;
    
    // Hover effects
    &:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 7px 20px rgba(0, 123, 246, 0.5);
            color: white;
            text-decoration: none;
            
            &::before {
                opacity: 1;
                transform: translateX(0);
            }
            }
    
    // Active state (when pressed)
    &:active {
      transform: translateY(1px) scale(0.98);
    }
   
    &.primary{
        background: $button-primary;
        color: white;
        box-shadow: 0 4px 15px $button-primary-hover;
        &:hover {
            background: $button-primary-hover;
            box-shadow: 0 7px 20px $button-primary-hover;
        }
        &:active {
            background: $button-primary-active;
        }
    }
    &.secondary{
        background: $button-secondary;
        color: white;
        box-shadow: 0 4px 15px $button-secondary-hover;
        &:hover {
            background: $button-secondary-hover;
            box-shadow: 0 7px 20px $button-secondary-hover;
        }
        &:active {
            background: $button-secondary-active;
        }
    }
    &.red,
    &.danger{
        background: $button-danger;
        color: white;
        box-shadow: 0 4px 15px $button-danger-hover;
        &:hover {
            background: $button-danger-hover;
            box-shadow: 0 7px 20px $button-danger-hover;
        }
        &:active {
            background: $button-danger-active;
        }
    }
    &.success{
        background: $button-success;
        color: white;
        box-shadow: 0 4px 15px $button-success-hover;
        &:hover {
            background: $button-success-hover;
            box-shadow: 0 7px 20px $button-success-hover;
        }
        &:active {
            background: $button-success-active;
        }
    }
    &.warning{
        background: $button-warning;
        color: white;
        box-shadow: 0 4px 15px $button-warning-hover;
        &:hover {
            background: $button-warning-hover;
            box-shadow: 0 7px 20px $button-warning-hover;
        }
        &:active {
            background: $button-warning-active;
        }
    }
    &.info{
        background: $button-info;
        color: white;
        box-shadow: 0 4px 15px $button-info-hover;
        &:hover {
            background: $button-info-hover;
            box-shadow: 0 7px 20px $button-info-hover;
        }
        &:active {
            background: $button-info-active;
        }
    }
    &.white,
    &.light{
        background: $button-light;
        color: #000;
        box-shadow: 0 4px 15px $button-light-hover;
        &:hover {
            background: $button-light-hover;
            box-shadow: 0 7px 20px $button-light-hover;
        }
        &:active {
            background: $button-light-active;
        }
    }
    &.black,
    &.dark{
        background: $button-dark;
        color: white;
        box-shadow: 0 4px 15px $button-dark-hover;
        &:hover {
            background: $button-dark-hover;
            box-shadow: 0 7px 20px $button-dark-hover;
        }
        &:active {
            background: $button-dark-active;
        }
    }



  }
  



@media (max-width: 1560px) {
  .site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left .ast-builder-layout-element.ast-flex.site-header-focus-item {
    display: none;
}

.custom-header-right .custom-header-search .search-form .search-field{
	width:200px;
}
.main-header-menu .menu-link, .main-header-menu>a {
    padding: 0 10px;
    font-size: var(--font-size-small);
}
.ast-builder-grid-row{
        grid-column-gap: 0;
}
}


@media (max-width: 1024px) {
   
}


@media (max-width: 991px) {
   
}

@media (max-width: 768px) {
    .Section-title{
        font-size:var(--font-size-xlarge);
        padding-bottom: 25px;
    }
    .animated-button{
        display: none;
    }
    .product-card-image {
    height: 140px;
   }
  
}


@media (max-width: 567px){
   .product-card-image {
    height: 110px;
   }
}



@media (min-width: 1560px) {
  .n2-ss-slider .n2-ss-slider-wrapper-outside, .n2-ss-slider .n2-ss-slider-wrapper-inside {
    min-height: 80vh !important;
}
}