/*!
* Based on Start Bootstrap - New Age v6.0.7 (https://startbootstrap.com/theme/new-age)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-new-age/blob/master/LICENSE)
*
* Only the theme layer is kept here: Bootstrap 5.3 itself is loaded from the CDN.
*/

/* Brand ——————————————————————————————————————————————————————————————————— */

:root {
    --sk-primary: #d32f2f;
    --sk-secondary: #f57c00;
    --sk-font-heading: 'Newsreader', Georgia, serif;
    --sk-font-alt: 'Kanit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --bs-primary: var(--sk-primary);
    --bs-primary-rgb: 211, 47, 47;
    --bs-link-color: var(--sk-primary);
    --bs-link-color-rgb: 211, 47, 47;
    --bs-link-hover-color: #a82525;
    --bs-body-font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.display-1,
.display-4 {
    font-family: var(--sk-font-heading);
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--sk-primary);
    --bs-btn-border-color: var(--sk-primary);
    --bs-btn-hover-bg: #b32828;
    --bs-btn-hover-border-color: #b32828;
    --bs-btn-active-bg: #a82525;
    --bs-btn-active-border-color: #a82525;
}

/* Theme ——————————————————————————————————————————————————————————————————— */

.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, var(--sk-primary), var(--sk-secondary)) !important;
}

.font-alt {
    font-family: var(--sk-font-alt) !important;
}

.text-gradient {
    background: linear-gradient(var(--sk-primary), var(--sk-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

aside,
section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.app-badge {
    height: 3rem;
}

.icon-feature {
    font-size: 4rem;
}

/* Navigation —————————————————————————————————————————————————————————————— */

#mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #fff;
}

#mainNav .navbar-brand {
    font-family: var(--sk-font-alt);
}

#mainNav .navbar-brand img {
    height: 2.5rem;
}

#mainNav .navbar-toggler {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    color: #212529;
}

#mainNav .navbar-nav .nav-link {
    color: #212529;
}

#mainNav .navbar-nav .nav-link:hover {
    color: #6c757d;
}

#mainNav .navbar-nav .nav-link.active {
    color: var(--sk-primary);
}

.lang-switch .btn {
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-color: var(--sk-primary);
    --bs-btn-border-color: var(--sk-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sk-primary);
    --bs-btn-hover-border-color: var(--sk-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sk-primary);
    --bs-btn-active-border-color: var(--sk-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    font-size: 0.8rem;
}

/*!
 * html5-device-mockups (https://github.com/pixelsign/html5-device-mockups)
 * Copyright 2013 - 2017 pixelsign
 * Licensed under MIT (https://github.com/pixelsign/html5-device-mockups/blob/master/LICENSE.txt)
 */

.device-wrapper {
    max-width: 300px;
    width: 100%;
}

.device {
    position: relative;
    padding-bottom: 198.898071625%;
}

.device::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/portrait_black.png');
    background-size: cover;
    pointer-events: none;
}

.device .screen {
    position: absolute;
    top: 3.1855955679%;
    left: 6.8870523416%;
    width: 86.2258953168%;
    height: 93.6288088643%;
    overflow: hidden;
    border-radius: 8% / 4%;
    /* The screenshots have no status bar: start them below the frame's notch */
    padding-top: 8%;
    background-color: #fff;
}

.device .screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Device mockups (masthead and feature sections) —————————————————————————— */

.device-mockup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.device-mockup .circle {
    position: absolute;
    fill: url(#circleGradient);
    width: 70%;
    display: none;
}

.gradient-start-color {
    stop-color: var(--sk-primary);
}

.gradient-end-color {
    stop-color: var(--sk-secondary);
}

.device-mockup .shape-1 {
    position: absolute;
    height: 1rem;
    width: 1rem;
    transform: rotate(-10deg);
    fill: var(--sk-primary);
    bottom: 15%;
    left: 10%;
}

.device-mockup .shape-2 {
    position: absolute;
    height: 0.75rem;
    width: 0.75rem;
    fill: var(--sk-secondary);
    top: 15%;
    right: 10%;
}

.device-mockup .device-wrapper {
    max-width: 10rem;
}

@media (min-width: 576px) {
    .device-mockup .circle {
        display: block;
    }

    .device-mockup .device-wrapper {
        max-width: 12.5rem;
    }
}

@media (min-width: 768px) {
    .device-mockup .circle {
        width: 60%;
    }

    .device-mockup .device-wrapper {
        max-width: 15rem;
    }
}

@media (min-width: 992px) {
    .device-mockup .circle {
        width: 90%;
    }

    /* Narrow column: the circle would hide behind the phone */
    #features .device-mockup .circle {
        width: 120%;
    }
}

@media (min-width: 1200px) {
    .device-mockup .circle {
        width: 75%;
    }
}

@media (min-width: 1400px) {
    .device-mockup .circle {
        width: 70%;
    }

    .device-mockup .device-wrapper {
        max-width: 17rem;
    }
}

/* Sections ———————————————————————————————————————————————————————————————— */

.masthead {
    background-color: #f8f9fa;
    padding-top: 9.5rem;
    padding-bottom: 5rem;
}

footer a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

footer a:hover,
footer a:active,
footer a:focus {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}