@font-face {
	font-family: 'UberMove-Regular';
	src: url('../fonts/UberMove-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'Moderat-Light';
	src: url('../fonts/Moderat-Light.woff') format('woff');
}
@font-face {
	font-family: 'Moderat-Bold';
	src: url('../fonts/Moderat-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Moderat-Regular';
	src: url('../fonts/Moderat-Regular.woff') format('woff');
}

/* Global Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Moderat-Light", sans-serif;
}
body {
    background-color: #fff;
    color: #003399;
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    font-family: 'Moderat-Light', sans-serif;
    overflow: hidden; /* Prevent scrolling */
}

/* default resoultion for Google Pixel pro 8, 7, 6 Pro -ok
Google Pixed 8*/

.container {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}
	
/* Container for the intro and quiz sections */
.intro-container {
     width: 100%;
	 -webkit-flex-direction: column;
    flex-direction: column;
	-webkit-justify-content: space-between;
    justify-content: space-between;
    background-color: #ffffff;
    overflow: hidden;
}

.quiz-container{
   width: 100%;
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
   background-image:url("../images1/bg.png");
    overflow: hidden;
}

.safari-browser .quiz-container {
   
}

.chrome-browser .quiz-container {
   
}

/* Result Container Styling */
.result-container {
    width: 100%;
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 20px 20px 0 20px;
    overflow: hidden;

}

/* Content Section */
.content {
    margin-top: 0px;
    text-align: left;
    margin-left: 5%;
    flex-grow: 1;
}

/* Logo Styling: Intro Screen (Top-Left) */
.intro-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: 160px;
}


/* Title with rectangle aligned to the right */
.title-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    /* margin-bottom: 20%; */
    font-family: "Moderat-Light", sans-serif;

}

/* Title Text Styling */
.title-container h2 {
    font-size: 2.5rem;
    /* line-height: 1.4; */
    /* margin: 0% 5% 0 0; */
    flex: 1;
    color: #10408d;
}
.intro-para{
    font-size: 1.1rem;
    margin: 0% 12% 0 0;
    color: #10408d;
}
/* Rectangle Image */
.rectangle-image {
  width: 20px;
  height: 250px;
}

.btm {
    display: -webkit-flex;
    display: flex;
    font-size: 1em;
    align-content: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    color: white;
    -webkit-align-items: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 10%;
}

.btm a {
    color: black;
    font-family: 'UberMove-Regular', sans-serif;
    text-decoration: underline;
    margin: 3% 0% 0% 0%;

}

.btm a:hover {
	text-decoration: underline;
}


/* Paragraph Text */
.content p {
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Start Button Positioned at the Bottom */
.btn-start {
    background-color: #1959b3;
    color: #fff;
    padding: 5% 2% 5% 2%;
    border: none;
    width: 100%;
    font-size: 1.5rem;
    cursor: pointer;
    bottom: 0;
    left: 0;
    border-radius: 0;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    font-family: "Moderat-Light", sans-serif;
}

/* Main Quiz Section */
.quiz-section {
  max-width: 400px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.quiz-section {
background-color: #003399;
    color: #fff;
    padding: 15px;
    border: none;
    width: 100%;
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0;
	display: -webkit-flex;
    display: flex;
	-webkit-justify-content: center;
    justify-content: center;
	-webkit-align-items: center;
    align-items: center;
}
/* Header: Logo Positioned in the Top-Right */
.quiz-header {
	display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.quiz-logo {
	position: absolute;
	top: 20px;
	right: 20px;
	max-width: 160px;
}

/* Question Container: Icon on the Left, Question on the Right */
.question-container {
      width: 100%;
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    overflow: hidden;
}

.question-icon {
    width: 180px;
    max-height: 220px;
}

.question-text {
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: left;
    flex: 1;
    color: white;
    margin: 0 6%;
}

/* Individual Option Styling */
.option {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background-color: #1d4dab;
    color: white;
    padding: 5%;
    gap: 10px;
    font-size: 1rem;
}

/* Unique Backgrounds for Each Option */
.option-a {
	background-color: #0b2759;
}

.option-b {
  background-color: #0f3f8d;
}

.option-c {
  background-color: #1959b3;
}

.option-d {
  background-color: #2f79df;
}
/* Letter Styling (A, B, C, D) */
.option-letter {
    font-weight: bold;
    font-size: 2.5rem;
    flex-shrink: 0;
}

/* Option Text Styling */
.option-text {
    flex: 1;
    font-size: 1.2rem;
    line-height: 1.4;
}

/* Options Styling */
.options {
    color: #fff;
    border: none;
    width: 100%;
    cursor: pointer;
    left: 0;
    border-radius: 0;
    justify-content: center;
    align-content: space-around;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.option:hover {
  background-color: #0053cc;
}

/* Hide All Questions by Default */
.question-card {
  display: none;
}

/* Active Question */
.question-card.active {
  display: block;
}
/* Container for the Result Section */
.result-section {
    width: 90%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: column;
    flex-direction: column;
    gap: 20px; /* Adds space between sections */
}

/* Header: Aligns the Logo to the Right */
.result-header {
	display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
}

.result-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    max-width: 160px;
}

/* Result Content: Icon and Text Centered */
.result-content {
	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: column;
    flex-direction: column;
    gap: 15px;
}

.result-icon {
    width: 150px;
    max-height: 220px;
}

.result-content h2 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-left: 5%;
}
.result-sub-title{
	font-size: 1em;
    margin-bottom: 10px;
	margin-left: 5%
}
.result-content p {
    font-size: 1.3rem;
    color: #10408d;
}

/* Suggestion Card Styles */
.suggestion-card {
    background-color: #e8f0fe;
    border-radius: 10px;
    padding: 15px;
    position: absolute;
    bottom: 0;
    margin: 0 5% 18% 5%;
}

.suggestion-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #0a2858;
    font-family: "Moderat-Light", sans-serif;
}

.suggestion-content {
	display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
    align-items: center;
    gap: 10px;
}

.suggestion-icon {
    max-width: 50px;
}

.suggestion-content p {
    font-size: 1.1rem;
    color: #0a2858;
}

/* Button Styles */
.btn-saiba-mais {
    background-color: #1959b3;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    font-size: 1.4rem;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.btn-saiba-mais:hover {
    background-color: #1959b3;
	font-family: "Moderat-Light", sans-serif;
}

/* Retry Button at the Bottom */
.btn-retry {
    background-color: #1959b3;
    color: #fff;
    border: none;
    width: 100%;
    font-size: 1.5em;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 5% 2% 5% 2%;
    font-family: "Moderat-Light", sans-serif;
}

.btn-retry:hover {
    background-color: #002766;
}

 /*iPhone Pro Models and iPhone Plus Models
*iPhone Pro Max 16
iPhone Pro 16, 15, 14, 13, 12
iphone 16, 15, 14, 13*/
 @media only screen and (min-device-width: 320px) and (min-device-height: 568px) and (-webkit-device-pixel-ratio: 3) { 
/*@media (min-width: 430px) and (max-width: 460px) {*/
	.content {
		margin-top: 40px;
	}
	.intro-logo {
        max-width: 140px;
        top: 20px;
        left: 20px;
        /* margin-bottom: 20%; */
    
    }
	.title-container h2 {
        font-size: 2.2rem;
    
    }
	.rectangle-image{
        height: 240px;
    
    }
	.intro-para {
        font-size: 1.1rem;
    
    }
	.btn-start {
        font-size: 1.5rem;
    
    }
	.quiz-logo {
		max-width: 140px;
	}
	.question-icon {
        width: 180px;
        max-height: 230px;
    
    }
	.question-text {
        font-size: 1.5rem;
    
    }
	.option-letter {
        font-size: 2.5rem;
    
    }
	.option-text {
        font-size: 1.1rem;
    
    }
	.result-logo {
        max-width: 140px;
    
    }
	.result-icon {
        width: 160px;
        max-height: 180px;
    
    }
	.result-content h2 {
        font-size: 1.2rem;
    
    }
	.result-content p {
        font-size: 1rem;
    
    }
	.suggestion-card h3 {
        font-size: 1.2rem;
    
    }
	.suggestion-content p {
        font-size: 1rem;
    
    }
	.btn-saiba-mais {
        font-size: 1.4rem;
    
    }
	.btn-retry {
        font-size: 1.5em;
    
    }
}

/* Styles for 
iphone Pro Max 15, 14, 13, 12, 11
iphone Plus 15, 16
*/
@media only screen and (min-device-width: 414px) and (max-device-width: 430px) and (min-device-height: 896px) and (max-device-height: 932px) and (-webkit-device-pixel-ratio: 2),
only screen and (min-device-width: 414px) and (max-device-width: 430px) and (min-device-height: 896px) and (max-device-height: 932px) and (-webkit-device-pixel-ratio: 3) { 
	.content {
		margin-top: 40px;
	}
	.intro-logo {
        max-width: 180px;
        top: 20px;
        left: 20px;
        /* margin-bottom: 20%; */
    
    }
	.title-container h2 {
        font-size: 2.2rem;
    
    }
	.rectangle-image{
        height: 220px;
    
    }
	.intro-para {
        font-size: 1.2rem;
    
    }
	.btn-start {
        font-size: 1.5rem;
    
    }
	.quiz-logo {
		max-width: 140px;
	}
	.question-icon {
        width: 180px;
        max-height: 230px;
    
    }
	.question-text {
        font-size: 1.6rem;
    
    }
	.option-letter {
        font-size: 2.5rem;
    
    }
	.option-text {
        font-size: 1.3rem;
    
    }
	.result-logo {
        max-width: 140px;
    
    }
	.result-icon {
        width: 160px;
        max-height: 180px;
    
    }
	.result-content h2 {
        font-size: 1.5rem;
    
    }
	.result-content p {
        font-size: 1.1rem;
    
    }
	.suggestion-card h3 {
        font-size: 1.5rem;
    
    }
	.suggestion-content p {
        font-size: 1.1rem;
    
    }
	.btn-saiba-mais {
        font-size: 1.5rem;
    
    }
	.btn-retry {
        font-size: 1.6em;
    
    }
}

/* Xiaomi Mi 11, Nord 2
iPhone 11 - Failed*/
@media only screen and (min-device-width: 320px) and (min-device-height: 568px) and (-webkit-device-pixel-ratio: 2) {  .content {
		margin-top: 40px;
	}
	.intro-logo {
        max-width: 120px;
        top: 20px;
        left: 20px;
        /* margin-bottom: 20%; */
    
    }
	.title-container h2 {
        font-size: 1.5rem;
    
    }
	.rectangle-image{
        width: 20px;
		height: 120px;
    }
	.intro-para {
        font-size: 1rem;
    
    }
	.btn-start {
         font-size: 1.3rem;
    
    }
	.quiz-logo {
		max-width: 120px;
	}
	.question-icon {
        width: 100px;
		max-height: 130px;
    
    }
	.question-text {
        font-size: 1.2rem;
    
    }
	.option-letter {
        font-size: 1.6rem;
    
    }
	.option-text {
         font-size: 1rem;
    
    }
	.result-logo {
		max-width: 120px;
    
    }
	.result-icon {
         width: 100px;
		 max-height: 130px;
    
    }
	.result-content h2 {
        font-size: 1rem;
    
    }
	.result-content p {
        font-size: 1rem;
    
    }
	.suggestion-card h3 {
         font-size: 1rem;
    
    }
	.suggestion-content p {
         font-size: 0.9rem;
    
    }
	.btn-saiba-mais {
        font-size: 1.2rem;
    
    }
	.btn-retry {
        font-size: 1.4em;
    
    }
}

/* Pixel 7, Pixel 6 */
@media only screen and (device-width: 412px) and (device-height: 915px) {
	
	.content {
		margin-top: 40px;
	}
	.intro-logo {
        max-width: 140px;
        top: 20px;
        left: 20px;
        /* margin-bottom: 20%; */
    
    }
	.title-container h2 {
        font-size: 2.2rem;
    
    }
	.rectangle-image{
        height: 240px;
    
    }
	.intro-para {
        font-size: 1.1rem;
    
    }
	.btn-start {
        font-size: 1.5rem;
    
    }
	.quiz-logo {
		max-width: 140px;
	}
	.question-icon {
        width: 100px;
		max-height: 130px;
    
    }
	.question-text {
        font-size: 1.2rem;
    
    }
	.option-letter {
        font-size: 1.6rem;
    
    }
	.option-text {
        font-size: 1.1rem;
    
    }
	.result-logo {
        max-width: 140px;
    
    }
	.result-icon {
        width: 160px;
        max-height: 180px;
    
    }
	.result-content h2 {
        font-size: 1.2rem;
    
    }
	.result-content p {
        font-size: 1rem;
    
    }
	.suggestion-card h3 {
        font-size: 1.2rem;
    
    }
	.suggestion-content p {
        font-size: 1rem;
    
    }
	.btn-saiba-mais {
        font-size: 1.4rem;
    
    }
	.btn-retry {
        font-size: 1.5em;
    
    }
	
}