/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 3.5rem;
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(220, 68%, 54%);
    --arc-blue: #1b3c6c;
    --first-color-lighten: hsl(220, 68%, 97%);
    --second-color: #b8742b;
    --title-color: hsl(220, 48%, 28%);
    --text-color: hsl(220, 12%, 45%);
    --body-color: hsl(220, 100%, 99%);
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
    /* max-width: 1120px; */
    margin-inline: 1.5rem;
}

.whatsapp {
    color: #25D366;
}
.instagram {
    color: #cd486b;
}

/*=============== HEADER ===============*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
    background-color: white;
    z-index: 999;
}


.row {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 10px;
    box-sizing: border-box;
}


.u-bg-primary {
    background-color: var(--first-color);
}

.whatsapp {
    color: #25D366;
}

.instagram {
    color: #cd486b;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}



/* Preloader styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--arc-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Smooth fade */
}

/* Pulsating logo animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.logo-container_blog .logo_blog {
    width: 200px; 
    animation: pulse 1s infinite;
}
.logo-container_blog img {
    filter: invert(1);
}
.hidden {
    display: none;
}