* {
	padding: 0;

	margin: 0;

	text-decoration: none;

	list-style: circle;

	box-sizing: border-box;
}

/* custom css font */
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Josefin+Sans:wght@300;400;700&display=swap");

/* custom scroll bar */

::-webkit-scrollbar {
	width: 7px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #e00065;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

#preloader {
	background: #000 url(../img/circle-loader.gif) no-repeat center center;

	background-size: 30%;

	width: 100%;

	height: 100vh;

	position: fixed;

	z-index: 100;

	transition: 0.5s;

	display: none;
}

.prenav {
	width: 100%;

	height: 40px;

	background-color: red;

	position: fixed;
}

nav {
	position: fixed;

	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.698);

	height: 100px;

	width: 100%;

	background-color: black;

	border: solid;

	border-color: rgb(255, 0, 102);

	border-width: 0.1px;

	z-index: 10;
}

.nav-container {
	padding: 0 1%;
}

.logo-container {
	width: 100px;

	height: 100px;

	display: flex;

	justify-content: center;

	align-items: center;

	position: fixed;

	cursor: pointer;
}

nav .logoimg {
	background-repeat: no-repeat;

	width: 97px;

	height: 85px;

	transform: scale(0.9);

	transition: all 0.5s;

	animation-delay: calc(0.2s * var(--i));
}

nav .logoimg:hover {
	transform: scale(1.1);

	transition: all 0.3s ease-in;

	opacity: 70%;
}

label.logo .club-name {
	position: absolute;

	width: 45%;

	height: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

	color: rgb(255, 255, 255);

	text-transform: uppercase;
	font-family: "Bungee", cursive;
	font-family: "Josefin Sans", sans-serif;

	font-weight: bolder;

	font-size: 32px;

	transition: all 1s;

	text-align: center;

	animation: slide_right 1s linear forwards;
}

label.logo a.club-name:hover {
	color: rgb(255, 0, 102);

	transition: 1s;
}

nav ul {
	float: right;

	margin-right: 20px;

	animation-delay: calc(0.2s * var(--i));
}

nav ul li {
	display: inline-block;

	line-height: 100px;

	margin: 0 5px;
}

nav ul li a {
	color: whitesmoke;

	font-variant: small-caps;

	font-weight: bolder;

	padding: 5px 15px;

	transition: 0.7s ease-in-out;
}

a.active,
nav ul li a:hover {
	background-color: rgb(255, 0, 102);

	padding: 15px;

	border-radius: 10px;

	transition: all 0.7s ease;
}

#act {
	background-color: rgb(255, 0, 102);

	padding: 15px;

	border-radius: 10px;

	transition: all 0.7s ease;
}

.dropbtn {
	border: none;

	font-variant: small-caps;

	background-color: unset;

	font-weight: bolder;

	color: whitesmoke;

	text-decoration: none;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
	width: 30;

	background-color: black;

	display: none;

	position: absolute;

	box-shadow: 0px 8px 16px 0px rgb(0, 0, 0);
}

/* Links inside the dropdown */

.dropdown-content a {
	color: whitesmoke;

	width: auto;

	height: 80px;

	display: block;

	font-variant: small-caps;

	line-height: 60px;

	border-bottom: solid;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
	width: auto;

	height: 80px;

	background-color: rgb(255, 7, 107);

	transition-duration: 0.8s;

	border-radius: 20px 0 20px 0;
}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
	display: block;

	border-radius: 0px 0 0px 0px;
}

.checkbtn {
	font-size: 40px;

	color: rgb(255, 7, 107);

	line-height: 100px;

	float: right;

	margin-right: 5%;

	cursor: pointer;

	display: none;
}

#check {
	display: none;
}

.div-adjustment {
	height: 100px;
}

section {
	background-image: linear-gradient(
			rgba(14, 14, 14, 0.548),
			rgba(36, 21, 34, 0.65)
		),
		url("../img/team23-24.jpg");

	background-attachment: fixed;

	background-repeat: no-repeat;

	background-size: cover;

	width: 100%;

	max-height: 150vh;

	background-position: top;

	background-color: rgba(112, 128, 144, 0.253);

	color: whitesmoke;

	padding: 30px 0px;

	overflow: hidden;
}

.video-section {
	background-color: linear-gradient(
		rgba(14, 14, 14, 0.548),
		rgba(36, 21, 34, 0.65)
	);

	width: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

	border: solid #e00065 3px;

	z-index: 1;
}

video {
	width: 100%;

	height: 100%;

	object-fit: cover;
}

@media (max-width: 900px) {
	.video-section {
		overflow: hidden;
	}

	video {
		width: 100%;

		object-fit: cover;
	}
}

section .introduction-section {
	padding: 0% 10%;

	text-align: justify;
}

section .introduction-section .introduction-title {
	width: 100%;

	font-family: Impact;

	text-align: center;

	font-size: 1.5em;

	animation: slide_right 1s linear forwards;
}

section .introduction-section .introduction-main {
	font-size: 1.3em;

	font-weight: bold;

	line-height: 130%;

	animation: slide_left 1s linear forwards;
}

section .join {
	border: solid;

	border-color: cornsilk;

	border-width: 8px;

	padding: 40px;

	display: flex;

	width: 80%;

	margin: auto;

	justify-content: center;

	align-items: center;

	cursor: pointer;

	animation: slide_right 1s linear forwards;
}

section a.join {
	color: whitesmoke;

	text-transform: uppercase;

	font-weight: bolder;

	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

	font-size: 30px;

	transition: all 1s;
}

section a.join:hover {
	color: rgb(255, 7, 107);

	background-color: rgba(255, 255, 255, 0.589);

	border-color: rgb(255, 7, 107);

	transform: scale(1.05);
}

@media (max-width: 925px) {
	section .introduction-section {
		padding: 0% 7%;
	}

	section .introduction-section .introduction-title {
		font-size: 1.5em;
	}

	section .introduction-section .introduction-main {
		font-size: 1em;

		font-weight: bold;

		line-height: 130%;
	}

	section .join {
		width: 70%;

		height: 30px;

		border-width: 2px;

		padding: 20px;
	}

	section a.join {
		font-size: 1em;
	}
}

@media (max-width: 485px) {
	section .introduction-section {
		padding: 0% 3%;
	}

	section .introduction-section .introduction-title {
		font-size: 0.9em;

		text-transform: uppercase;
	}

	section .introduction-section .introduction-main {
		font-size: 0.8em;

		font-weight: bold;

		line-height: 120%;
	}

	section a.join {
		font-size: 0.8em !important;
	}
}

h1 {
	text-align: center;

	font-size: 35px;

	text-transform: uppercase;

	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

h3 {
	text-align: justify;

	font-size: 20px;

	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

h4 {
	text-align: justify;

	font-size: 20px;
}

.work-section-intro {
	text-align: center;

	font-family: Impacto, Impact, sans-serif;

	font-size: 25px;

	line-height: 90px;

	width: 100%;

	height: 100px;

	border: solid rgb(255, 0, 102);

	background-color: black;

	color: whitesmoke;
}

.work-section .work-section-box {
	width: 100%;

	height: 400px;

	border: solid;

	border-color: rgb(255, 0, 102);
}

.president-view {
	width: 100%;

	padding-top: 2%;

	display: block;

	justify-content: center;

	overflow: hidden;

	/* border-top: 5px solid rgb(255, 7, 107); */

	font-family: Impacto, Impact, sans-serif;

	/* padding-bottom: 2%; */
}



.president-view .president-detail-section {
	text-align: center;

	font-size: 1.2em;

	line-height: 150%;

	color: rgb(255, 7, 107);

	letter-spacing: 1px;

	text-transform: uppercase;
}

.president-view .president-message-section {
	width: 100%;

	display: flex;

	justify-content: center;

	padding: 0 15%;
}

.president-view .president-message-section .president-message {
	padding: 1.5%;

	text-align: justify;

	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
		"Lucida Sans", Arial, sans-serif;

	font-weight: bold;

	line-height: 25px;

	font-size: 15px;

	border: 3px solid rgb(255, 7, 107);
}

.theme-section {
	background-image: linear-gradient(
			rgba(14, 14, 14, 0.548),
			rgba(36, 21, 34, 0.65)
		),
		url("./../img/theme-24-25.png");

	width: 100%;

	height: 50vh;

	overflow: hidden;

	margin-bottom: 2%;

	background-attachment: fixed;

	background-size: auto;

	background-position: center;
}

.theme-section .theme-info {
	position: absolute;

	color: whitesmoke;

	width: 100%;

	height: 50vh;

	display: flex;

	justify-content: center;

	align-items: center;

	font-family: impact;

	font-size: 1.5em;
}

.leaders-message-box {
	width: 100%;

	font-family: Impacto, Impact, sans-serif;

	margin-bottom: 1%;
}

.leaders-message-box .our-leaders {
	width: 100%;

	height: 50px;

	display: flex;

	justify-content: center;

	align-items: center;

	background-color: black;

	color: white;

	border: 3px solid rgb(255, 7, 107);

	font-family: Impacto, Impact, sans-serif;

	font-size: 1.5em;
}

.leaders-message-box .message-column {
	padding: 4%;

	border-bottom: solid rgb(255, 0, 102);

	display: flex;

	justify-content: space-evenly;

	align-items: center;
}

.leaders-message-box .message-column .msg-col {
	width: 30%;

	overflow: hidden;

	text-align: center;
}

 .msg-col .image-container {
	width: 250px;

	height: 250px;

	border: solid rgb(255, 0, 102) 5px;

	border-radius: 50%;

	overflow: hidden;

	object-fit: fill;

	margin: auto;

	cursor: pointer;

	/* margin-bottom: 4%; */
}

.leaders-message-box .message-column .msg-col .image-container img.box-photo {
	width: 250px;

	height: 250px;

	transition: 0.5s;
}

.leaders-message-box
	.message-column
	.msg-col
	.image-container
	img.box-photo:hover {
	transform: scale(1.1);
}

@media (max-width: 1250px) {


	.president-view .president-detail-section {
		font-size: 0.9em;

		line-height: 150%;
	}

	.president-view .president-message-section {
		padding: 0 15% !important;
	}

	.president-view .president-message-section .president-message {
		padding: 1% !important;

		font-size: 12px;

		line-height: 25px;
	}

	.theme-section {
		width: 100%;

		height: 40vh;

		background-size: contain;
	}

	.theme-section .theme-info {
		height: 40vh;

		font-size: 0.9em;
	}

	.leaders-message-box .our-leaders {
		height: 30px;

		font-size: 0.9em;

		border: solid rgb(255, 0, 102) 2px;
	}

	.leaders-message-box .message-column {
		padding: 4%;

		display: block;

		justify-content: space-between;

		align-items: center;

		margin-bottom: 5%;
	}

	.leaders-message-box .message-column .msg-col {
		width: 100%;

		padding: 5%;

		border-bottom: 3px solid rgb(255, 0, 102);
	}

	.leaders-message-box .message-column .msg-col .image-container {
		width: 130px;

		height: 130px;

		margin-bottom: 4%;

		border: solid rgb(255, 0, 102) 2px;
	}

	.leaders-message-box .message-column .msg-col .image-container img.box-photo {
		width: 130px;

		height: 130px;
	}

	.leaders-message-box
		.message-column
		.msg-col
		.image-container
		img.box-photo:hover {
		transform: scale(1.1);
	}

	.leaders-message-box .message-column .msg-col .leaders-information {
		line-height: 12px;

		font-size: 0.6em !important;
	}
}

@media (max-width: 700px) {


	.president-view .president-detail-section {
		font-size: 0.8em;

		line-height: 150%;
	}

	.president-view .president-message-section {
		width: 100%;

		display: flex;

		justify-content: center;

		padding: 0 10%;
	}

	.president-view .president-message-section {
		padding: 0 5% !important;
	}

	.president-view .president-message-section .president-message {
		padding: 1% !important;

		font-size: 10px;

		line-height: 15px;
	}

	.theme-section {
		width: 100%;

		height: 25vh;

		background-size: contain;
	}

	.theme-section .theme-info {
		height: 25vh;

		font-size: 0.9em;
	}
}

footer {
	border: solid;

	border-color: rgb(255, 0, 102);

	border-width: 3px;

	position: relative;

	width: 100%;

	height: 200px;

	background-color: black;

	box-shadow: 16px 5px 16px 16px rgba(0, 0, 0, 0.698);
}

footer .text1 {
	text-align: center;

	font-size: 15px;

	color: rgb(255, 255, 255);
}

footer .text1 a {
	margin-left: 2px;

	text-transform: uppercase;

	color: rgb(255, 7, 107);

	padding: 1px 8px;

	border-radius: 5px;

	transition: all 1s;
}

footer .text1 a:hover {
	color: white;

	background-color: rgb(255, 7, 107);

	padding: 8px;

	transition: 1s ease;
}

footer .our-theme {
	position: absolute;

	right: 0.5%;

	top: 5%;

	cursor: pointer;

	background-repeat: no-repeat;

	width: 170px;

	height: 170px;
}

footer .rotaract-theme-place {
	width: 100%;

	display: flex;

	justify-content: center;

	position: absolute;

	bottom: 6%;
}

footer .rotaract-theme {
	cursor: pointer;

	background-repeat: no-repeat;

	width: 270px;

	/* height: 55px; */

	transition: all 0.5s;
}

footer .rotary-theme-place {
	position: absolute;

	top: 13%;

	left: 2%;
}

footer .rotaract-theme:hover {
	transform: scale(1.1);

	transition: all 0.2s ease-in;

	opacity: 70%;
}

/* footer .rotaract-theme:hover,footer .rotary-theme:hover,footer .our-theme:hover{

    transform: scale(1.1);

    transition:all 0.2s ease-in;

    opacity: 70%;

} */

footer .rotary-theme {
	cursor: pointer;

	background-repeat: no-repeat;

	width: 150px;

	height: 150px;
}

@media (max-width: 840px) {
	footer .text1 {
		font-size: 13px;
	}

	footer .our-theme,
	footer .rotary-theme {
		display: none;
	}

	footer .rotaract-theme-place {
		position: absolute;

		top: -5%;
	}

	footer .rotaract-theme {
		cursor: pointer;
    scale: 0.5;
		/* width: 200px; */

		/* height: 38px; */
	}
}

/* for board page for board page for board page  */

.about-section {
	width: 100%;

	height: 350px;

	display: flex;

	justify-content: center;

	align-items: center;

	text-transform: uppercase;

	font-family: Impacto, Impact, sans-serif;

	font-weight: bolder;

	font-size: 30px;

	background-image: linear-gradient(
			rgba(14, 14, 14, 0.952),
			rgba(36, 21, 34, 0.787)
		),
		url("../img/rotaract-theme.png");

	background-repeat: no-repeat;

	background-position: center;

	opacity: 100%;

	text-align: center;

	background-color: #1f2f2c;

	color: white;

	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.377);
}

.new-section {
	width: 100%;

	height: 330px;

	display: flex;

	justify-content: center;

	align-items: center;

	text-transform: uppercase;

	font-family: Impacto, Impact, sans-serif;

	font-weight: bolder;

	font-size: 30px;

	background-image: linear-gradient(
			rgba(8, 8, 8, 0.952),
			rgba(30, 20, 25, 0.787)
		),
		url("../img/Untitled-1.jpg");

	background-repeat: no-repeat;

	background-position: center;

	opacity: 100%;

	text-align: center;

	background-color: #1f2f2c;

	color: white;

	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.377);
}

.board5{
  background-image: linear-gradient(
    rgba(8, 8, 8, 0.952),
    rgba(30, 20, 25, 0.787)
  ),
  url("../img/serve-with-purpose.jpg") !important;
}

.container .row {
	padding-top: 20px;

	padding-bottom: 20px;

	width: 100%;

	display: flex;

	justify-content: space-around;
}

/* this is the box for the contents */

.container .row .column {
	border: solid;

	border-radius: 10px;

	border-color: rgb(255, 0, 102);

	border-width: 3px;

	width: 400px;

	/* height: 400px; */

	box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.698);

	margin: 20px;

	padding-top: 10px;

	padding-bottom: 40px;

	text-align: center;

	font-weight: bolder;

	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

	overflow: hidden;
}

/* .container .row .column:hover{

    transform: scale(1.05);

    transition: 0.3s;

    opacity: 95%;

    cursor: pointer;

} */

.photo {
	margin: auto;

	width: 200px;

	height: 200px;

	text-align: center;

	border: solid;

	border-radius: 50%;

	border-color: rgb(255, 0, 102);

	box-shadow: 5px 5px 5px 5px rgba(255, 1, 98, 0.377);

	border-width: 3px;

	overflow: hidden;

	transition: all 1s ease-out;
}

.container .row .column .member-icon {
	width: 200px;

	height: 200px;

	display: flex;

	justify-content: center;

	transition: all 0.3s ease-in-out;
}

.container .row .column .member-icon:hover {
	transition: all 0.3s ease-in;

	cursor: pointer;

	transform: scale(1.15);

	transform-origin: center;

	opacity: 90%;
}

.member-name {
	font-size: 25px;

	text-align: center;

	padding-top: 15px;
}

.member-title {
	font-size: 20px;

	padding: 5px;

	color: rgb(255, 0, 102);

	padding: 5px;
}

.member-phone {
	font-size: 17px;

	padding: 3px;
}

.member-email {
	font-size: 17px;

	padding: 3px;
}

.contact-icon {
	font-size: 17px;

	padding: 3px;

	font-family: cursive;

	height: 50px;

	line-height: 45px;

	border-radius: 10px;
}

.contact-icon a {
	color: blanchedalmond;

	background-color: black;

	padding: 12px 80px;

	border-radius: 10px;
}

.contact-icon a:hover {
	background-color: rgb(255, 0, 76);

	transition: all 1s ease-in;
}

.advisors-panel {
	border: solid rgb(255, 0, 76);

	border-width: 5px;

	margin-top: 100px;
}

.advisors-panel .advisors-panel-i {
	width: 100%;

	height: 50px;

	display: flex;

	line-height: 50px;

	justify-content: center;

	background-color: black;

	color: aliceblue;

	text-transform: uppercase;

	font-family: Impacto, Impact, sans-serif;

	font-size: 30px;
}

/* for tablets & mobile phone - responsiveness test  */

@media (max-width: 1620px) {
	label.logo .club-name {
		font-size: 25px;
	}
}

@media (max-width: 1500px) {
	label.logo .club-name {
		width: 45%;

		font-size: 22px;
	}

	nav ul li {
		font-size: 13px;
	}
}

@media (max-width: 1270px) {
	label.logo .club-name {
		left: 25%;

		font-size: 30px;
	}

	.checkbtn {
		display: block;

		font-size: 30px;
	}

	nav ul {
		position: absolute;

		width: 100%;

		height: calc(100vh - 80px);

		background: black;

		top: 101%;

		left: -101%;

		text-align: center;

		transition: all 0.3s;

		border: solid rgb(255, 0, 76) 2px;
	}

	nav ul li {
		display: block;

		line-height: 650%;

		height: 11%;
	}

	nav ul li a {
		font-size: 15px;
	}

	h1 {
		font-size: 20px;

		margin-top: 5%;
	}

	h3 {
		padding: 1px;

		font-size: medium;

		text-align: justify;
	}

	#check:checked ~ ul {
		left: 0;
	}
}

@media (max-width: 500px) {
	nav {
		height: 80px;
	}

	.div-adjustment {
		height: 80px;
	}

	nav .checkbtn {
		line-height: 80px;
	}

	nav .logo-container {
		height: 80px;
	}

	nav .logoimg {
		transform: scale(0.65);
	}

	nav .logoimg:hover {
		transform: scale(0.8);
	}

	.about-section,
	.new-section {
		height: 200px !important;

		font-size: 20px !important;
	}

	label.logo .club-name {
		width: 55%;

		font-size: 17px;

		text-align: center;
	}

	.fas {
		right: -20%;
	}

	.video-section .intro-video {
		height: 200px;

		width: 200px;
	}
}

@keyframes slide_left {
	0% {
		transform: translateX(-100px);

		opacity: 0;
	}

	100% {
		transform: translateX(0);

		opacity: 1;
	}
}

@keyframes slide_right {
	0% {
		transform: translateX(100px);

		opacity: 0;
	}

	100% {
		transform: translateX(0);

		opacity: 1;
	}
}

@keyframes slide_up {
	0% {
		transform: translateY(100px);

		opacity: 0;
	}

	100% {
		transform: translateX(0);

		opacity: 1;
	}
}

nav .toggle-button {
	position: absolute;

	top: 1.8rem;

	right: 5%;

	display: none;

	flex-direction: column;

	justify-content: space-between;

	width: 30px;

	height: 21px;

	cursor: pointer;

	animation: slide_left 0.4s linear forwards;
}

nav .toggle-button .bar1,
nav .toggle-button .bar2,
nav .toggle-button .bar3 {
	height: 4px;

	width: 100%;

	background-color: #e00065;

	border-radius: 10px;

	transition: 0.5s;
}

/* joinus */

* Enquiry Section*/ .container-2 {
	position: relative;
	max-width: 900px;
	width: 100%;
	border-radius: 6px;
	padding: 30px;
	margin: 0 15px;
	background-color: #fff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
}

.container-2 header {
	position: relative;
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

.container-2 header::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 3px;
	width: 27px;
	border-radius: 8px;
	background-color: #4070f4;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
}

.container-2 form {
	position: relative;
	margin-top: 16px;
	min-height: 490px;
	background-color: #fff;
	overflow: hidden;
}

.container-2 form .form {
	/*position: absolute;
  */
	background-color: #fff;
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	-o-transition: 0.3s ease;
}

.container-2 form .form.second {
	opacity: 0;
	pointer-events: none;
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
}

form.secActive .form.second {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
}

form.secActive .form.first {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
}

.container-2 form .title {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 500;
	margin: 6px 0;
	color: #333;
}

.container-2 form .fields {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

form .fields .input-field {
	display: flex;
	width: calc(100% / 3 - 15px);
	flex-direction: column;
	margin: 4px 0;
}

.input-field label {
	font-size: 12px;
	font-weight: 500;
	color: #2e2e2e;
}

.input-field input,
select {
	outline: none;
	font-size: 14px;
	font-weight: 400;
	color: #333;
	border-radius: 5px;
	border: 1px solid #aaa;
	padding: 0 15px;
	height: 42px;
	margin: 8px 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.input-field input :focus,
.input-field select:focus {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
}

.input-field select,
.input-field input[type="date"] {
	color: #707070;
}

.input-field input[type="date"]:valid {
	color: #333;
}

.container-2 form button,
.backBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	max-width: 200px;
	width: 100%;
	border: none;
	outline: none;
	color: #fff;
	border-radius: 5px;
	margin: 25px 0;
	background-color: #4070f4;
	transition: all 0.3s linear;
	cursor: pointer;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.container-2 form .btnText {
	font-size: 14px;
	font-weight: 400;
}

form button:hover {
	background-color: #265df2;
}

form button i,
form .backBtn i {
	margin: 0 6px;
}

form .backBtn i {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

form .buttons {
	display: flex;
	align-items: center;
}

form .buttons button,
.backBtn {
	margin-right: 14px;
}

@media (max-width: 750px) {
	.container-2 form {
		overflow-y: scroll;
	}

	.container-2 form::-webkit-scrollbar {
		display: none;
	}

	form .fields .input-field {
		width: calc(100% / 2 - 15px);
	}
}

@media (max-width: 550px) {
	form .fields .input-field {
		width: 100%;
	}
}

/*On Clicked Event Toogle Button*/

nav .open .bar1 {
	-webkit-transform: rotate(-45deg) translate(-6px, 6px);

	transform: rotate(-45deg) translate(-6px, 6px);
}

nav .open .bar2 {
	opacity: 0;
}

nav .open .bar3 {
	-webkit-transform: rotate(45deg) translate(-6px, -8px);

	transform: rotate(45deg) translate(-6px, -6px);
}

@media (max-width: 920px) {
	nav .toggle-button {
		display: flex;
	}
}