/* islaizys visas css detales ko nebus islaize kiti css stiliai */


/* base */

@import './base/layout.css';
@import './base/reset.css';
@import './base/variables.css';

/* 3rd-party */

@import './3rd-party/font-awesome.min.css';

/* components */

@import './components/subscribe.css';
@import './components/clock.css';
@import './components/form.css';
@import './components/mouse.css';
@import './components/progress-bar.css';

/* custom style below this coment line */

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

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


/* hero content */

.hero {
    min-height: 40vh;
    text-align: center;
    background-image: url(../img/background.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero .logo {
    height: 70px;
    margin-bottom: 40px;
}

.hero .main-title {
    margin-bottom: 20px;
    font-size: 90px;
    text-transform: uppercase;
}

.hero .main-description {
    margin-bottom: 40px;
    font-size: 30px;
    color: #fff;
}

.hero .clock {
    margin-bottom: 40px;
}

.hero .form {
    margin-bottom: 20px;
}

.hero.form>input {
    display: inline-block;
    width: 100%;
}


/* main content */

main .left-column {
    width: 50%;
    float: left;
}

main .right-column {
    width: 40%;
    float: right;
}

main .section-title {
    text-transform: uppercase;
    margin-bottom: 30px;
}

main .section-description {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
}

main .section-description>a {
    color: var(--secondary-color);
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}

main .section-description>a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    main .left-column {
        width: 100%;
        margin-bottom: 80px;
    }
    main .right-column {
        width: 100%;
    }
}


/* footer section */

footer.container {
    text-align: center;
    color: #fffc;
    font-size: 18px;
    padding-top: 0;
    line-height: 30px;
}

.socials {
    padding: 15px 0;
    border-bottom: 1px solid #fff;
    position: relative;
}

.socials>a {
    width: 40px;
    height: 40px;
    margin: 10px;
    line-height: 40px;
    font-size: 20px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s;
}

.socials>a:hover {
    background-color: #fff;
    color: var(--primary-color);
}

footer .back-to-top {
    background-color: var(--secondary-color);
    color: #fff;
    position: absolute;
    top: -25px;
    right: -14px;
    margin: 0;
}

footer .back-to-top:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.footer-logo {
    margin: 30px 0
}

.footer-trio {
    display: flex;
    justify-content: center;
    gap: 0 20px;
}

footer a {
    color: #fff;
}

@media (max-width: 640px) {
    .footer-trio {
        flex-direction: column;
        gap: 0'

    }
}