/* Variable */
:root {

    /* Button */
    --btn-height: 4.2rem;
    --btn-radius:.4rem;

    /* Gradient */
    --gradient-horizontal-primary: linear-gradient(to right, #ffac4e 0%,#fe4e66 100%);

}
@media(width < 768px){
    :root {

        /* Button */
        --btn-height: 3.8rem;

    }
}

/* Button */
.btn{height: var(--btn-height); border-radius: var(--btn-radius); padding: 0 2rem; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0 .5rem; font-family: 'Gilroy-ExtraBold'; font-size: var(--fs-sm); transition: var(--transition);}
.btn.btn-md{font-size: var(--fs); height: calc(var(--btn-height) + .4rem);}
.btn.btn-lg{font-size: var(--fs); height: calc(var(--btn-height) + 1.2rem);}
.btn.btn-primary{color: white; background: var(--gradient-horizontal-primary);}
.btn.btn-o{background: none; border-width: .1rem; border-style: solid; color: #020304;}
.btn.btn-o.btn-primary{border-color:var(--primary); color: white;}
@media(width < 768px){
    .btn{padding: 0 1.5rem;}
}

/* Label Button */
.btn-label{height: 3.6rem; padding: 0 2.2rem; border-radius: 10rem; white-space: nowrap; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; border: .2rem solid #EBB1FF; background: linear-gradient(to right, #EBB1FF, #ED27BC); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.btn-label.sm{height: 2.6rem; font-size: var(--fs-sm); padding: 0 1.5rem; border-width: .1rem;}
.btn-label.xs{height: 2.6rem; padding: 0 1.2rem; font-size: var(--fs-xs);}
@media(width < 768px){
    .btn-label{border-width: .1rem;}
}

/* Burger */
.burger{position: relative; width: 3rem; height: 3rem; cursor: pointer;}
.burger::before, .burger::after{position: absolute; width: 100%; height: .1rem; content: ""; background-color: var(--primary); transition: 150ms linear;}
.burger::before{left: 50%; top: 40%; transform: translate(-50%, -50%);}
.burger::after{right: 50%; bottom:40%; transform:translate(50%, 50%);}
.burger.active::before{transform: translate(-50%, -50%) rotate(-45deg); top: 50%; background-color: var(--primary);}
.burger.active::after{transform: translate(50%, 50%) rotate(45deg); bottom:50%; background-color: var(--primary);}
header .burger{position: relative; z-index: 9999;}
.home-header .burger::before, .home-header .burger::after{background-color: var(--primary);}
@media(width > 1199px){
    .burger{display: none !important;}
}

/* Slider Controls */
.slider-control{aspect-ratio: 1; width: 5.6rem; display: grid; place-items: center; border: .5rem solid #020304; 
    background: linear-gradient(to bottom, #ED27BC 0%,#9623BE 100%); border-radius: 100%; cursor: pointer;}
@media(width < 768px){
.slider-control{width: 4.4rem;border-width: .2rem;}
}

/* Read More Link */
.read-more-link{font-size: var(--fs); text-decoration: none; position: relative; background: linear-gradient(to right, var(--primary), var(--secondary)); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.read-more-link::after{position: absolute; left: 0; bottom: 0; width: 100%; height: .2rem; content: ""; background: linear-gradient(to right, #ffac4e 0%,#fe4e66 100%);}
.read-more-link:hover::after{display: none;}

/* Icon List */
.icon-list li:not(:last-child){margin-bottom: 2.5rem;}
.icon-list li{display: flex; gap: 2rem;}
.icon-list li span img{max-width: 2.7rem;}

/* Blur Circle */
.blur-circle{width: 40vw; aspect-ratio: 1; border-radius: 100%; z-index: -1; pointer-events: none; filter: blur(300px); opacity: 30%;}
.blur-circle-2{width: 40vw; aspect-ratio: 1; border-radius: 100%; z-index: -1; pointer-events: none; filter: blur(300px); opacity: 30%;}
.blur-circle-3{width: 40vw; aspect-ratio: 1; border-radius: 100%; z-index: -1; pointer-events: none; filter: blur(300px); opacity: 30%;}
.blur-circle-4{width: 40vw; aspect-ratio: 1; border-radius: 100%; z-index: -1; pointer-events: none; filter: blur(300px); opacity: 30%;}
.section .blur-circle, .hero-section .blur-circle{left: 0; top: 0; transform: translateY(-50%); background: #9623BE;}
.section .blur-circle-2, .hero-section .blur-circle-2{left: 0; top: 50%; transform: translateY(-50%); background: #0A3445;}
.section .blur-circle-3, .hero-section .blur-circle-3{right: 0; bottom: 0; transform: translateY(50%); background: #0A3445;}
.section .blur-circle-4, .hero-section .blur-circle-4{right: 0; top: 50%; transform: translateY(-50%); background: #0A3445;}