.question-page{display:none;opacity:0;transform:translateX(50px);transition:all 0.5s ease}
.question-page .d_flex{display:flex;flex-direction: column;width: 100%;}

#form1 .d_flex select {background: url(/images/46/arrow2.png) no-repeat scroll 100% center;background-repeat: no-repeat;background-position: 96% 50%;min-height: 50px;border: 1px solid #ececec;border-radius: 555px;}
#form1 .d_flex select {padding: 10px 17px;width: 100%;font-weight: 300;font-size: 1em;background: #ffffff;}
#form1 .d_flex input, #form1 select, #form1 textarea {padding: 10px 15px;width: calc(100% - 0px);border: 1px #e4e4e4 solid;display: block;border-radius: 555px;font-size: 1em;}
#form1 .gogotitle{font-size: 1.25em;font-weight: 400;margin-bottom: 10px;}
.question-page.active{display:block;opacity:1;transform:translateX(0)}
.question-page.active.threegrdbox{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;justify-items:center;margin-top:40px}
.progress-bar{height:10px;background-color:#eee;border-radius:5px;overflow:hidden;margin-bottom:20px}
.progress-fill{height:100%;width:0;background-color: #7f340d;transition:width 0.5s ease;border-radius:5px}
.nav-buttons{display:flex;margin: 50px 0 0px;gap:20px;justify-content:center}
.firstboox{padding: 100px;background: #7f340d;border-radius: 15px;}
#form1 .question-page.active .gogotitle{color: #ffffff;}
button#nextBtn,button#prevBtn{background-color: #7f340d;color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:8px}
button#nextBtn:hover, button#prevBtn:hover{background: #6a3906;}
.dropdown{position:relative;width:160px;user-select:none}
.dropdown-toggle{background:#ffffff;border:2px solid #0078d7;border-radius:8px;padding:10px 16px;font-size:16px;color:#0078d7;cursor:pointer;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 8px rgb(0 120 215 / 0.1);transition:border-color 0.3s ease}
.dropdown-toggle:hover{border-color:#005a9e}
.dropdown-toggle:after{content:"";border:solid #0078d7;border-width:0 2px 2px 0;display:inline-block;padding:4px;margin-left:8px;transform:rotate(45deg);transition:transform 0.3s ease}
.dropdown.open .dropdown-toggle:after{transform:rotate(-135deg)}
.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;background:white;border:2px solid #0078d7;border-radius:8px;box-shadow:0 6px 12px rgb(0 120 215 / 0.2);max-height:140px;overflow-y:auto;z-index:10;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity 0.25s ease,transform 0.25s ease}
.dropdown.open .dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown-item{padding:10px 16px;cursor:pointer;color:#0078d7;font-size:16px;border-radius:6px;transition:background-color 0.2s ease}
.dropdown-item:hover,.dropdown-item.active{background-color:#0078d7;color:white}
.dropdown-item:focus{outline:none;background-color:#005a9e;color:white}
.qatitlemade{font-size: 3em;font-weight:500;margin-bottom: 25px;color: #141414;}

.question-page.active.grid_box{
    display: grid;
    grid-template-columns: 40% 57%;
    position: relative;
    padding: 0 0;
    gap: 3%;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

.question-page ul{list-style:none;padding:0;max-width:100%}
.question-page li{margin-bottom:10px;width:100%}
.question-page input[type="radio"]{position:absolute;opacity:0;width:0;height:0;margin:0}
.question-page label{display:block;position:relative;padding:12px 20px 12px 45px;font-size: 1.75em;user-select:none;background:#f9f9f9;border-radius:8px;border:1.5px solid transparent;transition:background-color 0.3s ease,border-color 0.3s ease;font-weight: 500;color: #2b2b2b;}
.question-page label:hover{background-color:rgb(253 227 178 / 79%)}
.question-page label::before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:2.5px solid #777;border-radius:50%;background:white;box-sizing:border-box;transition:border-color 0.3s ease;opacity: 0;}
.question-page input[type="radio"]:checked + label{border-color: #934f22;background-color: #ffedcb;}
.question-page input[type="radio"]:checked + label::before{border-color:#007bff;background-color:#007bff}
.question-page input[type="radio"]:checked + label::after{content:"";position:absolute;left:22px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:white;border-radius:50%;opacity: 0;}

@media screen and (max-width: 1470px){
  .nav-buttons{margin: 20px 0 10px;}
  .qatitlemade{font-size: 1.3em;}
  .question-page label{font-size: 1em;}
}

@media screen and (max-width: 980px){
  .question-page.active.threegrdbox{display: flex;flex-direction: column;gap: 20px;margin-top: 20px;padding: 60px 20px;}
  .qatitlemade{font-size: 1.2em;}
  .question-page label{font-size: 1em;}
  #form1 .gogotitle{font-size: 1.05em;}
  .question-page.active.grid_box{display: flex;flex-direction: column;gap: 20px;}
  }

@media screen and (max-width: 375px){
  .qaqaimg img{width: 182px;}
  .question-page.active.grid_box{
    padding-top: 10px;
}
}