/* main styling */
@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;
  box-sizing: border-box;
  font-family: 'Poppins'
}


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

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

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

/*main*/
.body {
    background-color: #f8f9fa;
}

/*title page*/
.pg-name {
    /*font-size: 33px;*/
    font-weight: 500;
    background: linear-gradient(90deg, #2244AA 0%, #829CD0 50.4%, #2244AA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* For Safari */
    color: transparent; /* other browsers */
}

/*button*/
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color1) !important;
    --bs-btn-border-color: var(--color1) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color1) !important;
    --bs-btn-disabled-border-color: var(--color1) !important;
}

/*animation*/
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}