.loginpage #header {
 	background: linear-gradient(90deg, #C7C5F4, #776BCC);		
 }
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
	box-sizing: border-box;
}
/*===========Usefull CSS===========*/

.clearfix {
 *zoom: 1;
}
.clearfix:before, .clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix:after {
	clear: both;
}
.row:before, .row:after {
	display: table;
	line-height: 0;
	content: "";
}
.row:after {
	clear: both;
}
/* Global
----------------------------------*/
body {
	color: #000;
	height: 100%;
	background-repeat: no-repeat;
	font-weight: 400;
	color: rgba(34,34,34,1);
	font-size: 15px;
	line-height: 18px;
	overflow-x: hidden;
 	overflow-y: hidden; 
}

a {
	color: #0c99d5;
	outline: none;
	border: none;
}
a:focus {
	outline: none;
	border: none;
}
/* Guideline Frame
----------------------------------*/
.wrapper {
	position: relative;
	margin: 0 15px;
	padding: 0;
}
.wrapper:before, .wrapper:after {
	display: table;
	line-height: 0;
	content: "";
}
.wrapper:after {
	clear: both;
}
.container:before, .container:after {
	display: table;
	line-height: 0;
	content: "";
}
.container:after {
	clear: both;
}
.container {
	position: relative;
	margin: 0 auto;
	display: block;

}
.widget-guide {
	position: relative;
	margin: 0 auto;
	display: block;
	max-width: 1180px;
	/*max-width: 1170px;*/
	width: 100%;
}
.widget-guide:before, .widget-guide:after {
	display: table;
	line-height: 0;
	content: "";
}
.widget-guide:after {
	clear: both;
}

.btmhead {
	background: none;
	/*height: 135px;*/
	margin: 15px 0 0px;
}
.btmhead:before, .btmhead:after {
	display: table;
	line-height: 0;
	content: "";
}
.btmhead:after {
	clear: both;
}

.header-right {
	float: left;
	width: 111px;
	height: 30px;
	display: block;
	outline: none;
}
.float-element {
	float: left;
	clear: both;
	display: block;
	margin: 23px 0 18px;
	width: 100%;
	text-align: right;
}

.header-right .float-element a:focus {
	outline: none;
}

.header-right .float-element a:focus {
	outline: none;
}
.drdologo{

	width:82%;
	margin-right: -56%;
	margin-top: -16%;
	/* box-shadow: 2px 2px 8px rgb(0 0 0 / 70%);
    border-radius: 50%; */
}

/*Logo*/

.logo {
	background:  no-repeat 10px 0;
	float: left;
	font-size: 214%;
	line-height: 93%;
	font-weight: 700;
	min-height: 100px;
	padding: 21px 0 0 86px;
	color: rgba(255,255,255,1);
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
.logo a {
	color: rgba(255,255,255,1);
	display: block;
	text-align: left;
	font-style: normal;
	font-weight: 700;
	font-size: 74%;
}
.logo a:focus,
.logo a:hover {
	color: rgba(124,199,252,1);
	outline: none;
}
.logo a span {
	display: block;
	font-style: normal;
	font-weight: 800;
	font-size: 135%;
	margin-top: 5%;
	font-family: Montserrat,'sans-seriff' !important;
}


	
	

/* ********************************************************** Login CSS ***********************************************************************/

	.header-container{
		background-color: transparent;
	}
	
	.drdo-writing{
		font-size: 1.5rem;
		font-weight: bolder;
		color: #02b0de;
  		font-family:'Montserrat', sans-serif;
	}


	.quote{
		font-weight: 500 !important;
		color: #3ea5d0!important;
		font-size: 18px;
		font-family: 'Lato', sans-serif;
	}
	
	.login-form-wrapper{
		border-radius: 8px;
	}
	
	.form-group {
    margin-bottom: 1.9rem !important;
	}
	
	.btn-primary {
    color: #fff;
    background: #3ea5d0 linear-gradient(180deg,#5bb3d7,#3ea5d0) repeat-x;
    border-color: #3ea5d0;
	}
	
	 
	 .fa {
  		top: 17px;
 		 right: 1rem;
	}

	.form-group a i {
  		font-family: FontAwesome;
  		margin: 0 auto;
 	 	font-size: 5rem;
  		font-style: normal;
	}
	
	.form-control{
		font-family: Lato !important;
	}




.loginpage #header {
 background: linear-gradient(90deg, #C7C5F4, #776BCC);		
 }


.grid img{
	width:50%;
	margin-top:10%;
	margin-left:20%;
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
  
}



.img_container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 25vh;
  
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  line-height: 0;
}

.box > img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover; 
  transition: .5s;
}

.box > span {
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
}

.box:hover { flex: 1 1 4%; }
.box:hover > img {
  width: 40%;
  height: 40%;
}
 
 /* Carousel Slides */
 
 .slide1{
 	width:40% !important;
 	margin-left: 33%;
 }
 
 .slide3{
 	width:80% !important;
 	margin-left: 10%;
 }
 
  .slide4{
 	width:70% !important;
 	margin-left: 15%;
 	
 }
 
 .flex-pauseplay a {
  display: block;
  width: 35px;
  height: 35px;
  line-height:35px;
  position: absolute;
  text-align:center;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
  border-radius:3px;
}
.flex-pauseplay a:before {
  font-family: "FontAwesome";
  font-size: 20px;
  display: inline-block;
  content: '\f04c';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f04b ';
}
.flex-nav-next{
	display: hidden;
}


.marquee {
  height: 30px;
  width: 96%;
  overflow: hidden;
  position: relative;
  color:white;
  font-family: 'Lato', sans-serif;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
  padding:10px;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}


.rectangle {
  height: 40px;
  width: 100px;
  background-color: rgba(255,222,0,1);
  color:rgba(6,103,200,1);
  padding-top:10px;
  padding-right:15px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}	
.arrowlogo{
	width:69%;
}
.whatsnew{
	padding-left: 19%;
    padding-top: 8%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: orange;
  
}
.arrowdiv{
	margin-left: -20px;
}


/* Buttons nav */

.nav-link {	
	color:white;
	font-family: 'Montserrat',sans-serif;
	font-weight: 600;
}

.justify-content-end{
	margin-right: 7%;
}

.nav-tabs{
	border-bottom: 0px solid white !important;
}
	
	.support-row {
	clear: both;
	overflow: hidden;
	display: block;
	padding: 35px 0;
	margin: 0;
	background: linear-gradient(90deg, #C7C5F4, #776BCC);		
	font-family: 'Open Sans';
	color: rgba(255,255,255,1);
}

#footer {
	background-color: rgba(86,86,86,1);
	clear: both;
	overflow: hidden;
	padding-bottom:3px;
	margin: 0;
}

.nav-link:hover{
	color: black !important;
}

.copyright-content{
	text-align: center;
    color: white;
    padding: 23px 0px 0px 0px;
}

.copyright-content p{
	font-size: 12px !important;
}



/*Instead of fixed pixel values for dimensions, use relative units such as percentages, viewport units (vw and vh), or em units. This allows your elements to scale with the viewport size.*/

	
.screen {		
	 background: linear-gradient(90deg, #5D54A4, #7C78B8);
     position: relative;
     box-shadow: 0px 0px 2vw #5C5696; /* Use viewport width units for box-shadow as well */
     height: 65vh;/*Use viewport width units */
	 width: 22vw;	/* Use viewport width units */
     margin-left: auto;
     margin-right: auto;
	

}

.screen__content {
	z-index: 1;
	position: relative;	
	height: 100%;
}

.screen__background {		
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);	
}

.screen__background__shape {
	transform: rotate(45deg);
	position: absolute;
}

.screen__background__shape1 {
	height: 520px;
	width: 520px;
	background: #FFF;	
	top: -50px;
	right: 120px;	
	border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
	height: 220px;
	width: 220px;
	background: #6C63AC;	
	top: -172px;
	right: 0;	
	border-radius: 32px;
}

.screen__background__shape3 {
	height: 540px;
	width: 190px;
	background: linear-gradient(270deg, #5D54A4, #6A679E);
	top: -24px;
	right: 0;	
	border-radius: 32px;
}

.screen__background__shape4 {
	height: 400px;
	width: 200px;
	background: #7E7BB9;	
	top: 420px;
	right: 50px;	
	border-radius: 60px;
}



.login__field {
	padding: 20px 0px;	
	position: relative;	
}

.login-info-container{
	padding-top:1vw;
	padding-left:1vw;
}



.login-form-container{
	padding-top:1vw;
} 

.login__icon {
	top: 39px;
	color: #7875B5;
	font-size:21px;
}

.login__input {
	border: none;
	border-bottom: 2px solid #D1D1D4;
	font-size: 22px!important;
	background: none;
	padding: 1vw;
	padding-left: -2vw;
	font-weight: 700;
	width: 75%;
	transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
	outline: none;
	border-bottom-color: #6A679E;
}






/****************************************************RESPONSIVE CSS***********************************************************************  */
.loginCard{
	background-color:transparent;
	padding-left:70px;
	padding-right:70px;
   
   
}
.login-main-container{
   	padding: 3px;
	 box-shadow:inset 0 -1em 3em rgb(49 0 200 / 30%),
    0 0 0 2px transparent;
    color: #999;
    border-radius:10px;
}


 .loginForm {

} 

.loginGroup{
	
    
}
.imageCard{
}


.card2 {
	margin: 0px 40px;
	 background-color:transparent;
	
}





.image {
	width: 360px;
	height: 280px;
}


.border-line {
	border-right: 1px solid #EEEEEE;
}

input, textarea {
	padding: 10px 12px 10px 12px;
	border: 1px solid lightgrey;
	border-radius: 2px;
	margin-bottom: 5px;
	margin-top: 2px;
	width: 100%;
	box-sizing: border-box;
	color: #2C3E50;
	font-size: 14px;
	letter-spacing: 1px;
}

input:focus, textarea:focus {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border: 1px solid #304FFE;
	outline-width: 0;
}

button:focus {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline-width: 0;
}

a {
  color: inherit;
  cursor: pointer;
}

.btn-blue {
	background-color: #1A237E;
	width: 150px;
	color: #fff;
	border-radius: 2px;
}

.btn-blue:hover {
	background-color: #000;
	cursor: pointer;
}

.bg-blue {
	color: #fff;
	background-color: #1A237E;
}

.login__submit {
	
    box-shadow: 0 0 20px rgba(104, 85, 224, 0.2);
    color: #4b46ad;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(104, 85, 224, 1);
	width: 150px;
	font-size: 16px;
	font-weight:bold;
/* 	transition: .2s; */

}



.login__submit:active,
.login__submit:focus,
.login__submit:hover {
	
	color: white;
    box-shadow: 0 0 20px rgba(104, 85, 224, 0.6);
    background-color: rgba(104, 85, 224, 1);

}


/* Media Query For different screens */
@media (min-width:320px) and (max-width:479px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:480px) and (max-width:599px)  { /* smartphones, Android phones, landscape iPhone */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:600px) and (max-width: 800px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */

}
@media (min-width:1281px) { /* hi-res laptops and desktops */

}


.card0 {
	box-shadow: 0px 4px 8px 0px #757575;
	border-radius: 0px;
}


.loginLabel{
	color:black;
	}


@media screen and (max-width: 991px) {
	.logo {
		margin-left: 0px;
	}
	.image {
		width: 300px;
		height: 220px;
	}
	.border-line {
		border-right: none;
	}
	.card2 {
		border-top: 1px solid #EEEEEE !important;
		margin: 0px 3px;
	}
	
	
}



/* Media Query For different screens */
@media (min-width:320px) and (max-width:479px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:480px) and (max-width:599px)  { /* smartphones, Android phones, landscape iPhone */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:600px) and (max-width: 800px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */

}
@media (min-width:1281px) { /* hi-res laptops and desktops */

}




@media (min-width: 760px) {
  .footer-content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1230px;
      padding: 40px 15px 450px;
      position: relative;
  }

  .footer-wave-svg {
      height: 50px;
  }

  .footer-content-column {
      width: 24.99%;
  }
}
@media (min-width: 568px) {
  /* .footer-content-column {
      width: 49.99%;
  } */
}