h1, h2, h3, h4, h5, h6, p, span, ul, li, a, .btn-default, textarea {
	margin: 0;
	padding: 0;
}
* {
	margin: 0;
	padding: 0;
}
a, a:hover {
	text-decoration: none;
}
a:focus {
	text-decoration: none;
}
body {
	overflow-x: hidden;
	font-family: 'Poppins', sans-serif;
	background: #f7f7f7;
}
.container{
	max-width: 1440px;
}
/*************GENRAL CLASSES START*************/
/*font families classification start*/
@font-face {
	font-family: 'DancingScript-Bold';
	src: url(../fonts/DancingScript-Bold.ttf);
}
@font-face {
	font-family: 'Pacifico-Regular';
	src: url(../fonts/Pacifico-Regular.ttf);
}
@font-face {
	font-family: 'DMSerifDisplay-Regular';
	src: url(../fonts/DMSerifDisplay-Regular.ttf);
}
@font-face {
	font-family: 'LuckiestGuy-Regular';
	src: url(../fonts/LuckiestGuy-Regular.ttf);
}



@font-face {
	font-family: 'Bitter', serif;
	src: url(../fonts/google-fonts/Bitter/static/Bitter-Light.ttf);
	font-weight: 300;
}


@font-face {
	font-family: 'Bitter', serif;
	src: url(../fonts/google-fonts/Bitter/static/Bitter-Regular.ttf);
	font-weight: 400;
}



@font-face {
	font-family: 'Bitter', serif;
	src: url(../fonts/google-fonts/Bitter/static/Bitter-Bold.ttf);
	font-weight: 700;
}


/*

font-family: 'Bitter', serif;
font-family: 'Fraunces', serif;
font-family: 'Grenze', serif;
font-family: 'Playfair', serif;
font-family: 'Texturina', serif;


font-family: 'Caveat', cursive;
font-family: 'Comic Neue', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Edu QLD Beginner', cursive;
font-family: 'Mali', cursive;



font-family: 'Lato', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Roboto', sans-serif;
*/




/*font families classification End*/

.relClass {
	position: relative;
}
.absClass {
	position: absolute;
}
.xy-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.xy-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.boxRadius {
	border-radius: 5px;
}
.marginAuto {
	margin: 0 auto;
}
:root {
	--black : #000;
	--white : #fff;
	--color-1 : #282828;	
}
.genBtn {
	width: 205px;
	height: 55px;
	border-radius: 10px;
	background: rgb(193,5,5);
	background: linear-gradient(0deg, rgba(193,5,5,1) 0%, rgba(254,0,0,1) 73%);
	color: var(--color-3);
	transition: all .2s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	border: 0;
}
.genBtn:hover {
	color: var(--color-3);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	transform: scale(1.04);
}
.genPadding {
	padding: 100px 0px;
}
.pageRoute {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	width: 100%;
	background: rgba(109,110,112,.3);
}
.breadcrumb-item a, 
.breadcrumb-item {
	font-size: 16px;
	color: var(--white);
	opacity: 0.8;
}
.breadcrumb-item a:hover {
	text-decoration: underline;
}
.breadcrumb-item+.breadcrumb-item::before {
	color: #fff;
	content: var(--bs-breadcrumb-divider, ">");
}
.breadcrumb-item.active {
	color: var(--white);
	opacity: 1;
	font-weight: 5s00;
}
/*************GENRAL CLASSES END*************/

/*Starter Screen Start*/
.gen-sec-1 {
	background: url(../images/gen-bg.png) center /cover;
	min-height: 620px;
	padding: 120px 0px 100px 0px;
}
.headingMain {
	font-size: 55px;
	font-weight: 700;
	color: var(--white);
	text-align: center;
}
.headingMain span {
	color: #ff4d4d;
}
.subHeadingMain {
	font-size: 22px;
	font-weight: 400;
	color: var(--white);
	text-align: center;
}
.logoInput {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	text-align: center;
}
.genInput {
	color: var(--color-1);
	width: calc(100% - 170px);
	height: 48px;
	border: none;
	padding: 0px 20px;
	outline: none;
	transition: all 0.25s;
}
.genInput:hover {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px inset;
}
.createBtn {
	font-size: 16px;
	color: var(--white);
	max-width: 170px;
	width: 100%;
	height: 48px;
	border-color: #e0452f;
	background: #f14c2e linear-gradient(#f14c2e,#d8452e);
	transition: all 0.25s;
}
.createBtn:hover {
	color: var(--white);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
} 
.rLink {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--white);
	text-align: center;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: all 0.25s;
	width: fit-content;
	margin: 0 auto;
}
.rLink:hover {
	color: var(--white);
	border-color: var(--white);
}
/*Starter Screen End*/

/*Select Style Screen Start*/
.heading {
	font-size: 60px;
	font-weight: 600;
	color: var(--color-1);
	text-align: center;
}
.subHeading {
	font-size: 20px;
	font-weight: 400;
	color: var(--color-1);
	text-align: center;
}
.styleCard {
	width: 100%;
	height: 415px;
	border-radius: 10px;
	flex-direction: column;
	background: var(--white);
	padding: 20px;
	transition: all 0.25s;
}
.styleCard:hover {
	background: rgb(238, 238, 238);
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.fontFam {
	font-size: 60px;
	font-weight: 700;
	color: var(--color-1);
	text-align: center;
}
.famProps {
	color: var(--black);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.5;
	opacity: .44;
}
.famBox {
	width: 300px;
	height: 300px;
}
/*Select Style Screen End*/

/*Select BG Color Screen Start*/
.bgclrCard {
	width: 100%;
	padding: 12px;
	background: var(--white);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.25s;
}
.bgclrCard:hover {
	background: rgb(238, 238, 238);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	transform: translateY(-10px) scale(1.01);
} 
.logoBg {
	display: block;
	width: 100%;
	background: #ccc;
	height: 82px;
}
.clrDesc {
	display: block;
	font-size: 18px;
	text-align: center;
	padding: 15px 0px 15px 0px;
}
/*Color Classifications*/
.bgClr1 {
	background: #0955ff;
}
.bgClr2 {
	background: #4a8efd;
}
.bgClr3 {
	background: #9dc2fd;
}
.bgClr4 {
	background: #d1e2fb;
}
.bgClr5 {
	background: #1fab89;
}
.bgClr6 {
	background: #62d2a2;
}
.bgClr7 {
	background: #9df3c4;
}
.bgClr8 {
	background: #d7fbe8;
}
.bgClr9 {
	background: #b80257;
}
.bgClr10 {
	background: #dd356e;
}
.bgClr11 {
	background: #fc7fb6;
}
.bgClr12 {
	background: #ffbbe1;
}
.bgClr13 {
	background: #ff3757;
}
.bgClr14 {
	background: #ff715a;
}
.bgClr15 {
	background: #ffa974;
}
.bgClr16 {
	background: #fff5d3;
}
.bgClr17 {
	background: #7a08fa;
}
.bgClr18 {
	background: #a82ffc;
}
.bgClr19 {
	background: #c264fe;
}
.bgClr20 {
	background: #f8ecfd;
}
.bgClr21 {
	background: #573936;
}
.bgClr22 {
	background: #927053;
}
.bgClr23 {
	background: #dacaba;
}
.bgClr24 {
	background: #f6e2ce;
}
/*Select BG Color Screen End*/

/*Slogan Screen Start*/
.sloganForm {
	max-width: 600px;
	margin: 0 auto;
}
.genInput2 {
	font-size: 18px;
	font-weight: 300;
	color: var(--color-1);
	width: 100%;
	height: 70px;
	padding: 24px;
	border: 1px solid #ccc;
	outline: none;
	border-radius: 10px;
}
.cntBtn {
	max-width: 100%;
	font-size: 18px;
	font-weight: 700;
	height: 70px;
	border-radius: 10px;
	margin-left:  auto;
}
/*Slogan Screen End*/

/*Select Icons Screen Start*/
.iconRow {
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 40px;
}
.iconRow .col-lg-2 {
	width: 20%;
}
.catHeading {
    font-size: 30px;
    font-weight: 600;
    color: var(--color-1);
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.headingIcon img {
	max-width: 30px;
}
.logoIcon {
	width: 120px;
	height: 120px;
	border-radius: 100%;
	border: 1px solid #ccc;
	cursor: pointer;
	margin: 12px auto;
	transition: all 0.25s;
}
.logoIcon:hover {
	background: rgb(238, 238, 238);
}
.logoIcon img {
	max-width: 75px;
}
.logoIcon.selected {
	background: #fff;
	-webkit-box-shadow: 0 0 0 1.5px #97cbf4;
	box-shadow: 0 0 0 1.5px #97cbf4;
	-webkit-transform: translate3d(0,-2.5px,0);
	transform: translate3d(0,-2.8px,0);
}
.counterBar {
	padding: 10px 20px;
	position: sticky;
	width: 100%;
	bottom: 0;
	background: #efefef;
}
.counterBtn {
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 500;
	color: var(--white);
	width: fit-content;
	padding: 10px 20px;
	height: 47px;
	border-color: #e0452f;
	background: #f14c2e linear-gradient(#f14c2e,#d8452e);
	transition: all 0.25s;
	border-radius: 10px;
}
.counterBtn:hover {
	color: var(--white);
}
.counterBar .desc {
	font-size: 14px;
	color: #6d6e70;
}
.statusIcon {
	width: 28px;
	height: 28px;
	border: 1px solid #fff;
	border-radius: 100%;
	margin-right: 8px;
	position: relative;
	overflow: hidden;
}
.statusIcon img {
	max-width: 14px;
	filter: brightness(0.5) invert(1);
}
.statusIcon .dltIcon {
	width: 28px;
	height: 28px;
	background: #f03e3e;
	border: 1px solid #fff;
	border-radius: 100%;
	overflow: hidden;
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translate(-50% , -50%);
	transition: all 0.25s;
	z-index: 999;
}
.statusIcon:hover .dltIcon {
	top: 50%;
}
/*Select Icons Screen End*/

/*Logo Results Screen Start*/
.resultCard {
	width: 100%;
	height: 430px;
	overflow: hidden;
	background: rgb(238, 238, 238);
	position: relative;
	transition: all 0.25s;
	border-radius: 10px;
}	
.resultCard:hover {
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
	transform: translateY(-5px);
}
.resultText {
	font-size: 100px;
	text-align: center;
}
.btnStyle {
	border: none;
	background: transparent;
}
.fvrtIcon {
	width: 30px;
	height: 30px;
	font-size: 22px;
	color: #ccc;
	position: absolute;
	top: 10px;
	right: 10px;
}
.fvrtIcon.active {
	color: #ff4d4d;
}
.cardDesc {
	font-size: 15px;
	color: var(--color-1);
	opacity: 0;
	position: absolute;
	bottom: 15px;
	left: 20px;
	width: 100%;
	transition: all 0.5s;
}
.resultCard:hover .cardDesc{
	opacity: 0.7;
	transform-origin: center;
}
/*Logo Results Screen End*/


.sidebar {
	max-width: 430px;
	width: 100%;
	min-height: 100vh;
}
.mainContent {
	width: calc(100% - 430px);
	min-height: 100vh;
	padding-left: 40px;
}
.genAccordian .accordion-button {
	padding: 20px;
	font-size: 20px;
	color: var(--color-1);
	font-weight: 300;
}
.genAccordian .accordion-item {
	background-color: #fff;
	border: 1px solid #cccccc78!important;
	margin-bottom: 12px;
	border-radius: .25rem;
	overflow: hidden;
}
.genAccordian .accordion-button:focus {
	border-color: none!important;
	box-shadow: none;
}
.genAccordian .accordion-button:not(.collapsed) {
	color: var(--color-1);
	background-color: #fff;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.colorBox {
	display: block;
	width: 85px;
	height: 60px;
	background-color: #fff;
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 5px;
}
.defaultColor1 {
	background-color: #fff101;
}
.defaultColor2 {
	background-color: #ca7370;
}
.defaultColor3 {
	background-color: #955336;
}
.defaultColor4 {
	background-color: #00654a;
}
.defaultColor5 {
	background: rgb(0,36,2);
}
#canvasMain {
	width: 100%;
	height: 600px;
	background-color: #ccc;
	border: 1px solid #cccccc78;
	border-radius: 5px;
}
.cstBtn {
	width: 100%;
	height: 45px;
	border: 1px solid #cccccc78;
	background-color: #fff;
	border-radius: 5px;
	padding: 0px 20px;
}
.contentEdit {
	padding: 10px 20px;
	border-radius: 5px;
	border: 1px solid #cccccc78;
	cursor: pointer;
	transition: all 0.25s;
}
.contentEdit:hover {
	background: rgb(238 238 238 / 50%);
}
.colorSelect {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background: red;
	border: 1px solid #fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	position: relative;
	overflow: hidden;
}
.contentEdit .title {
	font-size: 15px;
	color: var(--color-1);
}
.clrCode {
	font-size: 13px;
	color: #ccc;
}
.contentEdit .textBox {
	width: calc(100% - 45px);
}
.cstAction {
	font-size: 18px;
	font-weight: 500;
	color: var(--white);
	width: 50%;
	height: 50px;
	border: 1px solid #cccccc78;
	border-radius: 5px;
	background: #8cc1c1;
}
.editorDropdown1 {
	display: none;
}
.cstBtn.active .fa-plus:before {
	content: "\f068";
}
.clrPick {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.textControls label{
	font-size: 14px;
	color: var(--color-1);
	width: 100%;
	margin-bottom: 5px;
}
.editFields {
	width: 100%;
	height: 45px;
	border: 1px solid #cccccc78;
	background-color: #fff;
	border-radius: 5px;
	padding: 0px 20px;
}
.editorGuide {
	font-size: 14px;
	color: var(--color-1);
	opacity: 0.5;
}
.sloganBox {
	width: 100%;
	height: 120px;
	border: 1px solid #cccccc78;
	border-radius: 5px;
}




.sloganBox {
	cursor: pointer;
	transition: all 0.25s;
}
.sloganBox:hover {
    background: rgb(238 238 238 / 50%);
}
.sloganText {
	font-size: 40px;
}


.customIcon img {
	max-width: 35px;
}

.customIcon {
    width: 55px;
    height: 55px;
    border-radius: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 6px auto;
    transition: all 0.25s;
}
.customIcon:hover {
	background: rgb(238, 238, 238);
}

.catHeading2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-1);
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
.editor-icon-row .col-3 {
	width: 20%;
}