*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root{
    --primary-color: rgb(5, 41, 98);
    /* --primary-color: #0a2f5e; */
    /* --primary-color: #03076c; */
    --secondary-color: #bf1e2d;
    --black-color: #333333; 
    /* --white-color: rgb(246, 246, 246); */
    --white-color: #f6f6f6;
    --dropdown: #eff6ff;
}

body{
    background-color: var(--white-color);
}

.container{
    width: 85%;
    margin-inline: auto;
}

.margin-constant{
    margin-top: 4rem;
}

/* Default text styles */
h1{
    font-size: clamp(1.75rem, 3.5vw, 3.5rem);
    font-weight: 600;
    line-height: 120%;
}

h2{
    font-size: clamp(1.5rem, 2.75vw, 3rem);
    font-weight: 600;
}

h3{
    font-size: clamp(1.125rem, 1vw, 1.75rem);
}

h4{
    font-size: clamp(1rem, 1rem, 1.25rem);
}

p, a, label, span, li{
    font-size: clamp(0.875rem, 1rem, 1.25rem);
}

a {
    all: unset;
    cursor: pointer;
}

/* Button styles */
button{
    font-size: clamp(0.875rem, 1vw, 1rem);
    border: none;
}

.btn {
    background-color: var(--secondary-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    color: var(--white-color);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}

.btn:hover {
    background-color: #76131b;
  }

/* Tablets */
@media (min-width: 768px){
    .container{
        width: 90%;
    }
    
    .margin-constant{
        margin-top: 5rem;
    }

    .btn {
        padding: 0.5rem 1.25rem;
        font-size: 1.125rem;
    }
}

/* laptops */
@media (min-width: 1000px){
    .container{
        width: 85%;
    }
    
    .margin-constant{
        margin-top: 5rem;
    }
}

/* Big screens */
@media (min-width: 1500px){
    .container{
        width: 67%;
    }
    
    .margin-constant{
        margin-top: 6rem;
    }
}

/* 4k screens */
@media (min-width: 2560px){
    .container{
        width: 60%;
    }
    
    .margin-constant{
        margin-top: 7rem;
    }
}