:root {
    --primary-color: #fe3560;
    --primary-rgb-color: 254, 53, 96;
    --secondary-color: #0d6efd;
    --secondary-rgb-color: 13, 110, 253;
    --success-color: #198754;
    --success-rgb-color: 25, 135, 84;
    --warning-color: #ffc107;
    --warning-rgb-color: 255, 193, 7;
    --danger-color: #dc3545;
    --danger-rgb-color: 220, 53, 69;
    --info-color: #0dcaf0;
    --info-rgb-color: 13, 202, 240;
    --light-color: #f8f9fa;
    --light-rgb-color: 248, 249, 250;
    --dark-color: #212529;
    --dark-rgb-color: 33, 37, 41;

    --text-color: #212529;
    --text-rgb-color: 33, 37, 41;
    --text-secondary-color: #6e7780;
    --text-secondary-rgb-color: 108, 117, 125;
    --text-muted-color: #adb5bd;
    --text-muted-rgb-color: 173, 181, 189;

    --border-color: #dee2e6;
    --border-rgb-color: 222, 226, 230;
    --background-color: #f8f9fa;
    --background-rgb-color: 248, 249, 250;

    --font-family: "Poppins", sans-serif;
    --font-size-base: 0.875rem;
    --font-weight-base: 400;
    --line-height-base: 1.5;
    --border-radius: 0.375rem;
    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    --link-color: #0d6efd;
    --link-rgb-color: 13, 110, 253;

    --font-size: 0.875rem;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height-base);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--text-secondary-color)
}

input:focus,
a:focus,
button:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

h1,
h2,
h3,
h4,
ul,
ol {
    margin: 0;
}

/* overwrite bootstrap */
.btn:active,
.btn:hover,
.btn:focus,
.btn:visited,
.btn:focus-visible,
.btn:active:focus {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.btn-primary-soft {
    color: #0f6fec;
    background-color: rgba(15, 111, 236, 0.1);
}

.btn-primary-soft:active,
.btn-primary-soft:hover,
.btn-primary-soft:focus {
    color: #fff !important;
    background-color: #0f6fec !important;
    border-color: #0f6fec !important;
}

.card {
    border-color: var(--border-color);
    border-radius: 8px;
}

.card-body {
    color: var(--text-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:visited,
.btn-primary:focus-visible,
.btn-primary:active:focus {
    background-color: rgba(var(--primary-rgb-color), 0.92);
    border-color: rgba(var(--primary-rgb-color), 0.92);
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.border-bottom {
    border-color: var(--border-color) !important;
}

.navbar-nav .nav-item {
    margin: 0 10px;
    font-weight: 500;
}

.macbook {
    position: relative;
    width: 800px;
    height: 500px;
    background: linear-gradient(45deg, #c9c9c9, #e0e0e0);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 800px) {
    .macbook {
        width: 100%;
        height: 300px;
    }
}

.screen {
    background: #000;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.carousel {
    width: 100%;
    height: 100%;
}

.carousel-inner,
.carousel-item,
.carousel-item img {
    width: 100%;
    height: 100%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.2);
}

.macbook::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 10px;
    background: linear-gradient(90deg, #a0a0a0, #d0d0d0, #a0a0a0);
    border-radius: 5px;
}

.macbook::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
}