/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --container-gap: clamp(4rem, 1.912vw + 3.388rem, 6rem);
    --grid-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --content-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --card-gap: clamp(1.6rem, 0.382vw + 1.478rem, 2rem);
    --space-m: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --section-padding-sides: clamp(1.5rem, 2.39vw + 0.735rem, 4rem);
    --section-padding-topbottom: clamp(3rem, 2.868vw + 2.082rem, 6rem);
    --font-size-body: clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);

    --action: null;
    --primary: #05B1D2;
    --secondary: #00ffc8;
    --base: #0F1618;
    --gradient:  linear-gradient(175deg, #05b1d2 34%, #0ad1cb, #00ffc8);

    /* Mod Animations */

    --fade-up-value: 30px;
    /* change here */
}

.p-0 {
    padding: 0;
}
.column-count-2 {
    column-count: 2;
}
.ul-2-columns > ul {
    column-count: 2;
    margin-block-start: 0;
    margin-block-end: 0;
}
h1, h2, h3, h4 {
    background-image: var(--gradient);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* change scroll offset because I have a sticky header now */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}
/* adjust scroll offset for mobile header */
@media( max-width: 767px){
    html {
        scroll-padding-top: 70px;
    }  
}
/* Contact List */
.fb-contact-three__contact-info a span {
    border-bottom: 1px solid;
}
.fb-contact-three__contact-info a span:hover {
    color: var(--primary);
}

/***********
Animations Mods - Hace más sutiil el efecto fade-in-up
************/

body .brx-animate-fadeInUp {
    animation-name: newFadeInUp;
}

@-webkit-keyframes newFadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, var(--fade-up-value), 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes newFadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, var(--fade-up-value), 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}