@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;700&family=Parisienne&family=Lobster&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size  : 14px;
    overflow-x : hidden;
}

h1 {
    font-family: Arial Black, Arial Bold, Gadget, sans-serif;
    font-size  : 30px;
}

@media (min-width: 768px) {
    h1 {
        font-size: 50px;
    }
}

h3 {
    font-size: 32px;
}

h4 {
    font-weight: 700;
    font-size  : 20px;
}

header {
    position   : fixed;
    z-index    : 16;
    padding-top: 10px;
    transition : background-color 0.3s ease-in-out;
}

header.shrinked {
    background-color: #1C1B1E;
}

header img.logoPic {
    width     : 150px;
    transition: width 0.3s ease-in-out;
}

@media (min-width: 768px) {
    header img.logoPic {
        width: 200px;
    }
}

@media (min-width: 1400px) {
    header img.logoPic {
        width: 320px;
    }
}

header.shrinked img.logoPic {
    width         : 150px;
    padding-bottom: 10px;
}


header nav {
    box-shadow: 0 0 10px 0px rgb(0, 0, 0, 0.64);
    text-align: right;
    position  : fixed;
    right     : -270px;
    top       : 0;
    width     : 270px;
    height    : 100vh;
    transition: right 0.35s cubic-bezier(0.25, -0.25, 0.75, 1.25);
}

header nav.is-open {
    right: -20px;
}

header nav .copyRight {
    position : absolute;
    bottom   : 10px;
    right    : 25px;
    font-size: 11px;
}

header nav ul {
    list-style-type: none;
    margin-top     : 70px;
}

.getInTouch {
    position: absolute;
    top     : calc(100vh - 70px);
    right   : 10px;
    width   : 56px;
    height  : 56px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.getInTouch img {
    height: 30px;
}

@media (min-width: 768px) {
    .getInTouch {
        right  : 160px;
        top    : 26px;
        padding: 3px 30px;
        width  : auto;
        height : auto;
        box-shadow: none;
    }
}

header nav ul li a {
    color      : #fff;
    display    : block;
    font-size  : 32px;
    font-weight: 200;
    padding    : 25px 45px 25px 10px;
}

header nav ul li a:hover {
    text-decoration: none;
    color          : #E9AB0D;
}

header nav ul li a:hover::after {
    content         : '0';
    position        : absolute;
    right           : 0;
    z-index         : 1;
    background-color: #E9AB0D;
    width           : 24px;
}

#home .carousel-item {
    height: 100vh;
}

#home .carousel-caption {
    bottom: calc(50vh - 140px);
}

#home .carousel-caption.withImage {
    bottom: calc(50vh - 150px);
}


#home .carousel-caption img {
    width: 100%;
}

@media (min-width: 768px) {

    #home .carousel-caption.withImage {
        bottom: calc(50vh - 200px);
    }

    #home .carousel-caption img {
        width: auto;
    }

}

#home .carousel-caption p {
    font-size: 24px;
}

#home .carousel-indicators {
    display     : block;
    bottom      : calc(50vh - 70px);
    width       : 6px;
    margin-right: 0;
}

#home .carousel-indicators li {
    width        : 6px;
    height       : 6px;
    border       : 0;
    border-radius: 3px;
    transition   : height 0.25s ease-in-out;
}



#home .carousel-indicators .active {
    height: 36px;
}

#home .carousel-control-next,
#home .carousel-control-prev {
    height          : 50px;
    width           : 50px;
    bottom          : 30px;
    top             : unset;
    background-color: rgba(0, 0, 0, 0.10);
}

#home .carousel-control-prev {
    left: calc(50vw - 60px);
}

#home .carousel-control-next {
    right: calc(50vw - 60px);
}


.hamburger {
    position: fixed;
    right   : 0px;
    top     : 12px;
    z-index : 1;
    outline : none !important;
}

@media (min-width: 768px) {
    .hamburger {
        right: 0px;
        top  : 12px;
    }
}

.hamburger--accessible {
    display: inline-block;
}

.hamburger-label {
    font-weight   : 300;
    font-size     : 18px;
    display       : inline-table;
    margin-right  : 10px;
    vertical-align: text-bottom;
    text-transform: uppercase;
}

.hamburger-box {
    width: 25px;
}

.hamburger--collapse .hamburger-inner {
    transition-duration: 0.03s;
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
    height          : 1px;
    background-color: #fff;
    width           : 25px;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
    background-color: #fff;
}

.hamburger-inner:before {
    top: -9px;
}

.hamburger--collapse .hamburger-inner:after {
    top: -18px;
}

.dividerBlock h2 {
    font-family: 'Lobster', cursive;
    font-size  : 46px;
}

.hrDiv {
    height       : 4px;
    border-radius: 2px;
    width        : 90px;
}

.about-img {
    height             : 300px;
    width              : 100%;
    max-width          : 500px;
    background-position: center center;
    background-size    : 100%;
    background-repeat  : no-repeat;
    transition         : background-size 0.25s ease-in-out;
}

.about-img:hover {
    background-size: 115%;
}


.about-img::after {
    content : '';
    display : block;
    width   : 100%;
    height  : 100%;
    border  : 7px solid #E9AB0D;
    z-index : 1;
    position: relative;
    top     : 10px;
    left    : 12px;

}

.about-img.one::after {
    border-color: #333397;
    right       : 12px;
    left        : unset;
}


@media (max-width: 576px) {
    .about-img::after {
        content: unset;
    }

    .about-img {
        background-size: cover;
    }
    
    .about-img:hover {
        background-size: cover;
    }
}

.productHead h3 span {
    font-family: 'Lobster', cursive;
    font-size   : 32px;
    margin-right: 20px;
}

.productHead h3 span::after {
    content         : '';
    display         : inline-block;
    height          : 32px;
    width           : 1px;
    background-color: #F47801;
    margin-left     : 15px;
    position        : relative;
    left            : 5px;
    transform       : skewX(-20deg);
    bottom          : -5px;
}

@media (min-width: 1200px) {
    .productHead p {
        width: 70%;
    }
}

@media (min-width: 768px) {
    .productCar .carousel-inner {
        z-index: 1;
    }
    .productCar .carousel::after {
        content: '';
        display: block;
        position: absolute;
        right: -6px;
        top: -6px;
        z-index: 0;
        width: 100px;
        height: 100px;
        background-color: #E9AB0D;
    }
    
    .productCar.even .carousel::after {
        right: unset;
        left: -6px;
    }
}


.contactDetails h4 {
    vertical-align: bottom;
}


.contactDetails a {
    color: #E9AB0D;
}
.contactDetails a:hover {
    color: #fff;
}

.footer-block img.logo {
    width: 200px;
}

.footer-block img.socialIcons {
    width: 30px;
}

.text-small {
    font-size: 11px;
}

.rightBlock {
    position: absolute;
    right   : 0;
    bottom  : 1.75rem;
}

@media (min-width: 768px) {
    .rightBlock {
        bottom: 55px;
        right : 20px;
    }
}

hr.white {
    border-top: 1px solid #fff;
    width     : 100px;
}

.carousel-item .img-fluid {
    width : 100%;
    height: 100%;
}

@media(min-width: 768px) {
    .carousel-item .img-fluid {
        height: auto;
    }

}


.hashFix {
    height: 50px;
}

.miniMap {
    min-height: calc(100vh - 90px);
}

@media(min-width: 768px) {
    .miniMap {
        min-height: 450px;
    }
}

/* colors */
.blue-bg {
    background-color: #333397;
}

.blue {
    color: #333397;
}

.blue-br {
    border-color: #333397;
}

.lightblue-bg {
    background-color: #00A3E8;
}

.lightblue {
    color: #00A3E8;
}

.gold-bg {
    background-color: #E9AB0D;
}

.gold {
    color: #E9AB0D;
}

.gold-br {
    border-color: #E9AB0D;
}

.orange-bg {
    background-color: #F47801;
}

.orange {
    color: #F47801;
}

.darkgray-bg {
    background-color: #1C1B1E;
}

.darkgray {
    color: #1C1B1E;
}

.white {
    color: #ffffff;
}

.white-bg {
    background-color: #ffffff;
}

.green {
    color: #58D05C;
}

.green-bg {
    background-color: #58D05C;
}

@media (min-width: 1200px) {
    .w-xl-75 {
        width: 75%;
    }
}