*{
    margin: 0;
    padding: 0;
    font-family: "Inter";
}

html {
  font-size: 100%;
}


@media (min-width: 1920px) {
  html {
    font-size: 100%; 
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 95%;
  }
}

@media (min-width: 1440px) {
  html {
    font-size: 92%;
  }
}

@media (min-width: 1080px) {
  html {
    font-size: 88%;
  }
}

@media (min-width: 781px) {
  html {
    font-size: 84%;
  }
}

@media (max-width: 780px) {
  html {
    font-size: 100%;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 80%;
  }
}


::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Hide scrollbar for Firefox */
html {
    scrollbar-width: none;
}

/* Hide scrollbar for Internet Explorer and Edge */
body {
    -ms-overflow-style: none;
}

button, a{
	cursor: pointer;
}

/*#be6596 #9D4174 #7C2053*/




/* navbar & footer*/
@media only screen and (max-width: 780px) {
    .cover-section{
        width: 100%;
        height: 100vh;
        background-image: url(../project-req/images/bg-home-portrait.png);
        margin-bottom: 12vh;
        background-size: cover;
        background-position:bottom;
        background-repeat: no-repeat;
    }
    
    .nav-links li i{
    	text-align: right;
    	padding: .5vh 2vw;
    	margin-left: 48vw;
    	font-size: 1.2rem;
    }
    
    .nav-links{
    	margin: 0;
    	position:  fixed;
    	align-items: center;
    	display: flex;
    	flex-direction: column;
    	z-index: 8;
    	gap: 2rem;
    	height: 100vh;
    	top: 0;
    	right: -60%;
    	width: 60%;
    	padding: 2vh 0 0;
    	transition: .2s;
    }
    
    .nav-links.active{
    	opacity: 2;
    	right: 0;
    	background: white;
    	color: #444444;
    }	
    
    .nav-other, .nav-other-dark{
    	display: block;
    	text-align: right;
    	color: #444444;
    	font-size: .9rem;
    	margin: 0 0 10px;
    	font-weight: 600;
    	transition: .2s;
    	text-decoration: none;
    } 
    
    .hamburger, .hamburger-dark{
    	display: block;
    	padding: 1rem;
    	z-index: 6;
    }
     
    .hamburger div{
   		width: 30px;
   		height: 2px;
   		margin: 5px 0;
   		background: white;
    }
    
    header.scrolled .hamburger div, .hamburger-dark div, .hamburger.active{
   		width: 30px;
   		height: 2px;
   		margin: 5px 0;
   		background: #7C2053;
    }

	header{
        width: 100%;
        height: 5vh;
        background: transparent;
        padding-bottom: 2vh;
        position: fixed;
        top: 0;
        transition: .3s ease;
        z-index: 5;
	}
    
    header.scrolled{
    	background-color: white;
        box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
    }

    .navbar-home{
        display: flex;
        justify-content: space-between;
    }

    .navbar-home ul li{
        display: block;
        list-style: none;
        margin: 0 4vw 0vh 0vw;
    	justify-content: flex-start;
    	text-align: left;
    }
    
    header .nav-other{
        text-decoration: none;
        color: #7C2053;
    }    
    
    .nav-CTA, .nav-CTA-dark{
        text-decoration: none;
        letter-spacing: .1rem;
        color: white;
        background-color: #7C2053;
        border-radius: 4px;
        font-size: .9rem;
        font-weight: 400;
        padding: .8rem .8rem;
        transition: .2s;
    }
    
    .nav-CTA-2, .nav-CTA-dark-2{
        text-decoration: none;
        letter-spacing: .1rem;
        color: #7C2053;
        background-color: #ffffff;
        border: 2px solid #7C2053;
        border-radius: 4px;
        font-size: .9rem;
        font-weight: 600;
        padding: .8rem 2.5rem;
        transition: .2s;
    }
    
    
    /*Navigation Bar*/
    .navbar{
        background-color: white;
        width: 100%;
        height: 5vh;
        z-index: 5;
        display: flex;
        justify-content: space-between;
        padding-bottom: 2vh;
        position: sticky;
        top:0;
        box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
    }
    
    .navbar ul li{
        display: block;
        list-style: none;
        margin: 0vh 4vw 0vh 0vw;
    }

    .logo-home{
        display: flex;
        flex-direction : row;
        text-decoration: none;
    }

    .logo-home img{
        height: 1.1rem;
        margin-top: 1.3rem;
        margin-left: 3.5vw;
    }
    
    /*Footer*/    
    .footer{
        background-color: #59173c;
        width: 100%;
        padding: 4vh 0 6vh;
        height: auto;
    }
    
    .footer-cont{
    	margin: 0 6vw;
    }

    .footer-row{
    	display: flex;
    	flex-wrap: wrap;
    }
    
    .footer-col{
    	width: 100%;
    }
    
    .footer-col h4{
    	color: white;
    	font-size: 0.8rem;
    	font-weight: 500;
    	margin-bottom: 1vh;
    	margin-top: 3vh;
    	position: relative;
    	padding-bottom: 1vh;
    	border-bottom: 3px solid #a42b6d;
    }
    
    .footer-col ul{
    	list-style: none;
    }
    
    .footer-col ul li{
    	margin-bottom: 1.6vh;
    }
    
    .footer-col ul li a{
    	text-decoration: none;
    	color: white;
    	opacity: 0.7;
    	font-size: 0.75rem;
    	font-weight: 200;
    	display: block;
    	transition: .2s ease;
    }
    
    .footer-col ul li a:hover{
    	opacity: 1;
    	margin-left: 5px;
    	font-weight: 250;
    }
    
    .footer-social a{
    	text-decoration: none;
    	color: white;
    	background-color: #ffffff30;
    	width: 3.5rem;
    	line-height: 3.5rem;
    	text-align: center;
    	align-items: center;
    	border: none;
    	border-radius: 2rem;
    	font-size: 1.2rem;
    	font-weight: 300;
    	display: inline-block;
    	margin-right: 2vw;
    	transition: .2s ease;
    }
    
    .footer-social a:hover{
    	background-color: #ffffff;
    	color: #a42b6d;
    	font-weight: 400;
    }
    
    .footer-cont p{
    	margin-top: 3vh;
    	color: white;
    	opacity: .7;
    	font-size: .7rem;
    	font-weight: 300;
    	text-align: center;
    }
}

@media only screen and (min-width: 781px) {
    .cover-section{
        width: 100%;
        min-height: 100vh;
        margin-bottom: 16vh;
        background-image: url(../project-req/images/bg-home-landscape.png);
        background-size: cover;
        background-position: bottom right;
        background-repeat: no-repeat;
    }
    
    .nav-links li i{
    	display: none;
    }
    
    /*Navigation Bar for Home page*/
    header{
        width: 100%;
        background: transparent;
        padding: 3vh 0;
        position: fixed;
        top: 0;
        transition: .3s ease;
        z-index: 5;
	}
	
    .navbar-home{
        display: flex;
        justify-content: space-between;
    }

    header.scrolled{
    	background-color: white;
        box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
    }
    
    .nav-links{
    	display: flex;
    	align-items: flex-end;
    }

    .navbar-home ul li{
        display: inline-block;
        list-style: none;
        margin: 0 .8vw 0;
    }
    
    header .nav-other{
        text-decoration: none;
        color: white;
    }
    
    .nav-other{
        text-decoration: none;
        color: white;
        font-size: 1rem;
        letter-spacing: .1rem;
        font-weight: 400;
        padding: .5rem .5vw;
    }
    
    .nav-other:hover{
        border-bottom: 3px solid white;
    }
    
    header.scrolled  .nav-other, .nav-other-dark{
        color: #444444;
        font-weight: 600;
        text-decoration: none;
        font-size: 1rem;
        letter-spacing: .1rem;
        padding: .5rem .5vw;
    }
    
    header.scrolled  .nav-other:hover,  .nav-other-dark:hover{
        border-bottom: 3px solid #444444;
    }
    
    .nav-CTA{
        text-decoration: none;
        letter-spacing: .1rem;
        color: white;
        border: 2px solid white;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 400;
        padding: .5rem 2vw;
        transition: .2s;
    }
    
    .nav-CTA-2, .nav-CTA-dark-2{
    	display: none;
    }
    
    .nav-CTA:hover{
        color: #7C2053;
        background-color: white;
        font-weight: 600;
    }
    
    header.scrolled .nav-CTA,  .nav-CTA-dark{
        color: #7C2053;
        border: 2px solid #7C2053;
        transition: .2s;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: .1rem;
        border-radius: 4px;
        font-size: 1rem;
        padding: .5rem 2vw;
    }
    
    header.scrolled .nav-CTA:hover,  .nav-CTA-dark:hover{
        color: white;
        background-color: #7C2053;
    }

    .openprof i{
        font-size: 1.15rem;
    }
    
    .opennav i{
        font-size: 1.35rem;
        cursor: pointer;
    }
    
    /*Navigation Bar for Other pages*/
    .navbar{
        background-color: white;
        width: 100%;
        z-index: 4;
        display: flex;
        justify-content: space-between;
        padding: 3vh 0;
        position: sticky;
        top:0;
        box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
    }
    
    .navbar ul li{
        display: inline-block;
        list-style: none;
        margin: 0 .8vw 0vh 0vw;
    }

    .openprof-dark i{
        font-size: 1.15rem;
        color: #444444;
        cursor: pointer;
    }
    
    .opennav-dark i{
        font-size: 1.35rem;
        color: #444444;
        cursor: pointer;
    }
    
   /* Navbar Hamburger*/
    .hamburger{
   		display: none;
    }
    
    .hamburger-dark{
   		display: none;
    }
   
    .hamburger div{
   		width: 30px;
   		height: 3px;
   		margin: 6px 0;
   		background: white;
    }
    
    .hamburger-dark div{
   		width: 30px;
   		height: 3px;
   		margin: 6px 0;
   		background: #7C2053;
    }
   
    .menu-overlay-bg{
    	display: none;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
	  	position: fixed;
    	z-index: 3;
	  	background-color: #00000040;
    }
    
    .menu-overlay{
	  	width: 24vw;
	  	position: fixed;
	  	z-index: 4;
	  	height: 100%;
	  	top: 0;
	  	right: -25vw;
	  	background-color: white;
	  	overflow-x: hidden;
	  	transition: 0.15s;
	  	padding: 1vh 0 3vh 1vw;
	}
	
	.menu-list{
		padding-top: 4vh;
	}
	
	.menu-list a {
	  	padding: 2vh 2vw;
	  	text-decoration: none;
	  	font-size: 1rem;
	  	color: #444444;
	  	display: block;
	  	transition: 0.2s;
	}
	
	.menu-list a:hover {
	  	margin-left:5px;
	  	color: #7C2053;
	  	font-weight: 500;
	}
	
	.menu-overlay i {
		position: absolute;
		right: 0;
        font-size: 1.4rem;
        color: #444444;
        text-align: right;
        padding: 1.5vh 1.5vw ;
	  	transition: 0.2s;
	}
	
	.menu-overlay i:hover{
	  	color: #7C2053;
	  	cursor: pointer;
	}	

    .logo-home{
        text-decoration: none;
    }

    .logo-home img{
        height: 1.4rem;
        margin-left: 1.5vw;
    }
    
    /*Footer*/
    .footer{
        background-color: #59173c;
        width: 100%;
        padding: 8vh 0;
        height: auto;
        font-size: 0.8rem;
        font-weight: 300;
    }
    
    .footer-cont{
    	margin: 0 0 0 8vw;
    }

    .footer-row{
    	display: flex;
    	flex-wrap: wrap;
    }
    
    .footer-col{
    	width: 21%;
    }
    
    .footer-col:not(:last-child){
    	margin-right: 11vw;
    }
    
    .footer-col h4{
    	color: white;
    	font-size: 0.9rem;
    	font-weight: 500;
    	margin-bottom: 3vh;
    	padding-bottom: 3vh;
    	border-bottom: 5px solid #a42b6d;
    }
    
    .footer-col ul{
    	list-style: none;
    }
    
    .footer-col ul li{
    	margin-bottom: 1.6vh;
    }
    
    .footer-col ul li a{
    	text-decoration: none;
    	color: white;
		color: #ffffff70;
    	font-size: 0.9rem;
    	font-weight: 200;
    	display: block;
    	transition: .2s ease;
    }
    
    .footer-col ul li a:hover{
		color: #ffffff;
    	margin-left: 5px;
    	font-weight: 250;
    }
    
    .footer-social a{
    	text-decoration: none;
    	color: white;
    	background-color: #ffffff30;
    	width: 3vw;
    	line-height: 3vw;
    	text-align: center;
    	align-items: center;
    	border: none;
    	border-radius: 1.5vw;
    	font-size: 1rem;
    	font-weight: 300;
    	display: inline-block;
    	margin-right: 8px;
    	transition: .2s ease;
    }
    
    .footer-social a:hover{
    	background-color: #ffffff;
    	color: #a42b6d;
    	font-weight: 400;
    }
    
    .footer-cont p{
    	margin-top: 4vh;
    	margin-left: -8vw;
    	color: white;
    	opacity: .7;
    	text-align: center;
    }
}

/*Home Page*/
@media only screen and (max-width: 780px) {
	
	.main-cover{
        display: flex;
        flex-direction: column;
        animation: fade-out linear;
        animation-timeline: view();
        animation-range-end: exit 50vh forwards;
        padding: 64vh 7vw 0;
        text-align: center;
    }

    .main-cover h1{
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 2.4rem;
        text-transform: uppercase;
        color: white;
    }

    .main-cover h2{
        font-weight: 300;
        margin-top: 1.5vh;
        color: white;
        opacity: .7;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .main-cover a{
        margin-top: 3vh;
        width: 50vw;
        border-radius: 4vh;
        background-color: #CB60AD;
        border: none;
        text-align: center;
        /*background-image: linear-gradient(to right, #8F397D, #CB60AD);*/
        text-decoration: none;
        color: white;
        padding: 1.8vh 0;
        font-size: 1rem;
        letter-spacing: 0.5px;
        font-weight: 500;
        transition: .15s linear;
        margin-left: 18vw;
    }

    .main-cover a:hover{
        transform: scale(1.05);
    }
    
    
/*USPs*/
    .page-title{
        color: #7C2053;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 800;
        animation: fade-in linear;
        animation-timeline: view();
        animation-range-end: 50vh;
        margin-bottom: 2vh;
    }

    .home-section-usp{
        display: flex;
        flex-direction: column;
        margin: 0 0 12vh 5vw;
        align-content:center;
    }
    
    .usp-home{
        background-color: white;
        height: auto;
        display: flex;
        flex-direction : column;
    }

    .usp-card{
        background-color: white;
        border-radius: 2vh;
        width: 80vw;
        height: auto;
        margin-left: 2vw;
        transition: transform .15s linear;
        text-align: center;
        display: flex;
        flex-direction : row;
        animation: fade-in linear;
        animation-timeline: view();
        animation-range-end: 30vh;
    }

    .usp-card:hover{
        transform: scale(1.02);
    }
    
    .usp-text{
        display: flex;
        flex-direction : column;
        text-align: left;
    }

    .usp-card img{
        height: 6vh;
        margin-top: 2vh;
    }

    .usp-card h4{
        font-size: 0.85rem;
        font-family: "Inter";
        color: #444444;
        font-weight: 800;
        margin: 2vh 3vw 0vh 3vw;
    }

    .usp-card p{
        font-size: 0.8rem;
        line-height: 1.2rem;
        font-family: "Inter";
        color: #444444;
        font-weight: 500;
        margin: .5vh 3vw 3vh 3vw;
    }    
    
/*How it Works*/
    .home-section-working{
    	background-color: white; /*CHANGE TO IMAGE*/
    	width: 100%;
    	height: auto;
    	padding: 0 0 14vh;
    	margin-top: 2vh;
    }
    
    .home-section-working a{
    	display: block;
    	margin: auto;
        width: 40vw;
        border-radius: 4vh;
        box-shadow: inset 0.5vh 0.5vw 1.2vh rgba(255, 255, 255, 0.2), inset -0.5vh -0.8vw 1.2vh rgba(0, 0, 0, 0.2);
        border: none;
        text-align: center;
        background-color: #7C2053;
        text-decoration: none;
        color: white;
        padding: 2vh 0;
        font-size: 1rem;
        letter-spacing: 0.5px;
        font-weight: 600;
        transition: .15s linear;
    }
    
    .home-section-working a:hover{
    	transform: scale(1.05);
    }
    
    .working-content{
    	display: flex;
        flex-direction: column;
    	align-items: center;
    	margin-bottom: 2vh;
    }
    
    .working-row{
    	display: flex;
    	flex-direction: row;
        justify-content: space-between;
    }
    
    .working-card{
    	display: flex;
        flex-direction: column;
    	width: 40vw;
    	height: auto;
    	text-align: center;
        animation: fade-in linear;
        animation-timeline: view();
        animation-range-end: 30vh;
        transition: .15s ease;
        margin: 0 2vw 3vh;
    }
    
    .working-card img{
    	display: block;
    	margin: 2vh auto;
    	height: 30vw;
    	width: 30vw;
    }
    
    .working-card h4{
    	color: #8F397D;
    	font-size: .8rem;
    	font-weight: 700;
    	margin: 1.5vh 0;
    }
    
    .working-card p{
    	text-align: justified;
    	color: #444444;
    	font-size: .8rem;
    	font-weight: 500;
    }
    
    /* Testimonials section*/
    
}

@media only screen and (min-width: 781px){    
    .main-cover{
        display: flex;
        flex-direction: column;
        animation: fade-out linear;
        animation-timeline: view();
        animation-range-end: exit 20vh forwards;
        padding-top: 28vh;
        margin-left: 5vw;
        font-family: "Inter";
    }

    .main-cover h1{
        font-size: 3.2rem;
        font-weight: 600;
        line-height: 4.5rem;
        color: white;
    }

    .main-cover h2{
        font-weight: 400;
        margin-top: 1vh;
        color: white;
        opacity: .8;
        font-size: 1rem;
    }

    .main-cover a{
        margin-top: 6vh;
        width: 15vw;
        border-radius: 4vh;
        box-shadow: inset 0.5vh 0.5vw 1.2vh rgba(255, 255, 255, 0.2), inset -0.5vh -0.8vw 1.2vh rgba(0, 0, 0, 0.2);
        /*background-color: #7C2053;*/
        border: none;
        text-align: center;
        background-image: linear-gradient(to right, #8F397D, #CB60AD);
        text-decoration: none;
        color: white;
        padding-top: 2vh;
        padding-bottom: 2vh;
        font-size: 1rem;
        letter-spacing: 0.5px;
        font-weight: 600;
        transition: .15s linear;
    }

    .main-cover a:hover{
        transform: scale(1.05);
    }

    /*USPs*/
    .page-title{
        color: #7C2053;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 800;
        font-family: "Inter";
        animation: fade-in linear;
        animation-timeline: view();
        animation-range-end: 50vh;
    }

    .home-section-usp{
        display: flex;
        flex-direction: column;
        margin: 8vh 0 15vh 5vw;
        align-content:center;
    }
    
    .usp-home{
        background-color: white;
        height: 20vh;
        display: flex;
        flex-direction : row;
    }

    .usp-card{
        background-color: white;
        border-radius: 2vh;
        width: 28vw;
        height: 18vh;
        margin-left: 2vw;
        transition: transform .15s linear;
        text-align: center;
        display: flex;
        flex-direction : row;
        animation: fade-in linear;
        animation-timeline: view();
        animation-range-end: 30vh;
        /* box-shadow: inset 1vw 1vh 1vh rgba(255, 255, 255, 0.3), inset -1vw -1vh 1vh rgba(0, 0, 0, 0.03), 1vw 1vh 1vh rgba(0, 0, 0, 0.05); */
    }

    .usp-card:hover{
        transform: scale(1.02);
    }
    
    .usp-text{
        display: flex;
        flex-direction : column;
        text-align: left;
    }

    .usp-card img{
        height: 9vh;
        margin-top: 1vh;
    }

    .usp-card h4{
        font-size: .9rem;
        font-family: "Inter";
        color: #444444;
        font-weight: 800;
        margin: 1.5vh 2vw 0vh 2vw;
    }

    .usp-card p{
        font-size: 0.8rem;
        line-height: 1.3rem;
        font-family: "Inter";
        color: #444444;
        font-weight: 500;
        margin: 1vh 2vw 0vh 2vw;
        /* text-align: start; */
    }
    
    /*How it Works*/
    .home-section-working{
    	background-color: white; /*CHANGE TO IMAGE*/
    	width: 78vw;
    	height: auto;
    	padding: 5vh 8vw 26vh;
    }
    
    .working-content{
    	display: flex;
        flex-direction: row;
        justify-content: space-between;
    	align-items: center;
    }
    
    .home-section-working a{
    	display: block;
    	margin: auto;
        width: 15vw;
        border-radius: 4vh;
        box-shadow: inset 0.5vh 0.5vw 1.2vh rgba(255, 255, 255, 0.2), inset -0.5vh -0.8vw 1.2vh rgba(0, 0, 0, 0.2);
        border: none;
        text-align: center;
        background-color: #7C2053;
        text-decoration: none;
        color: white;
        padding-top: 2vh;
        padding-bottom: 2vh;
        font-size: .9rem;
        letter-spacing: 0.5px;
        font-weight: 600;
        transition: .15s linear;
    }
    
    .home-section-working a:hover{
    	transform: scale(1.05);
    }
    
    .working-row{
    	display: flex;
    	flex-direction: row;
    }
    
    .working-card{
    	display: flex;
        flex-direction: column;
    	width: auto;
    	height: auto;
    	text-align: center;
    	margin-left: 3.5vw;
    	margin-bottom: 8vh;
        animation: fade-in linear;
        animation-timeline: view();
        animation-range-end: 30vh;
        transition: .15s ease;
    }
    
    .working-card img{
    	margin: 2vh 2vw 5vh;
    	height: 12vw;
    	width: 12vw;
    }
    
    .working-card h4{
    	color: #8F397D;
    	font-size: .9rem;
    	font-weight: 700;
    	margin-bottom: 1.5vh;
    }
    
    .working-card p{
    	text-align: justified;
    	color: #444444;
    	font-size: .8rem;
    	font-weight: 500;
    }
    
    /* Testimonials */
    
    .home-section-testimonial {
	  margin: 0;
	  padding: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 90vh;
	}
	
    .testimonial-content {
	    width: 80%;
	    padding: 5vh 5%;
	    height: 70vh;
	    position: relative;
	    overflow: hidden;
	}
	
	.card {
	    width: 30%;
	    height: 35%;
	    color: #444444;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 10px;
	    position: absolute;
	    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	    cursor: pointer;
	    user-select: none;
	    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
	}
	
	.card1 {
		background-color: #efdff9;
	}
	
	.card2 {
		background-color: #dcc0ec;
	}
	
	.card3 {
		background-color: #e7d0f5;
	}
	
	.card4 {
		background-color: #dcc0ec;
	}
	
	.card5 {
		background-color: #e7d0f5;
	}
	
	.card6 {
		background-color: #efdff9;
	}
	
	.testimonial-card-user img{
		height: 20px;
		width: 20px;
		border: none;
		border-radius: 50%;
	}
}

/*Test Generator Page*/
@media only screen and (max-width: 780px){
	
	.paid-test-modal {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
    }
        
    .paid-test-content {
        background: white;
        width: 75%;
        padding: 25px 25px 35px;
        border: none;
        border-radius: 4px;
        text-align: center;
    }
        
    .paid-test-content h3{
        font-size: 1.4rem;
        margin: 10px 0 ;
        color: #7C2053;
        font-weight: 700;
    }
        
    .paid-test-content p {
        margin: 2vh 3vw 1vh;
        font-size: .9rem;
        color: #444444;
        font-weight: 500;
    }
    
    .modal-button-section{
        display: inline-block;
        justify-content: space-between;
        margin-top: 3vh;
    }
    
    .test-tabs {
        overflow: hidden;
    }

    .test-tabs button {
        background-color: #7C2053;
        float: left;
        border: none;
        border-right: 1px solid #8F397D;
        outline: none;
        cursor: pointer;
        text-align: center;
        transition: 0.3s;
        padding: 1.5vh 0;
        font-size: .6rem;
        font-weight: 500;
        color: white;
        width: 20%;
    }

    .test-tabs button.active {
        background-color: white;
        border: 1px solid white;
        color: #424242;
    }

    .tabContent {
        height: 100%;
        display: flex;
        flex-direction: column;
    }


    .tabContent p{
        margin: 2vh 0;
        text-align: left;
        font-weight: 500;
        font-size: .7rem;
        color: #444444;
    }
    
    .ChapterTabcontent p{
        margin: 2vh 3vw;
        text-align: left;
        font-weight: 500;
        font-size: .7rem;
        color: #444444;
    }

    .sub-tabs {
        float: left;
        vertical-align: middle;
        width: 100%;
    }

    .sub-tabs button {
        float: left;
        background-color:#f1f1f1;
        padding: 1.5vh 0;
        width: 25%;
        outline: none;
        border: none;
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
        font-size: .6rem;
        color: #424242;
    }

    .sub-tabs button:hover {
        background-color: rgb(234, 234, 234);
    }

    .sub-tabs button.active {
        border: none;
        font-weight: 500;
        background-color: rgb(234, 234, 234);
        border-bottom: 4px solid #7C2053;
    }

    .ChapterTabcontent {
        float: left;
        margin: 0vh 0vw 3vh;
    }

    .ChapterTabcontent h4{
        margin: 3vh 1vw 1vh;
        font-weight: 700;
        font-size: .6rem;
        color: #F47316;
    }

    .chapter-table{
        text-align: center;
        width: 94vw;
        border-collapse: collapse;
        margin-left: 3vw;
    }

    .chapter-table th{
        height: 8vw;
        background-color: #7C2053;
        color: white;
        font-size: .6rem;
    }

    .chapter-table td{
        height: 8vw;
        font-size: .6rem;
        line-height: 1rem;
    }
    
    .chapter-table tr{
        border-bottom: 1px solid #cacaca;
    }

    .chapter-table button{
        background-color: #8F397D;
        border: none;
        color: #ffffff;
        width: 2.8rem;
        line-height: 2rem;
        cursor: pointer;
        font-weight: 600;
        transition: .3s ease;
        font-size: .6rem;
    }
    
    #chapter-name{
        text-align: left;
        padding: 1vh 4vw;
    }
    
    #chapter-name img, .test-name img{
    	width: 2rem;
    	margin-left: 2vw;
    }

    .ModuleTabcontent {
        float: left;
        margin: 0vh 0vw 3vh 3vw;
    }

    .ModuleTabcontent h4{
        margin: 3.2vh 1vw 1vh;
        font-weight: 700;
        font-size: .7rem;
        color: #7C2053;
    }

    .module-table{
        text-align: center;
        width: 94vw;
        border-collapse: collapse;
    }

    .module-table th{
        height: 7vw;
        background-color: #7C2053;
        color: white;
        font-size: 2.2vw;
    }

    .module-table td{
        height: auto;
        font-size: 2.2vw;
        vertical-align: top;
        padding: 1.5vh 0;
    }
    
    .module-table tr{
        border-bottom: 1px solid #cacaca;
    }

    .module-table button{
        border: none;
        background-color: #8F397D;
        color: #ffffff;
        width: 2.8rem;
        line-height: 2rem;
        cursor: pointer;
        font-weight: 600;
        transition: .3s ease;
        font-size: 2.2vw;
    }
    
    .modue-chapter-list{
    	list-style-position: inside;
    	font-size: .6rem;
    	line-height: .8rem;
    	color: #8F8F8F;
    	margin-left: 1vw;
    }
    
    .module-chaps{
    	font-size: 1.8vw;
    	color: #8F8F8F;
    	margin-top: .5vw;
    }

    #module-name{
        text-align: left;
        padding: 1vh 2vw;
    }
    
    #module-name img{
    	width: 10px;
    }

    .custom-form{
        margin: 4vh 4vw;        
    }

    .custom-form label{
        color: #444444;
        font-weight: 600;
        font-size: .7rem;
    }
    .custom-table-1{
    	
    	border: none;
    	text-align: left;
    }
    
    .custom-table-1 th{
        width: 40vw;
    }    
    
    .custom-table-1 td{
        width: 40vw;
    	padding: 1vh 0;
    }

    .custom-table-1 th label{
        color: #444444;
        font-weight: 600;
        font-size: .7rem;
    }

    .custom-table-1 td input{
        background-color: white;
        width: 40vw;
        padding: 1vh 1vw;
        border-radius: 1vh;
        border-color: #9c9c9c;
        border-width: 1px;
        font-size: .7rem;
        color: #444444;
    }

    .custom-table-1 td select{
        background-color: white;
        width: 42vw;
        padding: 1vh 1vw;
        border-radius: 1vh;
        border-color: #9c9c9c;
        border-width: 1px;
        font-size: .7rem;
        color: #444444;
    }

    .custom-table{
        margin: 5vh 0vw 3vh 0vw; 
        text-align: left;
    }

    .custom-table th{
        color: #444444;
        font-weight: 600;
        width: 18vw;
        font-size: .7rem;
    }

    .custom-table th{
    	padding: 1vh 0;
    }

    .custom-table input{
        width: 80%;
        font-size: .7rem;
        margin: 0 0 0 0;
        padding: 1vh 1vw;
        border: 1px solid #444444;
    }

    .custom-table input:read-only{
        background-color: #f8f8f8;
        border: 1px solid #cacaca;
    }

    .custom-table-heading th{
        color: #443D8B;
        font-size: .7rem;
        text-align: center;
        
    }

    .custom-button{
    	display: block;
        border: none;
        background-color: #7C2053;
        color: white;
        width: 50vw;
        line-height: 3rem;
        cursor: pointer;
        font-weight: 600;
        font-size: .7rem;
        transition: .3s ease;
        margin: 2vh auto 0;
    }
    
    #table-heading{
        margin: 3.2vh 1vw 1vh 5vw;
        font-weight: 700;
        font-size: .7rem;
        color: #7C2053;
    }
    
    .full-portion-table{
        text-align: center;
        width: 94vw;
        margin-left: 3vw;
        border-collapse: collapse;
    }

    .full-portion-table th{
        height: 8vw;
        background-color: #7C2053;
        color: white;
        font-size: .6rem;
    }

    .full-portion-table td{
        height: 8vw;
        font-size: .6rem;
    }
    
    .full-portion-table tr{
        border-bottom: 1px solid #cacaca;
    }

    .full-portion-table button{
        border: none;
        background-color: #8F397D;
        color: #ffffff;
        width: 2.8rem;
        line-height: 2rem;
        cursor: pointer;
        font-weight: 600;
        transition: .3s ease;
        font-size: 2.2vw;
    }
    .test-name{
        text-align: left;
        padding: 1vh 4vw;
    }
    
    .toggleTabs{
    	display: flex;
        justify-content: center;
        margin: 2vh 0;;
    }
    
    .toggle-button{
      padding: 1.2vh 8vw;
      background-color: #f1f1f1;
      border: none;
      font-size: .6rem;
      font-weight: 600;
      color: #444444;
      transition: background-color 0.2s;
    }
    
    .toggle-button.active {
      background-color: #7C2053;
      color: white;
      font-weight: 500;
    }
    
    .toggle-content {
      display: none;
    }

    .toggle-content.active {
      display: block;
    }
    
    
    /*Pre-test Modal*/
    .pre-test-modal {
	    display: none;
	    position: fixed;
	    z-index: 100;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%; /* Ensure the modal covers the entire screen */
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: rgba(0, 0, 0, 0.5); /* Optional: dark overlay */
	    overflow-y: auto; /* Allow the modal to scroll if the content overflows */
	}
	
	.pre-test-content {
	    padding: 2vh 5vw 4vh;
	    background-color: white;
	    width: 90%;
	    max-height: 85vh; /* Max height of the content */
	    overflow-y: auto; /* Enable scrolling for content */
	    box-sizing: border-box; /* Include padding in the width calculation */
	    margin-bottom: 20px; /* Ensure space between the content and the "Start Test" button */
	}

	.modal-close{
		color: #444444;
	    float: right;
	    font-size: 2rem;
		font-weight: 300;
		margin-right: -3vw;
	}
    
    .pre-test-content h2{
    	font-size: 1.1rem;
    	color: #7C2053;
    	font-weight: 700;
    	text-align: center;
    	margin-top: 3vh;
    }
    
    .pre-test-content p{
    	font-size: .8rem;
    	color: #363636;
    	font-weight: 600;
    	text-align: center;
    	margin: 0 0 1.5vh;
    }
    
    .pre-test-content ol{
    	margin: 1.5vh 0 1.5vh 5vw;
    }
    
    .pre-test-content ol li{
    	font-size: .85rem;
    	line-height: 1.5rem;
    	color: #444444;
    	font-weight: 400;
    	text-align: left;
    }
    
    .pre-test-buttons{
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	gap: 12px;
    	margin-top: 3vh;
    }
    
    .pre-test-buttons a{
		border: none;
		padding: 1.6vh 1.5vw;
		border-radius: 3vh;
		background-color: #7C2053;
		color: white;
		transition: .2s;
		font-weight: 550;
		text-decoration: none;
		text-align: center;
    }
    
    .pre-test-legend{
    	width: 100%;
    	background-color: #F9F9F9;
    	border-radius: 1vh;
    	margin-bottom: 2vh;
    	padding: 2vh 0;
    }
    
    .pre-test-legend-row{
    	font-size: .8rem;
    	line-height: 1.6rem;
    	color: #444444;
    	font-weight: 400;
    	text-align: left;
    }
    
    .not-visited{
    	width: .8rem;
    	height: .8rem;
    	background-color: #cacaca;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 5vw;
    }
    
    .attempted{
    	width: .8rem;
    	height: .8rem;
    	background-color: #bcf3c6;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 12.6vw;
    }
    
    .unattempted{
    	width: .8rem;
    	height: .8rem;
    	background-color: #dd8692;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 5vw;
    }
    
    .review-color{
    	width: .8rem;
    	height: .8rem;
    	background-color: #cca4d4;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 9.2vw;
    }
    
    .close-modal {
	  color: #444444;
	  float: right;
	  font-size: 2rem;
	  font-weight: 500;
	  cursor: pointer;
	}
}

@media only screen and (min-width: 781px){ 
	
	.paid-test-modal {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
    }
        
    .paid-test-content {
        background: white;
        width: 30%;
        padding: 25px 25px 35px;
        border: none;
        border-radius: 4px;
        text-align: center;
    }
        
    .paid-test-content h3{
        font-size: 1.4rem;
        margin: 10px 0 ;
        color: #7C2053;
        font-weight: 700;
    }
        
    .paid-test-content p {
        margin: 2vh 3vw 1vh;
        font-size: .9rem;
        color: #444444;
        font-weight: 500;
    }
    
    .modal-button-section{
        display: inline-block;
        justify-content: space-between;
        margin-top: 3vh;
    }
        
    .test-tabs {
        overflow: hidden;
        background-color: #f1f1f1;
        position: sticky;
        top: 8vh;
        z-index: 3;
    }
    
    .test-tabs button {
        background-color: #7C2053;
        float: left;
        border: none;
        border-right: 1px solid #8F397D;
        outline: none;
        cursor: pointer;
        text-align: center;
        padding: 2.2vh 0;
        transition: 0.3s;
        font-size: .95rem;
        font-weight: 600;
        color: white;
        width: 20%;
    }

    .test-tabs button:hover {
        background-color: #59173c;
    }

    .test-tabs button.active {
        background-color: white;
        border: 1px solid white;
        color: #424242;
    }

    .tabContent {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .tabContent p{
        margin: 2vh 5vw;
        text-align: left;
        font-weight: 500;
        font-size: .9rem;
        color: #444444;
    }

    .sub-tabs {
        float: left;
        vertical-align: middle;
        width: 100%;
        position: sticky;
        top: 15vh;
        z-index: 2;
    }

    .sub-tabs button {
        float: left;
        background-color: #f1f1f1;
        padding: 2vh 0 2vh 0;
        width: 25%;
        outline: none;
        border: none;
        text-align: center;
        cursor: pointer;
        font-size: .95rem;
        color: #424242;
    }

    .sub-tabs button:hover {
        background-color: rgb(240, 240, 240);
    }

    .sub-tabs button.active {
        border: none;
        font-weight: 500;
        background-color: rgb(240, 240, 240);
        border-bottom: 4px solid #7C2053;
    }

    .ChapterTabcontent {
        float: left;
        margin: 0vh 0vw 4vh;
    }

    .ChapterTabcontent h4{
        margin: 3vh 42vw 2vh;
        padding: 1vh 1vw;
        text-align: center;
        width: 6vw;
        font-weight: 700;
        font-size: 1.05rem;
        color: white;
        background-color: #9D4174;
        border: none;
        border-radius: 4vh;
    }

    .ChapterTabcontent p{
        margin: 3vh 5vw 2vh;
        text-align: left;
        font-weight: 500;
        font-size: .9rem;
        color: #444444;
    }
	
	.toggle-content{
		padding: 0 5vw;
	}
	
    .chapter-table{
        text-align: center;
        width: 90vw;
        border-collapse: collapse;
    }

    .chapter-table th{
        background-color: #59173c;
        color: white;
        height: 2.6rem;
        font-size: .9rem;
    }

    .chapter-table td{
        height: 2.6rem;
        font-size: .9rem;
    }
    
    .chapter-table tr{
        border: 1px solid #cacaca;
    }

    .chapter-table tr:hover{
        background-color: rgb(223,223,223);
    }

    .chapter-table button{
        border: 1px solid #7C2053;
        background-color: transparent;
        color: #7C2053;
        padding: 0.6vh 0;
        width: 70px;
        cursor: pointer;
        font-weight: 600;
        transition: .3s ease;
    }

    .chapter-table button:hover{
        background-color: #7C2053;
        color: white;
    }

    #chapter-name{
        text-align: left;
        padding-left: 1vw;
    }
    
    #chapter-name img, .test-name img{
    	width: 38px;
        padding-left: 6px;
    }

    .module-tabs {
        float: left;
        background-color: #f1f1f1;
        width: 10vw;
        height: 125vh;
    }

    .module-tabs button {
        display: block;
        background-color: transparent;
        padding: 2vh 2vw;
        width: 100%;
        border: 1px solid #e6e6e6;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 15px;
        font-weight: 500;
        color: #424242;
    }

    .module-tabs button:hover {
        background-color: #dadada;
    }

    .module-tabs button.active {
        background-color: #F8AA71;
        border: 1px solid #F8AA71;
        color: white;
    }

    .ModuleTabcontent {
        float: left;
        margin: 0vh 0vw 4vh 5vw;
    }

    .ModuleTabcontent h4{
        margin: 2vh 38vw 2vh;
        padding: 1.6vh 2vw;
        text-align: center;
        font-weight: 500;
        font-size: .95rem;
        color: white;
        background-color: #7C2053;
        border: none;
    }

    .ModuleTabcontent p{
        margin: 3vh 0 2vh;
        text-align: left;
        font-weight: 500;
        font-size: .9rem;
        color: #444444;
    }

    .module-table{
        text-align : center;
        width: 90vw;
        border-collapse: collapse;
        border-right: 1px solid #cacaca;
        border-left: 1px solid #cacaca;
    }

    .module-table th{
        height: 2.6rem;
        background-color: #59173c;
        color: white;
        font-size: .9rem;
    }

    .module-table td{
        height: auto;
        padding: 1.5vh 0 2vh;
        font-size: .9rem;
        vertical-align:top;
        color: #444444;
        font-weight: 500;
    }
    
    .module-table tr{
        border: 1px solid #cacaca;
    }

    .module-table tr:hover{
        background-color: rgb(223,223,223);
    }

    .module-table button{
        border: 1px solid #7C2053;
        background-color: transparent;
        color: #7C2053;
        padding: 0.6vh 2vw;
        cursor: pointer;
        font-weight: 600;
        transition: .3s ease;
    }

    .module-table button:hover{
        background-color: #7C2053;
        color: white;
    }
    
    .modue-chapter-list{
    	list-style-position: inside;
    	font-size: .85rem;
    	line-height: 1.3rem;
    	color: #444444;
    	opacity: .8;
    	margin-left: 1vw;
    }
    
    .modue-chapter-list:first-child{
    	margin-top: .5vw;
    }
    
    .module-chaps{
    	font-size: .95rem;
    	color: #8F8F8F;
    	margin-top: .7vh;
    }

    #module-name{
        text-align: left;
        padding-left: 1vw;
    }
    
    #module-name img{
    	width: 38px;
        padding-left: 6px;
    }

    .custom-form{
    	margin-top: 10vh;
        margin-left: 8vw;
    }

    .custom-form p{
        margin: 3vh 0 2vh;
        text-align: left;
        font-weight: 500;
        font-size: .9rem;
        color: #444444;
    }
    
    .custom-table-1{
    	border: none;
    	text-align: left;
    }
    
    .custom-table-1 th{
        width: 17vw;
    }    
    
    .custom-table-1 td{
        width: 60vw;
    	padding: 2vh 0;
    }

    .custom-table-1 th label{
        color: #444444;
        font-weight: 600;
        font-size: .9rem;
    }

    .custom-table-1 td input{
        background-color: white;
        width: 60vw;
        padding: 1vh 1vw;
        border-radius: 1vh;
        border-color: #9c9c9c;
        border-width: 1px;
        font-size: .9rem;
        color: #444444;
    }

    .custom-table-1 td select{
        background-color: white;
        width: 62vw;
        padding: 1vh 1vw;
        border-radius: 1vh;
        border-color: #9c9c9c;
        border-width: 1px;
        font-size: .9rem;
        color: #444444;
    }

    .custom-table{
        margin: 5vh 0vw 6vh 0vw; 
        text-align: left;
    }

    .custom-table th{
        color: #444444;
        width: 16vw;
        font-size: .9rem;
        font-weight: 600;
        border: none;
    }

    .custom-table input{
        width: 75%;
        font-size: .9rem;
        margin: 1vh 1vw 0vh 1vw;
        padding: 1vh 1vw;
        border: 1px solid #444444;
        border-radius: 1vh;
    }

    .custom-table input:read-only{
        background-color: #f8f8f8;
        border: 1px solid #cacaca;
    }

    .custom-table-heading th{
        color: #9D4174;
        text-align: center;
    }

    .custom-button{
    	display: block;
        border: 1px solid #7C2053;
        background-color: #7C2053;
        color: white;
		width: 24vw;
		line-height: 3rem;
        cursor: pointer;
        font-weight: 600;
        font-size: .9rem;
        transition: .3s ease;
        margin:4vh auto 0;
    }

    .custom-button:hover{
        scale: 1.05 ;
    }
    
    #table-heading{
        margin: 6vh 38vw 4vh;
        padding: 1.6vh 2vw;
        text-align: center;
        font-weight: 500;
        font-size: .95rem;
        color: white;
        background-color: #7C2053;
        border: none;
    }
    
    .full-portion-table{
        text-align: center;
        width: 90vw;
        border-collapse: collapse;
        margin-left: 5vw;
    }

    .full-portion-table th{
        height: 2.6rem;
        background-color: #59173c;
        color: white;
        font-size: .9rem;
    }

    .full-portion-table td{
        height: 2.6rem;
        font-size: .9rem;
    }
    
    .full-portion-table tr{
        border: 1px solid #cacaca;
    }

    .full-portion-table tr:hover{
        background-color: rgb(223,223,223);
    }

    .full-portion-table button{
        border: 1px solid #7C2053;
        background-color: transparent;
        color: #7C2053;
        padding: 0.6vh 2vw;
        cursor: pointer;
        font-weight: 600;
        transition: .3s ease;
    }

    .full-portion-table button:hover{
        background-color: #7C2053;
        color: white;
    }

    .test-name{
        text-align: left;
        padding-left: 1vw;
    }
    
    .toggleTabs{
    	display: flex;
        justify-content: center;
        margin: 2vh 0;;
    }
    
    .toggle-button{
      padding: 1.5vh 2vw;
      background-color: #f1f1f1;
      border: none;
      transition: background-color 0.2s;
    }
    
    .toggle-button.active {
      background-color: #7C2053;
      color: white;
    }
    
    .toggle-content {
      display: none;
    }

    .toggle-content.active {
      display: block;
    }
    
    
    /*Pre-test Modal*/
	  .pre-test-modal {
		  display: flex;
		  position: fixed;
		  z-index: 5;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  justify-content: center;
		  align-items: center;
		  overflow: auto;
		  background-color: rgba(0, 0, 0, 0.5);
		}
		    
		.pre-test-content {
		  padding: 2vh 5vw 5vh 5vw;
		  background-color: white;
		  max-height: 70vh;
		  overflow-y: auto;
		  margin: auto;
		  border: none;
		  border-radius: .5rem;
		}
	
	.modal-close{
		color: #444444;
	    float: right;
	    font-size: 2rem;
		font-weight: 300;
		margin-right: -3vw;
		cursor: pointer;
	}
    
    .pre-test-content h2{
    	font-size: 1.4rem;
    	color: #7C2053;
    	font-weight: 700;
    	text-align: center;
    	margin-top: 3vh;
    }
    
    .pre-test-content p{
    	font-size: .9rem;
    	color: #363636;
    	font-weight: 600;
    	text-align: center;
    	margin: 1vh 0 2vh;
    }
    
    .pre-test-content ol{
    	margin: 3vh 0;
    }
    
    .pre-test-content ol li{
    	font-size: .9rem;
    	line-height: 1.6rem;
    	color: #444444;
    	font-weight: 400;
    	text-align: left;
    }
    
    .pre-test-buttons{
    	display: flex;
    	justify-content: center;
    	gap: 12px;
    	margin-top: 3vh;
    }
    
    .pre-test-buttons a{
		border: none;
		padding: 1.6vh 1.5vw;
		border-radius: 3vh;
		background-color: #7C2053;
		color: white;
		transition: .2s;
		font-weight: 550;
		text-decoration: none;
		text-align: center;
    }
    
    .pre-test-buttons a:hover{
		transform: scale(1.05);
    }
    
    .pre-test-legend{
    	width: 100%;
    	background-color: #F9F9F9;
    	border-radius: 1vh;
    	margin-bottom: 3vh;
    	padding: 2vh 0;
    }
    
    .pre-test-legend-row{
    	font-size: .8rem;
    	line-height: 1.6rem;
    	color: #444444;
    	font-weight: 400;
    	text-align: left;
    }
    
    .not-visited{
    	width: .8rem;
    	height: .8rem;
    	background-color: #cacaca;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 3vw;
    }
    
    .attempted{
    	width: .8rem;
    	height: .8rem;
    	background-color: #bcf3c6;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 15vw;
    }
    
    .unattempted{
    	width: .8rem;
    	height: .8rem;
    	background-color: #dd8692;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 3vw;
    }
    
    .review-color{
    	width: .8rem;
    	height: .8rem;
    	background-color: #cca4d4;
    	border: none;
    	border-radius: 1rem;
    	margin: 0 1vw 1vh 14.2vw;
    }
    
    .close-modal {
	  color: #444444;
	  float: right;
	  font-size: 2rem;
	  font-weight: 500;
	  cursor: pointer;
	  margin-right: -2vw;
	}
}

/* Login Page */
@media only screen and (max-width: 780px){
	.signup-body{
		background-image: url(../project-req/images/bg-login-portrait.png);
        background-position: top right;
        background-size: cover;
        background-repeat: none;
	}
	
    .body-login{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        margin: 10vh 0;
        background-repeat: none;
        padding: 0 5vw;
    }
    
    .body-signup{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        margin: 10vh 0;
        background-repeat: none;
        padding: 0 5vw;        
    }

    .login-box{
        width: 100%;
        padding: 7vh 0 8vh;
        /* background-color: rgb(255,255,255,.2); */
        background: transparent;
        border: 1px solid rgb(255,255,255,.3);
        backdrop-filter: blur(7px);
        box-shadow: 0 0 2vw rgb(0,0,0,.2);
        color: white;
        align-content: center;
        text-align: center;
        border-radius: 4px;
    }

    .login-box h1{
        font-size: 1.6rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 5vh;
    }
    
    .password-container {
	    position: relative;
	    display: inline-block;
	    width: 100%;
	}
	
	.toggle-password-container {
	    position: absolute;
	    right: 11%;
	    top: 50%;
	    transform: translateY(-50%);
	    cursor: pointer;
	    font-size: 18px;
	    user-select: none;
	}

    .login-input input{
        width: 70%;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1.5vh 10vw 1.5vh 3vw;
        font-size: .8rem;
        color: white;
    }
    
	.login-input{
		margin-bottom: 2vh;
	}
	
    .login-input input::placeholder{
        color: rgb(255,255,255,.7);
        font-size: .8rem;
    }
    
    .link-to-signup{
        font-size: .75rem;
        line-height: 1.4rem;
        font-weight: 300;
    }

    .link-to-signup a{
        color: white;
    }
	
	.hr-lines{
		position: relative; /* Required for pseudo-elements to be positioned relative to the element */
        text-align: center;
        font-size: .8rem;
        font-weight: 300;
        opacity: .9;
        margin: 3vh 0;
	}
	
	.hr-lines:before {
      content: "";
      display: block;
      width: 25vw; /* Adjust as needed */
      height: .5px; /* Adjust as needed */
      background-color: #fff; /* Adjust as needed */
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translateY(-50%); /* Center the line vertically */
    }

    .hr-lines:after {
      content: "";
      display: block;
      width: 25vw; /* Adjust as needed */
      height: .5px; /* Adjust as needed */
      background-color: #fff; /* Adjust as needed */
      position: absolute;
      top: 50%;
      right: 15%;
      transform: translateY(-50%); /* Center the line vertically */
    }

    .button-login{
        color: #7C2053;
        border: none;
        border-radius: 3px;
        width: 69%;
        font-size: .95rem;
        padding: 1.4vh 0;
        font-weight: 700;
        background-color: white;
        cursor: pointer;
        vertical-align: top;
        transition: .2s;
        margin: 1.5vh 0 ;
    }

    .button-google{
        color: #7C2053;
        border: none;
        border-radius: 3px;
        width: 69%;
        font-size: .95rem;
        padding: 1.5vh 0;
        font-weight: 700;
        background-color: white;
        cursor: pointer;
        vertical-align: top;
        transition: .2s;
        margin: 1.5vh 0;
    }

    .button-google img{
        height: .95rem;
        margin-left: 3px;
        vertical-align: middle;
    }

    .signup-box{
        width: 100%;
        padding: 3vh 0;
        background: transparent;
        border: 1px solid rgb(255,255,255,.3);
        backdrop-filter: blur(7px);
        box-shadow: 0 0 2vw rgb(0,0,0,.2);
        color: white;
        align-content: center;
        text-align: center;
        border-radius: 4px;
    }

    .signup-box h1{
        font-size: 1.6rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 2vh;
    }
    
    .signup-input-small {
    	display: inline-box;
        margin-bottom:1.5vh;
    }
    
    .signup-input-small input{
        width: calc(80% - 110px);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1.5vh 2.2vw;
        font-size: .8rem;
        color: white;
    }
    
    .signup-input-small input::placeholder{
        color: rgb(255,255,255,.7);
        font-size: .8rem;
    }
    
    .signup-input-small button{
        width: 100px;
        background: white;
        border: none;
        border-radius: 3px;
        padding: 1.5vh 1vw;
        font-size: .8rem;
        color: #7C2053;
        margin-left: .5vw;
        font-weight: 600;
    }
    
    .signup-input-small button:hover{
        background-color: #dbd9eb;
    }    
    
    .signup-input{
        margin-bottom:2vh;
    }

    .signup-input input{
        width: 80%;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1.5vh 2.2vw;
        font-size: .8rem;
        color: white;
    }

    .signup-input input::placeholder{
        color: rgb(255,255,255,.7);
        font-size: .8rem;
    }

    .signup-input select{
        width: 85%;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1.5vh 2vw;
        font-size: .8rem;
        color: white;
        margin-bottom: 1vh;
    }
    
    .signup-input select option{
        color: #7C2053;
        font-weight: 600;
        font-size: .8rem;
    }
    
    .signup-checkbox{
    	margin-top: -1vh;
		padding: 0 0 3vh 8%;
		text-align: left;
	}
	
    .checkbox-wrapper-44 input[type="checkbox"] {
	    display: none;
	    visibility: hidden;
	}

	.checkbox-wrapper-44 label {
	    display: inline-block;
	}

	.checkbox-wrapper-44 .check {
	    cursor: pointer;
	    position: relative;
	    margin: 0;
	    width: 18px;
	    height: 18px;
	    -webkit-tap-highlight-color: transparent;
	    transform: translate3d(0, 0, 0);
	}
  .checkbox-wrapper-44 .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #fff;
    stroke-width: 1;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
  }
  .checkbox-wrapper-44 .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-44 .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
  }
  .checkbox-wrapper-44 .check:hover:before {
    opacity: 1;
  }
  .checkbox-wrapper-44 .check:hover svg {
    stroke: #fff;
  }
  .checkbox-wrapper-44 input[type="checkbox"]:checked + .check svg {
    stroke: #fff;
  }
  .checkbox-wrapper-44 input[type="checkbox"]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }
  .checkbox-wrapper-44 input[type="checkbox"]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
	
	.signup-checkbox-label{
		line-height: 18px;
		vertical-align: top;
		font-size: .8rem;
		color: #fff;
		margin-left: 5px;
	}
}

@media only screen and (min-width: 781px){
	.signup-body{
		background-image: url(../project-req/images/bg-login-landscape.png);
        background-position: top right;
        background-size: cover;
        background-repeat: none;
	}
	
    .body-login{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        margin: 10vh 0;
        padding: 0 35vw;        
    }
    
    .body-signup{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        margin: 10vh 0;
        padding: 0 25vw;        
    }
    
    .login-box{
        width: 100%;
        padding: 7vh 0;
        /* background-color: rgb(255,255,255,.2); */
        background: transparent;
        border-radius: 4px;
        border: 1px solid rgb(255,255,255,.3);
        backdrop-filter: blur(7px);
        box-shadow: 0 0 2vw rgb(0,0,0,.2);
        color: white;
        align-content: center;
        text-align: center;
    }

    .login-box h1{
        font-size: 1.6rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 6vh;
    }
    
    .password-container {
	    position: relative;
	    display: inline-block;
	    width: 100%;
	}
	
	.toggle-password-container {
	    position: absolute;
	    right: 21%;
	    top: 50%;
	    transform: translateY(-50%);
	    cursor: pointer;
	    font-size: 18px;
	    user-select: none;
	}

    .login-input input{
        width: 50%;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1.4vh 3vw 1.4vh 1vw;
        font-size: .9rem;
        color: white;
    }
	.login-input{
		margin-bottom: 1vh;
	}
    .login-input input::placeholder{
        color: rgb(255,255,255,.7);
        font-size: .9rem;
    }

    .form-options{
        display: flex;
        justify-content: space-between;
        font-size: .8rem;
        margin: -1.5vh 6vw 5vh 26vw;
    }

    .form-options label input{
        accent-color: white;
        margin-right: 5px;
    }

    .form-options a{
        color: white;
        text-decoration: underline;
    }
    
    .link-to-signup{
        font-size: .8rem;
        line-height: 1.4rem;
        font-weight: 300;
    }

    .link-to-signup a{
        color: white;
    }
	
	.hr-lines{
		position: relative; /* Required for pseudo-elements to be positioned relative to the element */
        text-align: center;
        font-size: .8rem;
        font-weight: 300;
        opacity: .9;
        margin: 4vh 0 3vh;
	}
	
	.hr-lines:before {
      content: "";
      display: block;
      width: 7vw; /* Adjust as needed */
      height: .5px; /* Adjust as needed */
      background-color: #fff; /* Adjust as needed */
      position: absolute;
      top: 50%;
      left: 20%;
      transform: translateY(-50%); /* Center the line vertically */
    }

    .hr-lines:after {
      content: "";
      display: block;
      width: 7vw; /* Adjust as needed */
      height: .5px; /* Adjust as needed */
      background-color: #fff; /* Adjust as needed */
      position: absolute;
      top: 50%;
      right: 20%;
      transform: translateY(-50%); /* Center the line vertically */
    }
    
    
    .submit-buttons{
    	margin: 0 auto;
    	display: flex;
    	flex-direction: column;
    	width: 64%;
    	
    }
    
    .submit-buttons a{
    	text-decoration: none;
        color: rgb(255,255,255,.7);
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 1.4vh 3vw;
        font-size: .8rem;
        font-weight: 400;
        background: none;
        cursor: pointer;
        vertical-align: top;
        transition: .2s;
    }
    
    .submit-buttons a:hover{
        color: rgb(255,255,255);
        border: 1px solid rgba(255, 255, 255);
    }

    .button-login{
        color: #7C2053;
        border: none;
        padding: 1.4vh 3vw;
        font-size: .9rem;
        font-weight: 700;
        border-radius: 2px;
        background-color: #ffffff;
        cursor: pointer;
        vertical-align: top;
        transition: .2s;
    }

    .button-login:hover{
		opacity: .8;
    }

    .button-google{
        color: #7C2053;
        border: none;
        padding: 1.4vh 3vw;
        font-size: .9rem;
        font-weight: 700;
        background-color: #ffffff;
        cursor: pointer;
        border-radius: 2px;
        vertical-align: top;
        transition: .2s;
        margin: 2.5vh 0;
        
    }
    
    .button-google:hover{
		opacity: .8;
    }

    .button-google img{
        height: .9rem;
        vertical-align: middle;
        margin-left: 6px;
    }

    .signup-box{
        width: 100%;
        padding: 3vh 0 4vh;
        /* background-color: rgb(255,255,255,.2); */
        background: transparent;
        border: 1px solid rgb(255,255,255,.3);
        border-radius: 4px;
        backdrop-filter: blur(7px);
        box-shadow: 0 0 2vw rgb(0,0,0,.2);
        color: white;
        align-content: center;
        text-align: center;
    }

    .signup-box h1{
        font-size: 1.6rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 3vh;
    }
    
    .signup-input-small {
    	display: inline-box;
        margin-bottom:1vh;
    }
    
    .signup-input-small input{
        width: calc(60% - 134px);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1vh 1vw;
        font-size: .9rem;
        color: white;
    }
    
    .signup-input-small input::placeholder{
        color: rgb(255,255,255,.7);
        font-size: .9rem;
    }
    
    .signup-input-small button{
        width: 120px;
        background: white;
        border: none;
        border-radius: 3px;
        padding: 1vh 1vw;
        font-size: .8rem;
        color: #7C2053;
        margin-left: .5vw;
        cursor: pointer;
        font-weight: 700;
    }
    
    .signup-input-small button:hover{
        opacity: .8;
    }    
    
    .signup-input{
        margin-bottom:1vh;
    }
                                                  
    .signup-input input{
        width: 60%;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        padding: 1vh 1vw;
        font-size: .9rem;
        color: white;
    }

    .signup-input input::placeholder{
        color: rgb(255,255,255,.7);
        font-size: .9rem;
    }

    .signup-input select{
        width: 64.2%;
        margin-bottom: 3vh;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 1.2vh 1vw;
        font-size: .9rem;
        color: white;
    }
    
    .signup-input select option{
        color: #444444;
        font-weight: 600;
        font-size: .85rem;
    }
    
    .signup-checkbox{
    	margin-top: -1vh;
		padding: 0 0 3vh 18%;
		text-align: left;
	}
	
    .checkbox-wrapper-44 input[type="checkbox"] {
	    display: none;
	    visibility: hidden;
	}

	.checkbox-wrapper-44 label {
	    display: inline-block;
	}

	.checkbox-wrapper-44 .check {
	    cursor: pointer;
	    position: relative;
	    margin: 0;
	    width: 18px;
	    height: 18px;
	    -webkit-tap-highlight-color: transparent;
	    transform: translate3d(0, 0, 0);
	}
  .checkbox-wrapper-44 .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #fff;
    stroke-width: 1;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
  }
  .checkbox-wrapper-44 .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-44 .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
  }
  .checkbox-wrapper-44 .check:hover:before {
    opacity: 1;
  }
  .checkbox-wrapper-44 .check:hover svg {
    stroke: #fff;
  }
  .checkbox-wrapper-44 input[type="checkbox"]:checked + .check svg {
    stroke: #fff;
  }
  .checkbox-wrapper-44 input[type="checkbox"]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }
  .checkbox-wrapper-44 input[type="checkbox"]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
	
	.signup-checkbox-label{
		line-height: 18px;
		vertical-align: top;
		font-size: .8rem;
		color: #fff;
		margin-left: 5px;
	}
}

/* Forgot password*/
@media only screen and (max-width: 780px){
	.forgot-pw-container{
		display: block;
		margin: auto;
		width: 100%;
		height: 100%;
		padding: 35vh 0;
		text-align: center;
	}
	
	.forgot-pw-container h2{
		font-size: 1.4rem;
		font-weight: 800;
		color: #7C2053;
		margin-bottom: 2vh;
		text-transform: uppercase;
		letter-spacing: .1rem;
	}
	
	.forgot-pw-input{
		height: 2rem;
		font-size: .9rem;
		color: #444444;
		border: .5px solid #444444;
		border-radius: 1rem;
		width: 80vw;
		margin-bottom: 1vh;
		padding-left: 3vw;
	}
	
	.forgot-pw-input::placeholder{
		opacity: .8;
	}
	
	.forgot-pw-button{
		height: 2.8rem;
		font-size: .9rem;
		font-weight: 500;
		color: white;
		background-color: #7C2053;
		border: none;
		border-radius: 1.4rem;
		width: 50vw;
		transition: .2s;
	}
}
	
	
@media only screen and (min-width: 781px){
	.forgot-pw-container{
		display: block;
		margin: auto;
		width: 100%;
		height: 100%;
		padding: 30vh 0;
		text-align: center;
	}
	
	.forgot-pw-container h2{
		font-size: 2rem;
		font-weight: 800;
		color: #7C2053;
		margin-bottom: 4vh;
		text-transform: uppercase;
		letter-spacing: .1rem;
	}
	
	.forgot-pw-input{
		height: 2rem;
		font-size: .9rem;
		color: #444444;
		border: .5px solid #444444;
		border-radius: 1rem;
		width: 30vw;
		margin-bottom: 1vh;
		padding-left: 1vw;
	}
	
	.forgot-pw-input::placeholder{
		opacity: .8;
	}
	
	.forgot-pw-button{
		height: 2.8rem;
		font-size: 1rem;
		font-weight: 500;
		color: white;
		background-color: #7C2053;
		border: none;
		border-radius: 1.4rem;
		width: 12vw;
		margin-top: 1vh;
		transition: .2s;
	}
	
	.forgot-pw-button:hover{
		transform: scale(1.05);
	}
}


/* Report Page */
@media only screen and (max-width: 780px){
    .report-content{
		display: flex;
		flex-direction: column;
    	align-items: center;
        justify-content: center;
        border: none;
        padding: 0 0 5vh;
        width: 100%;
        height: 100%;
        color: #444444;
	}
	
	.report-content h2{
		font-size: 1.5rem;
		line-height: 2.2rem;
		font-weight: 800;
		color: white;
		padding: 5vh 5vw 4vh;
		text-align: center;
		background-color:  #7C2053;
	}
	
	.report-summary{
		display: flex;
		flex-direction: column;
		height: auto;
		width: 100%;
		margin-top: 4vh;
	}
	
	.report-summary-meta{
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 5vh 0 0;
	}

	.report-summary-meta p{
		font-size: 1rem;
		line-height: 1.8rem;
		opacity: .9;
		font-weight: 600;
		margin: 0vh 8vw;
	}
	
	.report-test-details{
		display: flex;
		flex-direction: row;
		margin: 4vh 4vw;
	}
	
	.detail-grid{
		display: flex;
		flex-direction: column;
		width: 25%;
	}
	
	.detail-grid p{
		font-size: .9rem;
		opacity: .9;
		font-weight: 600;
		margin: 1vh 0;
		text-align: center;
	}
	
	.detail-bubble{
		height: 4rem;
		width: 4rem;
		border: none;
		border-radius: 50%;
		background-color: #7C2053;
		color: white;
		display: block;
		margin: auto;
	}
	
	.detail-bubble p{
		line-height: 4rem;
		font-size: 1.2rem;
		opacity: 1;
		font-weight: 600;
		text-align: center;
		color: white;
		margin: 0;
	}
	
	.report-summary-graph{
		margin-top: 2vh;
	}
        
    .report-subject-scores{
		display: flex;
		flex-direction: column;
		width: 86%;
		margin-top: 2vh;
    }

    .report-subject-scores h4{
		font-size: 1.2rem;
		font-weight: 800;
    }
        
    .report-sub{
		display: flex;
		flex-direction: column;
        margin-top: 1vh; 
    }   
    
    .report-sub-row{
		display: flex;
		flex-direction: row;
    }
    
    .report-sub p{
		width: 8vw; 
		opacity: .9;
		font-size: .9rem;
		font-weight: 600;
		line-height: 2.4rem;
    }  
    
    .report-sub h5{
    	margin-left: 2vw;
		font-size: .9rem;
		opacity: .9;
		font-weight: 600;
    }
    
    	.score-container { 
            background-color: #CACBCC; 
            width: 90%; 
            border-radius: 15px;
            height: 2vh;
        } 
  
        .score-phy { 
            background-color: #9D4174; 
            color: white; 
            text-align: right; 
            border-radius: 15px; 
            width: 90%;
            height: 2vh;
        }
        
        .score-chem { 
            background-color: #9D4174; 
            color: white; 
            text-align: right;
            border-radius: 15px; 
            width: 90%;
            height: 2vh;
        }
        
        .score-maths { 
            background-color: #9D4174; 
            color: white; 
            text-align: right; 
            border-radius: 15px; 
            width: 90%;
            height: 2vh;
        }
        
        .score-bio { 
            background-color: #9D4174; 
            color: white;
            text-align: right; 
            border-radius: 15px; 
            width: 90%;
            height: 2vh;
        }
	
	.report-buttons{
    	display: block;
    	width: 100%;
    }
    
    .report-buttons button{
    	background-color: #7C2053;
    	color: white;
    	width: 44%;
    	height: 6vh;
		border: none;
		border-radius: 3vh;
		font-size: .9rem;
		font-weight: 600;
		margin: 6vh 1vw 0 0;
    }
    
    #soln{
    	background: transparent;
    	color: #7C2053;
    	width: 44%;
    	height: 6vh;
		margin: 6vh 1vw 0 5vw;
		border: 1px solid #7C2053;
		border-radius: 3vh;
		font-size: .9rem;
		font-weight: 600;
    }
}

@media only screen and (min-width: 781px){
	
	.report-content{
		display: flex;
		flex-direction: column;
    	align-items: center;
        justify-content: center;
        box-shadow: 10px 10px 8px #cacaca;
        border: .5px solid #cacaca;
        border-radius: 2vh;
        padding: 5vh 0;
        width: 78vw;
        margin: 8vh 11vw;
        color: #444444;
	}
	
	.report-content h2{
		font-size: 2rem;
		font-weight: 800;
		color: #7C2053;
		margin-top: 1vh;
	}
	
	.report-summary{
		display: flex;
		flex-direction: row;
		height: 30vh;
		width: 80%;
		margin-top: 6vh;
	}
	
	.report-summary-meta{
		display: flex;
		flex-direction: column;
		width: 40vw;
		margin-left: 4vw;
		margin-top: 2vh;
	}
	
	.report-summary-meta p{
		font-size: 1rem;
		line-height: 1.6rem;
		opacity: .9;
		font-weight: 800;
		color: #444444;
		margin-left: 2vw;
	}
	
	.report-test-details{
		display: flex;
		flex-direction: row;
		margin-top: 5vh;
	}
	
	.detail-grid{
		display: flex;
		flex-direction: column;
		width: 20%;
	}
	
	.detail-grid p{
		font-size: .9rem;
		opacity: .9;
		font-weight: 600;
		margin: 1vh 0;
		text-align: center;
		color: #444444;
	}
	
	.detail-bubble{
		height: 4rem;
		width: 4rem;
		border: none;
		border-radius: 50%;
		background-color: #7C2053;
		color: white;
		display: block;
		margin: auto;
	}
	
	.detail-bubble p{
		margin: 0;
		line-height: 4rem;
		opacity: 1;
		font-size: 1.2rem;
		font-weight: 800;
		color: white;
	}
	
	.report-summary-graph{
	}
        
    .report-subject-scores{
		display: flex;
		flex-direction: column;
		width: 70%;
		margin-top: 10vh;
    }

    .report-subject-scores h4{
		font-size: 1rem;
		font-weight: 800;
    }
        
    .report-sub{
		display: inline-flex;
        margin-top: 2.5vh; 
    }   
    
    .report-sub-row{
    	display: flex;
    	flex-direction: row;
    }
    
    .report-sub p{
		width: 8vw; 
		opacity: .9;
		font-size: .9rem;
		font-weight: 500;
    }  
    
    .report-sub h5{
    	margin-left: 2vw;
		font-size: .9rem;
		opacity: .9;
		font-weight: 600;
    }
    
    	.score-container { 
            background-color: #CACBCC; 
            width: 40vw; 
            border-radius: 15px;
            height: 2vh;
        } 
  
        .score-phy { 
            background-color: #9D4174; 
            color: white; 
            text-align: right; 
            border-radius: 15px; 
            width: 80%;
            height: 2vh;
        }
        
        .score-chem { 
            background-color: #9D4174; 
            color: white; 
            text-align: right;
            border-radius: 15px; 
            width: 60%;
            height: 2vh;
        }
        
        .score-maths { 
            background-color: #9D4174; 
            color: white; 
            text-align: right; 
            border-radius: 15px; 
            width: 90%;
            height: 2vh;
        }
        
        .score-bio { 
            background-color: #9D4174; 
            color: white;
            text-align: right; 
            border-radius: 15px; 
            width: 70%;
            height: 2vh;
        }
	
	.report-buttons{
    	display: block;
    }
    
    .report-buttons button{
    	background-color: #7C2053;
    	color: white;
    	width: 10vw;
    	height: 6vh;
		border: none;
		border-radius: 3vh;
		font-size: .9rem;
		font-weight: 600;
		transition: .3s;
		margin: 6vh 1vw 0;
    }
    
    .report-buttons button:hover{
    	transform: scale(1.1);
    }
    
    #soln{
    	background: transparent;
    	color: #7C2053;
    	width: 10vw;
    	height: 6vh;
		margin: 6vh 1vw 0;
		border: 1px solid #7C2053;
		border-radius: 3vh;
		font-size: .9rem;
		font-weight: 600;
		transition: .3s;
    }
    
    
    #soln:hover{
    	background-color: #7C2053;
    	color: white;
    	transform: scale(1.1);
    }
	
    /*.body-report{
    	display: flex;
    	flex-direction: column;
    	align-items: center;
        justify-content: center;
        width: calc(100% - 70vw);
        min-height: 92vh;
        background-image: linear-gradient(to bottom right, #7C2053, #1B163A);
        background-position: bottom;
        background-size:cover;
        background-repeat: none;
        padding: 0 35vw 8vh;
    }
    
    .body-report h1{
    	font-size: 2rem;
    	font-weight: 800;
    	color: #bde9b4;
    }
    
    .body-report p{
    	color: white;
    	font-size: 1rem;
    	opacity: .8;
    	margin-top: 1vh;
    }

    .body-report table{
    	width: 100%;
        border-collapse: collapse;
        font-size: 1rem;
        margin-top: 4vh; 
    }

    .body-report table th{
        background-color: #ffffff20;
        text-align: left;
        padding-left: 1vw;
        color: #ffffff;
        width: 60%
    }
    
    .body-report table td{
        color: #ffffff;
        text-align: center;
        background-color: #ffffff30;
        width: 40%;
    }
    
    .body-report table tr{
        border-bottom: 1px solid #ffffff40;
        height: 6vh;
    }*/
}

/*Profile Page*/
@media only screen and (max-width: 780px){
	
	.profile-main{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	/*sub pref modal*/
	.sub-pref-modal {
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        
        .sub-pref-modal-content {
            background: white;
            width: 76%;
            padding: 6vh 5vw;
            border-radius: 8px;
            text-align: left;
        }
        
        .hidden {
            display: none;
        }
        
        .sub-pref-modal-content label{
        	font-size: 1rem;
        	color: #444444;
        	font-weight: 700;
        }
        
        .sub-pref-modal-content select {
        	margin-top: 2vh;
        	margin-bottom: 4vh;
            font-size: .9rem;
        	color: #444444;
        	font-weight: 400;
        	padding: 1vh 2vw;
        	width: 100%;
        	border-radius: 3vh;
        }
        
        .sub-pref-modal-content button {
            margin: auto;
            display: block;
            height: 2.8rem;
            width: 80%;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            border: none;
            border-radius: 1.4rem;
            background-color: #7C2053;
            color: white;
        }
	
	.mobile-header {
        display: block;
        position: fixed;
        bottom: 5vh;
        right: 6vw;
    }
    
    .mobile-header button {
        width: 5rem;
        height: 3rem;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        border: none;
        border-radius: 1.5rem;
        background-image: linear-gradient(to right, #7C2053, #d14e96);
        cursor: pointer;
    }
    
    .mobile-header button img{
    	width: 3rem;
    	height: 3rem;
        border: none;
        border-radius: 1.5rem;
    }
    
    .mobile-header button span{
    	margin: .5rem;
    }
    
	.profile-info{
		display: none;
	}
	
	
	.mobile-menu img{
		width: 8rem;
		height: 8rem;
		border: none;
		border-radius: 50%;
		margin: 5vh 0 2vh;
	}
	
	.mobile-menu h2{
		padding: 0 2vw 1vh;
		color: #444444;
		font-size: 1.5rem;
		text-align: center;
	}
	
	.mobile-menu p{
		line-height: 1.7rem;
		letter-spacing: .05rem;
		padding: 0 2vw;
		color: rgb(155, 155, 155);
		font-size: .8rem;
		font-weight: 300;
		text-align: center;
		margin-bottom: 2vh;
	}
		
	.mobile-menu h4{
		line-height: 1.2rem;
		padding: 0 2vw 0 2.3vw;
		color: #444444;
		font-size: .8rem;
		font-weight: 600;
		text-align: left;
	}
	
	.profile-info-header{
		background-image: linear-gradient(#7C2053, #5e173e);
		padding: 4vh 0 2vh;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;		
	}

        .profile-pic{
        	width: 100%;
        }

        .profile-pic img {
			width: 30vw;
			height: 30vw;
        	border: 3px solid #FACC15;
			border-radius: 50%;
			margin: auto;
			display: block;
            object-fit: cover;
        }

        /* Edit Icon */
        .edit-avatar {
        	color: #FACC15;
        	font-size: .7rem;
        	cursor: pointer;
            position: relative;
            left: 58vw;
            bottom: 4vh;
            cursor: pointer;
        	padding:  4px 5px;
        	border: 2px solid #FACC15;
        	border-radius: 1.5rem;
        	background-color: #fff;
        }

        /* Modal Background */
        .avatarModal {
            display: none;
            position: fixed;
            z-index: 5;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
        }

        /* Modal Content */
        .avatar-modal-content {
            background: #fff;
            width: 80%;
            height: auto;
            margin: 30% auto;
            padding: 2vh 4vw;
            border-radius: 10px;
            text-align: center;
        }
        .avatar-modal-content h3{
        	margin: 1.5vh 0 0 4vw;
			font-size: 1.1rem;
			color: #7C2053;
        }

        /* Close Button */
        .closeModal {
            float: right;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Avatar Grid */
        .avatar-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5vw;
            margin: 6vh 0 3vh;
            width: 100%;
        }

        .avatar-img {
            width: 23vw;
            height: 23vws;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .avatar-img:hover {
            transform: scale(1.05);
        }

        /* Highlight Selected Avatar */
        .avatar-img.selected {
            border: 3px solid #FACC15;
            transform: scale(1.1);
        }

        /* Save Button */
        #saveAvatar {
            background: #7C2053;
            color: white;
            border: none;
            padding: 1.5vh 8vw;
            border-radius: 3vh;
            cursor: pointer;
            margin: 2vh 0;
        }
	
	.profile-info-header h2{
		padding: 0 2vw 0.5vh;
		color: #fff;
		font-size: 1.2rem;
		text-align: center;
	}
	
	.profile-info-header p{
		line-height: 1.6rem;
		padding: 0 2vw;
		color: #fff;
		opacity: .9;
		font-size: .8rem;
		font-weight: 300;
		text-align: center;
		z-index: 0;
	}
	
	.profile-plan-card {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  background: linear-gradient(90deg, #E5B017 0%, #FFC92A 100%);
	  padding: 16px 12px;
	  border-radius: 10px;
	  color: #fff;
	  margin: 20px 15px;
	}
	
	.profile-plan-info {
	  display: flex;
	  flex-direction: column;
	  text-align: left;
	}
	
	.profile-plan-name {
	  font-weight: 600;
	  font-size: .9rem;
	}
	
	.profile-plan-validity {
	  font-size: .7rem;
	  margin-top: 4px;
	}
	
	.profile-plan-icon{
	  background: white;
	  padding: 8px 10px;
	  border: none;
	  border-radius: 14px;
	  font-size: .7rem;
	  color: #E5B017;
	  transition: .2s;
	}
	
	.profile-plan-icon:hover{
		transform: scale(1.05);
	}

	.profile-data-container {
	  font-family: 'Poppins', sans-serif;
	  max-width: 100%;
	  padding: 0 25px;
	  background: #fff;
	}
	
	.profile-data-row {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin-bottom: 12px;
	  font-size: .85rem;
	  color: #444444;
	}
	
	.stat-value {
	  font-weight: 600;
	}
	
	.profile-data-icon {
	  color: #FACC15;
	  margin-right: 8px;
	  font-size: 16px;
	}
	
	.subject-data-heading {
	  margin-top: 4vh;
	  text-align: left;
	  font-weight: 600;
	  color: #444444;
	  font-size: .9rem;
	}
	
	.subject-data-tags {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	  margin-top: 12px;
	}
	
	.tag {
	  width: 2rem;
	  height: 2rem;
	  line-height: 2rem;
	  text-align: center;
	  border-radius: 25px;
	  font-size: .8rem;
	  color: #333;
	  background: #eee;
	}
	
	.physics {
	  background: #e8d9fa;
	  color: #7C4DFF;
	}
	
	.chemistry {
	  background: #d7e8fc;
	  color: #2962FF;
	}
	
	.mathematics {
	  background: #d7f9dd;
	  color: #00C853;
	}
	
	.biology {
	  background: #fddddd;
	  color: #E53935;
	}
	
	
	.profile-info-subtexts{
		display: flex;
		flex-direction: row;
		height: 2rem;
		width: 75%;
		background-color: #f2e8ed;
		border: none;
		border-radius: 3px;
		margin: 0 auto .8rem;
	}
	
	.profile-info-subtexts h4{
		line-height: 2rem;
		border: none;
		color: #444444;
		font-size: .75rem;
		font-weight: 500;
		text-align: left;
		margin-left: 1vw;
	}
	
	.profile-info-subtexts i{
		color: #f1c232;
		font-size: .8rem;
		margin-top: .6rem;
	}
	
	.profile-info-buttons{
		margin: 2rem 0 0;
		width: 100%;
		display:flex;
		justify-content: center;
		gap: 10px;
	}
	
	#editProfile{
		width: 40%;
		border: 1px solid #7C2053;
		height: 5vh;
		border-radius: 2.5vh;
		background-color: white;
		color: #7C2053;
		font-size: .8rem;
		font-weight: 550;
	}
	
	/* Edit Profile Modal*/
	.edit-profile-modal {
	  display: none;
	  position: fixed;
	  z-index: 1;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  overflow: auto;
	  background-color: rgba(0,0,0,0.5);
	  align-content: center;
	}
	
	.modal-content {
	  background-color: white;
	  padding: 1vh 4vw;
	  border: none;
	  border-radius: 1vh;
	  margin: 0 0 0 8%;
	  width: 76%;
	  height: 50vh;
	}
	
	.closeModal {
	  color: #444444;
	  float: right;
	  font-size: 2rem;
	  font-weight: 500;
	  cursor: pointer;
	}
	
	#edit-profile-form{
	  display: flex;
	  flex-direction: column;
	  align-content: center;
	  margin-top: 8vh;
	}
	
	.input-edit{
		width: 82%;
        height: 3vh;
        background: transparent;
        border: 1px solid #424242;
        border-radius: 2.5vh;
        padding: 1vh 1vw 1vh 4vw;
        font-size: .8rem;
        color: #7C2053;
        margin-bottom: 2vh;
        font-weight: 600;
        margin-left: 3vw;
	}

    .input-edit::placeholder{
        color: #424242;
        opacity: .7;
        font-size: .8rem;
        font-weight: 500;
    }

    .select-edit{
        width: 89%;
        height: 5.2vh;
        background: transparent;
        border: 1px solid #424242;
        border-radius: 2.5vh;
        padding: 1vh 1vw 1vh 4vw;
        font-size: .8rem;
        color: #7C2053;
        font-weight: 600;
        margin-left: 3vw;
    }
    
    .select-edit option{
        color: #7C2053;
        font-size: .8rem;
        font-weight: 600;
    }
    
    .save-info{
    	background: #7C2053;
    	color: white;
    	width: 60%;
        border: none;
        border-radius: 2.5vh;
        padding: 1.4vh 1vw;
        font-size: .9rem;
        font-weight: 600;
	    align-self: center;
    }
	
	#logout{
		display: none;
		width: 40%;
		border:none;
		height: 5vh;
		font-size: .8rem;
		border-radius: 2.5vh;
		background-color: #7C2053;
		color: white;
	}
	
	.profile-details{
		display: flex;
		flex-direction: column;
		padding: 1vh 2vw;
	}
	
	.profile-message{
		width: 84vw;
		background-image: linear-gradient(to bottom right, #9D4174 30%, #7C2053);
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		color: white;
		padding: 4vh 6vw 4vh;
		display: flex;
		flex-direction: column;
		align-content: center;
	}
	
	.profile-message h3{
		font-size: 1.2rem;
		font-weight: 700;
		margin-right: 6vw;
	}
	
	.profile-message p{
		margin-top: 1vh;
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 300;
		opacity: 0.95;
		margin-right: 6vw;
	}
	
	.profile-message button{
		margin-left: 0vw;
		height: 5vh;
		width: 40vw;
		margin-top: 2.5vh;
		align-items: center;
		color: #7C2053;
		background: white;
		border: none;
		border-radius: 2.5vh;
		font-weight: 700;
		font-size: .9rem;
		text-transform: uppercase;
	}
	
	.profile-results{
		width: 92vw;
		padding: 4vh 2vw;
		background-color: white;
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		margin-top: 1.8vh;
	}
	
	.results-top{
		display: flex;
		justify-content: space-between;
		margin-bottom: 2vh; 
	}
	
	.results-top h3{
		font-size: 1.2rem;
		color: #7C2053;
		margin-left: 3vw;
	}
	
	.profile-results p{
		font-size: .9rem;
		color: #444444;
		line-height: 1.2rem;
		margin: .5vh 3vw;
	}
	
	.pagination button{
		text-decoration: none;
		color: white;
		background-color: #7C2053;
		height: 1.8rem;
		width: 1.8rem;
		border: none;
		margin-right: 1vw;
	}
	
	#col-s{
		width: 4vw;
	}
	
	#col-m{
		width: 7vw;
	}
	
	#col-l{
		width: 10vw;	
	}
	
	.profile-results table{
	    display: block;
	    overflow-x: auto;
	    white-space: nowrap;
		text-align: center;
		color: #424242;
		border-collapse: collapse;
		border: 1px solid #e4e1f4;
	}
	
	.profile-results table tr{
		height: 2.4rem;
		border-bottom: 1px solid #e4e1f4;
	}
	
	.profile-results table th{
		font-size: .9rem;
		font-weight: 500;
		background-color: #eeecf9;
		padding: 0 2vw;
	}
	
	.profile-results table td{
		font-size: .9rem;
		padding: 0 2vw;
	}
	
	.profile-results table button{
		font-weight: 600;
		text-decoration: underline;
		color: #be6596;
		border: none;
		background: none;
		cursor: pointer;
		font-size: .9rem;
	}
	
	.profile-infographics{
		display: flex;
		flex-direction: column;
		margin-top: 1.8vh;
	}
	
	.profile-graph{
		width: 92vw;
		max-height: 50vh;
		background-color: white;
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		padding: 4vh 2vw;
	}
	
	.profile-graph h3{
		font-size: 1.2rem;
		color: #7C2053;
		margin-left: 3vw;
	}
	
	.profile-graph p{
		font-size: .9rem;
		color: #444444;
		line-height: 1.2rem;
		margin: 1vh 3vw;
	}
	
	.graph-canvas{
		height: 40vh;
		width: 88vw;
	}
	
	#myChart{
		margin-top: 4vh;
	}
	
	.profile-insights{
		width: 96vw;
		margin: 1.8vh 0;
		border: none;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.profile-insights div{
		width: 100%;
		padding: 4vh 0;
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		color: white;
		margin-bottom: 1.2vh;
	}
	
	.profile-insights h3{
		font-size: 1.1rem;
		font-weight: 700;
		margin-left: 5vw;
	}
	
	.profile-insights h4{
		font-size: .9rem;
		line-height: 1.6rem;
		font-weight: 600;
		opacity: .7;
		margin-left: 5vw;
		margin-top: .5vh;
	}
	
	.profile-insights p{
		font-size: .9rem;
		line-height: 1.2rem;
		font-weight: 200;
		margin: 2vw 5vw .5vw;
		opacity: .8;
	}
}
	
@media only screen and (min-width: 781px){
	.profile-main{
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	
	/*sub pref modal*/
		.sub-pref-modal {
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        
        .sub-pref-modal-content {
            background: white;
            padding: 6vh 4vw;
            border-radius: 8px;
            text-align: left;
        }
        
        .hidden {
            display: none;
        }
        
        .sub-pref-modal-content label{
        	font-size: 1rem;
        	color: #444444;
        	font-weight: 700;
        }
        
        .sub-pref-modal-content select {
        	margin-top: 2.5vh;
        	margin-bottom: 5vh;
            font-size: .9rem;
        	color: #444444;
        	font-weight: 400;
        	padding: 1vh 0;
        	width: 20vw;
        	border-radius: 3vh;
        }
        
        .sub-pref-modal-content button {
            margin: auto;
            display: block;
            height: 2.4rem;
            width: 12vw;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            border: none;
            border-radius: 1.2rem;
            background-color: #7C2053;
            color: white;
        }
    
    .mobile-header{
    	display: none;
    }
	
	.profile-info{
		background-color: white;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		/*background-image: linear-gradient(#D1CFE9 30%, #A4A1C1);*/
		width: 24vw;
		text-align: center;
		position: sticky;
		height: 91vh;
		min-height: 700px;
		top: 8.8vh;
	}
	
	.profile-info-header{
		background-image: linear-gradient(#7C2053, #5e173e);
		padding: 4vh 0 2vh;
	}

        .profile-pic img {
			width: 6vw;
			height: 6vw;
        	border: 3px solid #FACC15;
			border-radius: 50%;
			margin: 0 0 2vh 2vw;
            object-fit: cover;
        }

        /* Edit Icon */
        .edit-avatar {
        	color: #FACC15;
        	font-size: .7rem;
        	cursor: pointer;
            position: relative;
            right: 2.5vw;
            bottom: 3vh;
            cursor: pointer;
        	padding:  4px 5px;
        	border: 2px solid #FACC15;
        	border-radius: 1.5rem;
        	background-color: #fff;
        }

        /* Modal Background */
        .avatarModal {
            display: none;
            position: fixed;
            z-index: 5;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
        }

        /* Modal Content */
        .avatar-modal-content {
            background: #fff;
            width: 66vh;
            height: auto;
            margin: 10% auto;
            padding: 2vh 2vw;
            border-radius: 10px;
            text-align: center;
        }
        .avatar-modal-content h3{
        	margin: 1.5vh 0 0;
			font-size: 1.1rem;
			color: #7C2053;
        }

        /* Close Button */
        .closeModal {
            float: right;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Avatar Grid */
        .avatar-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2vw;
            margin: 6vh 0 3vh;
            width: 100%;
        }

        .avatar-img {
            width: 18vh;
            height: 18vh;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .avatar-img:hover {
            transform: scale(1.1);
        }

        /* Highlight Selected Avatar */
        .avatar-img.selected {
            border: 3px solid #FACC15;
            transform: scale(1.2);
        }

        /* Save Button */
        #saveAvatar {
            background: #7C2053;
            color: white;
            border: none;
            padding: 1.5vh 3vw;
            border-radius: 3vh;
            cursor: pointer;
            margin: 2vh 0;
        }
	
	.profile-info h2{
		padding: 0 2vw 0.5vh;
		color: #fff;
		font-size: 1.2rem;
	}
	
	.profile-info p{
		line-height: 1.6rem;
		padding: 0 2vw;
		color: #fff;
		opacity: .8;
		font-size: .8rem;
		font-weight: 300;
		text-align: center;
		z-index: 0;
	}
	
	.profile-plan-card {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  background: linear-gradient(90deg, #E5B017 0%, #FFC92A 100%);
	  padding: 16px 12px;
	  border-radius: 10px;
	  color: #fff;
	  margin: 20px 15px;
	}
	
	.profile-plan-info {
	  display: flex;
	  flex-direction: column;
	  text-align: left;
	}
	
	.profile-plan-name {
	  font-weight: 600;
	  font-size: 1rem;
	}
	
	.profile-plan-validity {
	  font-size: .9rem;
	  margin-top: 4px;
	}
	
	.profile-plan-icon{
	  background: white;
	  padding: 8px 10px;
	  border: none;
	  border-radius: 18px;
	  font-size: .9rem;
	  color: #E5B017;
	  transition: .2s;
	}
	
	.profile-plan-icon:hover{
		transform: scale(1.05);
	}

	.profile-data-container {
	  font-family: 'Poppins', sans-serif;
	  max-width: 100%;
	  padding: 0 25px;
	  background: #fff;
	}
	
	.profile-data-row {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin-bottom: 12px;
	  font-size: .9rem;
	  color: #444444;
	}
	
	.stat-value {
	  font-weight: 600;
	}
	
	.profile-data-icon {
	  color: #FACC15;
	  margin-right: 8px;
	  font-size: 16px;
	}
	
	.subject-data-heading {
	  margin-top: 4vh;
	  text-align: left;
	  font-weight: 600;
	  color: #444444;
	  font-size: .9rem;
	}
	
	.subject-data-tags {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	  margin-top: 12px;
	}
	
	.tag {
	  width: 2rem;
	  height: 2rem;
	  line-height: 2rem;
	  text-align: center;
	  border-radius: 25px;
	  font-size: 1rem;
	  color: #333;
	  background: #eee;
	}
	
	.physics {
	  background: #e8d9fa;
	  color: #7C4DFF;
	}
	
	.chemistry {
	  background: #d7e8fc;
	  color: #2962FF;
	}
	
	.mathematics {
	  background: #d7f9dd;
	  color: #00C853;
	}
	
	.biology {
	  background: #fddddd;
	  color: #E53935;
	}
	
	
	.profile-info-subtexts{
		display: flex;
		flex-direction: row;
		height: 2rem;
		width: 75%;
		background-color: #f2e8ed;
		border: none;
		border-radius: 3px;
		margin: 0 auto .8rem;
	}
	
	.profile-info-subtexts h4{
		line-height: 2rem;
		border: none;
		color: #444444;
		font-size: .75rem;
		font-weight: 500;
		text-align: left;
		margin-left: 1vw;
	}
	
	.profile-info-subtexts i{
		color: #f1c232;
		font-size: .8rem;
		margin-top: .6rem;
	}
	
	.profile-info-buttons{
		margin: 3rem 0 0;
	}
	
	#editProfile{
		width: 14vw;
		border: 1px solid #7C2053;
		height: 5vh;
		border-radius: 2.5vh;
		background-color: white;
		color: #7C2053;
		transition: .2s;
		font-weight: 550;
		font-size: .95rem;
	}
	
	#editProfile:hover{
		background-color: #7C2053;
		border:none;
		color: white;
		transform: scale(1.05);
	}
	
	/* Edit Profile Modal*/
	.edit-profile-modal {
	  display: none;
	  position: fixed;
	  z-index: 100;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,0.5);
	  overflow-y: auto;
	}
	
	.modal-content {
	  margin: 25vh 30vw 0;
	  background-color: white;
	  padding: 2vh 3vw 8vh;
	  border: none;
	  border-radius: 5px;
	  overflow-y: auto;
	  box-sizing: border-box;
	  width: 40vw;
	}
	
	.closeModal {
	  color: #444444;
	  float: right;
	  font-size: 2rem;
	  font-weight: 500;
	  cursor: pointer;
	}
	
	#edit-profile-form{
	  display: flex;
	  flex-direction: column;
	  align-content: center;
	  margin-top: 8vh;
	}
	
	.input-edit{
		width: 90%;
        height: 2.4rem;
        background: transparent;
        border: 1px solid #424242;
        border-radius: 1.2rem;
        padding: 0 1vw;
        font-size: .9rem;
        color: #7C2053;
        margin-bottom: 2vh;
        font-weight: 600;
	}

    .input-edit::placeholder{
        color: #424242;
        opacity: .7;
        font-size: .8rem;
        font-weight: 600;
    }

    .select-edit{
        width: 97%;
        height: 2.4rem;
        background: transparent;
        border: 1px solid #424242;
        border-radius: 1.2rem;
        padding: 0 1vw;
        font-size: .9rem;
        color: #7C2053;
        font-weight: 600;
    }
    
    .select-edit::placeholder{
        color: #424242;
        opacity: .7;
        font-size: .8rem;
        font-weight: 600;
    }
    
    .select-edit option{
        color: #7C2053;
        font-weight: 600;
    }
    
    .save-info{
    	background: #7C2053;
    	color: white;
    	width: 40%;
        height: 2.8rem;
        border: none;
        border-radius: 1.4rem;
        padding: 0 1vw;
        font-size: 1rem;
        margin-top: 2vh;
        font-weight: 600;
	    align-self: center;
    }
	
	#logout{
		margin-top: 12px;
		width: 14vw;
		border:none;
		height: 5vh;
		border-radius: 2.5vh;
		background-color: #7C2053;
		color: white;
		transition: .2s;
		font-size: .95rem;
	}
	
	#logout:hover{
		transform: scale(1.05);
	}
	
	.profile-details{
		margin-left: 1vw;
		display: flex;
		flex-direction: column;
		padding: 1.5vh 0;
	}
	
	.profile-message{
		width: 68vw;
		height: 15vh;
		/*background-image: linear-gradient(to bottom right, #AAADD1, #8186BB);*/
		background-image: linear-gradient(to bottom right, #7C2053 30%, #5e173e);
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		color: white;
		padding: 0 3vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.profile-message h3{
		font-size: 1.2rem;
		font-weight: 700;
	}
	
	.profile-message p{
		margin-top: 1vh;
		font-size: .9rem;
		font-weight: 300;
		color: #f3f3f3
	}
	
	.profile-message button{
		margin-right: 1vw;
		height: 5vh;
		width: 9vw;
		align-items: center;
		color: #7C2053;
		background: white;
		border: none;
		border-radius: 2.5vh;
		font-size: .9rem;
		font-weight: 700;
		transition: .2s;
		text-transform: uppercase;
	}
	
	.profile-message button:hover{
		transform: scale(1.05);
	}
	
	.profile-results{
		width: 68vw;
		height: auto;
		padding: 4vh 3vw 2vh;
		background-color: white;
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		margin-top: 2vh;
	}
	
	.results-top{
		display: flex;
		justify-content: space-between;
		margin-bottom: 2vh; 
	}
	
	.results-top h3{
		font-size: 1.1rem;
		color: #7C2053;
	}
	
	.profile-results p{
		font-size: .9rem;
		line-height: 1.2rem;
		font-weight: 500;
		color: #444444;
		margin: 2vh 0;
	}
	
	.pagination button{
		text-decoration: none;
		color: white;
		background-color: #7C2053;
		height: 1.8rem;
		width: 1.8rem;
		border: none;
	}
	
	#col-m{
		width: 5vw;	
	}
	
	#col-l{
		width: 7vw;
	}
	
	.profile-results table{
		width: 100%;
		text-align: center;
		font-size: 1rem;
		color: #424242;
		border-collapse: collapse;
		border: 1px solid #e4e1f4;
	}
	
	.profile-results table tr{
		height:5vh;
		border-bottom: 1px solid #e4e1f4;
	}
	
	.profile-results table th{
		font-size: .9rem;
		font-weight: 600;
		background-color: #eeecf9;
	}
	
	.profile-results table td{
		font-size: .9rem;
	}
	
	.profile-results table button{
		font-weight: 600;
		text-decoration: underline;
		color: #9D4174;
		border: none;
		background: none;
		cursor: pointer;
		font-size: .9rem;
	}
	
	.profile-infographics{
		display: flex;
		flex-direction: row;
		margin-top: 2vh;
	}
	
	.profile-graph{
		width: 42.8vw;
		height: auto;
		background-color: white;
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		padding: 4vh 2vw;
	}
	
	.profile-graph h3{
		font-size: 1.1rem;
		color: #7C2053;
		margin-left: 1vw;
	}
	
	.graph-canvas{
		height: 90%;
		width: 40vw;
		margin-left: 1vw;
	}
	
	.profile-graph p{
		font-size: .9rem;
		line-height: 1.2rem;
		font-weight: 500;
		color: #444444;
		margin: 2vh 1vw;
	}
	
	#myChart{
		margin-top: 4vh;
	}
	
	.profile-insights{
		width: 26vw;
		height: auto;
		margin-left: 1.2vw;
		border: none;
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: space-between;
	}
	
	.insights-card{
		width: 100%;
		border: none;
		border-radius: 1vh;
		box-shadow: 1vh 1vh 1vh rgb(0,0,0,.05);
		color: white;
	}
	
	.profile-insights:has(.insights-card:nth-child(3)) .insights-card{
		height: auto;
		padding: 2vh 0;
	}
	
	.profile-insights:has(.insights-card:nth-child(4)) .insights-card{
		height: auto;
		padding: 2vh 0;
	}
	
	.profile-insights h3{
		font-size: 1.1rem;
		font-weight: 600;
		margin-left: 2vw;
		margin-top: 2vh;
	}
	
	.profile-insights h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 600;
		color: #f3f3f3;
		margin-left: 2vw;
		margin-top: .5vh;
	}
	
	.profile-insights p{
		font-size: .9rem;
		line-height: 1.2rem;
		font-weight: 200;
		margin: .5vh 2vw 1vh;
		color: #f4f4f4;
	}
}
	
/*Static Pages*/
@media only screen and (max-width: 780px){
	.content-static{
		width: 90%;
        margin: 4vh 5vw;
	}
	
	.content-static h1{
		font-size: 1.5rem;
		line-height: 2rem;
		color: #7C2053;
		font-weight: 800;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 3vh;
		border-bottom: 4px solid #9D4174;
	}
	
	.content-static h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
	}
	
	.content-static p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 400;
		color: #444444;
	}
	
	/*Guidelines*/
	.guidelines-section{
		padding: 1vh 0;
	}
	
	.guidelines-section p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
	}
	
	.static-table, .static-table th, .static-table td{
		border: 1px solid #cacaca;
  		border-collapse: collapse;
		text-align: center;
	}
	
	.static-table{
		max-width: 90vw;
		display: block;
	    overflow-x: auto;
	    white-space: nowrap;
  		margin: 2vh auto;
  		align-self: center;
	}
	
	.static-table th{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 1vh 4vw;
	}
	
	.static-table td{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
		padding: 1vh 4vw;
	}
	
	.col-topics{
		text-align: left;
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
		padding: 1vh 4vw;
	}
	
	.guidelines-button{
		align-self: center;
		display: flex;
		flex-direction: column;
		padding: 3vh 0 4vh;
	}
	
	.guidelines-button a{
		font-size: .9rem;
		padding: 2vh 0;
		width: 80vw;
		color: white;
		background-color: #7C2053;
		text-decoration: none;
		text-align: center;
		border-radius: 4vh;
		margin: 0 0 2vh 4vw;
		transition: .2s;
	}
	
	.guidelines-button a:hover{
		transform: scale(1.1);
	}
	
	
	/*Terms and Conditions & Privacy policy*/
	.terms-section{
		padding: 1vh 0 8vh;
	}
	
	.terms-section h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 5vh 0 2vh;
		text-decoration: underline #9D4174 3px;
  		text-underline-offset: 12px;
	}
	
	.terms-section p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 400;
		color: #444444;
		padding: 2vh 1vw 0;
	}
	
	.terms-section p a{
		color: #7C2053;
		text-decoration: underline;
		font-weight: 700;
	}
	
	/* Contacts page*/
	
	.contacts-row{
		display: flex;
		flex-direction: column;
		padding-bottom: 3vh;
	}
	
	.contacts-section{
		padding: 1vh 0 1vh;
	}
	
	.contacts-section h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 5vh 0 4vh;
		text-decoration: underline #9D4174 3px;
  		text-underline-offset: 12px;
	}
	
	.contacts-section p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 400;
		color: #444444;
		padding: 1vh 0 0;
	}
	
	.contacts-section form label{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
	}
	
	.contacts-section form input{
		font-size: .9rem;
		font-weight: 500;
		line-height: 2rem;
		color: #444444;
		margin: 1vh 0 2vh;
		padding: 0 8px;
		width: 80vw;
	}
	
	.contacts-section form textarea{
		font-size: .9rem;
		font-weight: 500;
		line-height: 1.2rem;
		color: #444444;
		margin: 1vh 0 2vh;
		padding: 6px 8px;
		width: 80vw;
		height: 10vh;
	}
	
	.contacts-section button{
		font-size: 1rem;
		line-height: 2.5rem;
		padding: 0 48px;
		background-color: #7C2053;
		color: white;
		border: none;
		border-radius: 1.5rem;
		cursor: pointer;
		display: block;
		margin: auto;
	}
	
	.contacts-social h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 6vh 0 4vh;
		text-decoration: underline #9D4174 3px;
  		text-underline-offset: 12px;
	}
	
	.contacts-social a{
    	text-decoration: none;
    	color: white;
    	background-color: #7C2053;
    	width: 3.6rem;
    	line-height: 3.6rem;
    	text-align: center;
    	align-items: center;
    	border: none;
    	border-radius: 1.8rem;
    	font-size: 1.2rem;
    	font-weight: 300;
    	display: inline-block;
    	margin-right: 8px;
    	transition: .2s ease;
    }
    
    .contacts a:hover{
    	background-color: #7C2053;
    	color: white;
    	font-weight: 400;
    }
	
	
	/* Pricing page*/
	
	.subscription-modal{
	    display: none;
	    position: fixed;
	    z-index: 100;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: rgba(0, 0, 0, 0.5);
	    overflow-y: auto;
	}
	
	.subscription-content {
	    padding: 2vh 2vw 5vh;
	    background-color: white;
	    width: 96%;
	    border: none;
	    border-radius: 5px;
	    max-height: 95vh; /* Max height of the content */
	    overflow-y: auto; /* Enable scrolling for content */
	    box-sizing: border-box; /* Include padding in the width calculation */
	}
	
	.subscription-close {
	    color: #444444;
	    float: right;
	    font-size: 2rem;
		font-weight: 300;
		cursor: pointer;
	}
	
	.subscription-content h3{
		text-align: center;
		color: #7C2053;
		font-size: 1.4rem;
		font-weight: 700;
		padding: 1vh 0 3vh;
	}	
	
	.subscription-content p{
		text-align: center;
		color: #444444;
		font-size: .95rem;
		font-weight: 400;
		padding: 0 0 1vh;
		margin-top: -2vh;
	}
	
	.subscription-content img{
		display: block;
		margin: auto;
		height: 30vh;
	}
	
	.download-invoice{
		padding: 3vh 10px;
		border: 1px solid #e7e7e7;
		margin: 10px;
	}
	
	.download-invoice h3{
		text-align: center;
		color: #7C2053;
		font-size: 1.4rem;
		font-weight: 700;
		padding: 1vh 0 3vh;
	}
	
	.subscription-details{
        display: flex;
        justify-content: space-between;
        padding: 0 0 0;
	}
	
	.subscription-details table{
		text-align: left;
		font-size: .9rem;
		color: #444444;
		height: 3rem;
	}
	
	.subscription-details table tr{
		line-height: 1.6rem;
		vertical-align: top;
	}
	
	.subscription-details table td{
		padding-left: 5px;
	}
	
	.subscription-logo img{
		display: block;
		float: right;
		height: 1.3rem;
		margin-bottom: 2.5vh;
	}
	
	.subscription-logo tr td{
		text-align: right;
		color: #444444;
		font-size: .8rem;
		line-height: 1.2rem;
		font-weight: 400;
		padding: 4px 0;
	}
	
	.subscription-coupon {
      background: #fff;
      padding: 4vh 0 0; 
      display: flex;
      width: 100%;
      gap: 10px;
      align-items: right;
    }

    .subscription-coupon input[type="text"] {
      padding: 0 8px;
      line-height: 2.2rem;
      font-size: .9rem;
      border: 1px solid #444444;
      border-radius: 5px;
      outline: none;
      width: 40%;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .subscription-coupon input[type="text"]:focus {
      border-color: #444444;
      box-shadow: 0 0 6px #7C205370;
    }

    .subscription-coupon button {
      padding: 0 18px;
      background-color: #7C2053;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: .9rem;
      line-height: 2.4rem;
      transition: background-color 0.3s, transform 0.2s;
    }

    .subscription-coupon button:hover {
      background-color: #751e4e;
      transform: scale(1.05);
    }
	
	.subscription-table table{
		text-align: left;
		margin: auto;
		padding: 5vh 0 2vh;
	}
	
	.subscription-table table th{
		background-color: #7C2053;
		color: white;
		font-size: 0.8rem;
		padding: 8px;
	}
	
	.subscription-table table th:first-child{
		border-top-left-radius: 8px;
	}
	
	.subscription-table table th:last-child{
		border-top-right-radius: 8px;
	}
	
	.subscription-table table td{
		background-color: #fff8fc;
		color: #444444;
		font-size: 0.8rem;
		padding: 10px;
	}
	
	.subscription-checkbox{
		padding: 2vh 0 4vh;
	}
	
    .checkbox-wrapper-43 input[type="checkbox"] {
	    display: none;
	    visibility: hidden;
	}

	.checkbox-wrapper-43 label {
	}

	.checkbox-wrapper-43 .check {
	    cursor: pointer;
	    position: relative;
	    margin: auto;
	    width: 10px;
	    height: 10px;
	    -webkit-tap-highlight-color: transparent;
	    transform: translate3d(0, 0, 0);
	}
	
  .checkbox-wrapper-43 .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #444444;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
  }
  .checkbox-wrapper-43 .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-43 .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
  }
  .checkbox-wrapper-43 .check:hover:before {
    opacity: 1;
  }
  .checkbox-wrapper-43 .check:hover svg {
    stroke: #7C2053;
  }
  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg {
    stroke: #7C2053;
  }
  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }
  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
	
	.subscription-checkbox-label{
		line-height: 20px;
		vertical-align: top;
		font-size: .8rem;
		color: #444444;
		margin-left: 2px;
	}
	
	.subscription-buttons{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
	}
	
        .modal-secondary {
            height: 2.6rem;
			padding: 0 15px;
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid #7C2053;
            border-radius: 5px;
            background-color: white;
            color: #7C2053;
            transition: .2s;
        }
        
        .modal-secondary:hover {
            background-color: #7C2053;
            color: white;
            transform: scale(1.05);
        }
        
        .modal-primary {
            height: 2.6rem;
			padding: 0 15px;
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #7C2053;
            color: white;
            transition: .2s;
        }
        
        .modal-primary:hover {
            transform: scale(1.05);
        }
        
    .subscription-links{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        color: #7C2053;
		padding: 4vh 0 0;
    }
         
    .subscription-links a{
    	color: #7C2053;
    	font-size: .8rem;
    }
    
    .subscription-sign{
		text-align: right;
		padding: 4vh 10px 0;
    }
    
    .subscription-sign img{
    	display: block;
    	margin: 0 0 0 auto;
    	height: 2.8rem;
    }
    
    .subscription-sign h4{
    	font-size: .9rem;
    	margin: 6px 0 0 auto;
    	color: #444444;
    }
    
	.pricing-section{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 2vh;
	}
	
	.plan {
            background: white;
            padding: 3vh 2vw;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            width: 80%;
            margin-top: 2vh;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .plan:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .plan h2 {
            font-size: 1.4rem;
            text-align: center;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .plan-validity{
            padding: 8px 8px;
            margin: 15px 16vw;
            text-align: center;
            font-size: .8rem;
            opacity: .9;
            border: 2px solid white;
            border-radius: 4px;
            color: white;
        }
        
        
        .plan-features li i{
        	color: #70d875;
        	margin-right: 6px;
        }
        
        #plan-cross-icon{
        	color: #e36a6a;
        	margin-right: 6px;
        }
        
        .plan-price {
            font-size: 1.2rem;
            text-align: center;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .plan-price del {
            font-size: .8rem;
            color: #b8b8b8;
            margin-right: 8px;
            margin-left: -52px;
        }
        .plan-features {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }
        .plan-features li {
            padding: 8px 0;
            text-align: left;
            font-size: .8rem;
            margin: 0 25px;
        }
        .pricing-button {
            display: inline-block;
            text-decoration: none;
            font-size: .9rem;
            align-self: center;
            color: white;
            background: #7C2053;
            padding: 12px 20px;
            border-radius: 4px;
            font-weight: 600;
            transition: background 0.3s ease;
            text-align: center;
        }
        .pricing-button:hover {
            background: #5A153A;
        }
        .basic {
            border: 2px solid #7C2053;
            background: white;
            color: #7C2053;
            font-weight: 600;
        }
        .basic .pricing-button {
            background: #7C2053;
            color: white;
        }
        .basic .pricing-button:hover {
            background: #5A153A;
        }
        .mastery {
            border: 2px solid #7C2053;
            background: #7C2053;
            color: white;
        }
        .mastery .pricing-button {
            background: white;
            color: #7C2053;
        }
        .mastery .pricing-button:hover {
            background: #f0f0f0;
        }
}

@media only screen and (min-width: 781px){
	.content-static{
		width: 90%;
        margin: 6vh 5vw;
	}
	
	.content-static h1{
		font-size: 1.8rem;
		line-height: 4rem;
		color: #7C2053;
		font-weight: 800;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 4vh;
		border-bottom: 4px solid #9D4174;
	}
	
	.content-static h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
	}
	
	.content-static p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 400;
		color: #444444;
	}
	
	/*Guidelines*/
	.guidelines-section{
		padding: 3vh 0;
	}
	
	.guidelines-section p{
		font-size: .9rem;
		line-height: 1.4rem;
		padding: 1vh 0;
		font-weight: 500;
		color: #444444;
	}
	
	.static-table, .static-table th, .static-table td{
		border: 1px solid #cacaca;
  		border-collapse: collapse;
	}
	
	.static-table{
		width:  85vw;
		margin: 3vh auto;
	}
	
	.static-table th{
		text-align: center;
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 1vh 2vw;
  		margin: 3vh 0;
	}
	
	.static-table td{
		text-align: center;
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
		padding: 1vh 2vw;
  		margin: 3vh 0;
	}
	
	.col-topics{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
		padding: 1vh 4vw;
	}
	
	.guidelines-button{
		margin: 0 auto ;
		padding: 4vh 0 6vh;
	}
	
	.guidelines-button a{
		font-size: .9rem;
		padding: 2vh 2vw;
		color: white;
		background-color: #7C2053;
		text-decoration: none;
		border-radius: 4vh;
		margin-right: 1vw;
		transition: .2s;
	}
	
	.guidelines-button a:hover{
		transform: scale(1.1);
	}
	
	/*Terms and Conditions & Privacy policy*/
	.terms-section{
		padding: 1vh 0 8vh;
	}
	
	.terms-section h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 5vh 0 2vh;
		text-decoration: underline #9D4174 3px;
  		text-underline-offset: 12px;
	}
	
	.terms-section p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 400;
		color: #444444;
		padding: 2vh 1vw 0;
	}
	
	.terms-section p a{
		color: #7C2053;
		text-decoration: underline;
		font-weight: 700;
	}
	
	/* Contacts page*/
	
	.contacts-row{
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	
	.contacts-section{
		padding: 1vh 0 2vh;
		width: 70%;
	}
	
	.contacts-section h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 5vh 0 4vh;
		text-decoration: underline #9D4174 3px;
  		text-underline-offset: 12px;
	}
	
	.contacts-section p{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
	}
	
	.contacts-section form label{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 500;
		color: #444444;
	}
	
	.contacts-section form input{
		font-size: .9rem;
		font-weight: 500;
		width: 30vw;
		line-height: 2rem;
		color: #444444;
		margin: 1vh 0 2vh;
		padding: 0 8px;
	}
	
	.contacts-section form textarea{
		font-size: .9rem;
		font-weight: 500;
		line-height: 1.2rem;
		color: #444444;
		margin: 1vh 0 2vh;
		padding: 6px 8px;
		width: 45vw;
		height: 10vh;
	}
	
	.contacts-section button{
		font-size: 1rem;
		line-height: 2.5rem;
		padding: 0 48px;
		background-color: #7C2053;
		color: white;
		border: none;
		border-radius: 1.5rem;
		cursor: pointer;
		margin: 0 0 4vh;
	}
	
	.contacts-social h4{
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		color: #444444;
		padding: 5vh 0 4vh;
		text-decoration: underline #9D4174 3px;
  		text-underline-offset: 12px;
	}
	
	.contacts-social a{
    	text-decoration: none;
    	color: white;
    	background-color: #7C2053;
    	width: 3vw;
    	line-height: 3vw;
    	text-align: center;
    	align-items: center;
    	border: none;
    	border-radius: 1.5vw;
    	font-size: 1rem;
    	font-weight: 300;
    	display: inline-block;
    	margin-right: 8px;
    	transition: .2s ease;
    }
    
    .contacts a:hover{
    	background-color: #7C2053;
    	color: white;
    	font-weight: 400;
    }
	
	
	/* Pricing page*/
	
	.subscription-modal{
	    display: none;
	    position: fixed;
	    z-index: 100;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: rgba(0, 0, 0, 0.5);
	    overflow-y: auto;
	}
	
	.subscription-content {
	    padding: 4vh 2vw 5vh;
	    background-color: white;
	    width: 60%;
	    border: none;
	    border-radius: 5px;
	    max-height: 95vh; /* Max height of the content */
	    overflow-y: auto; /* Enable scrolling for content */
	    box-sizing: border-box; /* Include padding in the width calculation */
	    margin-bottom: 20px;
	}
	
	.subscription-close {
	    color: #444444;
	    float: right;
	    font-size: 2rem;
		font-weight: 300;
		cursor: pointer;
	}
	
	.subscription-content h3{
		text-align: center;
		color: #7C2053;
		font-size: 1.4rem;
		font-weight: 700;
		padding: 1vh 0 3vh;
	}	
	
	.subscription-content p{
		text-align: center;
		color: #444444;
		font-size: .95rem;
		font-weight: 400;
		padding: 0 0 1vh;
		margin-top: -2vh;
	}
	
	.subscription-content img{
		display: block;
		margin: auto;
		height: 30vh;
	}
	
	.download-invoice{
		padding: 4vh 2vw;
		border: 1px solid #e7e7e7;
		margin: 20px;
	}
	
	.download-invoice h3{
		text-align: center;
		color: #7C2053;
		font-size: 1.2rem;
		font-weight: 700;
		padding: 1vh 0 3vh;
	}
	
	.subscription-details{
        display: flex;
        justify-content: space-between;
        padding: 0 0 0;
	}
	
	.subscription-details table{
		text-align: left;
		font-size: .9rem;
		color: #444444;
		height: 3rem;
	}
	
	.subscription-details table tr{
		line-height: 1.6rem;
		vertical-align: top;
	}
	
	.subscription-details table td{
		padding-left: 8px;
	}
	
	.subscription-logo img{
		display: block;
		float: right;
		height: 1.4rem;
		margin-bottom: 2.5vh;
	}
	
	.subscription-logo tr td{
		text-align: right;
		color: #444444;
		font-size: .8rem;
		line-height: 1.2rem;
		font-weight: 400;
		padding: 4px 0;
	}
	
	.subscription-coupon {
      background: #fff;
      padding: 5vh 0 0; 
      display: flex;
      width: 100%;
      gap: 10px;
      align-items: right;
    }

    .subscription-coupon input[type="text"] {
      padding: 0 8px;
      line-height: 2.2rem;
      font-size: .9rem;
      border: 1px solid #444444;
      border-radius: 5px;
      outline: none;
      width: 40%;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .subscription-coupon input[type="text"]:focus {
      border-color: #444444;
      box-shadow: 0 0 6px #7C205370;
    }

    .subscription-coupon button {
      padding: 0 18px;
      background-color: #7C2053;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: .9rem;
      line-height: 2.4rem;
      transition: background-color 0.3s, transform 0.2s;
    }

    .subscription-coupon button:hover {
      background-color: #751e4e;
      transform: scale(1.05);
    }
	
	.subscription-table table{
		text-align: left;
		margin: auto;
		padding: 5vh 0 2vh;
	}
	
	.subscription-table table th{
		background-color: #7C2053;
		color: white;
		font-size: 0.8rem;
		padding: 8px;
	}
	
	.subscription-table table th:first-child{
		border-top-left-radius: 8px;
	}
	
	.subscription-table table th:last-child{
		border-top-right-radius: 8px;
	}
	
	.subscription-table table td{
		background-color: #fff8fc;
		color: #444444;
		font-size: 0.8rem;
		padding: 10px;
	}
	
	.subscription-checkbox{
		padding: 2vh 0 6vh;
	}
	
    .checkbox-wrapper-43 input[type="checkbox"] {
	    display: none;
	    visibility: hidden;
	}

	.checkbox-wrapper-43 label {
	    display: inline-block;
	}

	.checkbox-wrapper-43 .check {
	    cursor: pointer;
	    position: relative;
	    margin: auto;
	    width: 18px;
	    height: 18px;
	    -webkit-tap-highlight-color: transparent;
	    transform: translate3d(0, 0, 0);
	}
  .checkbox-wrapper-43 .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #444444;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
  }
  .checkbox-wrapper-43 .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-43 .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
  }
  .checkbox-wrapper-43 .check:hover:before {
    opacity: 1;
  }
  .checkbox-wrapper-43 .check:hover svg {
    stroke: #7C2053;
  }
  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg {
    stroke: #7C2053;
  }
  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }
  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
	
	.subscription-checkbox label{
		line-height: 18px;
		vertical-align: middle;
		font-size: .8rem;
		color: #444444;
		margin-left: 5px;
	}
	
	.subscription-buttons{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
	}
	
        .modal-secondary {
            height: 2.2rem;
			padding: 0 10px;
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid #7C2053;
            border-radius: 5px;
            background-color: white;
            color: #7C2053;
            transition: .2s;
        }
        
        .modal-secondary:hover {
            background-color: #7C2053;
            color: white;
            transform: scale(1.05);
        }
        
        .modal-primary {
            height: 2.2rem;
			padding: 0 10px;
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #7C2053;
            color: white;
            transition: .2s;
        }
        
        .modal-primary:hover {
            transform: scale(1.05);
        }
        
    .subscription-links{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        color: #7C2053;
		padding: 4vh 0 0;
    }
         
    .subscription-links a{
    	color: #7C2053;
    	font-size: .8rem;
    }
    
    .subscription-sign{
		text-align: right;
		padding: 4vh 10px 0;
    }
    
    .subscription-sign img{
    	display: block;
    	margin: 0 0 0 auto;
    	height: 2.8rem;
    }
    
    .subscription-sign h4{
    	font-size: .9rem;
    	margin: 6px 0 0 auto;
    	color: #444444;
    }
	
	.pricing-section{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
	}
	
	.plan {
        background: white;
        padding: 3vh 2vw;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        width: 22%;
        margin-top: 5vh;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
        .plan:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .plan h2 {
            font-size: 1.4rem;
            text-align: center;
            font-weight: 600;
            margin-top: 8px;
            margin-bottom: 15px;
        }
        .plan-price {
            font-size: 1.2rem;
            text-align: center;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .plan-validity{
            padding: 8px 8px;
            margin: 15px 35px;
            text-align: center;
            font-size: .8rem;
            opacity: .9;
            border: 2px solid white;
            border-radius: 4px;
            color: white;
        }
        
        .plan-price del {
            font-size: .8rem;
            color: #b8b8b8;
            margin-right: 8px;
            margin-left: -52px;
        }
        
        .plan-features {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }
        
        .plan-features li {
            padding: 8px 0;
            text-align: left;
            font-size: .8rem;
            vertical-align: middle;
            margin-left: 32px;
        }
        
        .plan-features li i{
        	color: #70d875;
        	margin-right: 6px;
        }
        
        #plan-cross-icon{
        	color: #e36a6a;
        	margin-right: 6px;
        }
        
        .pricing-button {
            display: inline-block;
            text-decoration: none;
            font-size: .9rem;
            align-self: center;
            color: white;
            background: #7C2053;
            padding: 12px 20px;
            border-radius: 4px;
            font-weight: 600;
            transition: background 0.3s ease;
            text-align: center;
        }
        .pricing-button:hover {
            background: #5A153A;
        }
        
        .fa-solid fa-check{
        	color: white;
        }
        
        .fa-solid fa-circle-xmark{
        	color: black;
        }
        
        .basic {
            border: 2px solid #7C2053;
            background: white;
            color: #7C2053;
            font-weight: 600;
        }
        .basic .pricing-button {
            background: #7C2053;
            color: white;
        }
        .basic .pricing-button:hover {
            background: #5A153A;
        }
        .mastery {
            border: 2px solid #7C2053;
            background: #7C2053;
            color: white;
        }
        .mastery .pricing-button {
            background: white;
            color: #7C2053;
        }
        .mastery .pricing-button:hover {
            background: #f0f0f0;
        }
	
}
	
/* error page */
@media only screen and (max-width: 780px){
	.content-error{
		padding: 15vh 5vw;
		display: block;
		margin: auto;
		height: auto;
		text-align: center;
	}
	
	.content-error img{
		height: auto;
		width: 80vw;
	}
	
	.content-error h1{
		font-size: 1.4rem;
		color: #7C2053;
		margin: 4vh 0 2vh;
	}
	
	.content-error p{
		font-size: .9rem;
		line-height: 1.2rem;
		color: #444444;
		margin-bottom: 5vh;
	}
	
	.content-error a{
		font-size: .9rem;
		padding: 2vh 8vw;
		color: white;
		background-color: #7C2053;
		text-decoration: none;
		border-radius: 4vh;
	
	}
}

@media only screen and (min-width: 781px){
	.content-error{
		padding: 10vh 30vw;
		display: block;
		margin: auto;
		height: auto;
		text-align: center;
	}
	
	.content-error img{
		height: 50vh;
		width: auto;
	}
	
	.content-error h1{
		font-size: 1.4rem;
		color: #7C2053;
		margin: 4vh 0 2vh;
	}
	
	.content-error p{
		font-size: .9rem;
		color: #444444;
		margin-bottom: 5vh;
	}
	
	.content-error a{
		font-size: .9rem;
		padding: 2vh 2vw;
		color: white;
		background-color: #7C2053;
		text-decoration: none;
		border-radius: 4vh;
	
	}
}
	
/*Animations*/
@keyframes card-entry {
    from{ scale: 0.5; opacity: 0; transform: translateY(30vh);}
    t0{ scale: 1; opacity: 1;}
}

@keyframes fade-in {
    from{opacity: 0;}
    to{opacity: 1;}
}

@keyframes fade-out {
    70%{opacity: 1; transform: translateY(0vh);}
    90%, 100%{opacity: 0; transform: translateY(-30vh);}
}