/*==========
   utilities
 ============ */
.container {
   max-width: 1100px;
   margin: 0 auto;
   overflow: auto;
   padding: 0 40px;
}
.text-center {
   text-align: center;
}

.flex {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
}
.grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 20px;
   justify-content: center;
   align-items: center;
   height: 100%;
}
.card {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
   padding: 20px;
   margin: 10px;
   color: #333;
}
.btn {
   display: inline-block;
   padding: 10px 30px;
   cursor: pointer;
   background: var(--primary-color);
   border: none;
   color: #fff;
   border-radius: 5px;
}
.btn-primary {
   background: var(--dark-color);
   color: #fff;
}
.btn-outline {
   transition: all 0.1s ease-in;
   background: transparent;
   border: 1px solid #fff;
}
.btn-outline:hover {
   background: #fff;
   border: 1px solid #fff;
   color: var(--dark-color);
}
/* backgrounds and coloured buttons */
.bg-primary {
   background: var(--primary-color);
   color: #fff;
}
.bg-secondary,
.btn-secondary {
   background: var(--secondary-color);
   color: #fff;
}
.bg-dark,
.btn-dark {
   background: var(--dark-color);
   color: #fff;
}
.bg-light,
.btn-light {
   background: var(--light-color);
   color: #333333;
}
.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
   color: #fff;
}
/* text-colors */
.text-primary {
   color: var(--primary-color);
}
.text-secondary {
   color: var(--secondary-color);
}
.text-dark {
   color: var(--dark-color);
}
.text-light {
   color: var(--light-color);
}
/* text sizes */
.lead {
   font-size: 20px;
}
.sm {
   font-size: 1rem;
}
.md {
   font-size: 2rem;
}
.lg {
   font-size: 3rem;
}
.xl {
   font-size: 4rem;
}
.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}
/* alert */
.alert {
   background: var(--light-color);
   padding: 10px 20px;
   font-weight: bold;
   margin: 15px 0;
}
.alert i {
   margin-right: 10px;
}
.alert-success {
   background: var(--success-color);
   color: #fff;
}
.alert-error {
   background: var(--error-color);
   color: #fff;
}
/* margin */
.my-1 {
   margin: 1rem 0;
}
.my-2 {
   margin: 1.5rem 0;
}
.my-3 {
   margin: 2rem 0;
}
.my-4 {
   margin: 3rem 0;
}
.my-5 {
   margin: 4rem 0;
}
.m-1 {
   margin: 1rem;
}
.m-2 {
   margin: 1.5rem;
}
.m-3 {
   margin: 2rem;
}
.m-4 {
   margin: 3rem;
}
.m-5 {
   margin: 4rem;
}
/* padding */
.py-1 {
   padding: 1rem 0;
}
.py-2 {
   padding: 1.5rem 0;
}
.py-3 {
   padding: 2rem 0;
}
.py-4 {
   padding: 3rem 0;
}
.py-5 {
   padding: 4rem 0;
}
.p-1 {
   padding: 1rem;
}
.p-2 {
   padding: 1.5rem;
}
.p-3 {
   padding: 2rem;
}
.p-4 {
   padding: 3rem;
}
.p-5 {
   padding: 4rem;
}