@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

*{
  margin: 0;
  padding: 0;
  user-select: text;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* color */
:root {
    --color1: #000B4F; /*main color*/
    --color2: white;
    --color3: black;
    --color4: transparent;
    --color5: cyan;
    --color6: #333;
    --color7: #20368F;
    --color8: #829CD04D;
    --color9: #00000040;
    --color10: #829CD0;
    --color11: #E6EFFF;
    --color12: #003366;
    --color13: #6f8be759;
    --radius1: 10px;
    --radius2: 4px;
}

body {
    background-color: var(--color11) !important;
}

.bg-c1{
    background-color: var(--color1);
}

.bg-c10{
    background-color: var(--color10);
}

.bg-c11{
    background-color: var(--color11);
}

.bg-c13{
    background-color: var(--color13);
}

.text-c7{
    color: var(--color7);
}
.text-c12{
    color: var(--color12);
}


.card-animate1, .card-animate2 {
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.card-animate3 {
    background-color: var(--color2); /* New color on hover */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: var(--color12);
}
  
.card-animate1:active {
    transform: scale(0.85);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card-animate2:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.card-animate3:hover {
    background-color: rgba(0, 0, 205, 0.7); /* New color on hover */
    color: var(--color2);
}

.card-animate3:active {
    background-color: #003d80; /* Darker color on click */
    transform: scale(0.90);
}