/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
.wrap{
	width:80%;
	margin:0 auto;
}
.top-hader{
	background:#A32859;
	padding: 10px 0px;
}
.top-header-left{
	float:left;
}
.top-header-left p,.top-header-right p{
	color:#fff;
	font-size:0.6em;
	font-family: 'Merriweather Sans', sans-serif;
}
.top-header-right{
	float:right;
}
.top-header-right p a{
	color:#fff;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
}
.top-header-right p a:hover{
	color:#222;
}
/*----main-header----*/
.main-header{
	background:#453F41;
	padding: 17px 0px 22px 0px;
}
.logo{
	float:left;
}
.top-nav{
	float:right;
	margin-top: 15.5px;
}
.top-nav ul li{
	display:inline-block;
}
.top-nav ul li a{
    color:#fff;
    font-size:16px;                  /* Better than 0.8em */
    font-family:'Merriweather Sans', sans-serif;
    font-weight:900;                 /* Bold */
    text-transform:uppercase;
    letter-spacing:0.5px;
    display:block;
    padding:0 27px;
    transition:all .3s ease;
}

.top-nav ul li a:hover{
    color:#ff9800;
}
/*---content---*/
.grid{
	text-align:center;
	width:25%;
	float:left;
}
.grid img{
	border-radius:50%;
	border: 10px solid rgb(255, 255, 255);
	cursor:pointer;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
	box-shadow: 0px 0px 10px rgb(221, 221, 221);
}
.grid h4,.projects h4,.about-left h4,.about-left h5,.about-right h4,.services h4{
	color:#453F41;
	font-size:1.3em;
	font-family: 'Merriweather Sans', sans-serif;
	text-transform: uppercase;
	display: block;
	margin: 25px 0px 15px 0px;
}
.grid img:hover{
	border: 10px solid rgb(255, 255, 255);
}
.grid a{
	background: url(../images/more-bg.png) -1px -3px;
	color: #fff;
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 0.9em;
	padding: 36px 43px;
	text-transform: uppercase;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
}
.grid a:hover{
	background: url(../images/more-bg1.png) -1px -3px;
}

.grid:hover img{
	border: 10px solid #A32859;
}
.grid:hover a{
	background: url(../images/more-bg1.png) -1px -3px;
}
.grids {
	padding-bottom: 61px;
	border-bottom: 1px ridge rgba(231, 231, 231, 0.41);
}
/*----project----*/
.project ul li{
	display:inline;
}
.project ul li a{
	float:right;
}
.project ul li p{
	float:left;
}
.project{
	width: 23.33%;
	border: 1px solid rgb(241, 241, 241);
	box-shadow: 0px 0px 10px rgb(235, 235, 235);
	float:left;
	margin: 0% 0% 3% 2%;
}
.project1{
	margin:0px;
}
.project img{
	cursor:pointer;
}

.project img{
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
}


.project:hover img{
	opacity:0.8;
}
.projects h4{
	margin: 11px 0px 11px 0px;
}
.projects p,.projects a{
	color:#453F41;
	font-size:0.8em;
	font-family: 'Merriweather Sans', sans-serif;
	display: block;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
}
.projects a:hover{
	color:#A32859;
}
.projects ul{
	border-bottom: 1px ridge rgba(241, 241, 241, 0.53);
	padding: 8px;
}
.readmore a,.about-right a,.service1 a{
	background:#A32859;
	color:#fff;
	padding:10px 12px;
	margin: 3px 0px;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
}
.readmore a:hover,.about-right a:hover,.service1 a:hover{
	background:#453F41;
	color:#fff;	
}
.projects {
	float: left;
	width: 100%;
	display: block;
}
.content-sidebar{
	float:right;
}
.footer{
	background: #453F41;
	padding: 3px 0px;
}
.left-footer{
	float:left;
}
.right-footer{
	float:right;
}
.right-footer p{
	color:#fff;
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 0.7em;
	margin-top: 11px;
}
.right-footer p a{
	color:#eee;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
}
.right-footer p a:hover{
	color:#000;
}
/*---about---*/
.about-left{
	float:left;
	width: 75%;
}
.about-left h4{
	margin: 18px 0px 7px 0px;
}
.about-left h3{
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 0.8em;
	color:#453F41;
}
.about-left p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: rgb(155, 155, 155);
	line-height: 1.8em;
	margin-bottom: 15px
}
.about-left h5{
	margin: 10px 0px 6px 0px;
	font-size:1em;
}
.about-right{
	float:right;
	width: 23.7%;
}
.about-right a,.service1 a{
	font-family: 'Merriweather Sans', sans-serif;
	font-size:0.8em;
	float: right;
}
.about-right img{
	cursor:pointer;
}
.about {
	padding-bottom: 20px;
}
/*---services----*/
.service1 h4{
	margin: 10px 0px 6px 0px;
	font-size: 1.1em;	
}
.service1 p{
	width:70%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: rgb(155, 155, 155);
	line-height: 1.8em;
	float:right;
}
.service1 img{
	float: left;
	width: 28.5%;
	cursor: pointer;
	background: #666;
	padding: 1px;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
}
.service1 img:hover{
	opacity:0.9;
	background:#A32859;
}
.services,.about {
	padding-bottom: 15px;
	border-bottom: 1px ridge rgba(231, 231, 231, 0.41);
}
/*---contact----*/
/*---contact----*/
/*----contact----*/
.contact{
	margin-bottom: 104px;
}
.contact-form{
	float:left;
	width: 50%;
}
.contact-sidebar{
	float: right;
	width: 336px;
}
.map{
	padding-top: 30px;
	float: right;
	width: 47%;
}
.contact h3{
	color: #2C9BB6;
	font-size: 25px;
	text-transform: uppercase;
	padding: 0 0 12px 0;
}

.contact-form form span{
	display:block;
}
form span{
	font-size: 1em;
	padding-bottom:5px;
	color: #453F41;
	font-family: 'Merriweather Sans', sans-serif;
}
.contact-form form textarea,
.contact-form form input[type=submit],
.contact-form form input[type=text]{
	border: 1px solid rgb(221, 221, 221);
	padding: 7px;
	width: 100%;
	outline:none;
	color:#666;
	font-size:0.9em;
	border-radius: 3px;
	font-family: Arial, Helvetica, sans-serif;
}
.map iframe{
	color: #5b5b5b;
	font-family: 'Merriweather Sans', sans-serif;
}	
.contact-form form input[type=submit]{
		 -moz-border-radius:3px;
		  -webkit-border-radius:3px; 
		  border-radius:3px; 
		  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
		  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
		  box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
		  background:#0160A4 url(../images/button-overlay.png) repeat-x; 
		  
		  color:#FFFFFF !important; 
		  cursor:pointer; 
		  display:inline-block; 
		  font-size:13px; 
		  font-weight:bold; 
		  line-height:1; 
		  overflow:visible; 
		  padding:10px 25px;
		  position:relative; 
		  text-decoration:none; 
		  text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); 
		  width:auto; 
		  text-align:center; 
}
.contact-form form input[type=submit] {
	background: #A32859;
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
	font-family: 'Merriweather Sans', sans-serif;
	font-size:0.75em;
}


.contact-form form input[type=submit]:hover{
	background: #453F41;
	color:#FF8400;
}

form textarea{
	height: 201px;
	color: #666;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
}
.contact h4{
	color: #453F41;
	font-size: 1.3em;
	font-family: 'Merriweather Sans', sans-serif;
	text-transform: uppercase;
	display: block;
	margin: 25px 0px 15px 0px;
}
.contact p {
	font-family: Arial, sans-serif;
	font-size: 0.8em;
	line-height: 1.5em;
	color: rgb(150, 150, 150);
	margin-bottom: 17px;
}
/*----404-page---*/
.error-page{
	text-align:center;
	height: 523px;
	padding-top: 130px;
}
.error-page h3,.error-page h1{
		color: #453F41;
		font-size: 6em;
		font-family: 'Merriweather Sans', sans-serif;
	}
.error-page h1{
	font-size:12em;
}
/*------responive-design--------*/
@media screen and (max-width: 1366px)	{
	.wrap{
		width:90%;
	}
}
@media screen and (max-width:1280px)	{
	.wrap{
		width:90%;
	}
	.grid img {
		width: 86%;
	}
	.project {
		width: 23.31%;	
	}
}
@media screen and (max-width:1024px)	{
	.wrap{
		width:90%;
	}
	.grid h4, .projects h4, .about-left h4, .about-left h5, .about-right h4, .services h4 {
		font-size: 1.11em;
	}
	.project {
		width: 23.25%;
	}
	.projects p, .projects a {
		font-size:0.7em;
	}
	.top-nav ul li a {
		padding: 0px 18px;
	}
	.contact {
		margin-bottom: 64px;
	}
}
@media screen and (max-width:800px){
	.wrap{
		width:90%;
	}
	.logo,.top-nav{
		float:none;
		text-align:center;
	}
	.top-nav ul li a {
		padding: 0px 12px;
	}
	.projects p, .projects a {
		font-size: 0.6em;
	}
	.project {
		width: 23.21%;
	}
	.readmore a, .about-right a, .service1 a {
		padding: 8px 10px;
	}
	.contact-form form textarea, .contact-form form input[type=text] {
		width: 96%;
	}
}
@media screen and (max-width:640px){
	.wrap{
		width:90%;
	}
	.grid img {
		width: 80%;
	}
	.project {
		width: 23.12%;
	}
	.project ul li p,.project ul li a {
		float:none;
		font-size:0.7em;
	}
	.readmore a{
		text-align:center;
	}
	.grid h4, .projects h4, .about-left h4, .about-left h5, .about-right h4, .services h4 {
		font-size: 1em;
	}
	.map{
		display:none;
	}
	.contact-form{
		width:100%;
	}
	
}
	
	
	
	
	
/* =====================================================
   Mobile Responsive Fix (320px to 640px)
   ===================================================== */

html,
body{
    width:100%;
    overflow-x:hidden;
}

*{
    box-sizing:border-box;
}

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

.image-slider,
.rslides,
.rslides li,
.rslides img{
    width:100%;
}

/* Phones */
@media only screen and (max-width:640px){

.wrap{
    width:100%;
    padding:0 10px;
}

.top-header-left,
.top-header-right,
.logo,
.left-footer,
.right-footer{
    float:none;
    width:100%;
    text-align:center;
}

.top-nav{
    float:none;
    margin-top:10px;
}

.top-nav ul{
    display:block;
}

.top-nav ul li{
    display:block;
    width:100%;
}

.top-nav ul li a{
    display:block;
    padding:12px;
    border-bottom:1px solid #555;
}

.grid,
.project,
.about-left,
.about-right,
.contact-form,
.contact-sidebar,
.map,
.service1 img,
.service1 p{
    float:none;
    width:100%;
}

.project{
    margin:15px 0;
}

.footer{
    text-align:center;
}

.right-footer p{
    margin-top:15px;
}

}

/* Small phones */
@media only screen and (max-width:480px){

.top-header-left p,
.top-header-right p{
    font-size:12px;
}

.top-nav ul li a{
    font-size:15px;
    padding:10px;
}

.main-header{
    padding:10px 0;
}

}

/* Very small phones */
@media only screen and (max-width:360px){

.top-nav ul li a{
    font-size:14px;
    padding:8px;
}

}	
	
	/*------------------Aboutus page CSS---------------------------------------------------------*/
	/* Singer Gallery */

.projects {
    margin-top: 30px;
}

.project {
    width: 23%;
    float: left;
    margin: 1%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.singer-img {
    width: 100%;
    height: 300px;          /* Same height for all */
    object-fit: cover;      /* Crop image instead of stretching */
    display: block;
    transition: all .4s ease;
}

.project:hover .singer-img {
    transform: scale(1.08);
}

/* Tablet */
@media(max-width:768px){



.singer-img{
    height:250px;
}

}

/* Mobile */
@media(max-width:480px){

.project{
    width:100%;
    margin:0 0 20px;
}

.singer-img{
    height:280px;
}

}
























/*==========================================================
INDIAN SINGER LIBRARY
Professional Responsive CSS
Part 1 of registration page css
==========================================================*/


/*==========================================================
RESET
==========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f4f7fc;
    color:#333;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    font-size:15px;
    line-height:1.6;
    overflow-x:hidden;
}


/*==========================================================
CONTAINER
==========================================================*/

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
}

.container-fluid{
    width:100%;
}


/*==========================================================
LINKS
==========================================================*/

a{
    text-decoration:none;
    transition:.3s;
}

a:hover{
    text-decoration:none;
}


/*==========================================================
IMAGES
==========================================================*/

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


/*==========================================================
HEADER
==========================================================*/

.main-header{

    background:#2d2d2d;

    position:sticky;

    top:0;

    left:0;

    z-index:9999;

    border-bottom:4px solid #ff9800;

    box-shadow:0 4px 18px rgba(0,0,0,.15);

}

.main-header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

}


/*==========================================================
LOGO
==========================================================*/

.logo img{

    height:70px;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}


/*==========================================================
NAVIGATION
==========================================================*/

.navigation{

    text-align:right;

}

.navigation ul{

    list-style:none;

}

.navigation ul li{

    display:inline-block;

    margin-left:25px;

}

.navigation ul li a{

    color:#fff;

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    padding:10px 5px;

    position:relative;

}

.navigation ul li a:after{

    content:'';

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:#ff9800;

    transition:.35s;

}

.navigation ul li a:hover:after{

    width:100%;

}

.navigation ul li a:hover{

    color:#ff9800;

}


/*==========================================================
REGISTER BUTTON
==========================================================*/

.registerButton a{

    background:#ff9800;

    color:#fff !important;

    padding:12px 26px !important;

    border-radius:35px;

    box-shadow:0 8px 20px rgba(255,152,0,.25);

}

.registerButton a:hover{

    background:#173f90;

    color:#fff !important;

}


/*==========================================================
PAGE HEADING
==========================================================*/

.pageHeading{

    text-align:center;

    margin:50px 0;

}

.pageHeading h2{

    font-size:46px;

    font-weight:700;

    color:#173f90;

    margin-bottom:12px;

}

.pageHeading p{

    font-size:20px;

    color:#777;

}


/*==========================================================
STEP WIZARD
==========================================================*/

/*==================================================
 PROFESSIONAL STEP WIZARD
==================================================*/

.stepWizard{
    max-width:1100px;
    margin:45px auto;
    padding:25px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.stepWizard ul{
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    margin:0;
    padding:0;
}

.stepWizard ul:before{
    content:"";
    position:absolute;
    top:32px;
    left:10%;
    right:10%;
    height:5px;
    background:#d8dde8;
    border-radius:20px;
    z-index:0;
}

.stepWizard li{
    position:relative;
    flex:1;
    text-align:center;
    z-index:2;
    color:#999;
    font-weight:600;
}

.stepWizard li span{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    border-radius:50%;
    background:#d7dce5;
    color:#fff;
    font-size:24px;
    font-weight:700;
    border:5px solid #fff;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
}

.stepWizard li h5{
    margin-top:15px;
    margin-bottom:5px;
    font-size:17px;
    color:#555;
    font-weight:700;
}

.stepWizard li small{
    display:block;
    color:#999;
    font-size:13px;
}

/* Current Step */

.stepWizard li.active span{
    background:linear-gradient(135deg,#173f90,#2d6de8);
    box-shadow:0 12px 28px rgba(23,63,144,.35);
}

.stepWizard li.active h5{
    color:#173f90;
}

.stepWizard li.active small{
    color:#173f90;
}

/* Completed Step */

.stepWizard li.completed span{
    background:#28a745;
}

.stepWizard li.completed h5{
    color:#28a745;
}

.stepWizard li.completed:after{
    content:"";
    position:absolute;
    top:32px;
    left:50%;
    width:100%;
    height:5px;
    background:#28a745;
    z-index:-1;
}

/* Responsive */

@media(max-width:768px){

.stepWizard{
    padding:15px 10px;
}

.stepWizard ul{
    display:flex;
    justify-content:space-between;
}

.stepWizard ul:before{
    top:25px;
    left:35px;
    right:35px;
}

.stepWizard li span{
    width:50px;
    height:50px;
    font-size:18px;
}

.stepWizard li h5{
    font-size:12px;
    line-height:16px;
}

.stepWizard li small{
    display:none;
}

}
/*==========================================================
MEMBERSHIP CARDS
==========================================================*/

.plan-wrapper{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin-top:40px;

}

.plan-square{

    width:340px;

    background:#fff;

    border-radius:20px;

    padding:30px;

    border:2px solid #e6e6e6;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    text-align:center;

}

.plan-square:hover{

    transform:translateY(-8px);

    border-color:#173f90;

    box-shadow:0 20px 40px rgba(23,63,144,.15);

}

.featured-plan{

    border:3px solid #ff9800;

}

.bestBadge{

    position:absolute;

    top:-15px;

    right:18px;

    background:#ff9800;

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}

.plan-icon{

    width:75px;

    height:75px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    background:#173f90;

    color:#fff;

    margin-bottom:20px;

}

.featured-plan .plan-icon{

    background:#ff9800;

}

.plan-title{

    font-size:24px;

    color:#173f90;

    font-weight:700;

    margin-bottom:15px;

}

.plan-price{

    font-size:55px;

    color:#ff9800;

    font-weight:800;

    margin-bottom:20px;

}

.plan-features{

    list-style:none;

    text-align:left;

    margin:20px 0;

}

.plan-features li{

    padding:10px 0;

    border-bottom:1px solid #f1f1f1;

}

.plan-features li:last-child{

    border-bottom:none;

}

.plan-select{

    margin-top:20px;

}

.plan-select input[type=radio]{

    transform:scale(1.4);

}


/*==========================================================
BUTTONS
==========================================================*/

.btn{

    border-radius:40px;

    padding:13px 34px;

    font-weight:600;

    transition:.35s;

}

.btn-warning{

    background:#ff9800;

    color:#fff;

    border:none;

}

.btn-warning:hover{

    background:#173f90;

    color:#fff;

}

.btn-secondary{

    background:#6c757d;

    color:#fff;

    border:none;

}

.btn-secondary:hover{

    background:#4f5962;

}


/*==========================================================
CARD
==========================================================*/

.card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border:none;

}


/*==========================================================
RESPONSIVE TABLET
==========================================================*/

@media(max-width:991px){

.navigation ul li{

margin-left:15px;

}

.pageHeading h2{

font-size:38px;

}

.plan-wrapper{

gap:25px;

}

}


/*==========================================================
RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.main-header .container{

display:block;

text-align:center;

}

.logo{

margin-bottom:15px;

}

.logo img{

margin:auto;

height:60px;

}

.navigation{

text-align:center;

}

.navigation ul li{

display:block;

margin:15px 0;

}

.pageHeading{

margin:30px 0;

}

.pageHeading h2{

font-size:30px;

}

.pageHeading p{

font-size:17px;

}

.stepWizard ul{

display:block;

}

.stepWizard ul:before{

display:none;

}

.stepWizard li{

margin-bottom:25px;

}

.plan-square{

width:100%;

max-width:350px;

margin:auto;

}

.btn{

width:100%;

margin-bottom:10px;

}

}


/*==========================================================
REGISTRATION FORM
==========================================================*/

.registration-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    margin-bottom:35px;

    border:1px solid #e9edf5;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:.3s;

}

.registration-card:hover{

    box-shadow:0 20px 45px rgba(0,0,0,.09);

}


/*==========================================================
SECTION HEADER
==========================================================*/

.form-section-header{

    display:flex;

    align-items:center;

    margin-bottom:35px;

    padding-bottom:20px;

    border-bottom:1px solid #edf1f6;

}

.form-section-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:linear-gradient(135deg,#173f90,#2f6ce5);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    margin-right:18px;

    box-shadow:0 10px 20px rgba(23,63,144,.18);

}

.form-section-header h3{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#173f90;

}

.form-section-header small{

    display:block;

    color:#888;

    font-size:14px;

    margin-top:4px;

}


/*==========================================================
FORM GROUP
==========================================================*/

.form-group{

    margin-bottom:28px;

}


/*==========================================================
LABEL
==========================================================*/

.form-group label{

    display:block;

    font-size:15px;

    font-weight:600;

    color:#173f90;

    margin-bottom:10px;

}

.form-group label small{

    display:block;

    color:#666;

    font-size:13px;

    margin-top:4px;

    font-weight:500;

}

.required{

    color:#e53935;

}


/*==========================================================
INPUTS
==========================================================*/

.registration-card .form-control{

    width:100%;

    height:52px;

    border:1px solid #d9dee7;

    border-radius:12px;

    background:#fff;

    font-size:15px;

    padding:12px 15px;

    transition:.30s;

}

.registration-card .form-control:hover{

    border-color:#173f90;

}

.registration-card .form-control:focus{

    border-color:#ff9800;

    box-shadow:0 0 0 4px rgba(255,152,0,.12);

    outline:none;

}


/*==========================================================
TEXTAREA
==========================================================*/

.registration-card textarea.form-control{

    min-height:130px;

    resize:vertical;

}


/*==========================================================
DROPDOWN
==========================================================*/

.registration-card select.form-control{

    cursor:pointer;

}


/*==========================================================
INPUT GROUP
==========================================================*/

.input-group{

    display:flex;

}

.input-group .form-control{

    border-top-right-radius:0;

    border-bottom-right-radius:0;

}

.input-group-btn .btn{

    height:52px;

    border-radius:0 12px 12px 0;

}


/*==========================================================
RADIO BUTTONS
==========================================================*/

.radio-list{

    padding-top:10px;

}

.radio-list input[type=radio]{

    transform:scale(1.2);

    margin-right:6px;

}

.radio-list label{

    margin-right:25px;

    font-weight:500;

    color:#444;

}


/*==========================================================
CHECKBOX
==========================================================*/

.checkbox{

    margin:18px 0;

}

.checkbox label{

    font-weight:500;

    color:#444;

}

.checkbox input{

    transform:scale(1.2);

    margin-right:8px;

}


/*==========================================================
UPLOAD BOX
==========================================================*/

.upload-box{

    background:#fafbfd;

    border:2px dashed #d6dde8;

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.3s;

}

.upload-box:hover{

    border-color:#173f90;

    background:#f6f9ff;

}

.upload-box h4{

    color:#173f90;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

.upload-box .fa{

    font-size:30px;

    margin-bottom:10px;

}


/*==========================================================
IMAGE PREVIEW
==========================================================*/

#imgPreview{

    margin:auto;

    margin-top:20px;

    border-radius:15px;

    border:2px solid #e5e5e5;

}


/*==========================================================
ALERT
==========================================================*/

.alert{

    border-radius:12px;

    border:none;

}

.alert-info{

    background:#edf7ff;

    color:#004b87;

}

.alert-warning{

    background:#fff8e5;

    color:#9a6500;

}


/*==========================================================
FILE UPLOAD
==========================================================*/

input[type=file]{

    padding:8px;

}


/*==========================================================
ROW SPACING
==========================================================*/

.registration-card .row{

    margin-left:-12px;

    margin-right:-12px;

}

.registration-card [class*="col-"]{

    padding-left:12px;

    padding-right:12px;

}


/*==========================================================
MOBILE
==========================================================*/

@media(max-width:768px){

.registration-card{

padding:20px;

border-radius:15px;

}

.form-section-header{

display:block;

text-align:center;

}

.form-section-icon{

margin:0 auto 15px;

}

.form-section-header h3{

font-size:22px;

}

.registration-card .form-control{

height:46px;

font-size:14px;

}

.registration-card textarea.form-control{

min-height:120px;

}

.input-group{

display:block;

}

.input-group .form-control{

border-radius:10px;

margin-bottom:10px;

}

.input-group-btn .btn{

width:100%;

border-radius:10px;

}

.radio-list label{

display:block;

margin-bottom:10px;

}

.upload-box{

padding:20px;

}

}



/*==========================================================
PART 3
FINAL PROFESSIONAL STYLING
==========================================================*/


/*==========================================================
BUTTONS
==========================================================*/

.btn{

    border-radius:50px;

    font-weight:600;

    padding:13px 32px;

    transition:all .35s ease;

    letter-spacing:.4px;

}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(0,0,0,.15);

}

.btn:focus{

    outline:none;

    box-shadow:none;

}

.btn-warning{

    background:#ff9800;

    color:#fff;

    border:none;

}

.btn-warning:hover{

    background:#173f90;

    color:#fff;

}

.btn-secondary{

    background:#6c757d;

    color:#fff;

    border:none;

}

.btn-secondary:hover{

    background:#495057;

    color:#fff;

}


/*==========================================================
VALIDATION
==========================================================*/

.text-danger{

    display:block;

    margin-top:6px;

    font-size:13px;

    font-weight:600;

    color:#dc3545;

}

input.error,
select.error,
textarea.error{

    border-color:#dc3545 !important;

}

input.valid,
select.valid,
textarea.valid{

    border-color:#28a745 !important;

}


/*==========================================================
SUCCESS MESSAGE
==========================================================*/

.text-success{

    color:#28a745;

    font-weight:600;

}


/*==========================================================
UPLOAD AREA
==========================================================*/

.upload-box{

    transition:.35s;

}

.upload-box:hover{

    transform:translateY(-4px);

}

.upload-box input[type=file]{

    border:none;

    background:#fff;

}


/*==========================================================
IMAGE PREVIEW
==========================================================*/

#imgPreview{

    display:block;

    margin:20px auto 0;

    border-radius:15px;

    overflow:hidden;

    object-fit:cover;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}


/*==========================================================
ALERT BOXES
==========================================================*/



.alert-info{

    background:#eef7ff;

    color:#0d6efd;

}

.alert-warning{

    background:#fff7e8;

    color:#996200;

}

.alert-success{

    background:#ecfff2;

    color:#198754;

}


/*==========================================================
TABLE
==========================================================*/

.table{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

}

.table th{

    background:#173f90;

    color:#fff;

    border:none;

    font-weight:600;

}

.table td{

    vertical-align:middle;

}


/*==========================================================
PROGRESS ANIMATION
==========================================================*/

.registration-card{

    animation:fadeUp .5s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
INPUT PLACEHOLDER
==========================================================*/

::placeholder{

    color:#999;

    opacity:1;

}


/*==========================================================
FOCUS EFFECT
==========================================================*/

.form-control:focus{

    background:#fffefc;

}


/*==========================================================
CARD HOVER
==========================================================*/

.registration-card:hover{

    transform:translateY(-2px);

}


/*==========================================================
CHECKBOX
==========================================================*/

.checkbox{

    margin-bottom:15px;

}

.checkbox input{

    transform:scale(1.15);

}


/*==========================================================
RADIO BUTTON
==========================================================*/

input[type=radio]{

    cursor:pointer;

}


/*==========================================================
FOOTER
==========================================================*/

.footer{

    margin-top:60px;

    background:#222;

    color:#ddd;

    padding:40px 0;

}

.footer h4{

    color:#fff;

    margin-bottom:18px;

}

.footer a{

    color:#ddd;

}

.footer a:hover{

    color:#ff9800;

}


/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:9px;

}

::-webkit-scrollbar-thumb{

    background:#173f90;

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}


/*==========================================================
UTILITY CLASSES
==========================================================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}

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


/*==========================================================
TABLET
==========================================================*/

@media (max-width:991px){

.pageHeading h2{

font-size:36px;

}

.form-section-header{

display:block;

text-align:center;

}

.form-section-icon{

margin:0 auto 15px;

}

.plan-wrapper{

gap:25px;

}

}


/*==========================================================
MOBILE
==========================================================*/

@media (max-width:767px){

body{

font-size:14px;

}

.registration-card{

padding:18px;

margin-bottom:20px;

}

.pageHeading{

margin:20px 0;

}

.pageHeading h2{

font-size:28px;

line-height:36px;

}

.pageHeading p{

font-size:15px;

}

.form-section-header h3{

font-size:20px;

}

.form-group{

margin-bottom:18px;

}

.form-group label{

font-size:14px;

}

.form-control{

height:46px;

font-size:14px;

}

textarea.form-control{

height:110px;

}

.btn{

width:100%;

margin-bottom:10px;

}

.text-right,
.text-left{

text-align:center !important;

}



.stepWizard li{

margin-bottom:20px;

}

.plan-square{

width:100%;

max-width:340px;

margin:auto;

}

.navigation ul li{

display:block;

margin:12px 0;

}

.logo img{

height:55px;

margin:auto;

}

}





/*==========================================================
PRINT
==========================================================*/

@media print{

.main-header,
.btn,
.navigation{

display:none;

}

.registration-card{

box-shadow:none;

border:1px solid #ddd;

}

body{

background:#fff;

}

}

/*==========================================================
END OF FILE
==========================================================*/


.mobile-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

/* ===========================
   MOBILE HEADER
=========================== */

.main-header{
    background:#474041;
    padding:20px 0;
    position:sticky;
    top:0;
    z-index:9999;
}

.wrap{
    width:95%;
    max-width:1200px;
    margin:auto;
}

.menu-toggle{
    display:none;
    color:#fff;
    font-size:30px;
    cursor:pointer;
}

.top-nav ul{
    display:flex;
    justify-content:center;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
}

.top-nav ul li{
    margin:0 12px;
}

.top-nav ul li a{
    color:#fff;
    text-decoration:none;
}

@media(max-width:768px){

.menu-toggle{
    display:block;
}

.top-nav{
    display:none;
    width:100%;
    background:#222;
    margin-top:10px;
}

.top-nav.show{
    display:block;
}

.top-nav ul{
    display:block;
}

.top-nav ul li{
    margin:0;
}

.top-nav ul li a{
    display:block;
    padding:15px;
    text-align:left;
    border-bottom:1px solid #444;
}

}



/* DOB Field */
.dob-wrapper{
    position:relative;
}

.dob-wrapper input{
    height:50px;
    border-radius:8px;
    padding-right:50px;
}

.calendar-btn{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:#ff9800;
    font-size:20px;
    cursor:pointer;
}

.ui-datepicker{
    z-index:99999 !important;
    font-size:14px;
}

.ui-datepicker-calendar td a{
    text-align:center;
}

.ui-datepicker-header{
    background:#ff9800;
    color:#fff;
}




.login-icon{
    width:90px;
    height:90px;
    line-height:90px;
    border-radius:50%;
    background:#173f90;
    color:#fff;
    font-size:40px;
    margin:0 auto 20px;
    text-align:center;
}

.login-title{
    font-size:30px;
    color:#173f90;
    font-weight:bold;
    margin-bottom:10px;
}

.login-subtitle{
    color:#777;
    margin-bottom:30px;
}

.btn-warning{
    width:100%;
    height:50px;
    font-size:18px;
    border-radius:30px;
}

.btn-link{
    font-size:16px;
    color:#173f90;
    font-weight:bold;
}






.login-card .form-group{
    margin-bottom:20px;
}

.login-card label{
    font-weight:600;
    color:#173f90;
}

.login-title{
    color:#173f90;
    margin-bottom:10px;
    font-size:30px;
}

.login-subtitle{
    color:#666;
    margin-bottom:30px;
}

.login-icon{
    width:90px;
    height:90px;
    line-height:90px;
    border-radius:50%;
    background:#173f90;
    color:#fff;
    font-size:42px;
    margin:0 auto 20px;
    text-align:center;
}

.registration-card .form-control,
.login-card .form-control{
    height:42px;
    font-size:14px;
    padding:8px 12px;
}

.heroBanner{
    background:linear-gradient(135deg,#173f90,#0f66d8);
    color:#fff;
    padding:45px;
    border-radius:20px;
    text-align:center;
    margin:25px 0 35px;
    box-shadow:0 20px 45px rgba(23,63,144,.20);
}

.heroBanner h1{
    font-size:40px;
    margin-bottom:8px;
    font-weight:700;
}

.heroBanner p{
    font-size:18px;
    opacity:.9;
}




/*=========================================
 PROFESSIONAL BUTTON DESIGN
=========================================*/

.action-buttons{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:35px;
    flex-wrap:wrap;
    gap:15px;
}

.action-buttons .btn{
    width:auto !important;
    min-width:190px;
    height:48px;
    padding:0 28px;
    border-radius:30px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.4px;
    transition:.30s;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.action-buttons .btn:hover{
    transform:translateY(-2px);
}

.btn-next{
    background:linear-gradient(135deg,#ff9800,#ff7b00);
    color:#fff;
    border:none;
}

.btn-next:hover{
    background:linear-gradient(135deg,#173f90,#2458c6);
}

.btn-prev{
    background:#6c757d;
    color:#fff;
    border:none;
}

.btn-prev:hover{
    background:#4b535a;
}

.btn-main{
    width:auto !important;
    min-width:260px;
    height:52px;
    border-radius:40px;
    padding:0 35px;
    font-size:18px;
    font-weight:700;
    letter-spacing:.5px;
    background:linear-gradient(135deg,#ff9800,#ff7b00);
    color:#fff;
    border:none;
    box-shadow:0 10px 25px rgba(255,152,0,.30);
}

.btn-main:hover{
    background:linear-gradient(135deg,#173f90,#2d67df);
    color:#fff;
}

/* Mobile */

@media(max-width:768px){

.action-buttons{
    flex-direction:column;
}

.action-buttons .btn,
.btn-main{
    width:100% !important;
}

}
.upload-info{
    width:100%;
    margin:20px auto;
    padding:25px 35px;
    background:#f8fbff;
    border-left:5px solid #173f90;
    border-radius:15px;
    text-align:left;
}

.upload-info h5{
    margin:0 0 25px;
    text-align:center;
    color:#173f90;
    font-size:24px;
    font-weight:700;
}

.upload-info ul{
    list-style:none;
    margin:0;
    padding:0;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
}

.upload-info li{
    display:flex;
    align-items:center;
    padding:12px 0;
    font-size:16px;
    color:#444;
}

.upload-info li i{
    width:35px;
    color:#28a745;
    font-size:20px;
    margin-right:10px;
}

@media(max-width:768px){

.upload-info{
    padding:18px;
}

.upload-info ul{
    max-width:100%;
}

.upload-info li{
    font-size:14px;
}

}


.register-btn{
    background:#ff9800;
    color:#fff !important;
    border:2px solid #ff9800;
}

.register-btn:hover{
    background:#fff;
    color:#ff9800 !important;
}