@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700;800&display=swap');

:root {
  --brand-col: #10a5b7;	/* tourquize */
  --dark-blue: #161e37; /* dark blue */
}

html {
	font-size: 16px;
}

html,
body {
	direction: rtl;
	text-align:right;
	min-height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
	font-weight: 400;
	font-family: 'Assistant', sans-serif;
}

.fa {
	font-family: FontAwesome !important;
}

img {
	max-width:100%;
	height: auto;
}

.siteW {
	width:95%;
	max-width:1400px;
	margin:0 auto;
}

.alignleft {
	text-align:left;
}
.Wtext {
	color:#ffffff;
}
.nowrap {
	white-space:nowrap;
}
.pica {
	text-decoration:none;
}

.brand-col {
	color: var(--brand-col);
}

header {
	height:50px;
	padding:10px 0;
	position:fixed;
	width:100%;
	top:0;
	background:#ffffff;
	z-index:9;
}
header > div {
	height:100%;
}
header img {
	max-height:90%;
	width:auto;
	max-width:none;
}

.container {
	margin-top:50px;
	margin-bottom: calc(5vh + 70px); 	/*5vh -> tbar, 70px -> form*/
}

	
/*======================//
//======= SLIDE ========//
//======================*/
.slides {
	position:relative;
	width:100%;
	overflow:hidden;
	direction:ltr;
}
.slidesContainer {
	position:relative;
	display:flex;
	width:max-content;
	height:100%;
	direction:ltr;
}
.slide {
	position:relative;
	text-align:center;
	width:100vw;
	height:100%;
}
.slide h2 {
	text-align:center;
	line-height:6vw;
	font-size:46px;
	font-size:3vw;
	font-weight:900;
}
.slide h2 .bigtext {
	font-size:200px;
	font-size:13vw;
	font-weight:900;
}
.slide_car {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.slide01 {
	background-image: url(../assets/slider_01_bg.jpg);	
}
.slide01 .slide_car {
	background-image: url(../assets/slider_01_car.png);	
}
.slide02 {
	background-image: url(../assets/slider_02_bg.jpg);	
}
.slide02 .slide_car {
	background-image: url(../assets/slider_02_car.png);	
}
.slide03 {
	background-image: url(../assets/slider_03_bg.jpg);	
}
.slide03 .slide_car {
	background-image: url(../assets/slider_03_car.png);	
}
.slide04 {
	background-image: url(../assets/slider_04_bg.jpg);	
}
.slide04 .slide_car {
	background-image: url(../assets/slider_04_car.png);	
}
.slide05 {
	background-image: url(../assets/slider_05_bg.jpg);	
}
.slide05 .slide_car {
	background-image: url(../assets/slider_05_car.png);	
}
.slide06 {
	background-image: url(../assets/slider_06_bg.jpg);	
}
.slide06 .slide_car {
	background-image: url(../assets/slider_06_car.png);	
}
.slide07 {
	background-image: url(../assets/slider_07_bg.jpg);	
}
.slide07 .slide_car {
	background-image: url(../assets/slider_07_car.png);	
}
.slide .car_ttl_price h2 {
	font-size:40px;
}
.slide .price_wrpr {
    font-size: 46px;
    line-height: 1;
    margin-top: -5px;
}
.slide .price_start {
    font-size: 25%;
	padding-top:10px;
}
/*======= SLIDE ========*/


.container .content_sec {
	height: calc(100vh - 50px - 5vh - 70px); 	/*50px -> header, 5vh -> tbar, 70px -> form*/
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.container .content_sec.sec_01 {
	background-image: url(../assets/bg_01.jpg);
}
.container .content_sec.sec_02 {
	background-image: url(../assets/bg_02.jpg);
}
.container .content_sec.sec_03 {
	background-image: url(../assets/bg_03.jpg);
}
.container .content_sec.sec_04 {
	background-image: url(../assets/bg_04.jpg);
}
.container .content_sec.sec_05 {
	background-image: url(../assets/bg_05.jpg);
}
.container .content_sec.sec_06 {
	background-image: url(../assets/bg_06.jpg);
}
.container .content_sec.sec_07 {
	background-image: url(../assets/bg_07.jpg);
}

.content_dtls_wrpr {
	height: 100%;
    padding: 5vh 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.car_ttl_price {
	display: flex;
	align-items:center;
    direction: ltr;
    color: #ffffff;
	gap:1vw;
    line-height: 1;
}
.car_ttl_price img {
	height:60px;
	max-height:100%;
	max-width:none;
	width:auto;
}
.car_ttl_price h2 {
    font-weight: 900;
    font-size: 50px;
    line-height: 1;
}
.car_ttl_price h2 * {
    font-weight: 900;
}
.car_ttl_price .sep {
	background: #ffffff;
    width: 1px;
    align-self: stretch;
}
.price_wrpr {
    display: flex;
    gap: 1vw;
    font-size: 30px;
}
.price {
    display: block;
    font-weight: 800;
}
.price .sh {
    font-weight: 700;
	font-size:80%;
}
.price_note {
    display: block;
    font-size: 60%;
	direction:rtl;
}
.price_start {
    direction: rtl;
    width: min-content;
	padding-top:5px;
    white-space: nowrap;
    font-size: 50%;
}

.sec_car {
	display:none;
}

/*======================//
//======= FORM =========//
//======================*/
.form_wrpr {
	height:70px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.form_header {
	display:none;    
    margin-bottom: 3vh;
    text-align: center;
}
._thanks .form_header {
  display: none;
}
.form_header h2 {
    font-weight: 800;
    color: #002E6E;
    font-size: 10vw;
}
.form_header h4 {
    font-weight: 700;
    color: #2971D4;
    font-size: 7vw;
}

#form {
	width:100%;
	padding: 0 1vw;
	background:#ffffff;
	display: flex;
}
._thanks #form {
  display: none;
}

#form .input-field {
	position: relative;
	width:100%;
	padding: 0 1vw;
}
#form .input-field input::placeholder {
	color: #0b233a;
}
#form .input-field input.on + label {
	display: initial;
}
#form .input-field label.txt_label {
	position: absolute;
    top: -7px;
    right: 5px;
    margin-right: 1vw;
    display: block;
    padding: 0 5px;
    line-height: 1;
    text-align: center;
    font-size: 14px;
    background: #ffffff;
}
#form .input-field label.error {
    position: absolute;
    bottom: 0;
    right: 1vw;
    margin-right: 5px;
    color: red;
    font-size: 0.65rem;
    font-weight: 400;
}
#form .input-field input {
	height: 40px;
	width: 100%;
	padding-right: 5px;
	padding-left:3px;
	color: #000000;
	border: 1px solid #BEBEBE;
	border-radius: 2px;
}

#form #submit {
	height: 40px;
	width:100%;
	background-color: #2971D4;
	color: #ffffff;
	font-weight: 400;
	font-size:20px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
}

#thanks {
  display: none;
  text-align: center;
}
#thanks * {
	font-size:24px;
	display:inline-block;
}
#thanks h2 {
	font-weight:900;
}
#thanks h4 {
	font-weight:600;
}
._thanks #thanks {
  display: block;
}
/*======= / FORM =========*/

	
.mob_bot_content {
	position: fixed;
    bottom: 7vh;
	width:100%;
}
#btns {
	display:flex;
	justify-content:center;
	gap:5vw;
	padding:10px 0;
}
#btns a {
	height:50px;
	padding:0 5px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	color:#ffffff;
	background: #2971D4;
	border-radius: 5px;
	text-decoration:none;
}
#btns a.click2call {
	background: #55CD6C;
}

/*========================//
//======= legal =========//
//========================*/
.legal {
	padding-top:1vh;
	line-height:1;
	font-size: 80%;
}
/*=== /legal ===*/



/*========================//
//======= footer =========//
//========================*/
footer {
	position:fixed;
	bottom:0;
	width:100%;
	height: calc(5vh + 70px); 	/*5vh -> tbar, 70px -> form*/
	background:#ffffff;
}
/* ======= / footer ========= */

.blockpage {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.71);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: .3s all
}

.blockpage.active {
	opacity: 1;
	visibility: visible
}

.blockpage.active i {
	color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
	top: 17vw;
	font-size: 7vw
}

#MCA_strip {
	display:none!important;
}
.tbar {
	box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 5vh;
    width: 100%;
    text-align: center;
    background-color: rgb(255, 255, 255);
    z-index: 999;
    cursor: pointer;
}
.tbar img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0px auto -4px;
}

.desktop_hide {
  display: none;
}
.mobile_hide {
  display: block;
  
  
}

@media(max-width: 1024px) {
	.container {
		margin-bottom: 10vh;
	}
	
	.container .content_sec {
		height:  calc(60dvh - 50px - 7vh);/* TTT: auto; */ 	/*50px -> header, 7vh -> tbar, 70px -> form*/
	}
	.content_dtls_wrpr {
		/* TTT: position:absolute; */
		padding:2.5vh 0;	/* TTT: 1vh 0*/
		/* TTT: 
		height:100%;
		left:0;
		right:0;
		*/
	}
	/*======================//
	//======= SLIDE ========//
	//======================*/
	.slide_car {
		margin-left:-1px;
	}
	.slide01 {
		background-image: url(../assets/slider_01_bg_mob.png);	
	}
	.slide01 .slide_car {
		background-image: url(../assets/slider_01_car_mob.png);	
	}
	.slide02 {
		background-image: url(../assets/slider_02_bg_mob.png);	
	}
	.slide02 .slide_car {
		background-image: url(../assets/slider_02_car_mob.png);	
	}
	.slide03 {
		background-image: url(../assets/slider_03_bg_mob.png);	
	}
	.slide03 .slide_car {
		background-image: url(../assets/slider_03_car_mob.png);	
	}
	.slide04 {
		background-image: url(../assets/slider_04_bg_mob.png);	
	}
	.slide04 .slide_car {
		background-image: url(../assets/slider_04_car_mob.png);	
	}
	.slide05 {
		background-image: url(../assets/slider_05_bg_mob.png);	
	}
	.slide05 .slide_car {
		background-image: url(../assets/slider_05_car_mob.png);	
	}
	.slide06 {
		background-image: url(../assets/slider_06_bg_mob.png);	
	}
	.slide06 .slide_car {
		background-image: url(../assets/slider_06_car_mob.png);	
	}
	.slide07 {
		background-image: url(../assets/slider_07_bg_mob.png);	
	}
	.slide07 .slide_car {
		background-image: url(../assets/slider_07_car_mob.png);	
	}
	
	.slide h2 {
		font-size:5vh;
		line-height:10vh;
	}
	.slide h2 .bigtext {
		font-size:20vh;
	}
	.car_ttl_price img {
		height:40px;
	}
	.slide .car_ttl_price h2 {    
		font-size: 5.5vw;
		line-height: 1;
	}
	.car_ttl_price h2 .compname {
		font-size:85%;
		white-space:nowrap;
	}
	.slide .price_wrpr {
		font-size: 6vw;
		margin-top: -0.5vw;
	}
	.slide .price_start {
		font-size: 35%;
		padding-top: 5px;
	}
	.slide .price_start {
		font-size: 35%;
		padding-top: 5px;
	}
	
	.slides .content_sec {
		height: calc(100dvh - 50px - 7vh); 	/*50px -> header, 7vh -> tbar*/
	}
	.slides .content_dtls_wrpr {
		padding-bottom:70px;
	/* TTT: 
		display:flex;
		padding:2.5vh 0;
	*/
	}
	/*====== SLIDE ========*/
	
	.car_ttl_price {
		gap:2vw;
	}
	.car_ttl_price h2 {
		font-size:7vw;
		width:min-content;
		text-align:left;
	}
	.price_wrpr {
		font-size:9vw;
		gap:2vw;
	}
	.price_note {
		font-size: 50%;
	}
	.price_start {
		font-size:35%
	}
	
	.sec_car {
		display:block;
	} 
	
	/*======================//
	//======= FORM =========//
	//======================*/
	.form_wrpr {
		display:block;
		height:auto;
		padding:50px 0;
	}
	.form_header {
		display:block;
	}
	#form {
		display:block;
	}
	#form .input-field {
		margin-bottom:5vh;
	}
	/*======= / FORM =========*/
	
	footer {
		height: 7vh; 	/*7vh -> tbar*/
	}
	
	.blockpage.active i {
		top: 50vw;
		font-size: 30vw
	}
	
	
	.tbar {
		height: 7vh;
	}
	
	.desktop_hide {
        display: block;
    }
	.mobile_hide {
        display: none!important;
    }
}
