@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

@primary-color: #2B006A;
@secondary-color: #6300F6;
@footer-color: #906CC4;
@white: #fff;

html {
    scroll-behavior: smooth;
}

a,
abbr,
address,
b,
blockquote,
cit,
code,
dd,
del,
dfn,
dl,
dt,
em,
fieldset,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
i,
ins,
label,
legend,
li,
ol,
p,
pre,
q,
samp,
small,
strong,
sub,
sup,
ul {
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    color: @primary-color;
}

article,
aside,
audio,
canvas,
figcaption,
figure,
figure img,
footer,
header,
hgroup,
nav,
section,
video {
    display: block;
}

html,
body {
    border: 0;
    font-family: 'Poppins', sans-serif;
    line-height: 1.75;
    margin: 0;
    padding: 0;
    .relative;
    font-weight: 400;
    height: 100%;
    font-size: 18px;
    color: @primary-color;
}

a {

    &:focus,
    &:hover {
        color: inherit;
        text-decoration: none;
        -webkit-transition: color 0.5s ease-in-out;
        -moz-transition: color 0.5s ease-in-out;
        transition: color 0.5s ease-in-out;
    }

    img {
        border: 0;
    }
}

h1 {
    font-size: 7.5rem;

    @media screen and (max-width: 1600px) {
        font-size: 6rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 5rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 4rem;
    }

    @media screen and (max-width: 768px) {
        font-size: 3rem;
    }

    @media screen and (max-width: 576px) {
        font-size: 1.75rem;
    }
}

h2 {
    font-size: 5.25rem;

    @media screen and (max-width: 1600px) {
        font-size: 4.25rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 3rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 2.5rem;
    }

    @media screen and (max-width: 768px) {
        font-size: 2rem;
    }

    @media screen and (max-width: 576px) {
        font-size: 1.5rem;
    }
}

h3 {
    font-size: 5.25rem;

    @media screen and (max-width: 1600px) {
        font-size: 4.75rem;
    }

    @media screen and (max-width: 1400px) {
        font-size: 4rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 3.25rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 3rem;
    }

    @media screen and (max-width: 768px) {
        font-size: 2.75rem;
    }

    @media screen and (max-width: 576px) {
        font-size: 1.75rem;
    }
}
h4 {
    font-size: 2.75rem;
    font-weight: 500;

    @media screen and (max-width: 1600px) {
        font-size: 2rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 2.25rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 1.75rem;
    }

    @media screen and (max-width: 768px) {
        font-size: 1.5rem;
    }

    @media screen and (max-width: 576px) {
        font-size: 1.25rem;
    }
}

hr {
    height: 1px;
    background-color: #c6c6c6;
}

.font-weight-bold {
    font-weight: 500 !important;
}

&::-webkit-input-placeholder {
    color: @white  !important;
}

&::-moz-placeholder {
    color: @white  !important;
}

&:-ms-input-placeholder {
    color: @white  !important;
}

&:-moz-placeholder {
    color: @white  !important;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    width: 90%;
    max-width: 1640px;
}

.cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.lh-100 {
    line-height: 1;
}
.lh-120 {
    line-height: 1.2;
}

.lh-150 {
    line-height: 1.5;
}
.z-9 {
    z-index: 9;
}
.primary-color {
    color: @primary-color;
}
.secondary-color {
    color: @secondary-color;
}

.big {
    font-size: 2rem;

    @media screen and (max-width: 1600px) {
        font-size: 1.5rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 1.25rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 1rem;
    }
}

.bigger {
    font-size: 1.75rem;

    @media screen and (max-width: 1600px) {
        font-size: 1.5rem;
    }

    @media screen and (max-width: 1300px) {
        font-size: 1.25rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 1.15rem;
    }
}

.biggest {
    font-size: 5.625rem;

    @media screen and (max-width: 1600px) {
        font-size: 4.25rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 3rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 2.5rem;
    }

    @media screen and (max-width: 768px) {
        font-size: 2rem;
    }

    @media screen and (max-width: 576px) {
        font-size: 1.5rem;
    }
}

.medium {
    font-size: 1.5rem;

    @media screen and (max-width: 1600px) {
        font-size: 1.25rem;
    }

    @media screen and (max-width: 1199px) {
        font-size: 1.15rem;
    }

    @media screen and (max-width: 992px) {
        font-size: 1rem;
    }
}

.small {
    font-size: 12px;
}

&:focus {
    outline: 0;
}

.relative {
    top: 0;
    left: 0;
}

.container-fluid {
    padding: 0;
}

.vertical-center {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.btn {
    border-radius: 3.125rem;
    padding: .85rem 3.5rem;
    @media screen and (max-width: 992px) {
        padding: .85rem 2rem;
    }
    border: 1px solid @white;

    &:hover,
    &:focus,
    &:active {
        outline: 0 !important;
        box-shadow: none !important;
    }

    &:hover {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    &.btn-primary {
        background-color: transparent;
        color: @white;
        border-color: @white;
    
        &:hover {
            background-color: @white;
            color: @primary-color  !important;
        }
    }
    &.btn-secondary {
        background: linear-gradient(90deg, @secondary-color 0%, #32007b 100%);
        color: @white;
    
        &:hover {
            background: @primary-color;
            color: @white;
        }
    }
}

footer {
    background: linear-gradient(90deg, #2b006a 0%, #1f0148 100%);

    * {
        color: @footer-color;
    }
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;

    @media screen and (max-width: 992px) {
        background: rgba(255, 255, 255, .1);
        border-bottom: 1px solid rgba(255, 255, 255, .25);

        img {
            max-height: 2rem;
        }
    }

    a {
        color: #fff;
        font-size: 1rem;
        font-weight: 500;

        &:hover {
            color: @primary-color;
        }
    }

    .phone {
        a {
            font-size: 1.375rem;

            @media screen and (max-width: 992px) {
                font-size: .85rem;
                line-height: 1;

                img {
                    width: .5rem;
                }
            }

            &:hover {
                color: @white;
            }
        }
    }

    .navbar {
        li {
            padding: 0 2rem;

            @media screen and (max-width: 768px) {
                padding: 0 1rem;
            }
        }
    }
}

#main.cover {
    background-image: url(/images/top_bg.jpg);
    position: relative;
    top: 0;
    left: 0;

    @media screen and (max-width: 768px) {
        padding-top: 3.75rem;
    }

    .container {
        min-height: 100vh;

        @media screen and (max-width: 768px) {
            min-height: 0;
        }

        h1 {
            color: #fff;
            line-height: 1;

            @media screen and (max-width: 992px) {
                line-height: 1.2;
            }
        }
    }
    .scroll-down {
        position: absolute;
        bottom: 2.5rem;
        left: 50%;
        width: 2rem;
        margin-left: -1rem;
    }
}
#materials {
    .materials-list {
        li {
            display: block;
            margin-top: 1.5rem;
            background: #F4F2F7;
            color: @secondary-color;
            border-radius: 0 3.125rem 3.125rem 0;
            list-style: none;
            text-align: right;
            padding: 1rem 2.5rem;
            @media screen and (max-width: 992px) {
                padding: 1rem 1.5rem;
                text-align: left;
            }
            font-weight: 500;
            &:first-child {
                width: 100%;
            }
            &:nth-child(2) {
                width: 90%;
                @media screen and (max-width: 1199px) {
                    width: 100%;
                }
            }
            &:nth-child(3) {
                width: 80%;
                @media screen and (max-width: 1199px) {
                    width: 100%;
                }
            }
        }
    }
}
#contact {
    background: linear-gradient(90deg, #2b006a 0%, #1f0148 100%);
    margin-bottom: -1px;

    * {
        color: @white;
        font-weight: 300;
    }

    h2 {
        font-weight: normal;
    }

    .footer-color {
        color: @footer-color;
    }

    .form-group {
        margin: 0;

        input,
        textarea {
            border: 0;
            border-bottom: 1px solid @white;
            border-radius: 0;
            background: transparent;
            outline: none !important;
            padding: 0;
            font-size: 1rem;
            margin-bottom: 1.5rem;
            box-shadow: none;
            @media screen and (max-width: 992px) {
                font-size: .85rem;
            }
        }

        textarea {
            height: 5rem;
        }
    }

    .custom-checkbox {
        padding-left: 1.25rem;
        position: relative;
        top: 0;
        left: 0;

        .custom-control-label {
            &:before {
                background-color: @primary-color;
                border: 1px solid @white;
                width: .75rem;
                height: .75rem;
                border-radius: 0;
                box-shadow: none !important;
                outline: 0 !important;
                top: 3px;
                left: -1.25rem;
            }

            &:after {
                width: .75rem;
                height: .75rem;
                top: 3px;
                left: -1.25rem;
            }

            color: @white;
            font-size: .65rem;
        }

        .custom-control-input {
            &:checked~.custom-control-label {
                &::after {
                    background-color: @secondary-color;
                }
            }
        }
    }
}

@-webkit-keyframes gradient {
    0% {
        background-position: 0
    }

    33% {
        background-position: 33%
    }

    66% {
        background-position: 66%
    }

    to {
        background-position: 100%
    }
}

@keyframes gradient {
    0% {
        background-position: 0
    }

    33% {
        background-position: 33%
    }

    66% {
        background-position: 66%
    }

    to {
        background-position: 100%
    }
}

.gradient {
    height: .55rem;
    width: 100%;
    background: linear-gradient(90deg, rgba(43, 0, 106, 0.36) 0%, @secondary-color 100%);    
    background-size: 200%;
    -webkit-animation: gradient 4s ease infinite alternate;
    animation: gradient 4s ease infinite alternate;
    &.header-gradient {
        position: relative;
        top: -.55rem;
        z-index: 99;
    }
}

// @media screen and (max-width: 1199px) {
//     header {
//         .navbar {
//             li {
//                 padding: 0 15px;
//             }
//         }
//     }

//     #contact {
//         textarea {
//             height: 200px;
//         }
//     }
// }

// @media screen and (max-width: 991px) {
//     header {
//         padding-top: 20px;
//         text-align: center;
//         border-bottom: 1px solid rgba(255, 255, 255, 0.3);
//         padding-bottom: 20px;
//         background: rgba(255, 255, 255, 0.3);

//         .navbar {
//             #navbar {
//                 width: 100%;
//                 padding: 10px 0 5px;
//             }
//             .navbar-nav {
//                 width: 100%;
//                 text-align: center;
//                 display: block;

//                 li {
//                     display: inline-block;
//                     padding: 0 10px;
//                 }
//             }
//         }
//     }
// }

// @media screen and (max-width: 767px) {
//     #main.cover {
//         .container {
//             height: auto;
//             min-height: 0;
//             padding-bottom: 20px;
//             .col-md-8 {
//                 position: relative;
//                 top: 0;
//                 left: 0;
//                 bottom: 0;
//                 text-align: center;
//             }
//         }
//     }
// }