header {
    
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  transform: translateY(-100%);
  transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  
}

body {
	
	font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  background: linear-gradient(to top, #ffefba, #ffffff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#headingcolumn
{
text-align: center;	
}

#rightcolumn{
margin-top:6%;	
	
}

#textrightside{
	
margin-top: 6%;	
	
	
}


.logoarea{
	filter: grayscale(60%);
	
}




.rightsidetopimages{
	
	
	
}

#logoimage3{
	
max-width: 40%;
	
}


.swiper-wrapper{
	
	
}

.plus-jakarta-sans-fontlander {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

  

.logo {
  display: flex;
  align-items: center;
}
.logo {
  font-size: 50px;
  color: var(--text-color);
  font-weight: 900;
}
.logo img {
  margin-right: 5px;
}
.logo span {
  background: var(--primary-color);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}


#quizcolumn{
	
	padding-right: 100px;
}


img {
  display: block;
  max-width: 100%;
  height: auto;
}



/*QUIZ CONTROL*/
.totalQuiz {
  font-size: 30px;
  font-weight: 800;
  width: 5px;
  height: auto;
  text-align: center;
  padding-top: 20px;
}

/*QUIZ CONTROL*/
.totalQuiz span {
  font-size: 22px;
  font-weight: 400;
}
.bar {
  background-color: white;
  width: 100%;
  height: 9px;
  border-radius: 20px;
  margin-top: 10px;
}
.bar .progress {
  background-color: var(--primary-color);
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*QUIZ CONTROL*/
.quizDetail {
  font-size: 30px;
  font-weight: 400;
}

/*QUIZ CONTROL*/
.quizDetail span {
  color: var(--primary-color);
  font-weight: 800;
  text-transform: capitalize;
  margin-right: 3px;
}


/*QUIZ CONTROL*/
.quizDetail2 {
  font-size: 24px;
  font-weight: 400;
}

/*QUIZ CONTROL*/
.quizDetail2 span {
  color: #f78a72;
  font-weight: 800;
  text-transform: capitalize;
  margin-right: 3px;
}





/*QUIZ CONTROL*/
.container {
	
	

  
}
.timer {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  border: solid 10px rgb(26, 176, 204);
  margin-left: auto;
  display: grid;
  place-content: center;
  font-size: 50px;
  font-weight: 900;
  color: var(--text-color);
}



/*QUIZ CONTROL*/
.swiper-3d .swiper-slide-shadow {
  background-color: rgba(0, 0, 0, 0);
}
fieldset {
 
}



.mainHeading {
  
  height: auto;
  margin-bottom: 5px;
  gap: 10px;
  text-align: center;
  font-size: 30px;
  color: var(--text-color);
  font-weight: 700;
  line-height: 1.4;
}
.mainHeading span {
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  min-width: 74px;
  height: 74px;
  font-size: 28px;
  color: var(--text-color);
  display: grid;
  place-content: center;
  text-align: center;
}


.buttoncontainer{

  display: flex;
  
  
  
}


/*QUIZ CONTROL*/
.radioButton {
  height: 130px;
  width: 60%;
  display: inline-flex;
  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
  
  
  
}

/*QUIZ CONTROL*/
.radioButton input {
  -webkit-appearance:  none;
  width:50%;
  height: 50%;
  border-radius: 5%;
   background-color: white;
  cursor: pointer;
  overflow: hidden;
  border:2px solid rgb(0, 0, 0);
  position: ;
  
  
}

.radioButton input:hover {
  background-color:rgb(199, 248, 202);
  transition: 0.7s;
}


/*QUIZ CONTROL*/
.radioButton label {
  font-size: 26px;
  color: var(--text-color);
  font-weight: 500;
  position: absolute;
  
  pointer-events: none;
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
}


/*QUIZ CONTROL*/
.radioButton input:before {
  content: "";
  width: %;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--primary-color);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/*QUIZ CONTROL*/
.radioButton input:checked:before {
  height: %;
}


/*QUIZ CONTROL*/
.radioButton input:checked ~ label {
  color: rgb(51, 22, 22);
}



.box2col {
	background: color url("https://www.caromotive.com/assets/images/frontcar.png") others;
background-image: url("https://www.caromotive.com/assets/images/frontcar.png");

}






/*QUIZ CONTROL*/

.radioField input:hover {
  background-color:rgb(199, 248, 202);
  transition: 0.7s;
}



.radioField {
  height: 80px;
  width: 100%;
  position: relative;
  margin-bottom: 8px;
  padding-left: 40px;
	
  display: grid;
  align-content: center;
}

/*QUIZ CONTROL*/
.radioField input {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border:2px solid rgb(0, 0, 0);
  overflow: hidden;
   background-color: white;
  position: absolute;
  top: 0;
  left: 0;
}


/*QUIZ CONTROL*/
.radioField label {
  font-size: 26px;
  color: rgb(51, 22, 22);
  font-weight: 500;
  position: relative;
  pointer-events: none;
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/*QUIZ CONTROL*/
.radioField input:before {
  content: "";
  width: 100%;
 
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
}



/*QUIZ CONTROL*/
.radioField input:checked:before {
  height: 100%;
 
}


/*QUIZ CONTROL*/
.radioField input:checked ~ label {
 
}
footer {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  font-size: 20px;
  font-weight: 800;
   color: rgb(51, 22, 22);
  
  margin-top: auto;
  }




/*QUIZ CONTROL*/
.txtField {
  height: 80px;
  width: 100%;
  position: relative;
  margin-bottom: 8px;
  padding-left: px;

  display: grid;
  align-content: center;
}

/*QUIZ CONTROL*/
.txtField input {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
  overflow: hidden;
  align-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.ButtonField {
 width:100%;
 height: ;
  border-radius: 10px;
  background-color: white;
  cursor: pointer;
  overflow: hidden;
  align-content: center;
  position: relative;
  top: 0;
  left: 0;
}


/*QUIZ CONTROL*/
.txtField label {
  font-size: 26px;
  color: var(--text-color);
  font-weight: 500;
  position: absolute;
  pointer-events: none;
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/*QUIZ CONTROL*/
.txtField input:before {
  content: "";
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--primary-color);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/*QUIZ CONTROL*/
.txtField input:checked:before {
  height: 100%;
}


/*QUIZ CONTROL*/
.txtField input:checked ~ label {
  color: rgb(255, 255, 255);
}




.box2 {
  
  

 

}

.box1 {



}

/*QUIZ CONTROL*/
.swiper {

  overflow: hidden;
  max-width: 35vw;
 
  
    
  }
  
#colspacing{
	
	margin-bottom: 15px;
    margin-top: 45px;
	
}

#colspacinggrey{
	
	
    margin-top: 25px;
	margin-bottom: 15px;
}


.articlebody{
	margin-top: 45px;
	margin-bottom: 20px;

}


/*slide call to action*/


.slide-out {
  background-color: #000;
  color:#fff;
  position: fixed;
  width: 300px;
  top: 90%;
  transform: translateY(-90%);
  right: -300px;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.slide-out-tab {
  background-color: #E84E1C;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  height: 100%;
  left: -40px;
  position: absolute;
  width: 40px;
}

.slide-out-tab div {
  text-align: center;
  position: relative;
  right: 75px;
  top: 90px;
  color: #fff;
  padding: 1px 5px;
  width: 180px;
  transform: rotate(270deg);
  writing-mode: lr-tb;
}

.slide-out-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* .slide-out.is-active {
  right: -300px;
} */



.slide-up-container {
    
    overflow: hidden;
   
}
.slide-up-item {
    
   
}
#el_one {
    
}
#fadeText2 {
    display: none;
}