/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;1,500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:ital,wght@0,400..800;1,300..800&display=swap');

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Open Sans", sans-serif;
}

.dot{
    width:25px;
    height:21px;
    position:absolute;
    background: url(../images/leaf.png);
    background-size: 100% 100%;
  }
 #container {width:100%; height:100%; }
  #logo{ left:50%; top:50%; position:absolute; border-radius:10px; }
  

  .main-wrapper{
    position: absolute;
    left: 50%;
    top: 37%;
    transform: translate(-50%, -50%);
  } 
  
  
  #DiacoDesignLink,#pens{
    color: #fff;
  }
  

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    text-decoration: none;
    outline: 0;
    font-size: 15px;
    line-height: 20px;
}

a:focus,
a:hover,
a.active {
    outline: none;
    border: none;
    text-decoration: none;
}

button {
    cursor: pointer;
}

button,
input,
optgroup,
select,
textarea {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.5px;
    margin: 0;
    resize: none;
    border: 0;
    outline: medium none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

button:focus,
button:hover {
    outline: none;
    border: none;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

.form-control:focus {
    box-shadow: none;
}

.grid_section {
    margin-top: 50px;
}

.clear:after {
    clear: both;
}

.clear:after,
.clear:before {
    content: "";
    display: table;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.padding-three {
    padding-top: 3%;
    padding-bottom: 3%;
}

ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style: none;
    font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

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

img.img-auto {
    width: auto;
    height: auto;
}

textarea {
    color: #252525;
    padding: 15px;
    width: 100%;
}



 .start-quize{
    color: #ffffff;
    display: block;
    padding: 15px 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 28px;
    border-radius: 30px;
    margin: 15px auto;
    max-width: 250px;
 }
 
 .pulse {
    animation: pulse-animation 2s infinite;
  }
  
  @keyframes pulse-animation {
    0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    100% {
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
  }

 .start-quize h1{
    font-family: "Anton", sans-serif;
 }

 .main-content{position: relative; color: #ffffff;max-width: 620px;
    text-align: center;}

 .main-content h1{
    font-family: "Anton", sans-serif;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 45px;
 }   

 .main-content h2{
    color: #ffe44f;
    font-family: "Anton", sans-serif;
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 4px;
 }

 .main-content p{
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
 }
 .main-content p:first-child{margin: 5px 0 5px 0;}
 .start-quize{
    background: rgb(3,178,81);
    background: radial-gradient(circle, rgba(3,178,81,1) 0%, rgba(0,142,2,1) 100%);
 }   

.home-content{
    max-width: 540px;
    margin: 0 auto;
}

.header-total-point{display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;}

 /*-------------question css --------------*/




 /* codewithcurious.com */

  
  .quiz-container {
    max-width: 500px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  
  h1 {
    text-align: center;
  }
  
  #question-container {
    margin-bottom: 20px;
  }
  
  #question-text {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  #answer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  
  button {
    height: 40px;
    font-size: 16px;
    background-color: #eaeaea;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  /* button:hover {
    background-color: #d2d2d2;
  } */
  
  #controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #timer-container {
    display: flex;
    align-items: center;
  }
  
  #timer-text {
    font-size: 14px;
  }
  

  .progress-bar-wrap {
	padding:15px 0;
}
.progress {
    height: 11px !important;
    margin-bottom: 20px;
    overflow: visible !important;
    background-color: #d0d0d0;
	border-radius: 8px;
    border: 2px solid #000000;
	position: relative;
	margin: 10px 0 0 0;
	height: 13px;
	width: 100%;
	/* max-width: 530px; */
}

.progress-done {
	background: #31c619;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
	position: relative;
}

.progress-value {
	position: absolute;
    display: none;
	right: -40px;
	top: 100%;
	color: #8aa24b;
	font-size: 28px;
	line-height: 34px;
	padding-top: 20px;
	font-weight: 600;
	font-family: Arial;
}
.progress-thumb {
  position: absolute;
    width: 70px;
    height: 30px;
    right: -40px;
    /* border-radius: 50%; */
    /* background-color: #cce981; */
    /* border: 5px solid #8aa24b; */
    background-image: url(../images/progress-bar-circle.png);
    background-position: center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
}

.left-side-question .total-number {align-self: flex-end;text-align: center;}
.left-side-question .total-number p{    font-weight: 500;
    font-size: 18px;
    margin-bottom: 5px;
    color: #3f4042;
    font-family: 'Open Sans';}
.score{font-size: 32px;}
.left-side-question .total-number .scoreNumber{
    color: #ffffff;
    background-color: #31c619;
    width: 60px;
    font-family: "Anton", sans-serif;
    font-size: 30px;
    margin: auto;
    height: 60px;
    line-height: 60px;
    border-radius: 100%;
}

.left-side-question.column {
    padding: 0px 50px 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-answer-bg{
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
    width: 100%;
    padding: 35px;
    height: 100%;
    background-color: #eeeeee;
    width: 100%;
    background-position-y: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}




.options .option1{margin-bottom: 20px;}



.options-container .option {
    display: flex;
    align-items: center;
    /* padding: 25px; */
    min-height: 160px;
    margin: 10px 0;
    font-family: "Anton", sans-serif;
    cursor: pointer;
    border-radius: 90px;
    background-repeat: no-repeat;
    border: 3px solid #000;
    background-position: 35px;
    color: #00335b;
    background-color: #16446b; 
    font-size: 31px;
    background-size: 52px;
    animation: zoom-out-slow 2s ease forwards;
}

@keyframes zoom-out-slow {
    0% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }

.options-container .option span{
    padding: 0 20px 0 105px;
    line-height: 35px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 23px;
}


.options-container .option:hover {
    /* filter: brightness(1.5); */
    background-color: #2c5e88; 
}

.options-container .option-0-0 {
    background-image: url('../images/Q-01-01.png');
}

.options-container .option-0-1 {
    background-image: url('../images/Q-01-02.png');
}

.options-container .option-1-0 {
    background-image: url('../images/Q-02-01.png');
}

.options-container .option-1-1 {
    background-image: url('../images/Q-02-02.png');
}

.options-container .option-2-0 {
    background-image: url('../images/Q-03-01.png');
}

.options-container .option-2-1 {
    background-image: url('../images/Q-03-02.png');
}

.options-container .option-3-0 {
    background-image: url('../images/Q-04-01.png');
}

.options-container .option-3-1 {
    background-image: url('../images/Q-04-02.png');
}

.options-container .option-4-0 {
    background-image: url('../images/Q-05-01.png');
}

.options-container .option-4-1 {
    background-image: url('../images/Q-05-02.png');
}

.options-container .option-5-0 {
    background-image: url('../images/Q-06-01.png');
}

.options-container .option-5-1 {
    background-image: url('../images/Q-06-02.png');
}

.options-container .option-6-0 {
    background-image: url('../images/Q-07-01.png');
}

.options-container .option-6-1 {
    background-image: url('../images/Q-07-02.png');
}

.options-container .option-7-0 {
    background-image: url('../images/Q-08-01.png');
     background-size: 40px;
}

.options-container .option-7-1 {
    background-image: url('../images/Q-08-02.png');
    background-size: 40px;
}

.options-container .option-8-0 {
    background-image: url('../images/Q-09-01.png');
    background-size: 40px;
}

.options-container .option-8-1 {
    background-image: url('../images/Q-09-02.png');
    background-size: 40px;
}

.options-container .option-9-0 {
    background-image: url('../images/Q-10-01.png');
}

.options-container .option-9-1 {
    background-image: url('../images/Q-10-02.png');
}


.options-container .option-10-0 {
    background-image: url('../images/Q-01-01.png');
}

.options-container .option-10-1 {
    background-image: url('../images/Q-01-01.png');
}



/* Add styles for other options similarly */

.inner-question-answer{display: flex; flex-direction: row; width: 100%; height: 100vh; }
.inner-question-answer .column { flex-basis: 50%; /* Each column takes up 50% of the container's width */
    flex-shrink: 0;  /* Prevents shrinking */
    flex-grow: 0;    /* Prevents growing */}
.inner-question-answer .question-number{padding: 20px 0 0 0; color: #3f4042; font-size: 16px; margin-bottom: 10px;}
.inner-question-answer .heading{
    position: relative;
    background-repeat: no-repeat;
    min-height: 150px;
    background-size: auto 140px;
    margin: 0;
    top: -13px;
}

.question-wrapper{display: flex; align-items: center;}
.question-wrapper .imagesdiv{width: 40px;margin: 0 5px 0 0;}
.question-wrapper.one{margin-bottom: 10px;}

.question{
    color: #2c2e30;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
    background-color: #fff;
    margin:0;
    padding: 10px 20px;
    border-radius: 50px;
    width: max-content;
    border: 2px solid #000000;}

.question-wrapper .one{margin-bottom: 10px;}
.questionsecond{
    padding-right: 52px;
}

.timer{
    font-size: 35px;
    color: #a9b5bf;
    margin: 30px 0 0 0;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.timer::before{
    background-image: url(../images/watch.png);
    background-size: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
    /* margin-top: -9px; */
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    margin-right: 9px;
}

.timeUp h1{font-size: 70px; font-family: "Anton", sans-serif;}
.timeUp h1 span {
    position: relative;
    display: none;
    top: 7px;
    margin-right: 11px;
}

.timeout-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh; /* This makes the wrapper take the full height of the viewport */
}

.timeUp {
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeUp h1 {
    display: flex;
    align-items: center;
    background: -webkit-linear-gradient(#00335b, #005293);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.timeUp h1 span img {
    margin-right: 10px; /* Space between the image and the text */
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between the buttons */
    padding-bottom: 20px; /* Add padding at the bottom */
}

.submit-button,
.button-container button{
    height: 50px;
    margin: 0;
    padding: 0px 50px;
    border-style: solid;
    border-width: 1px;
    border-color: #31c619;
    border-radius: 25px;
    background-color: #31c619;
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}

.button-container button:hover {
    background-color: #62de68;
}

.button-container button:nth-of-type(2){
    background-color: #31c619;
    box-shadow: none;
    color: #ffffff;
    border: 1px solid #c7c7c7;
}

.form-wrapper input[type=number]::-webkit-inner-spin-button, 
.form-wrapper input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}


.form-wrapper{
    /* display: flex; */
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    padding: 20px 0 20px 0;
    text-align: center;
}
.form-wrapper input {
    width: 100%;
    border: 2px solid #000;
    min-height: 40px;
    margin: 0 0 15px 0;
    padding: 13px 13px 13px 20px;
    border-radius: 50px;
    /* text-transform: capitalize; */
}
.form-wrapper input::placeholder {
    color: #888888; /* Placeholder text color */
    font-weight: 600;
    font-size: 16px; /* Placeholder text font size */
  }
.form-wrapper .form-text h1{font-family: "Open Sans", sans-serif; font-size: 23px;
    color: #fff;
    font-weight: 600; margin: 0 0 15px 0;}
.form-wrapper .error {
    letter-spacing: 0.2px;
    font-size: 11px;
    position: absolute;
    top: 50px;
    left: 10px;
    font-family: 'Open Sans';
    z-index: 100;
    color: white;
    z-index: -999999;
}

.form-wrapper .full-name-wrapper{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: right;
}

.form-wrapper .col.name {
    width: 100%;
}


.certificate-wrapper img{display: block;margin: auto;}
/*-------form--------*/    
.form-wrapper .form-group{position: relative; text-align: left;height: 70px;}
.form-wrapper .full-name-wrapper .form-group{position: relative; text-align: left;}
.form-wrapper h2{padding: 0 0 27px 0;}
.home-logo{position: absolute;     right: 15%;
    top: 14%;}
.home-logo img{width: 70px;}
.comman-certificate {    flex-direction: row; text-align: center; display: flex; align-items: center;justify-content: center;background-color: #e1e1e1;}
.Name {text-align: center;width: 53%;margin: 0 auto;}
.comman-certificate .traits{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 10px 15px 0 15px;
    border: 2px solid #000;
    border-radius: 25px;
}

.comman-certificate{max-width: 850px;margin: 1% auto 0;box-shadow: 0px 0px 3px 4px #c7c7c7;}
.comman-certificate content p,
.comman-certificate content h1{color: #fff;}
.certificate-wrapper .content{    padding: 10px 25px;
    flex: 1 0 60%;}
.certificate-icon{flex: 1 1 52%;}
.certificate-wrapper .content img{width: max-content;}
.traits-heading{display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;}
.Next{display: none !important;}   
.traits-wrapper{position: relative;max-width: 400px; margin: auto;}
.trait-1{width: 120px;}
.trait h3 {position: relative;top: -10px;font-weight: 600; font-size: 15px; }
.person-name{    text-align: center;
    font-size: 18px;
    margin: 0 0 10px 0;
    font-weight: 600;}
.traits-heading h2{background-color: #26bd2d;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    padding: 5px 15px;
    font-size: 20px;
    border-radius: 20px;
    font-weight: 700;}

.certificateion-content{margin: 0 0 40px 0;}
.certificateion-content p strong{font-size: 18px;}
.certificateion-content p {font-size: 14px;
    font-weight: 500;
    line-height: 20px;}
.certificate-wrapper .trait img{width: 70%;}

.download-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 0;
}

.download-btn-wrapper .download {
    font-size: 18px;
    font-family: 'Open Sans';
    background-color: #26bd2d;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    color: #ffffff;
}

.download {
    margin: 0px 10px !important;
}

.social-share-certificate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
}

.social-share-certificate ul li {
    display: inline-block;
    padding: 0 5px;
}

.select-menu {
    margin: 10px auto;
  }

  .select-menu.active {
    background-color: #fff;
    border-radius: 30px 30px 10px 10px;
    border: 2px solid #000;
    border-top: none;
  }



  .select-menu .select-btn {
    width: 100%;
    border: 2px solid #000;
    margin: 0 0 13px 0;
    padding: 13px 60px 13px 20px;
    border-radius: 50px;
    text-transform: capitalize;
    display: flex;
    height: 48px;
    background: #fff;
    font-size: 18px;
    font-weight: 400;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-image: url(../images/arrow-up.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 17px;
  }

  span.sBtn-text {
    color: #888888;
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

  .select-menu .options {
    /* position: absolute; */
    width: 100%;
    overflow-y: auto;
    max-height: 295px;
    padding: 0px;
    border-radius: 8px;
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-duration: 0.35s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.35s;
    -webkit-animation-fill-mode: both;
  }
  .select-menu .options .option {
    display: flex;
    cursor: pointer;
    padding: 5px 20px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
  }
  .select-menu .options .option:hover {
    background: #f2f2f2;
    color: #434242;
  }
  .select-menu .options .option i {
    font-size: 25px;
    margin-right: 12px;
  }

  .select-menu .options .option:hover .option-text {
    font-size: 18px;
    color: #434242;
  }

  .select-menu .options .option .option-text {
    font-size: 18px;
    color: #9e9e9e;
  }

  .select-menu .options {
    display: none;
  }

  .select-menu.active .select-btn{
    background-image: url(../images/arrow-down.png);
  }
  
  .select-menu.active .options {
    display: block;
  }
  
  .select-btn i {
    font-size: 25px;
    transition: 0.3s;
  }
  
  .select-menu.active .select-btn i {
    transform: rotate(-180deg);
  }
  .select-menu.active .options {
    display: block;
    opacity: 0;
    z-index: 10;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
  }
  
  @keyframes fadeInUp {
    from {
      transform: translate3d(0, 30px, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes fadeInDown {
    from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    to {
      transform: translate3d(0, 20px, 0);
      opacity: 0;
    }
  }


@media only screen and (min-width: 1920px) and (max-width: 2560px) {
    .left-side-question.column{justify-content: center;}
    .progress{width: 100%;}
}

/* Target smartphones with a maximum width of 480 pixels */
@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) {
    .question{flex: 1;}
    .question br{display: none;}
    .progress{max-width: 100%;}
    .button-container{margin: 20px 0;}
    .question-wrapper.one{margin-bottom: 10px;}
    .question-wrapper .imagesdiv {width: 50px;}
    .main-content p{font-size: 20px;}
    .certificate-icon{flex: 1 1 55%;}
    .comman-certificate .traits{padding: 10px 15px 0 15px;}
    .download-btn-wrapper .download{padding: 20px 35px;}
    .certificate-wrapper .content .Name img{width: 41%;}
    .certificate-wrapper .name img{width: 50%;}
    .trait-1{width: auto;}
    .certificateion-content{margin: 0 0 40px 0;}
    .certificate-wrapper .content img{width: 80%;}
    .person-name{font-size: 20px; margin: 0 0 10px 0;}
    .certificate-wrapper .content{flex: 1 1 60%;}
    .certificate-wrapper .content{padding: 10px 20px;}
    .home-content br{display: none;}
    .inner-question-answer{flex-direction: column;}
    .right-answer-bg {padding: 40px 15px 15px 15px;align-items: flex-start;}
    .options-container .option span{font-size: 30px;}
    .question{font-size: 30px;}
    .left-side-question .total-number .scoreNumber{width: 60px; height: 60px;}
    .inner-question-answer .question-number,
    .left-side-question .total-number p{font-size: 30px;}
    .score{font-size: 35px;}
    .timer {font-size: 45px;}
    .timer::before{height: 40px;width: 40px;}
    .options-container .option-8-1{background-size: 40px;}
    .timeout-wrapper{height: auto;}
    .timeUp{margin: 0 auto;}
    .inner-question-answer .heading{background-size: auto 140px;min-height: 140px; margin-bottom: 30px;}
}

@media only screen and (min-width: 650px) {
    .mobileImg{display: none;}
}

@media only screen and (max-width: 600px) {
.left-side-question.column { flex-basis: 40%;}
.right-side-answer.column {flex-basis: 60%;}
.score {font-size: 27px;}
}

/* Target smartphones with a maximum width of 480 pixels */
@media only screen and (max-width: 480px) {
    .options-container .option-8-1
    .inner-question-answer .heading-7 { background-size: 58% !important;}
    .question-wrapper .imagesdiv{width: 30px;display: flex;}
    .timeUp h1{font-size: 50px;}
    .social-share-certificate{margin: 20px 0;}
    .download-btn-wrapper{margin: 15px 0 0;}
    .social-share-certificate{    margin: 19px 0;}
    .trait-1{width: auto;}
    .certificateion-content p{font-size: 13px; line-height: 19px;}
    .select-menu .select-btn{margin: 0 0 5px 0;}
    .question-answer-wrapper {overflow: hidden;}
    .trait h3{font-size: 13px;}
    .question-wrapper.one{margin-bottom: 7px;}
    .left-side-question .total-number .scoreNumber{line-height: 45px;height: 45px; width: 45px;}
    .left-side-question .total-number p{font-size: 17px; font-weight: 600;}
    .traits-wrapper{max-width: 350px;}
    .certificate-wrapper .content{padding: 5px 10px;}
    .certificate-wrapper .Name img{margin: 10px auto 10px; width: 70%;}
    .certificate-wrapper .trait-1 img{width: 80%; margin: auto;}
    .mobileImg img{width: 50% !important;}
    .traits-heading h2{padding: 5px 15px;font-size: 18px; border-radius: 10px;}
    .comman-certificate .traits{padding: 10px 15px 15px 15px; border: 1px solid #000; border-radius: 18px;}
    .certificateion-content{margin: 10px 10px 30px 10px;}
    .certificate-icon{display: none;}
    .submit-button, .button-container button{padding: 0px 20px;}
    .home-logo{right: 4%;top: 10%; position: absolute;}
    .inner-question-answer .heading{background-position:left; margin: 0 0 20px 0;}
    .questionsecond{padding-right: 0;}
    .progress-thumb{display: none;}
    .progress-bar-wrap{padding: 0;position: absolute;
        top: 0; width: 100%; left: 0;}
    .progress-done{border-radius: 0;}
    .right-answer-bg{padding: 8px;align-items: flex-start;}
    /* CSS styles for smartphones */
    .main-content p{font-size: 18px;}
    /* .home-content br{display: none;} */
    .main-wrapper{width: 100%; top: 36%;}
    .main-content h1{ font-size: 30px;
        line-height: 40px;}
    .inner-question-answer .heading{ top: -20px; margin:0; font-size: 30px; padding-bottom: 0;background-size:contain;min-height: 85px;}
    .inner-question-answer{flex-direction: column;}
    .left-side-question.column{ padding: 0 20px 20px 20px; justify-content: center;}
    .progress{width: 100%; margin: 0;border: none; border-radius: 0;height: 8px !important;}
    .inner-question-answer .question-number{padding: 0 0 0 0;font-size: 16px;font-weight: 600;}
    /* .question br{display: none;} */  
    .question{border: 1px solid #000000; margin: 0; font-size: 12px; font-weight: 600; padding: 5px 20px 5px 15px;
    width: 60%;}
    .timer::before{width: 27px; height: 27px; margin-right: 6px;}
    .timer{font-size: 25px; margin: 10px 0 0 0;}
    .options-container .option{min-height: 88px; background-size: 40px; background-position: 20px;}   
    .options-container .option span{ padding: 0 10px 0 75px;font-size: 15px; line-height: 25px;}
    .timeout-wrapper{height: auto;}
    .start-quize{padding: 12px 30px; max-width: 240px; font-size: 20px;}
    .dot {width: 20px !important;height: 20px !important; background-color: transparent !important;}
    .form-wrapper{display: block;padding: 30px 20px;border-radius: 10px;text-align: center; max-width: 100%;}
    .comman-certificate{flex-direction: column; margin: 0 auto 0; box-shadow: none;}
    body.certificate{display: block;}
    .form-wrapper .form-text h1{font-size: 23px;}
    .option-3-0 span{font-size: 14px;line-height: 19px;}
    .options-container .option-8-1,
    .options-container .option-7-0,
    .options-container .option-7-1{background-size: 35px;}
  }


  @media only screen and (max-width: 375px) {
    .certificateion-content {margin: 20px 10px 50px 10px;}
    .traits-wrapper{max-width: 350px;}

  }

  @media only screen and (max-width: 320px) {
    .main-content p{font-size: 17px;}
    .main-content h1 {font-size: 28px;}
    .mobileImg img{width: 40%;}
    .form-wrapper .form-text h1{font-size: 15px;}
    .options-container .option-8-1{background-size: 30px !important;}
    .inner-question-answer .heading.heading-7{background-size: 74%;}
    .options-container .option-8-0 span,
    .options-container .option-8-1 span{font-size: 13px;line-height: 19px;}
    .question{font-size: 10px;}
    .options-container .option{min-height: 80px;}
    .button-container button:nth-of-type(2){margin-left: 10px;}
    .question-wrapper .imagesdiv { width: 35px}
    .submit-button, .button-container button{height: 40px;}
    .question{padding: 5px 5px 5px 10px;}
    .left-side-question .total-number p,
    .inner-question-answer .question-number{font-size: 15px; font-weight: 600;}
    .timer::before{width: 25px; height: 25px;}
    .question{padding: 5px 5px 5px 10px;}
    .person-name{font-size: 16px;}
    .Name { margin: 0 auto;}
    .trait h3{font-size: 12px;}
    .trait-1{width: 90px;}
    .traits-wrapper{padding: 0 30px;}
    .certificateion-content p{padding: 0 10px; font-size: 16px;}
    .traits-heading h2{padding: 5px 15px;font-size: 18px;}
    .comman-certificate .traits{padding: 10px 15px 15px 15px; border: 1px solid #000; border-radius: 18px;}
    .certificateion-content{margin: 20px 10px 10px 10px;}
    .timeUp h1{font-size: 40px;}
    .button-container button{font-size: 13px;}
    .form-wrapper{width: 100%; text-align: center;}
    

  }