html{scroll-behavior: smooth;}
body{
	background-color: var(--bgColor);
	margin: 0;
	border: 0;
	font-family: Braah One, sans-serif;
	font-size: 18px;
	user-select: none;
	min-height: 100vh;
    background-image: url("../images/bg3.png");
    background-repeat: repeat;
}
section{}
a{
	padding: 5px 10px;
	background-color: var(--mainColor);
	color: white;
	border-radius: 5px;
	text-decoration: none;
}
a.cnt{
	padding: 6px 35px;
    background-color: var(--mainColor);
    color: white;
    border-radius: 5px;
    text-decoration: none;
    margin: 8px;
    font-family: 'Nunito';
}
a.el{background-color: #ff3c3c}
a.wp{background-color: #008838}
a.dd{background-color: #3b49ff}
a.im{background-color: #b239db}
h2{
	font-size: 40px;
    width: 100%;
    text-align: center;
    margin-top: 100px;
    font-family: 'Rakkas';
    color: #1d1d1d;
}

#pricing{
    display: flex;
    margin-top: 60px;
    justify-content: center;
    width: 100%;
    height: auto;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: center;
}
#pricing content{
    width: 40%;
    max-width: 280px;
    min-width: 270px;
    min-height: 320px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
/*    box-shadow: 0px 4px 7px 0px gray;*/
    padding-bottom: 5px;
    margin: 45px 16px;
    border: 2px solid var(--maroon);
}
#pricing content div.sec4Div1{
	width: 140px;
	height: 140px;
	display: block;
	background-color: transparent;
	transform: translateY(-30%);
	background-image: url(../images/one2.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
/*	box-shadow: 0px 2px 12px 2px #000000ab;*/
    border: 2px solid var(--maroon);
    border-radius: 14px;
	z-index: 3;
}
#pricing content:hover .sec4Div1{animation: shake 0.2s linear infinite;}
#pricing content div.sec4Div2{
    min-height: 200px;
    width: 88%;
    display: flex;
    border-radius: 14px;
    padding: 0px 0 15px 0;
    background-color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-family: Geologica, sans-serif;
    transform: translateY(-5%);
    border: 2px solid var(--maroon);
}
#pricing content div.sec4Div2 h2{
	width: 100%;
	text-align: center;
	font-size: 68px;
	margin: 0;
	font-family: Braah One, sans-serif;
}
#pricing content div.sec4Div2 h2 sub{font-size: 22px}
#pricing content div.sec4Div2 ul{padding-left: 10px;font-size: 16px}
#pricing content div.sec4Div2 a{
	padding: 8px 16px; 
	transition-duration: 0.3s;
    border: 2px solid var(--maroon);
}
#pricing content div.sec4Div2 h5{margin: 0 0 15px 0}

.ms0{background-color: var(--mainColor);}
.ms0 h2{
    text-shadow: 0px 2px 0px var(--maroon);
}

.ms2{
	background: rgb(253,98,221);
	background: linear-gradient(104deg, rgba(253,98,221,1) 35%, rgba(178,34,230,1) 100%);
}
.ms2 a{
	background: linear-gradient(104deg, rgba(253,98,221,1) 36%, rgba(178,34,230,1) 150%);}
.ms2 h2{color:#c734e3;text-shadow: 0px 2px 0px #7b208d;}

.ms1{
/*	background: rgb(0,162,75);*/
/*background: linear-gradient(145deg, rgba(0,162,75,1) 35%, rgba(0,255,51,1) 100%);*/
background-color: #0fb44e;
}
.ms1 a{
	background: linear-gradient(145deg, rgba(0,162,75,1) 36%, rgba(0,255,51,1) 150%);}
.ms1 a:hover{background: linear-gradient(145deg, rgba(0,162,75,1) 100%, rgba(0,255,51,1) 100%);}
.ms1 h2{
	color: rgb(0 180 77);
    text-shadow: 0px 2px 0px #0d4b24;
}







@keyframes shake {
  0% {transform: translateY(-30%) rotate(0deg);}
  25% {transform: translateY(-30%) rotate(3deg);}
  50% {transform: translateY(-30%) rotate(0deg);}
  75% {transform: translateY(-30%) rotate(-3deg);}
  100% {transform: translateY(-30%) rotate(0deg);}
}