:root{
    --white: #FFF;
    --purple: #341a34;
    --black:#000;
    --color-blue: #183348;
    --blue: #193348;

    --blue-gray: #ECEFF8;

    --violet: #2563eb;
    --indigo: #4f46e5;

    --font-h1:84px;
    --font-h2:64px;
    --font-h3:48px;
    --font-h4:40px;
    
    --size-8px:.50rem;
    --size-12px:.75rem;
    --size-16px:1rem;
    --size-20px:1.25rem;
    --size-24px:1.5rem;
    --size-32px:2rem;
    --size-40px:2.5rem;

    --gradient-primary: linear-gradient(to bottom  right, #2563eb,  #4f46e5);
    --gradient-secondary: linear-gradient(135deg, #2563eb, #6366f1);
    --gradient-background: radial-gradient(circle,#f370631a 38%,#3a7bae1a);
    --gradient-background-2: linear-gradient(to bottom right,#f370631a 35%, #3a7bae1a);

}

/* :root {
  --primary: #2563eb;
  --secondary: #6366f1;
  --background-light: #f7f8f9;
  --foreground-light: #111827;
  --card-light: #ffffff;
  --muted-light: #e8eaed;
  --border-light: #dde0e4;
  
  --background-dark: #111827;
  --foreground-dark: #f7f8f9;
  --card-dark: #1a202c;
  --muted-dark: #1f2937;
  --border-dark: #1f2937;
  
  --text-primary: #111827;        
  --text-secondary: #6b7280;     
  --text-white: #ffffff;          
  --text-dark-primary: #f7f8f9;   
  --text-dark-secondary: #9ca3af; 
  
  --destructive: #e74c3c;
  
  --gradient-primary: linear-gradient(135deg, #2563eb, #6366f1);
} */

*{
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
    font-family: "Red Hat Display", sans-serif;
    font-family: "Urbanist", sans-serif;
    font-family: "Inter", sans-serif;
    list-style: none;
}

a{
    text-decoration: none;
    color: inherit;
}

p{
    margin: 0;
}
body{
    box-sizing: border-box;
    padding: 0;
    top: 0;
    margin: 0;
    list-style-type: none;
    /* background-image: radial-gradient(circle,#f370631a 38%,#3a7bae1a); */
    /* background-color: #F4F0F3; */
    background-color: var(--blue-gray);
    scroll-behavior: smooth;
}

.logo{
    /* font-size: var(--font-h4); */
    font-weight: bold;
    color: var(--white);
    text-decoration: none;

    border-radius: 0.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    /* background-image: linear-gradient(to bottom right, #2563eb , #4f46e5); */
    background-image: var(--gradient-primary);
    font-weight: 600;
}
header{
    width: 95%;
    padding: 10px;
    margin: 12px auto;
    background-color: var(--white);
    position: fixed;
    background-color: var(--white);
    border-radius: 0px 0px var(--size-12px) var(--size-12px);
    border-radius: var(--size-12px);
    box-shadow: 0 10px 30px #46474a1a;
    gap: 20px;
    left: 2.5%;
}
.navbar{
    display: flex;
    gap: 20px;
    
    align-items: center;
    text-align: center;
    flex-wrap: nowrap;
}

.navbar-logo{
    flex-grow: 1;
}

.navbar-items {
    display: flex;
    width: 100%;
    flex-grow: 2;
    gap: 20px;
    justify-content: flex-end;
    list-style-type: none;
    text-decoration: none;
}
.navbar-items .nav-link{
    color: var(--color-blue);
    font-size:var(--size-16px);
    text-decoration: none;
    font-weight: 600;
    line-height: var(--size-24px);
    /* padding: var(--size-16px); */
}

.nav-link:hover{
    color: var(--purple);
    transition: ease-in 3s;
}
.navbar-actions{
    width: 25%;
    display: flex;
    justify-content: space-between;
}

.hero-home{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--blue);
}

.hero-home .home-h1{
    line-height:90px;
    text-transform: uppercase;
    margin-top: 75px;
    font-size: var(--font-h1);
    font-weight:bold;
    margin-bottom: 0;
}

.hero-home .home-subheading{
    font-size: 30px;
    font-weight: 600;
    margin: 0px;
}

.hero-home .home-description{
    margin: 0;
}

.hero-home .home-cta{
    width: 50%;
    padding: var(--size-12px);
}

.hero-home .hero-image{
    width: 100%;
    height: auto;
    background-size: contain;
}
    
    
.hero-image{
    width: 100%;
}

.hero-image img{
    width: 100%;
    height: auto;
    object-fit: contain;
}
.cta{
    border: none;
    border-radius:var(--size-8px);
    padding: var(--size-8px) var(--size-12px);
    background-color: var(--purple);
    font-weight: bold;
    color: var(--white);
     transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    padding-left: var(--size-32px);
    padding-right: var(--size-32px);
}

.btn-outline{
    border: 2px solid var(--purple);
    background-color: transparent;
    color: var(--purple);
    border-radius: var(--size-8px);
    font-weight: 600;
    padding: var(--size-8px) var(--size-12px);
}


.section-container{
    padding: 20px 40px;

}

.full-section{
    min-height: 100vh;
    height: auto;
}

h1{
    color: var(--color-blue);
    font-size: var(--font-h1);
    line-height: 100px;
}
h2{
    color: var(--color-blue);
    font-size: 64px;
    line-height: 76px;
}

.image-full-size{
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.section-row{
    display: flex;
}

.half-section{
    min-height: 50vh;
    height: auto;
}

.cta-container{
    width: 80%;
    margin:  auto;
    padding: 20px;
    text-align: center;
    border-radius: 14px;
    border: var(--purple);
    /* background-color: #4c334c; */
    /* background-color: var(--blue); */
    background-image: var(--gradient-secondary);
    color: var(--white);
}

h3{
    /* font-size: var(--font-h3); */
    font-size: 40px;
    line-height: 1;
    font-weight:  bold;
}


.align-center{
    text-align: center;
    align-items: center;
}


.features{
    width: 75%;
    margin: auto;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.features .feature{
    background-color: var(--white);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 30px #46474a1a;
}


.detail{
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.item-container{
    display: flex;
    padding: 0.75rem;
    align-items: center;
    border: 1px solid #e5e7eb;
    background-color: transparent;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.item-container > .item-indicator{
    /* background-color: var(--purple); */
    /* background-color:  rgb(239 246 255 / 1); */
    background-color: var(--blue);
    color: var(--white);
    font-weight: bold;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    margin-right: 15px;
}

.item-container > .item-detail{
    text-align: left;
}

.item-detail > .detail-title{
    font-size: 20px;
    margin: 0;
    font-weight: 500;
}

.item-detail .detail-text{
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-blue);
    max-width: 95%;
}

.btn{
    /* padding: 8px 12px; */
    padding:0.5rem 1rem;
    border-radius: var(--size-8px);
    text-decoration: none;
    display: inline-block;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.btn-whatsapp{
    background-color: #25D366;
    color: var(--white);
}

.btn-instagram{
    /* background-color: #E1306C; */
    background-image: linear-gradient(to right, #E1306C, #833AB4);
    color: var(--white);

}




footer{
    justify-content: space-between;
    padding: 15px 40px;
    border-radius: 12px 12px 0px 0px;
    background-color: var(--white);
    color: var(--purple);
}

.footer-information{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
}

.footer-logo{
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo .footer-title{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.footer-logo p{
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-blue);
    font-weight: 500;
}

.footer-links{
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 15px 0px;
    flex-wrap: wrap;
}

.footer-legal a{
    text-decoration: none;
    color: var(--color-blue);
}

/* responsive styles */
@media (max-width: 768px) {
    .section-row{
    display: flex;
    flex-direction: column;
}

    .section-container {
        padding: 20px 20px;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .item-container {
        width: 100%;
    }

    .item-container > .item-indicator {
        margin-bottom: 10px;
    }

    .detail {
        width: 100%;
    }
    .hero-home .home-h1 {
        font-size: 40px;
        line-height: 56px;
    }
    .hero-home .home-cta {
        width: 100%;
    }
    .navbar-items {
        display: none;
    }
    .navbar-actions {
        width: auto;
        gap: 10px;
    }

    .features {
        width: 100%;
    }

    h2 {
        font-size: 36px;
        line-height: 40px;
    }

    h3 {
        font-size: 32px;
        line-height: 36px;
    }
    /* header {
        width: 100%;
        left: 0;
        padding: 10px 20px;
    } */

    .cta-container {
        width: 100%;
        padding: 15px;
    }

    footer{padding: 15px 20px;}

    .footer-information {
        flex-direction: column;
        align-items: center;
    }

    .footer-legal {
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }
    
}