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


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

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

    p{
    	font-size: 11pt;
    }

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

		
		.btn{
		}

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

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

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

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

		.btn-dark:hover{
			background-color:var(--main-color)!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;
		}


  	.swiper-pagination-bullet-active{
  		background-color:var(--main-color)!important;
  	}

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

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

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

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

    .hero .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, .hero-content h2, .hero-content h2 span{
    	color: white;
			font-family: "Sora", sans-serif;
		  font-weight: 700;
		  font-style: normal;
		  line-height: 60px;
    }

    .hero-content h1, .hero-content h2{
		  font-size: 50px;
    	color: white;
    }

    .hero-content h1 span, .hero-content h2 span{
    	color: var(--main-color);
    	display: block;
    	font-size: 60px;
    }

		.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, .section1 h1{
    	font-family: "Teko", sans-serif;
    	font-size: 40pt;
    	line-height: 35pt;
    	font-weight: 600;
    }



    .sectioncircle{
    	position:absolute; 
    	z-index: 10;
    }

    .section1img{
    	z-index: 9;
    }

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

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

		@media (max-width: 767.98px) {

			.sectioncirclecontainer{
				position: relative;
			}

			.sectioncircle{
	    	position: absolute;
	    	top:-50px;
	    	left:-25px;
	    	width: 100px;
	    }


	    .section1img{ 
	    	border-radius:20px 20px 0px 0px !important;
	    }

	    .stats-container{
	    	border-radius: 0px 0px 20px 20px !important;
	    	width: 100%;
	    } 
	  } 




		.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;
		}















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

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













		.car-animation-container{
			position: relative;
			top:-50px;
			cursor: pointer;
			transition: transform 1s ease-in-out;
		}

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

		.car-animation-container.moved {
			transform: translateX(-100vw); /* Or any distance you want */
		}

		.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;
		}


		.rotate{
			animation-name: infinite-rotation;
			animation-duration: 3s;
			animation-iteration-count: infinite;
			
		}


		.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{

		}
		

/*

right 	height 	empty
80 			60  		80

width
220

right = (width - height) / 2


*/

		:root {
		  --width: 260px;
		  --height: 60px;
		}

		.btn-contact-fixed{
			position: fixed;
			/*right: -90px; */
			right: calc((var(--height) - var(--width)) / 2);
			top:40vh;
			z-index: 1010;

			width: var(--width);
			height: var(--height);
			font-size: 16px;
			letter-spacing: 3px;

			/*padding: 15px 25px;*/
			line-height: var(--height);
			text-align: center;

			background-color: black;
			color:white;
			text-transform: uppercase;

			border-radius: 8px 8px 0px 0px;
			rotate: -90deg;
		}

		@keyframes infinite-rotation {
		  0%   {rotate: 0deg;}
		  50%   {rotate: -180deg;}
		  100%   {rotate: -360deg;}
		}


		.whatsapp-float {
			position: fixed;
			width: 60px;
			height: 60px;
			bottom: 20px;
			left: 20px;
			z-index: 9999;
			background-color: #25d366;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		  }
		  
		  .whatsapp-float img {
			width: 36px;
			height: 36px;
		  }

		  .whatsapp-float:hover {
			transform: scale(1.1);
			transition: all 0.2s ease-in-out;
		  }

		  .scroll-down-btn {
			position: fixed;
			width: 60px;
			height: 60px;
			bottom: 20px;
			right: 20px;
			z-index: 9999;
			background-color: #e9a31b;
			color: white;
			border-radius: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		  }
		  .scroll-down-btn:hover {
			background-color: #ca8a09;
		  }