/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/




/* FONT Montserrat assets/fonts/Montserrat */

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/bootscore-child/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('woff2');
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/bootscore-child/assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('woff2');
  font-style: italic;
}

body {
    font-family: 'Montserrat', sans-serif;
   

    
}

:root{
    --color-1 : #0081E1;
    --color-2 : #00315f;
    --color-3 : #ea2d4f;
    --color-4 : #fdbc15;
        --bs-black-rgb: 0, 8, 28 !important;
}




:target {
  scroll-margin-top: 80px;
}

.color-1{
    color: var(--color-1) !important;
}


.bg-color-1 {
    background-color: var(--color-1) !important;
}

.bg-color-2 {
    background-color: var(--color-2) !important;
}



.btn{
    border-radius: 100px !important;
    font-weight: bold !important;
    padding: 10px 20px !important;
}


.btn-light{
    background-color: #ffffff !important ;
    border: solid 1px #fff !important;
    color: var(--color-2) !important;
}
.btn-light:hover{
    background-color: var(--color-1) !important ;
    color: white !important;

}   

.btn-yellow{
    background-color: var(--color-4) !important ;
    border: solid 2px var(--color-4) !important;
    color: var(--color-2) !important;
}
.btn-yellow:hover{
    background-color: #fff!important ;
    color: black !important;

}  





/* Button with arrow icon (use with .btn.btn-light in hero) */
.btn-arrow{
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
}
.btn-arrow::after{
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24'%20height='24'%3E%3Cpath%20fill='none'%20d='M0%200h24v24H0z'/%3E%3Cpath%20d='M13%2016.172l5.364-5.364%201.414%201.414L12%2020l-7.778-7.778%201.414-1.414L11%2016.172V4h2v12.172z'%20fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24'%20height='24'%3E%3Cpath%20fill='none'%20d='M0%200h24v24H0z'/%3E%3Cpath%20d='M13%2016.172l5.364-5.364%201.414%201.414L12%2020l-7.778-7.778%201.414-1.414L11%2016.172V4h2v12.172z'%20fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateY(0);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.btn-arrow:hover::after,
.btn-arrow:focus::after,
.btn-arrow:focus-visible::after{
    transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-arrow::after{
        transition: none;
    }
}


.btn-outline-light{
    background-color: var(--color-2) !important ;
    border: solid 1px var(--color-2) !important;
}


.btn-outline-light:hover{
    background-color: var(--color-1) !important ;
    color: white !important;
    border-color: #fff !important ;
}   



a:hover .phone-icon svg {
    color : rgb(0, 196, 0);
} 



.hero-height{
    height: 70rem !important;
}
.primary-title-dash
 {
    display: inline-block;
    height: 1.2rem;
    width: 8rem;
 
    margin-left: 1rem;
    background: #fff;
}




.product-card{
    border-radius: 20px;;
    padding: 20px;;
}
.product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease;
    border: solid 1px #1b1b1b;
    background-color: #e3e3e3;

}










.text-white-footer a {
    color: #ffffff !important;
}

/* ── Scroll Reveal ───────────────────────────────── */
[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="up"]    { transform: translateY(60px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"]  { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger children inherit parent timing but start hidden */
[data-reveal] [data-reveal-child] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible [data-reveal-child] {
    opacity: 1;
    transform: none;
}

/* Hero load animation (no scroll needed) */
.hero-section [data-hero-intro] {
    opacity: 0;
    transform: translateY(40px);
    animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-section [data-hero-intro="1"] { animation-delay: 0.1s; }
.hero-section [data-hero-intro="2"] { animation-delay: 0.25s; }
.hero-section [data-hero-intro="3"] { animation-delay: 0.4s; }
.hero-section [data-hero-intro="4"] { animation-delay: 0.55s; }

@keyframes heroIn {
    to { opacity: 1; transform: none; }
}

/* Preloader icon animation */
.handyamo-preloader-icon {
    animation: preloaderSpin 1s linear infinite;
}
@keyframes preloaderSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .handyamo-preloader-icon { animation: none; }
    [data-reveal],
    [data-reveal] [data-reveal-child],
    .hero-section [data-hero-intro] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Hero button: inverted style */
.hero-section .btn.btn-light {
    background-color: var(--color-1) !important;
    border-color: #fff !important;
    color: #fff !important;
}
.hero-section .btn.btn-light:hover {
    background-color: #fff !important;
    color: var(--color-2) !important;
}

/* Hero section: +10% height on mobile up to xxl breakpoint */
@media (max-width: 1399.98px) {
  .hero-section {
    min-height: 77vh !important;
  }
}