*{
			font-family: "Sora", sans-serif;
  		font-optical-sizing: auto;
		}


    :root {
      --main-color: #e9a31b;
      --dark-color: #343434;
      
    }

    a, a:hover{
    	text-decoration: none;
    }

    .text-primary{
    	color:var(--main-color)!important;
    }
		
		.btn{
			text-transform: uppercase;
		}

		.btn-main{
			border:0;
			border-radius: 30px;
			padding:12px 30px;

		}
		
		.btn-primary{
			background-color:var(--main-color)!important;
			
		}

		.btn-dark{
			background-color:black!important;
			
		}



		.vibur{
			font-family: "Vibur", cursive;
			font-weight: 400;
		}

		.sora{
			font-family: "Sora", sans-serif;
		}

		.teko{
			font-family: "Teko", sans-serif;
			font-size: 40pt;
    	font-weight: 600;
    	line-height: 35pt;
		}


		.main-heading{
			font-family: "Teko", sans-serif;
			font-weight: 400;
			font-size: 25pt;
		}




		/* H E R O  S E C T I O N */

    .swiper-wrapper .swiper-slide{
    	height: 80vh;
    	width: 100%;
    	background-position: center;
    	background-size: cover ;
    }

    .swiper-wrapper .slide1{
    	background-image: url('../../assets/img/slide1.png');
    }

    .swiper-wrapper .slide2{
    	background-image: url('../../assets/img/slide2.jpg');
    }

    .swiper-wrapper .slide3{
    	background-image: url('../../assets/img/slide3.jpg');
    }


    .hero {
    	position: relative;
    }


    .hero-content{
    	background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    	position: absolute;
    	top:0px;
    	left: 0px;
    	right: 0px;
    	bottom: 0px;
    	z-index: 1000;
    }

    .hero-content h1,.hero-content h1 span{
    	color: white;
			font-family: "Vibur", cursive;
		  font-weight: 400;
		  font-style: normal;
		  font-size: 100px;
		  line-height: 90px;
    }

    .hero-content h1{
    	color: white;
    }

    .hero-content h1 span{
    	color: var(--main-color);
    	display: block;
    }

		.hero-h1-container{
			margin-left: 3rem;
		}

    .form-wrapper{
    	background-color: rgba(255, 255, 255, 0.4);
    	padding:40px 30px;
    	border-radius: 10px;
    }

    .form-wrapper .form-control{
    	margin-bottom: 10px;
    	padding:16px;
    }


    .section1 h2{
    	font-family: "Teko", sans-serif;
    	font-size: 40pt;
    	line-height: 35pt;
    	font-weight: 600;
    }





    .stats-container{
    	margin-top:-80px;
    }



		.points .icon{
			width: 70px;
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0px auto;
		}

		.points .row .col-lg-4:nth-child(even) .icon{
			background-color: black;
		}

		.points .row .col-lg-4:nth-child(odd) .icon{
			background-color: var(--main-color);
		}

		.points .icon img{
			width: 40px;
			aspect-ratio: 1;
		}


    .stats h3{
    	font-weight: bolder;
    	font-size: 25pt;
    	margin-top: 10px;
    }




		.catalogue h2 {
    	font-family: "Teko", sans-serif;
    	font-size: 40pt;
    	line-height: 35pt;
    	font-weight: 600;
    }

		.catalogue h2 span{
			font-family: "Vibur", cursive;
		  font-weight: 400;
		  color: var(--main-color);
		  display: block;
		}

		.catalogue .img-container img{
			width:100%;
			position: absolute;
			bottom: 10px;

		}
		.catalogue .img-container{
			height: 200px;
			position: relative;

		}

		.catalogue .btn-filters{
			padding: 12px 20px;
		}

		.catalogue .hr-orange-container{
			margin: 0px;
			gap:2px;
		}

		.catalogue .hr-orange {
			width: calc(25% - 2px);
			background-color: orange;
			height: 6px;
		}

		.catalogue .hro1{
			opacity: 1;
		}

		.catalogue .hro2{
			opacity: 0.75;
		}

		.catalogue .hro3{
			opacity: 0.5;
		}

		.catalogue .hro4{
			opacity: 0.25;
		}

		.catalogue .card{
			background-color: #eee;
			font-size: 9pt;
			border:2px solid transparent;
			transition:border 300ms;
		}
		.catalogue .card:hover{
			border:2px solid var(--main-color);
		}

		.catalogue h3{
			font-size: 14pt;
			font-weight: bolder;
		}

		.catalogue .btn-main{
			font-size: 10pt;
			margin: 10px;
			padding: 10px 15px;
		}



		.section-image{
			background-image: url('../../assets/img/home-section.png');
			background-size: cover;
			background-position: center;
			height: 50vh;
		}




		.points h2 span{
			font-family: "Vibur", cursive;
		  font-weight: 400;
		  color: var(--main-color);
		  display: block;
		}


		.points h3{
			font-weight: 700;
			font-size: 18pt;
			margin-top:15px;
		}






		.services .card{
			position: relative;
			overflow: hidden;
		}

		.services .card .backdrop{
			position: absolute;
			bottom: 0px;
			height: 100px;
			background: linear-gradient(0deg, rgba(0,0,0,0.9) 0% ,  rgba(0,0,0,0.0) 100%);
			width: 100%;
			transition: height 600ms;
		}

		.services .card:hover .backdrop{
			height: 100%;
			
		}

		.services .card .content{
			position: absolute;
			color: white;
			bottom: -160px;
			padding:40px;
			transition: bottom 600ms;
		}

		.services .card:hover .content{
			bottom: 0px;
		}

		.services .content h3{
			font-family: "Sora", sans-serif;
			font-size: 18pt;
			font-weight: 700;

		}

		.services .content p{
			opacity: 0;
			transition: opacity 1s;
		}

		.services .content a{
			font-size: 10pt;
			opacity: 0;
			transition: opacity 1.4s;
		}

		.services .card:hover a,.services .card:hover p{
			opacity: 1;
		}

		.services .card:hover .content{

		}











		.more-info{
			background-image: url('../../assets/img/more-info.png');
		}

		.more-info h3{
			text-transform: uppercase;
			font-size: 16pt;
			font-weight: 700;
		}









		.faq h2{
			font-size: 32pt;
		}

		.faq .accordion-item{
			margin-bottom: 30px;
			border: 1px solid #aaa;
		}

		.faq .accordion-button{
			padding: 20px;
			font-weight: 700;
		}

		.faq .accordion-button:not(.collapsed){
			background-color: #ffecc7;
		}







		.car-animation-container{
			position: relative;
			top:-50px;
		}

		.car-animation{
			position: absolute;
			width: 200px;
			top:0px;
			right: 0px;
			z-index: 1000;
		}

		.car-light{
			position: absolute;
			width: 100px;
			top:-8px;
			right: 122px;
			z-index: 1001;
			opacity: 0.1;
			transition: opacity 5s;
		}

		.car-animation-container:hover .car-light{
			opacity: 1;
		}