/*
Custom Styles 
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');

html, body {
  font-family: 'Poppins', sans-serif;
}

/* Forms */
input[name], textarea[name]{
	padding: 26px 20px;
	/*padding :18.5px;*/
	/*border-radius: 3.5px;*/
	border-radius: 6px;
}

input[type="date"], input[type="time"], input[type="file"] {
	padding :14px 20px;
	/*border-radius: 3.5px;*/
	height: 53px;
}

select[name] {
	/*height: 39px;*/
	height: 53px;
}

textarea[name]{
	/*padding: 14px 18.5px;*/
	padding: 26px 20px;
}

input[name]:focus, textarea[name]:focus, select[name]:focus{
	/*box-shadow: 0 0 5px #df31bd;*/
	box-shadow: none;
	border-color: #533ab0;
}

option[value]:{
	background-color: #533ab0;
	color:white;
}

button[type="submit"], input[type="submit"]{
	padding: 18px;
	background: #533ab0;
	border-color: #533ab0;
}

button[type="submit"]:hover, input[type="submit"]:hover{
	background: #271176;
	border-color: #271176;
}

/*input[type="checkbox"]:checked {
	-webkit-appearance: none;
    -moz-appearance: none;
	box-shadow: 0 0 5px #df31bd !important;
	border-color: #df31bd !important;

}*/


form > h1 > .feather {
	width: 31px !important;
	height: 31px !important;
	color: #533ab0
}

label {
	font-weight: normal;
	/*font-style: italic;*/
	color: #533ab0;
	font-weight: 500;
}

a {
	color: #533ab0;
}

a:hover {
	color: #80196c;
}

/* text, buttons and badges*/

.text-bolt{
	color: #533ab0;
}

.text-primary {
	color: #533ab0!important;
}

.btn-bolt, .btn-primary, .badge-bolt {
	color: white;
	background-color: #533ab0;
	border-color: #533ab0;
}

.badge-primary {
	color: white;
	background-color: #533ab0;
	border-color: #533ab0;
}

.badge-heading {
	font-size: 12px;
	padding: 7px 12px;
	color: white;
	background-color: #533ab0;
	/*border: #533ab0;*/
}

.badge-heading-outline {
	font-size: 12px;
	padding: 7px 12px;
	color: #533ab0;
	background-color: white;
	border: 0.67px solid #533ab0;
}

.btn-bolt:hover, .btn-primary:hover, .btn-primary:focus {
	color: white;
	background-color: #271176;
	border-color: #533ab0;
}

.btn-outline-primary {
	border-color: #533ab0;
	color: #533ab0;
}

.btn-outline-primary:hover {
	background-color: #271176;
	border-color: #533ab0;
}

.page-item.active .page-link{
	background-color: #533ab0;
	border-color: #533ab0;
}


/* Frames and view */

/*iphone*/
.iphone_frame {
	width:350px;
	height: 700px;
	background-size: contain;
	background-image: url(../img/photos/iphone12.png);
	background-repeat: no-repeat;
	padding: 10px;background-position: 50% 50%;
	margin: auto;
}

.iphone_frame > .cover {
	padding: 50px 27px;
}

.iphone_frame > .cover > .header > .icon {
	width: 47px;
	height: 47px;
	background-color: #e6e5eb;
	border-radius: 50%;
	margin:auto;
}

.iphone_frame > .cover > .header > .icon > img {
	width: 47px;
	height: 47px;
	padding: 7px;
}

.iphone_frame > .cover > .header > .phone_title{
	font-size: 12.5px;color: gray
}

.iphone_frame > .cover > .header > hr {
 	margin: 8px
 }

.iphone_frame > .cover > .content_cover {
 	width: 80%;
 	position: relative;
 	background-color: #e6e5eb;
 	border-radius: 15px;
 	padding: 12px;
 }
 
/*galaxy*/
.galaxy_frame {
	width:360px;
	height: 730px;
	background-size: contain;
	background-image: url(../img/photos/galaxys21.png);
	background-repeat: no-repeat;
	padding: 10px;
	background-position: 50% 50%;
	margin: auto;
} 

.galaxy_frame > .cover {
 	padding: 60px 18px
 }

.galaxy_frame > .cover > .header > i {
	float: right;
}

.galaxy_frame > .cover > .header > h3 {
 	font-size: 16px;
 	color: gray;
}

.galaxy_frame > .cover > .header > hr {
 	margin: 8px
}

.galaxy_frame > .cover > .content_cover {
	width: 90%;
	position: relative;
}

.galaxy_frame > .cover > .content_cover > .row > div {
	display: inline-block;
}

.galaxy_frame > .cover > .content_cover > .row > .text_header {
	padding: 0px 5px 0px 10px;
	margin:0px 5px 10px 0px;
}

.galaxy_frame > .cover > .content_cover > .row > .text_header > .icon {
	width: 38px;
	height: 38px;
	background-color: #e6e5eb;
	border-radius: 50%;
}

.galaxy_frame > .cover > .content_cover > .row > .text_header > .icon > img {
	width: 38px;
	height: 38px;
	padding: 7px;
	opacity: 0.3;
}

.galaxy_frame > .cover > .content_cover > .row > .text_content {
	background-color: #f3f3f7;
	border-radius: 15px;
	padding: 0px 5px;
}

.galaxy_frame > .cover > .content_cover > .row > .text_content > .phone_content{
	padding: 12px;
	font-size: 13.5px;
}


/*Responsive*/
@media  (max-width: 991px ) {

	.ims {
		width: 100% !important;
	}
}

@media  (max-width: 500px ) {

	.modal-body {
		padding: 18px 23px !important;
	}

	.card-body {
		padding: 28px 32px !important;
	}

	.nav_but {
		padding: 200px 5px !important;
	}
}

@media (max-width: 768px) {
	 #previewcard {
	 	display: none;
	 }

	 #previewbut {
	 	display: inline !important;
	 }
}

/* Buttons */
.btn-cus-md {
	padding: 13px 18px;
}

.btn-cus-lg {
	padding:  22px 28px;
	font-size: 15px;
}

/* Badges */

 .badge-cus {
 	font-weight:normal;
 	font-size:13.5px;
 	margin-right:2.5px;
 	margin-bottom:2.5px;
 	padding:8px !important;
 }

 /* Alerts */
 .alert-message {
 	padding: .65rem .95rem;
 }


 /* */
 .main {
 	background: #f6f6f6;
 }

 .main-auth {
 	background: 0;
 }

 .wrapper {
 	background: #171a37
 }

 /* Fonts size */
.h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

 /*Font weights*/

 .font-bold-500 {
 	font-weight: 500 !important;
 }


 .font-bold-600 {
 	font-weight: 600 !important;
 }



 .font-bold-700 {
 	font-weight: 700 !important;
 }


 .font-bold-800 {
 	font-weight: 800 !important;
 }

 .font-bold-900 {
 	font-weight: 900 !important;
 }