*{
padding:0;
margin:0;
box-sizing: border-box;
}

html,body{
height:100%;
width:100%;
font-family: chillax;
}

#main{
height:100%;
width:100%;
padding:2vw;
color:black;
display: flex;
justify-content: space-between;
}

#left{
height:100%;
width:60%;
display: grid;    
grid-template-columns: 100%;
grid-template-rows: 12% 12% 64% 12%;
}

#logo{
width:100%;
height:80%;
}

#logo img{
width:20%;
height: 100%;
object-fit: cover;    
}
#pageinfo{
/* background-color: green; */
display: flex;
flex-direction: column;
justify-content:center ; 
gap:1vw;
}
#page-no p{
font-weight: 500;
}
#page-indicator{
display: flex;
align-items: center;
gap:1vw;
}
#page-indicator .indicator{
width:4vw;
height:0.7vw;
border-radius:4vw;
border:none;
background-color: lightgrey;
}

#page-indicator .indicator:nth-child(1){
background-color: #A3D95D;
border:none;
}

.choice-container .choices .selected{
background-color: #A3D95D;
}

.selectCities {
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
}
.selectCities label{
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
}

.selectCities select{
  width:80%;
  height: 10%;
  border: 1px solid black;
  margin-top: 1vw;
  border-radius: 8px;
  color: black;
  font-size: 1rem;
  text-align: center;
}

.formquestions{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
display: none;
font-size: 0.8rem;
/* background-color: blue; */
}
.resultp{
  height: 100%;
}
.resultp::-webkit-scrollbar{
  display: none;
}
.resultp h1{
  font-size: 2rem;
}
.resultp h2{
text-align: center;
margin-bottom:1.5vw;
font-size: 2.5vw;
font-weight: 500;
}
.resultp h4{
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 400;
  font-style:italic;
}
.resultp .userEmission{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  position:relative;

}
.resultp .userEmission .emissionBox{
  background-color:#A3D95D;
  padding:1rem 1rem;
  border-radius: 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  color: white;
  position: relative;
}

.userEmission .emissionBox .tooltip{
  right: calc(50% - 1rem);
  top: 4px;
  font-style: italic;
  font-size: 10px;
  font-weight: bolder;
  padding: 0 0.5rem;
  padding-right: 0.6rem;
  background-color: white;
  color: #A3D95D;
  /* font-weight: bold; */
  border-radius: 25%;
}
.userEmission .emissionBox:nth-child(1) .tooltip:hover::after{
  content:"As per ICAR-Indian Agricultural Research Institute For a balanced diet (vegetarian), an adult Indian man consumed 1.16 kg of food and emitted 0.72 kg CO2  per day. A non-vegetarian meal with mutton emitted 1.8 times of a vegetarian meal and 1.5 times of a non-vegetarian meal with chicken.  For a woman, the emission was 20% lower";
  position: absolute;
  left: 4rem;
  color: white;
  background-color:rgba(35, 70, 51,0.8);
  backdrop-filter: blur(5px);
  width:400px ;
  padding: 1rem;
  border-radius: 1rem;
  z-index: 100;
  font-size: 1rem;
  border: 1px solid white;
}
.userEmission .emissionBox:nth-child(2) .tooltip:hover::after{
  content: "As per TERI's (The Energy and Resource Institute) findings Travel via different modes emission is as follows: Delhi Metro - 20g per km   Bus- 29g per km   Two wheeler- 41g per km  As per Reserch by BITS pilani the emission by car with average life span of 15 years would be :  Electric Car- 95g per km  LPG car- 102g per km  Petrol car- 157g per km  Diesal car- 182g per km";
  position: absolute;
  left: 4rem;
  color: white;
  background-color:rgba(35, 70, 51,0.8);
  backdrop-filter: blur(5px);
  width:400px ;
  padding: 1rem;
  border-radius: 1rem;
  z-index: 100;
  font-size: 1rem;
  border: 1px solid white;
}
.userEmission .emissionBox:nth-child(3) .tooltip:hover::after{
  content: "As per research by IIT (BHU) Varanasi,The CO2 emissions associated with electricity consumption in India can vary based on the energy mix and the carbon intensity of electricity generation in different regions. The average carbon intensity for electricity generation in India was around 0.82 kilograms of CO2 per kilowatt-hour (kgCO2/kWh)";
  position: absolute;
  left: 4rem;
  color: white;
  background-color:rgba(35, 70, 51,0.8);
  backdrop-filter: blur(5px);
  width:400px ;
  padding: 1rem;
  border-radius: 1rem;
  z-index: 100;
  font-size: 1rem;
  border: 1px solid white;
}

.userEmission .emissionBox h5{
  font-size: 1.2rem;
  font-weight: 400;
}
.userEmission .emissionBox p{
  font-size: 1.6rem;
  font-weight: 500
  ;
}
.resultp .scrollableSec{
  height: 210px;
  overflow-y: auto;
  margin-bottom: 1rem ;
}
.resultp .scrollableSec::-webkit-scrollbar{
  display: none;
}
.resultp .bentoCont{
  background-color: #A3D95D;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  border-radius: 2rem;
  width: 100%;
  gap: 2rem;
}

.resultp .bentoCont .bentoBox{
  background-color:white;
  padding: 1rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  border-radius: 1rem;
  width: 50%;

}
.resultp .bentoCont .bentoBox div{
  background-color:#A3D95D;
  padding: 1rem;
  font-size: 1.2rem;
  color: white;
  font-weight: 500;
  text-align: center;
  border-radius: 0.5rem;
}
.bentoBox p{
  width: 50%;
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
}
/* .resultp p{
font-size: 1.5vw;
}
.resultp div{
  height: 100%;
  overflow:scroll;
  scrollbar-width: none;
}
.resultp div::-webkit-scrollbar{
  display: none;
}
.resultp div div{
display: flex;
height: fit-content;
align-items: center;
gap:0.5vw;
background-color: #739f39;
padding: 0.5vw;
border-radius: 2vw;
overflow: hidden;
}

.resultp .bentoBox{
  background-color: #fff;
  width:fit-content;
  color:#000;
  font-size:1.6vw;
  padding: 1vw 2vw;;
  border-radius: 2vw;
  display: flex;
}
.bentoBox div{
  color: #fff;
  padding:10%;
  border-radius:1vw;
  font-weight: 600;
  text-align: center;
} */
.resultp .mb-tooltip{
  display: none;
}
.faqs{
  display: flex;
  flex-direction: column;
  height:fit-content;
  background-color: white;
  margin-top: 1vw;
}
#carbon-Faq-image{
    width: 100%;
    display: flex;
    justify-content: center;
    display: none;
  }
.FAQs h1{
  margin-bottom: 0.5vw;
  color: #A3D95D;
}
.FAQs h4{
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
}
.FAQs{
  height: 400px;
  overflow: scroll;
}
.FAQs::-webkit-scrollbar{
  display: none;
}
.FAQs details{
  width: 100%;
  text-align: left;
  border: 2px solid hsl(86, 62%, 91%);
  border-radius: 2vw;
  margin-bottom: 1vw;
  padding: 1rem;

} 

.FAQs summary{
  font-size: 1.4vw;
  cursor: pointer;
  font-weight: 500;
  color: black;
}
.FAQs p{
  font-size: 1.4vw;
  margin-top: 1vw;
  line-height: 150%;
  /* background-color: #739f39; */
  color: #234633;
  min-height: 100px;
  max-height: 400px;
  overflow: scroll;
  padding: 1.2vw;
}
.FAQs p::-webkit-scrollbar{
  display: none;
}
.resultp a{
  color:#A3D95D;
  padding:1vw;
}

.active{
display: block;
}
.questions{
width:100%;
height: 25%;
font-size: 1rem;
}

.questions h1{
font-weight: 600;
transform: translateY(25%);
line-height: 120%;
}
.choice-container{
/* background-color: cyan; */
height: 75%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.choices{
background-color: #f8f8f8;
height: 85%;
width: 100%;
display: flex;
justify-content: center;
gap:2vw;
padding:2vw;
margin-bottom:1vw;
border-radius: 2vw;
position: relative;

}

.choices .options{
background-color: white;
border-radius: 1vw;
width:20%;
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
gap:1vw;
align-items: center;
cursor: pointer;
}

.large-choices{
width:100%;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: center;
}
.large-choices .options{
  width: 28%;
  margin-right:1vw;
  height:auto;
  text-align: center;
  margin-bottom: 15px;
}

.choices .options:hover{
background-color: #A3D95D;

}

.options i{
font-size: 2rem;
color:#234633
}
.options img{
height:3vw;
}

.option-dots{
height: 10%;
align-self: center;
display: flex;
gap: 1vw;
}
.option-dots .dots{
height: 0.8vw;
width:0.8vw;
background-color: #234633;
border-radius: 1vw;
}
#buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#buttons #skip {
  text-decoration: underline;
  color:#A3D95D;
  background-color: white;
}

#buttons .set1{
  display: flex;
}

#buttons button{
padding:16px 32px;
border-radius: 16px;
border: none;
transform: translateY(18%);
margin-right:1vw;
font-family: chillax;
font-size: 1rem;
font-weight:500;
}

#buttons a{
  text-decoration: none;
  border: 1px solid gray;
  background-color: #A3D95D;
  color: #234633;
  transform: translateY(18%);
  padding:17px 32px;
  border-radius: 16px;
  border: none;
  display: none;
}

#buttons a:hover{
  background-color:#234633;
color: white;
}
#buttons button:nth-child(1){
border: 1px solid gray;
background-color: white;
color: #234633;
}
#buttons button:nth-child(1):hover{
border-color: #A3D95D;
background-color: #f8f8f8;
}

#buttons button:nth-child(2){
background-color: #A3D95D;
color: #234633;
}
#buttons button:nth-child(2):hover{
background-color:#234633;
color: white;
}
.popup-card{
  position: fixed;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  /* color: white; */
  left: 0;
  bottom: 0;
  padding: 2rem;
  height: 100%;
  width: 100%;
}
.popup-content{
  background-color: #fefefe;
  margin:0 10%;
  width: 80%;
  padding: 2rem;
  border: 5px solid #A3D95D;
  border-radius: 2rem;
  line-height: 160%;
}
.popup-content h2{
  margin-bottom:0.8rem;
}

.popup-content span{
  font-size: 1.2rem;
  font-weight: 500;
}
.close{
  float: right;
  font-size: 1rem;
  cursor: pointer;
}
#right{
  height:100%;
  width:38%;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  #right img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 2vw;
  }
  #right #tertiaryImage{
    height: 390px;
  }


/* --------------------------------responsive screens----------------- */

@media only screen and (max-width: 767px) {
#main{
  padding:6vw;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#left{
  width:100%;
  display: grid;    
  grid-template-columns: 100%;
  grid-template-rows: 10% 10% 66% 12%;
}

#logo{
  width:100%;
  height:100%;
  margin-left:20%
}

#logo img{
  width:60%;
  height: 60%;
  object-fit:cover;
}
#pageinfo{
  display: flex;
  flex-direction: column;
  justify-content:center ; 
}

#page-no {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
#page-indicator{
  justify-content: space-between;
}
#page-indicator .indicator{
  width:20vw;
  height:2vw;
}

.formquestions{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  display: none;
}
.questions{
    height:25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.questions h1{
    font-size: 1.2rem;
    text-align: center;
  }

#buttons #skip{
    font-size: 0.8rem;
  }
.resultp{
  height: 100%;
}
.resultp::-webkit-scrollbar{
  display: none;
}
.resultp h2{
font-size: 1.5rem;
font-weight: 500;
}
.resultp .userEmission {
    gap: 0.3rem;
}
.resultp .userEmission .emissionBox{
  padding:0.5rem 0.2rem;
  gap: 0.2rem;
}
.userEmission .emissionBox h5{
  font-size: 0.65rem;
  font-weight: 500;
}
.userEmission .emissionBox p{
  font-size: 1.2rem;
  font-weight: 600
  ;
}
.userEmission .emissionBox .tooltip{
  display: block;
}
  .userEmission .emissionBox:nth-child(1) .tooltip:hover::after{
  left: 50%;
  transform:translateX(-8%);
  top:1rem;
  width:300px ;
}
.userEmission .emissionBox:nth-child(2) .tooltip:hover::after{
  left: 50%;
  transform:translateX(-30%);
  top:1rem;
  width:300px ;

}
.userEmission .emissionBox:nth-child(3) .tooltip:hover::after{
  left: 50%;
  transform:translateX(-60%);
  top:1rem;
  width:300px ;

}
.resultp h4{
  margin-top: 0.1rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.resultp .mb-tooltip{
  font-size: 1rem;
  position: absolute;
  display: inline-block;
  left: 25px;
  padding: 0.2rem 1rem;
  z-index: 1000;
  border-radius: 1rem;
  background-color: #A3D95D;
  border: 2px solid white;
  color: white;
}
.resultp .mb-tooltip:hover{
  padding: 1rem;
  background-color:white;
  border: 2px solid #A3D95D;
  left: 10px;
  right: 10px;
  color: black;
  text-align: left;
}

.resultp .mb-tooltip>span:nth-child(1){
  display: block;
}
.resultp .mb-tooltip:hover>span:nth-child(1){
  display: none;
}
.resultp .mb-tooltip>span:nth-child(2){
  display: none;
}
.resultp .mb-tooltip:hover>span:nth-child(2){
  display: block;
  font-size: 0.8rem;
  line-height: 130%;
}

.resultp .scrollableSec{
  height: 350px;
  overflow-y: auto;
  margin-bottom: 1rem ;
}
.resultp .bentoCont{
  flex-direction: column;
  gap:1rem;
}

.resultp .bentoCont .bentoBox{
  width: 100%;

}

.faqs{
    display: flex;
    flex-direction: column;
    height:fit-content;
    background-color: white;
    margin-top: 2vh;
  }
.FAQs{
  height: 100%;
  overflow: scroll;
}
.FAQs h1{
  margin-bottom: 1rem;
  color:black;
  font-size: 1.2rem;
  text-decoration: underline;
}
.FAQs h4{
  color: #000;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.FAQs details{
    width: 100%;
    text-align: left;
    border: 2px solid hsl(86, 62%, 81%);
    /* border-bottom: 2px solid hsl(86, 62%, 81%); */
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 0;
    padding-left: 1rem;
  } 
  #carbon-Faq-image{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  #faqsImage{
    height: 250px;
    width: auto;
    margin-bottom: 1rem;
    border-radius: 1rem;
  }
.FAQs summary{
    font-size: 1rem;
    margin-bottom: 1.5vh;
    color: black;

  }
.FAQs details p{
    font-size: 0.9rem;
    margin-bottom:2vh;
    min-height:100px;
    max-height: 320px;
    overflow: scroll;
    border-radius: 5vw;
    border:none;
    padding: 1rem;
    line-height: 120%;
    /* background-color: hsl(86, 62%, 91%); */
  }
.active{
  display: block;
}

.choices{
  flex-direction: column;
  justify-content: space-evenly;
  padding:8vw;
  overflow-y:auto;
  background-color: hsl(0, 4%, 95%);

}

.choices .options{
  width:100%;
  height:24%;
  flex-direction: row;
  gap:8vw;
  font-size:0.8rem;
  text-align:left;
  padding: 2rem;

}
.large-choices{
  width:100%;
  height:100%;
  display:inline-block;
  /* background-color: red; */
  }
  .large-choices .options{
    display: flex;
    height: 20%;
    margin-bottom: 8vw;;
    justify-content: flex-start;
  }
  .selectCities label{
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 10vw;
  }
  .selectCities select{
    width:80%;
    height: 10%;
    border: 1px solid black;
    border-radius: 16px;
    color: black;
    font-size: 1rem;
    text-align: center;
  }
  
.choices .options:hover{
  background-color: #A3D95D;
  
}

.options i{
  font-size: 2rem;
  color:#234633
}
.options img{
  height:8vw;
  width: auto;
  display:none;
}

.option-dots .dots{
  height: 2vw;
  width:2vw;
  border-radius: 2vw;
}
.popup-card{
  padding: 1rem;
}
.popup-content{
  margin:0 5%;
  width: 90%;
  padding: 1.5rem;
  line-height: 2
}

.popup-content p{
  font-size: 0.6rem
}

#right{
  display: none;
}

}

@media only screen and (max-width: 375px) {
  
  .questions h1{
    font-size: 1.1rem;
  }
  .selectCities label{
    font-size: 1.2rem;
    margin-bottom: 2vw;
    font-weight: 500;
  }
  .resultp .scrollableSec{
    height: 350px;
    overflow-y: auto;
    margin-bottom: 1rem ;
  }
  .resultp .bentoCont{
    flex-direction: column;
    gap:0.5rem;
  }
  
  .resultp .bentoCont .bentoBox{
    width: 100%;
  }
  .resultp .bentoBox p{
   font-size: 0.8rem;
  }

  .resultp .bentoCont .bentoBox div{
  font-size: 0.8rem;
  }
}

@media only screen and (min-width:768px) and (max-width:1024px){

  
.formquestions{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  display: none;
}
.questions h1{
  font-size: 1.5rem;
}
.resultp{
  height: 100%;
}
.resultp::-webkit-scrollbar{
  display: none;
}
.resultp h2{
font-size: 1.5rem;
font-weight: 500;
}

.resultp .userEmission .emissionBox{
  padding:0.5rem 0.2rem;
  gap: 0.2rem;
}
.userEmission .emissionBox h5{
  font-size: 0.8rem;
  font-weight: 500;
}
.userEmission .emissionBox p{
  font-size: 1.2rem;
  font-weight: 600
  ;
}
.resultp .scrollableSec{
  height: 600px;
  overflow-y: auto;
  margin-bottom: 1rem ;
}
  .resultp h4{
  font-size:1rem;
  margin-top:2rem;

}
.resultp .bentoCont{
  flex-direction: column;
}

.resultp .bentoCont .bentoBox{
  width: 100%;

}
  .resultp div .FAQs{
    display: flex;
    flex-direction: column;
    height:fit-content;
    background-color: white;
    margin-top: 2vh;
  }
  
  .FAQs details{
    width: 100%;
    text-align: left;
  
  } 
  .FAQs h1{
    margin-bottom:1vw;
  }
  .FAQs summary{
    font-size: 1rem;
    margin-bottom: 1.5vh;
  }
  .FAQs h4{
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
  }
  .FAQs details p{
    font-size: 1rem;
    margin-bottom:2vh;
  }

.active{
  display: block;
}

.choices{
  flex-direction: column;
  justify-content: space-evenly;
  padding:8vw;
  overflow-y:auto;
}

.choices .options{
  width:100%;
  height:24%;
  flex-direction: row;
  gap:8vw;
}
.large-choices{
  width:100%;
  height:100%;
  display:inline-block;
  /* background-color: red; */
  }
  .large-choices .options{
    display: flex;
    height: 20%;
    margin-bottom: 8vw;;
    justify-content: space-evenly;
  }
  .selectCities label{
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 10vw;
  }
  .selectCities select{
    width:80%;
    height: 10%;
    border: 1px solid black;
    border-radius: 16px;
    color: black;
    font-size: 1rem;
    text-align: center;
  }
  
.choices .options:hover{
  background-color: #A3D95D;
  
}

.options i{
  font-size: 2rem;
  color:#234633
}
.options img{
  height:8vw;
  width: auto;
}

.option-dots .dots{
  height: 2vw;
  width:2vw;
  border-radius: 2vw;
}

}