@font-face { 
	font-family: 'megabold';
    src: /*url('/assets/fonts/Bowler/Bowler.woff2') format('woff2'),*/
        url('/assets/fonts/Bowler/Bowler.woff') format('woff'),
        url('/assets/fonts/Bowler/Bowler.ttf') format('truetype'),
        sans-serif;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'cannonade';
    src: url('/assets/fonts/Cannonade/Cannonade.woff2') format('woff2'),
       url('/assets/fonts/Cannonade/Cannonade.woff') format('woff'),
       url('/assets/fonts/Cannonade/Cannonade.ttf') format('truetype'),
       sans-serif;
    font-style: normal;
    font-display: swap;
/*  font-weight: 400;
  */
}

@font-face {
  font-family: 'cannonade-bold';
  src: url('/assets/fonts/Cannonade/Cannonade Bold.ttf') format('truetype');
/*  font-weight: 400;
  font-style: normal;
  */
}

html {
    scroll-behavior: smooth;
}

body {
	margin: 0;
}

a {
    text-decoration: none;
}

input {
    font-size: 1em;
    border-width: 2px;
    border-color: #5083b9;
    border-radius: 2px;
    border-style: solid;
    min-height: 26px;
}

a.link {
    display: flex;
    align-items: center;
    color: #8cb6ff;
    font-size: 14px;
    gap: 3px;
}

a.bannerLink {
    color: #8cb6ff;
}
a.bannerLink:visited {
    color: #8cb6ff;
}
a.bannerLink:hover {
    color: #dbebfd;
}
a.footerLink {
    color: #8cb6ff;
}
a.footerLink:visited {
    color: #8cb6ff;
}
a.footerLink:hover {
    color: #dbebfd;
}

.app {
    font-family: sans-serif;
}

.sectionElement {
    padding-top: 50px;
    padding-bottom: 50px;
}

.subSectionElement {
    margin-top: 10px;
    margin-bottom: 20px;
}

.subSectionElementCardPrice {
    color: #4372a4;
}

.bannerButs {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}

.appFooter {
    background-color: #181a1b;
}

.appButton {
    cursor: pointer;
    text-transform: uppercase;
    background-color: #5083b9;
    border-width: 0;
    color: white;
    border-radius: 50px;
    font-size: 14px;
    padding: 10px;
    transition: background-color 0.1s ease-in-out;
}

.bannerButton {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* bannerButton for Tablets & Desktop*/
@media only screen and (min-width: 640px) {
    .bannerButton {
        width: unset;
        margin-left: unset;
        margin-right: unset;
    }
}

.noSelect {
  -webkit-user-select: none; /* for Safari */
  -moz-user-select: none;    /* for Firefox */
  -ms-user-select: none;     /* for Internet Explorer/Edge */
  user-select: none;         /* standard syntax */
/*  -webkit-tap-highlight-color: transparent;*/
}

.appButton:hover {
    background-color: #4474a6;
}

.appButton:active {
    background-color: #5589bf;
}

/*
.appCheckUsButton {
    margin-left: 10%;
} 
*/

.appHeader {
    display: block;
	min-height: 80px;
    width: 94%;
}

.appBanner {
    display: flex;
    flex-direction: column;
    background-color: #1c1f20;
}

.appMain {}

.appCatalogs {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 0px;
}

/* Catalog Nav&Main: Mobile */
.appCatalog {
	display: grid;
	grid-template-columns: 1fr;
/*    gap: 5px; */
	text-align: center;

	width: 100%;
/*	margin-left: auto;
	margin-right: auto;
    */
}

.appCatalogNav {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: flex-start;
    background-color: #f5f7fa;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'cannonade', sans-serif;
    border-bottom-color: #393939;
    border-bottom-style: solid;
}

.navEl {
    padding: 10px;
}

.navEl-title {
    margin-top: 10px;
    margin-bottom: 10px;
}

.navEl-sliderCard {
    display: flex;
    gap: 8px;
    cursor: pointer;
    min-height: 42px;
    align-items: center;
    border-radius: 12px;
    padding: 2px 12px;
}

.navEl-sliderCard:hover {
    background-color: white;
    color: #5083b9;
}
.catalog-sliderCard-title{
    overflow: hidden;
    text-overflow: ellipsis;
}

.navEl-sliderCard-titlesWrapper {
    /*width: 100%;*/
    overflow: hidden;
}

/*
.nav-categories {
    display: none;
}
*/

.nav-menu {
    display: flex;
    align-items: center;
    min-height: 42px;
    cursor: pointer;
    gap: 5px;
    justify-content: end;
}

.nav-menu:hover {
    background-color: #e3e3e3;
    color: #5083b9;
}

/* Catalog Nav&Main: Tablets, Desktop */
@media only screen and (min-width: 640px) {
    .appCatalogs {
        width: 94%;
        flex-direction: row;
        padding-top: 50px;
    }
    .appCatalogNav {
        border-style: none;
        border-radius: 12px;
        width: 20%;
    }

	.appCatalog {
		grid-template-columns: 1fr 1fr;
        width: 80%;
	}
/*    .nav-categories {
        display: flex;
        flex-direction: column;
    }
    */
    .nav-menu {
        border-radius: 12px;
        padding: 0px 10px;
    }

}


/* Catalog Main: Desktop */
@media only screen and (min-width: 981px) {
    .appCatalogs {
        width: 80%;
    }
	.appCatalog {
		grid-template-columns: 1fr 1fr 1fr;
	}
    .aboutUs-sliderCard {
        flex-direction: row;
    }
}

.catalogElement {
    /*max-width: 100%;*/
}

.appCatalogCard {
    padding: 8px;
}

.appCatalogCardWrapper {
    border-width: 1px;
    border-color: #181a1b;
    border-style: solid;
    background-color: white;
    border-radius: 5px;
    padding: 12px;
    transition: background-color 0.1s ease-in-out;
    user-select: none;
    cursor: default;
    min-height: 384px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    min-width: 128px;
    max-width: 512px;
    margin-left: auto;
    margin-right: auto;
}

.appCatalogCardWrapper:hover {
    background-color: #e8e8e8;
}

.appCatalogCardPreview {
	display: block;
	margin-left: auto;
	margin-right: auto;
    width: 80%;
    max-width: 256px;
}

.appSlider-aboutUs {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2%;
}

.appSlider-trustUs {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.appSlider-contactUs {
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f2f4;

    transition: transform 0.5s ease;
}

.contactUs-menu {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 6;
    display: flex;
    background-color: white;
}

.contactUs-tab {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 4;
    background-color: #f0f4f9;
    overflow: auto;
    color: black;
}

/* contactUs-tab: Desktop*/
@media only screen and (min-width: 981px) {
    .contactUs-tab {
        margin-top: 60px;
    }
}

.contactUs-menu-button {
    margin-left: auto;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.aboutUs-sliderCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: wheat;
    border-radius: 12px;
    width: 100%;
    overflow: scroll;
    margin: 10px;
    text-align: center;
}

.contactUs-sliderCard {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-bottom-color: #979797;
    border-bottom-style: solid;
    padding: 10px;
}

.trustUs-sliderCard {
    width: 128px;
    margin: 10px;
}

#trustUs-sliderCard-0 { display: block; }
#trustUs-sliderCard-1 { display: block; }
#trustUs-sliderCard-2 { display: block; }
#trustUs-sliderCard-3 { display: block; }
#trustUs-sliderCard-4 { display: none; }
#trustUs-sliderCard-5 { display: none; }

/* trustUs sliderCards: Tablets & Desktop */
@media only screen and (min-width: 640px) {
    #trustUs-sliderCard-4 { display: block; }
}

@media only screen and (min-width: 981px) {
    #trustUs-sliderCard-5 { display: block; }
}


.contactUs-sliderCard-preview {
    width: 48px;
    height: 48px;
    padding-left: 10px;
}

.aboutUs-sliderCard-preview {
    width: 64px;
    height: 64px;
    margin-left: 10px;
    margin-top: 10px;
}

.trustUs-sliderCard-preview {
    width: 100%;
    height: auto;
}

.contactCard-preview {
    width: 25%;
    height: auto;
    min-width: 60px;
}

.sliderTitle {
    margin: 10px;
	font-family: 'megabold';
	font-size: 30px;
	color: #151515;
}

.contactUs-sliderCard-title {
    font-family: 'megabold';
    font-size: large;
    color: #979797;
}

.sliderSubTitle {
	font-size: 20px;	
	color: #404040;
}

/* Slider: Tablets */
@media only screen and (min-width: 640px) {
/*	.appCatalogMain {
		grid-template-columns: 1fr 1fr;
	}
    */
	.appSlider-aboutUs {
		flex-direction: row;
        align-items: unset;
	}
    .aboutUs-sliderCard {
        width: 25%;
    }
    .sliderTitle {
        font-size: 11px;
    }
    .sliderSubTitle {
        font-size: 9px;	
    }
}

/* Slider: Desktop */
@media only screen and (min-width: 981px) {
/*    .aboutUs-sliderCard {
        flex-direction: row;
    }
*/
    .sliderTitle {
        font-size: 16px;
    }
    .sliderSubTitle {
        font-size: 13px;	
    }
}

.sectionElementData {
    display: flex;
    flex-direction: column;
}
.subSectionElementData {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.subSectionElementText {
    width: 100%;
}
.subSectionElementCard {
    width: 100%;
    text-align: center;
    font-family: 'cannonade';
}
.ulList {
    padding-left: 1em;
}


/* Tablets */
@media only screen and (min-width: 640px) {
    .subSectionElementData {
        flex-direction: row-reverse;
/*        align-items: start;*/
        font-size: 0.9em;
        height: 30em;
    }
    .subSectionElementText {
       /* width: auto;*/
        height: 96%;
        overflow-y: scroll;
    }
    .subSectionElementCard {
        max-width: 300px;
    }

}

/* Desktop */
@media only screen and (min-width: 981px) {
    .subSectionElement {
        width: 100%;
    }
    .sectionElementData {
        width: 100%;
        flex-direction: row;
    }
}


#mapsElement {
	display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr 1fr;
    gap: 10px;
}

#contacts1Title{
    grid-area: 1/1/2/2;
}
#contacts2Title{
    grid-area: 3/1/4/2;
}
#contacts1Element {
    grid-area: 2/1/3/2;
}
#contacts2Element {
    grid-area: 4/1;
}

@media only screen and (min-width: 640px) {
    #mapsElement {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.1fr 1fr;
    }
    #contacts2Title{
        grid-area: 1/2/2/3;
    }
    #contacts2Element {
        grid-area: 2/2/3/3;
    }
}


/*
@media only screen and (min-width: 981px) {
	#mapsElement {
		grid-template-columns: 1fr;
		grid-template-rows: 0.1fr 1fr 0.1fr 1fr;
	}
}
*/

/*
.sectionElement {
    padding-top: 50px;
    padding-bottom: 50px;
}

.subSectionElement {
    margin-top: 10px;
    margin-bottom: 10px;
}
*/



.centrElement {
	margin-left: auto;
	margin-right: auto;
}

.defaultWidthElement {
	width: 80%;
    max-width: 1920px;
}

.contactCard {
    margin-top: 60px;
    padding: 30px;
    /*display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    */
}

.contactFields {
    display: flex;
    flex-direction: column;
    gap: 26px;
    background-color: white;
    border-radius: 20px;
 /*   min-height: 500px;*/
    max-width: 640px;
    padding: 20px;
    /*width: 320px;*/
}

/* contactCard: Desktop*/
@media only screen and (min-width: 981px) {
    .contactCard {
        grid-area: 1/2/2/3;
        margin-left: 0px;
        margin-top: auto;
        max-width: 640px;
        padding: 0px;
    }
    .contactFields {
        grid-area: 1/1/3/2;
        margin-right: 0px;
    }
}

/*.appElement:not(:last-child){
	margin-bottom: 30px;
}
*/

.elTitle {
    overflow-wrap: break-word;
	font-family: 'megabold';
	font-size: 30px;
	color: #151515;
}

.elSubTitle1 {
	font-size: 20px;	
	color: #404040;
}

.elTitleWhite {
	color: white;
}

.elSubTitle1White {
	color: white;
}

.appContact {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
    left: 0;
	text-align: center;
	/*background-color: #000000a1;*/
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 3;
}

.appContactWrapper {
	background-color: #f0f4f9;
}

.contactButsWrapper{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 640px;
}

/* appContactWrapper: Tablets */
@media only screen and (min-width: 640px) {
/*    .appContactWrapper {
        min-height: 90vh;
        width: 80vh;
    }
    */
}

/* appContactWrapper: Desktop*/
@media only screen and (min-width: 981px) {
    .appContactWrapper {
        display: grid;
        padding: 30px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        margin-bottom: 60px;
        margin-left: 10%;
        margin-right: 10%;
        gap: 60px;
    }
    .contactButsWrapper{
        flex-direction: column;
        justify-content: start;
        gap: 10px;
        grid-area: 2/2/3/3;
        margin-left: 0px;
        margin-top: unset;
        margin-bottom: unset;
    }
}

#el-about {
    background-color: #1c1f20;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url(/assets/truck-pic.jpg);
    /*padding-top: 5%;
    padding-bottom: 3%;
    */
}
#el-contacts {
    background-color: #f3f3f3;
}

#banner-0 {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("/assets/truck-pic-0.jpg");
}

/*.bannerLinks {
    margin-left: auto;
}
*/

.floor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.bannerFloor { }
.footerFloor { }

/* Footer Floors: Mobile */
.footerText {
    color: white;
}
#floor-0-number {
    margin-left: 0;
    margin-right: 0;
}

/* Footer floor: Tablets, Desktop */
@media only screen and (min-width: 640px) {
 /*   .bannerLinks {
        margin-left: 10%;
    }
    */
    .floor {
        flex-direction: row;
    } 
    .footerFloor {
        justify-content: space-evenly;
    }
    #floor-0-number {
        margin-left: auto;
        margin-right: 14px;
    }
}

/* Footer Floors: Desktop */
@media only screen and (min-width: 981px) {
}

#floor-3 {
    flex-direction: column;
}


#headerLogo {
    height: 30px;
}

.headerSwitcher {
    display: flex;
    align-items: center;
    font-size: 2.5em;
    height: 40px;
    width: 40px;
    padding: 8px;
}

.headerPhone {
    display: flex;
    align-items: center;
    max-height: 40px;
    gap: 5px;
    padding-right: 12px;
}

.headerDmUs {
    display: none;
}

.headerButsWrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    max-height: 500px;
    opacity: 100%;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    background-color: #f3f3f3;
    width: 100%;
    left: 0;
    top: 80px;
    z-index: 2;
}

.headerButsWrapperCollapsed {
    max-height: 0px;
    opacity: 0%;
}

.headerBut {
    border: none;
    background: none;
    font-size: large;
    height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.1s;
}

.headerMainWrapper {
    display: flex;
    align-items: center;
    min-height: 80px;
}

.headerCallsWrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.headerBut:hover {
    background: #6a6a6a;
}
.headerBut:active {
    background: #7a7a7a;
}

@media only screen and (min-width: 640px) {
    #headerLogo {
        height: 40px;
    }
}

@media only screen and (min-width: 1180px) {
    #headerLogo {
        height: auto;
    }
    .headerSwitcher { 
        display: none;
    }
    .headerDmUs {
        display: unset;
    }
    .headerPhone {
        margin-left: unset;
    }
    .headerCallsWrapper {
        margin-left: unset;
    }
	.headerButsWrapper {
        flex-direction: row;
        position: static;
        background-color: white;
        width: auto;
	}
}

.nobreak {
  white-space: nowrap;
}

.hide {
	display: none;
}

.overflow-hide {
    height: 100vh;           /* Prevents body height reflow */
    overflow-y: hidden;      /* Disable vertical scrolling on body */
    /*padding-right: 15px;*/     /* Optional: avoid layout shift due to scrollbar disappearance */
}


.input-container-checkbox {

}

.input-container {
  height: 50px;
  position: relative;
  width: 100%;
}

.input {
  background-color: #f0f2f4;
  border-radius: 12px;
  border: 0;
/*  color: #eee;*/
  font-size: 18px;
  height: 100%;
  outline: 0;
/*  padding: 4px 20px 0;*/
  width: 100%;
}

.cut {
  background-color: white;
  border-radius: 10px;
  height: 20px;
  left: 20px;
  position: absolute;
  top: -20px;
  transform: translateY(0);
  transition: transform 200ms;
  width: 190px;
}

.cut-short {
  width: 50px;
}

.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
  transform: translateY(8px);
}

.placeholder {
  color: #7d8d9d;
  left: 20px;
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;
}

.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-30px) translateX(10px) scale(0.75);
}

.input:not(:placeholder-shown) ~ .placeholder {
  color: #73bf70;
}

.input:focus ~ .placeholder {
  color: #5083b9;
}

#publicOfferContractText {
    margin-bottom: 10px;
}