* {
    font-family: "Montserrat", sans-serif;
}

html {
    background-color: #fff;
    color           : #34495e;
}

.grid {
    min-height: unset;
}

h1 {
    text-transform: uppercase;
    font-size     : 3.5rem;
    font-weight   : bold;
    line-height   : 2rem;
}

.h1 {
    font-size  : 3.5rem;
    font-weight: bold;
}

h2 {
    text-transform: uppercase;
    font-size     : 2.5rem;
    font-weight   : bold;
    line-height   : 2rem;
    text-align    : center;
}

.h2 {
    font-size  : 2.5rem;
    font-weight: bold;
    text-align : center;
}

h3,
.h3 {
    font-size     : 1.2rem;
    text-transform: uppercase;
    color         : #fff;
    font-weight   : 500;
}

.subpage h1 {
    text-transform: uppercase;
    font-size     : 2.5rem;
    line-height   : 3rem;
    color         : #fff;
}

/* .subpage h2 {
    text-transform : uppercase;
    font-size      : 2rem;
    font-weight    : normal;
    line-height    : 4rem;
    text-align     : left;
    color          : #25559f;
    text-decoration: underline;
} */

.subpage h3 {
    text-transform: uppercase;
    font-size     : 1.2rem;
    font-weight   : normal;
    line-height   : 2.5rem;
    text-align    : left;
    color         : #25559f;
}

.subpage .desc {
    font-size  : 1rem;
    line-height: 2;
    padding    : 1rem 0;
    color      : #2c4059;
}



.subpage .splide {
    margin-top: 6rem;
}

.subpage .splides {
    text-align: center;
    padding: 1rem;
}


#app {
    max-width: 1920px;
    margin   : 0 auto;
}

.navigation {
    height: 3rem;
}

.navigation--fixed {
    background-color: #1566ae;
    max-width       : 1920px;
    left            : unset;
    margin          : auto;
}

.navigation {
    max-width: 1920px;
    left     : unset;
    margin   : auto;
}

.navigation__logo {
    margin-top: 0.5rem;
    height    : 2rem;
    padding   : unset;
}

.navigation__lnk.mPS2id-highlight,
.navigation__lnk:hover {
    color        : #fff;
    border       : 1px solid #fff;
    border-radius: 11px;
    margin-top   : 0.5rem;
    height       : 2rem;
}

.navigation__lnk {
    border        : 1px solid transparent;
    margin-top    : 0.5rem;
    margin-right  : 0.5rem;
    height        : 2rem !important;
    font-size     : 0.8rem;
    text-transform: uppercase;
    font-weight   : 300;
}

.navigation__items-wrap {
    overflow-x: unset;
}


a:hover h2,
a:hover h3 {
    color: #004c80 !important;
}

#top {
    color: #fff;
    background-image: url("../images/header-bg.webp");
    background-repeat:  no-repeat;
}

#subpage {
    background-image: url("../images/subpage-header-bg.webp");
    background-repeat:  no-repeat;
}

#subpage-top {
    color: #fff;
}

#subpage-bottom {
    /* background: url("../images/subpage-bottom-bg.webp") no-repeat;
    min-height: 1220px; */
}

#subpage-content {
    background-image: url("../images/subpage-content-bg.webp");
    position: relative;
    background-size: cover;
    background-position: right bottom;
    background-repeat:  no-repeat;
}
#subpage-bottom {
    position: absolute;
    left    : 0;
    bottom  : 0;
    width   : 100%;
}


#offer {
    background-image: url("../images/offer-bg.webp");
    background-repeat:  no-repeat;
    min-height: auto !important;
}
#offer .md\:mt-64 {
    margin-top: 2rem !important;
}
#offer h2 {
    font-size  : 1.8rem;
    font-weight: 900;
    color      : #016db6;
    margin     : auto;
}

#portfolio h2,
#portfolio-desktop h2 {
    font-size  : 2.5rem;
    font-weight: 900;
    color      : #016db6;
    line-height: 3rem;
    margin     : auto;
}

#contact .h2,
.subpage-content .h2 {
    font-size  : 2.3rem;
    font-weight: 900;
    margin     : auto;
    color      : #2c4059;
}
.subpage-content h2 {
    font-size  : 1.8rem;
}

#offer h2 {
    max-width : 18rem;
    word-break: break-word;
}

#offer .md\:grid {
    max-width   : 70rem;
    margin-left : auto;
    margin-right: auto;
}

#offer .desc {
    color      : #65707d;
    font-weight: 300;
    font-size  : 0.9rem;
    text-align : center;
}

#about .desc {
    padding-top   : 0.8rem;
    color         : #c2d4ef;
    font-weight   : 400;
    font-size     : 0.9rem;
    text-align    : left;
    letter-spacing: 1px;
}

#offer .md\:grid>div {
    min-height: 12rem;
}
#about {
    background-image: url("../images/about-bg.webp");
    background-repeat:  no-repeat;
}

#apps {
    background-image: url("../images/apps-bg.webp");
    background-repeat:  no-repeat;
}

#portfolio {
    background-image: url("../images/portfolio-bg.webp");
    background-repeat:  no-repeat;
}

#portfolio-desktop {
    background-image: url("../images/portfolio-desktop-bg.webp");
    background-repeat:  no-repeat;
}

#contact {
    background-image: url("../images/contact-bg.webp");
    background-repeat:  no-repeat;
}
/* #about,
#apps {
  background-size: contain;
} */

/* portfolio glide */

.portfolio {
    padding: 6rem 0 0;
}

#portfolio .glide__slide>div {
    width  : 313px;
    height : 634px;
    margin : auto;
    padding: 73px 20px;
}

#portfolio .glide__slide.is-active > div {
    background-image: url("../images/slider-bg.png");
    background-repeat:  no-repeat;
}

#portfolio .glide__arrow--left {
    -webkit-transform-origin: 50% 25%;
    -moz-transform-origin   : 50% 25%;
    -o-transform-origin     : 50% 25%;
    transform-origin        : 50% 25%;
    -webkit-transform       : rotate(180deg);
    -moz-transform          : rotate(180deg);
    -ms-transform           : rotate(180deg);
    -o-transform            : rotate(180deg);
    transform               : rotate(180deg);
}

#portfolio .glide__arrow {
    background-image: url("../images/arrow-next.png");
    background-repeat:  no-repeat;
    width     : 24px;
    height    : 38px;
    border    : unset;
    box-shadow: unset;
    opacity   : 0.3;
}

#portfolio .glide__arrow:hover {
    opacity: 1;
}

/* portfolio-desktop glide */

#portfolio-desktop .glide__slide>div {
    width  : 907px;
    height : 760px;
    margin : auto;
    padding: 41px 37px;
}

#portfolio-desktop .glide__slide.is-active > div {
    background-image: url("../images/slider-desktop-bg.png");
    background-repeat:  no-repeat;
}

#portfolio-desktop .glide__arrow--left {
    -webkit-transform-origin: 50% 25%;
    -moz-transform-origin   : 50% 25%;
    -o-transform-origin     : 50% 25%;
    transform-origin        : 50% 25%;
    -webkit-transform       : rotate(180deg);
    -moz-transform          : rotate(180deg);
    -ms-transform           : rotate(180deg);
    -o-transform            : rotate(180deg);
    transform               : rotate(180deg);
}

#portfolio-desktop .glide__arrow {
    background-image: url("../images/arrow-next.png");
    background-repeat:  no-repeat;
    width     : 24px;
    height    : 38px;
    border    : unset;
    box-shadow: unset;
    opacity   : 0.3;
}

#portfolio-desktop .glide__arrow:hover {
    opacity: 1;
}

#portfolio-desktop .glide__slides {
    overflow: visible !important;
}



.splide__slide {
    text-align: center;
    overflow  : hidden;
    margin    : auto;
}

.splide__pagination {
    bottom: -2.5rem !important;
}

.splide__slide img {
    -webkit-transition: all 0.4s;
    -moz-transition   : all 0.4s;
    margin            : auto;
}


.splide__slide.is-active{
    background-image: url("../images/slider-desktop-bg.png");
    background-repeat:  no-repeat;
    background-position: center top;

}
.form {
    margin: 2rem auto;
}

.form form>div {
    margin-bottom: 2rem;
}

.form form>div,
.form form>div>div {
    position: relative;
}

.form input,
.form textarea {
    width           : 100%;
    background-color: #eaeaea;
    border-radius   : 5px;
    text-indent     : 25px;
}

.form input {
    height: 55px;
}

.form .md\:grid {
    padding-bottom: unset;
}

.site-footer {
    background-color: #1566ae;
    padding         : 1.5rem 1rem;
}

.validation-error {
    color           : red;
    position        : absolute;
    top             : -23px;
    left            : 3px;
    text-align      : left;
    background-color: #fff;
}

.hamburger:focus {
    outline: unset;
}

#about .icon {
    display       : inline-block;
    vertical-align: top;
    margin-right  : 2rem;
}

#about .content {
    display: inline-block;
    width  : 80%;
}

#apps .content {
    text-align: center;
}

#apps .content>div:first-child {
    padding: 1rem;
}

#apps h3 {
    color         : #1566ae;
    text-transform: none;
    font-weight   : bold;
}

#apps .desc {
    color      : #65707d;
    font-weight: 300;
}

.dropdown {
    position: relative;
    display : block;
}

.dropdown-wrapper {
    padding: 10px;
    display: none;
}

.dropdown-content {
    display         : none;
    transition      : all 0.5s ease;
    position        : absolute;
    background-color: #f9f9f9;
    left            : -104px;
    margin-left     : 50%;
    font-size       : 0.8rem;
    width           : 208px;
    text-align      : center;
    white-space     : nowrap;
    box-shadow      : 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index         : 1;
    border-radius   : 15px;
}

.dropdown-content>div {
    padding: 0.5rem;
    display: block;
}

.dropdown-content>div:hover {
    background: #eab818;
    color     : #fff;
}

.dropdown-content>div:first-child:hover {
    border-top-left-radius : 15px;
    border-top-right-radius: 15px;
}

.dropdown-content>div:last-child:hover {
    border-bottom-left-radius : 15px;
    border-bottom-right-radius: 15px;
}

/* icons */

.icon {
    width : 33px;
    height: 33px;
}

.icon.large {
    width : 67px;
    height: 63px;
}

.icon.notes {
    background: url("../images/icons/notes.png") no-repeat;
}

.icon.vinyl {
    background: url("../images/icons/vinyl.png") no-repeat;
}

.icon.phones {
    background: url("../images/icons/phones.png") no-repeat;
}

.icon.desktop {
    background: url("../images/icons/desktop.png") no-repeat;
}

.icon.access {
    background: url("../images/icons/access.png") no-repeat;
}

.icon.i24 {
    background: url("../images/icons/24.png") no-repeat;
}

.icon.shield {
    background: url("../images/icons/shield.png") no-repeat;
}

#chat {
    display: none;
}

.lazy {
    background-image: none !important;
    background-color: #fff;
}