@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Oswald&family=PT+Serif&display=swap');
html{scroll-behavior: smooth;}
li{list-style-type:none!important;}
a{text-decoration:none!important;}
.heading1{font-size: 2.5rem;} .heading2{font-size: 2rem;} .heading3{font-size: 1.75rem;} .heading4{font-size: 1.5rem;} .heading5{font-size: 1.25rem;} .heading6{font-size: 1rem;}
.pad{padding:110px 0;}
.pf1{font-size: 20px!important;}
.wrdbrk{white-space: pre;}
.volkhov{font-family: 'Oswald', sans-serif; font-weight: 700;}
.poppins{font-family: 'Crimson Pro', serif; font-size: 18px; color: #1a1919;}
.ptserif{font-family: 'PT Serif', serif;}
.black{color:#000!important;}
.topbg{background-color:#db241e;}
.clr{color:#db241e!important;}
.clr1{color:#fff!important;}
.smallfnt{font-size:17px;}
.navfont{font-family: 'Oswald', sans-serif; font-size:17px; font-weight: 600;}
.logo{width:220px;}
.fullimg{width:100%; height:100%;}
.fullpad{margin:0!important; padding:0!important;}
.navbar-light .navbar-nav .active>.nav-link{color:#db241e!important;}
.navbar-light .navbar-nav .nav-link:hover{color:#db241e!important;}
.navbar-light .navbar-nav .nav-link.active{color:#db241e !important;}
.navbar .navbar-nav .nav-link:hover{color:#db241e !important;}
.dropdown-menu{background-color: #373333!important;}
.dropdown-item:active{color: white!important; text-decoration: none; background-color: #373333!important;}
.dropdown-item:focus, .dropdown-item:hover {color: #db241e!important;text-decoration: none; background-color: #373333!important;}
.dropdown-item{color: white!important; padding: 8px 25px!important; font-size: 25px!important;}
nav.main ul {padding-left: 0; list-style-type: none;}
nav.main .megamenu {
  position: absolute;
  top: 70px;
  left: 35%;
  right: 0;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
  background: #373333;}
.pos{position:static!important;}
.navboxhead{font-size: 16px; color: #ed1c24;}
.navmenu{padding: 10px 5px;}
.navbrdr{border-bottom: 1px solid gray;}
.navboxin{color:#e8e7e7 !important; transition: 0.5s; transform: 0.5s; font-size: 30px;}
.navboxin:hover{color:#ea413c !important; padding-left:5px;}
.btn1{background:white; color:black; padding:15px 25px; font-size:17px; border:1px solid white; border-radius:5px; font-weight:bold; transition:all .25s ease-in-out;}
.btn2{background:white; color:black; padding:10px; font-size:15px; border:1px solid white; border-radius:5px; font-weight:bold; transition:all .25s ease-in-out;}
.btn1:hover{background:#db241e; color:white; transition:0.5s all;}
.btn2:hover{background:#a7a7a7; color:#fff; transition:0.5s all;}
.cardbtn{background:white; color:black; padding:10px; font-size:15px; border:1px solid white; border-radius:5px; margin:0 65px; font-weight:bold; transition:all .25s ease-in-out;}
.cardbtn:hover{background:#db241e; color:white; transition:0.5s all;}
.sectop{position: relative; margin-top: -4em; z-index:1;}
.fulpad{margin:0!important; padding:0!important;}
.title-main {font-size: 40px; line-height: 50px; font-weight: 600; position: relative;}
.title-main::before, .title-main::after {
  content: "";
  background: #717070;
  width: 60px;
  height: 2px;
  position: absolute;
  right: 0;
  margin: 0 auto;}
.title-main::before {left: -20px; bottom: -8px;}
.title-main::after {left: 20px; bottom: -15px;}
.servicebg{background-image: url("../images/parallax.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.feature-gd {background:white;padding: 20px; border-radius: 8px;}
.icon {margin-right: 1em;}
.icon i {
    color: #db241e;
    font-size: 28px;
    background: rgb(13 54 159 / 9%);
    width: 65px;
    height: 66px;
    line-height: 65px;
    border-radius: 50%;
    text-align: center;}
.secpad{padding:100px 0;}
.team-block-single {
	  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding: 10px;
    background:#a7a7a7;
    border-radius: 8px;}
.team-grids {position: relative; overflow: hidden; z-index: 1;}
.gridfnt {font-size:23px;}
.team-info {
    position: absolute;
    bottom: -227px;
    margin: 0;
    background: rgb(8 8 8 / 29%);
    padding: 20px 0;
    transition: .5s all;
    -moz-transition: .5s all;
    width: 100%;
    text-align: center;}
.team-block-single:hover div.team-info {bottom: 0;}
.single-best-place {cursor: pointer; position: relative; overflow: hidden; margin-bottom: 10px; cursor: pointer; border-radius:5px;}
.single-best-place .best-place-thumb img {width: 100%; transform: scale(1) rotate(0deg); transition: all 0.65s ease-in 0s;}
.single-best-place:hover .best-place-thumb img {transform: scale(1.2) rotate(3deg); -webkit-transform: scale(1.2) rotate(3deg);}
.servicehead{font-size:55px; text-shadow: 0 2px 4px #b7b2b2cc;}
.lightbox {position: fixed !important; top: 50px !important;}
.commercialpad{padding-top:120px;}
.footer {background: #264097;}
.footer__call {position: relative; top: -65px;}
.footer__call__content {background: #f6f6f6; padding: 30px 55px 25px 45px; border-radius: 10px; border: 1px solid #d0d0d0;}
.footer__call__number {overflow: hidden;}
.footer__call__number__icon {float: left; margin-right: 35px;}
.footer__call__number__text {overflow: hidden;}
.footer__title {position: relative; z-index: 1;}
.footer__title h4 {color: #db241e; display: inline-block; padding-right: 12px; background: #142336;}
.footer__title::after {
    position: absolute;
    left: 0;
    top: 15px;
    height: 1px;
    width: 100%;
    background: #444;
    content: "";
    z-index: -1;}
.footer__copyright {border-top: 1px solid #fff; padding: 18px 0px;}
.text1 {position: relative; padding: 0 0 0 25px; margin-top: -42px;}	
.contact-form  .form-control {
  background-color:#fff;
  border: none;
  height: 40px;
  padding-top: 5px;
  font-size: 14px;}
.formheight{height: 100px!important;}
.box16 {
	overflow: hidden;
  text-align: center;
	color: #fff;
	position: relative;
	width: 100%;
	height: 100%;
	border-radius:5px;}
.box16 .box-content,
.box16:after {width: 100%; position: absolute; left: 0;}
.box16:after {
  content: "";
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.76) 100%);
  top: 0;
  transition: all 0.5s ease 0s;}
.box16 .post,
.box16 .title {transform: translateY(145px); transition: all 0.4s cubic-bezier(0.13, 0.62, 0.81, 0.91) 0s;}
.box16:hover:after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.01) 0,
    rgba(0, 0, 0, 0.09) 11%,
    rgba(0, 0, 0, 0.12) 13%,
    rgba(0, 0, 0, 0.19) 20%,
    rgba(0, 0, 0, 0.29) 28%,
    rgba(0, 0, 0, 0.29) 29%,
    rgba(0, 0, 0, 0.42) 38%,
    rgba(0, 0, 0, 0.46) 43%,
    rgba(0, 0, 0, 0.53) 47%,
    rgba(0, 0, 0, 0.75) 69%,
    rgba(0, 0, 0, 0.87) 84%,
    rgba(0, 0, 0, 0.98) 99%,
    rgba(0, 0, 0, 0.94) 100%
  );}
.box16 img {width: 100%; height: 100%;}
.box16 .box-content {padding: 20px; margin-bottom: 5px; bottom: 0; z-index: 1;}
.box16 .title {font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 0 0 10px;}
.box16 .post {display: block; padding: 0 0 30px 0; font-size: 14px;}
.box16 .social li a,
.box17 .icon li a {border-radius: 50%; font-size: 20px; color: #fff;}
.box16:hover .post,
.box16:hover .title {transform: translateY(0);}
.box16 .social {
  list-style: none;
  padding: 0 0 5px;
  margin: 40px 0 25px;
  opacity: 0;
  position: relative;
  transform: perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);
  transition: all 0.6s cubic-bezier(0, 0, 0.58, 1) 0s;}
.box16:hover .social {opacity: 1; transform: perspective(500px) rotateX(0) rotateY(0) rotateZ(0);}
.box16 .social:before {
  content: "";
  width: 50px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;}
.box16 .social li {display: inline-block;}
.box16 .social li a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #6d3795;
  margin-right: 10px;
  transition: all 0.3s ease 0s;}
.box16 .social li a:hover {background: #bea041;}
.box16 .social li:last-child a {margin-right: 0;}
@media only screen and (max-width: 990px) {
.box16 {margin-bottom: 30px;}
}
.sticky-top1{position:sticky; top:130px;}
.commercialbg {background-image:url("../images/commercialbg.jpg"); height:500px; background-size:contain; background-repeat: no-repeat;}
.fixedpad{padding: 40px 15px 20px 65px;}
.servtop{padding-top:140px;}
.smallborder5 { margin-left: calc(0.3% - 0px);width: 40px;height: 3px;background-color:black; margin-top: 15px; margin-bottom: 15px;}
.links li {position: relative; line-height: 30px; overflow: hidden;}
.links li a {
    position: relative;
    display: block;
    color: black;
	  font-size:17px;
    text-decoration: none;
    transition: all 300ms ease-in;
    -webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;}
.links li a::before {
    font-family: 'FontAwesome';
    content: '\f0da';
    position: absolute;
    left: -20px;
    top: 0px;
    width: 24px;
    line-height: 30px;
    display: block;
    color: black;
    font-size: 18px;
    transition: all 300ms ease-in;
    -webkit-transition: all 300ms ease-in;}
.links li a:hover {padding-left: 15px; color: #000;}
.links li a:hover::before {left: 0px;}
.pointer{cursor:pointer;}
.wapp{width:50px;}
.w0{width:0%;}
.fixed{position:fixed; z-index:9999;}
.priceicn{width:60px;}
.priceicn1{width:60px;}
.point{bottom:10px!important; right:10px!important;}
.point1{bottom:70px!important; right:10px!important;}
figure {margin: 0; padding: 0; background: #fff; overflow: hidden;}
.zoom figure img {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.zoom figure:hover img {-webkit-transform: scale(1.03); transform: scale(1.03);}
.curveborder1{border: 4px solid #ffd72a; border-radius: 15px; padding: 8px 0px 16px 25px; width: 30%; color: #000; background: inset 0px 11px 8px -10px #fff, inset 0px -11px 8px -10px #CCC; }
.curveborders1{background: #ffd72a; color: #000; border-radius: 25px; padding: 3px; width: 15%; font-size: 14px; text-align: center; position: relative; left: 30px; top: -18px;}
.visionpad{padding:80px 0;}
.colabpad{padding:60px 0 120px 0;}
.back-to-top {
  background: #f6f6f6;
  width: 45px;
  height: 40px;
  font-size: 28px;
  line-height: 38px;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin: auto;
  color: #000;
  border-radius: 3px 3px 0 0;
  cursor: pointer;}
.main-content {position: relative;}
.main-content .owl-theme .custom-nav {position: absolute; top: 20%; left: 0; right: 0; }
.main-content .owl-theme .custom-nav .owl-prev {position: absolute; height: 100px; color: inherit; background: none; border: none; z-index: 100;}
.main-content .owl-theme .custom-nav .owl-next {position: absolute; height: 100px; color: inherit; background: none; border: none; z-index: 100;}
.owl-prev i, .owl-next i{font-size: 2.5rem; color: red;}
.main-content .owl-theme .custom-nav .owl-prev {left: -25px; top: 60px;}
.main-content .owl-theme .custom-nav .owl-next {right:-25px; top: 60px;}
.owl-dots{display:none;}
#home{background-image: url("../images/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-position: 50% 0px;}
.toppagelogo{width:450px;}
.homecenter{height: 100vh; vertical-align: middle; display:table-cell; position: relative;}
.move {
  width: 40px;
  margin-left: auto;
  margin-right: auto;
  animation: anim2 ease-in-out 3s infinite alternate;
  -webkit-animation: anim2 ease-in-out 3s infinite alternate;
  -moz-animation: anim2 ease-in-out 3s infinite alternate;}
.move a {
  border-radius: 50%;
  border: 2px solid #d70700;
  color: #d70700;
  padding: 20px;
  -webkit-transition: 0.2s background linear;
  -moz-transition: 0.2s background linear;
  transition: 0.2s background linear;}
.move a:hover {background-color: #d70700; color: #fff; text-decoration: none;}
@keyframes anim2{
  0%{
    -webkit-transform: scale(1.0) rotate(0deg);
  }
  50%{
    -webkit-transform: scale(0.8) rotate(10deg);
  }
  100%{
    -webkit-transform: scale(1.2) rotate(-20deg);
  }
}
.bounce {
	animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;}
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}
img.filter {-webkit-filter: drop-shadow(5px 5px 5px #6f6e6e ); filter: drop-shadow(5px 5px 5px #6f6e6e);}
.ribbon {
  position: relative;
  margin: 0 auto 20px;
  padding: 10px 40px;
  text-align: center;
  background-color: #FFD72A;
  font-size: 25px;
  color:#000;}
.ribbon::before, .ribbon::after {
  content: '';
  width: 80px;
  height: 100%;
  background-color: #FECC30;
  position: absolute;
  z-index: -1;
  top: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
  background-image: linear-gradient(45deg, transparent 50%, #FC9544 50%);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: bottom right;}
.ribbon::before {left:-60px;}
.ribbon::after {right:-60px; transform:scaleX(-1);}
@media (max-width: 400px) {
.ribbon {font-size: 17px;}
}
.ribbontext{
  box-sizing: border-box;
  display: grid;
  align-items: center;
  margin: 0;
  padding: 20px 80px;
  color: #fff;}
.greenicn{color:#0c800c;}
.formheight{height: 100px!important;}
.board-form  .form-control {
	background-color: #fdfff5;
	height: 40px;
	border: 1px solid #0e0061;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	padding-top: 5px;
	font-size: 14px;}
.submit-btn{background-color: red; color:white!important; padding:6px 20px; border:1px solid red; font-size:16px;}  
.sectpad {padding: 0 0 0 7px !important;}
.gridpad{padding-top:9px!important;}
.instabox{
  -webkit-transition: -webkit-transform 1.5s !important;
  transition: transform 1.5s !important;}
.instabox:hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  z-index: 2;
}
.mx-wdth{max-width: 600px; margin:0 auto; background-color: #ce2b26; padding:5px; border-radius: 15px;}


@media (min-width:5px) and (max-width:767.98px){
.pad{padding:80px 0;}
.footer__call {top: -45px;}
.footer__call__number {float:none; margin-top: 30px;}
.footer__call__number__icon {float:none; margin-right:0;}
.footer__call__number__text {padding-top:26px;}
.footer__call__content {padding: 40px 20px;}
.respad{padding:0 7px!important;}
.smallfnt1{font-size:16px;}
.sectop{ margin-top:0em;}
.servtop{padding-top:5px;}
.curveborder1{width:100%;}
.curveborders1{width:50%;}
.secpad{padding:40px 0;}
.owl-nav{display:none;}
.visionpad {padding: 30px 0;}
.colabpad {padding: 10px 0 90px 0;}
}

@media (min-width:768px) and (max-width:992.98px){
.pad{padding:80px 0;}
.footer__call {top: -40px;}
.footer__call__number {float:none; margin-top: 30px;}
.footer__call__number__icon {float:none; margin-right:0;}
.footer__call__number__icon {float:left; margin-right:35px;}
.footer__call__content {padding: 30px 10px;}
.servtop{padding-top:5px;}
.curveborder1{width:50%;}
.curveborders1{width:30%;}
.owl-nav{display:none;}
.visionpad {padding: 30px 0;}
.colabpad {padding: 10px 0 90px 0;}
.secpad{padding:40px 0;}
.fnt1{font-size:30px;}
.smallfnt1{font-size:16px;}
}

#notfound {position: relative; height: 100vh;}
#notfound .notfound {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}
.notfound {max-width: 410px; width: 100%; text-align: center;}
.notfound .notfound-404 {height: 280px; position: relative; z-index: -1;}
.notfound .notfound-404 h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 190px;
	margin: 0px;
	font-weight: 900;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background: url('../images/bg.jpg') no-repeat;
  background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: cover;
	background-position: center;}
.notfound h2 {
	font-family: 'Montserrat', sans-serif;
	color: #000;
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 0;}
.notfound p {
	font-family: 'Montserrat', sans-serif;
	color: #000;
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 30px;
	margin-top: 0px;}
.notfound a {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	background: #0046d5;
	display: inline-block;
	padding: 15px 30px;
	border-radius: 40px;
	color: #fff;
	font-weight: 700;
	-webkit-box-shadow: 0px 4px 15px -5px #0046d5;
	box-shadow: 0px 4px 15px -5px #0046d5;}
@media only screen and (max-width: 767px) {
.notfound .notfound-404 {height: 142px;}
.notfound .notfound-404 h1 {font-size: 112px;}
}

Mahesh Prabhu
	
12:24 PM (0 minutes ago)
	
to me
<div class="container pad">
<div class="row">
<div class="col-lg-12">
<div class="success-box">
<div class="w-75">
<div class="text-white box-text">Class Section Created Successfully</div>
<div class="text-white box-text italic-style"><i class="fa fa-clock-o"> </i> 1 Sec Ago...</div>
</div>
<div class="w-25 text-right align-self-center">
<div class="text-white check-size"><i class="fa fa-check"></i></div>
</div>
</div>
<div class="error-box">
<div class="w-75">
<div class="text-white box-text">Invalid Class Name</div>
<div class="text-white box-text italic-style"><i class="fa fa-clock-o"> </i> 1 Sec Ago...</div>
</div>
<div class="w-25 text-right align-self-center">
<div class="text-white check-size"><i class="fa fa-times"></i></div>
</div>
</div>
</div>
</div>
</div>




Csss
---------------------------------------
.box-text{font-size:16px;}
.success-box {
  max-width: 450px;
  background-color: #5f895f;
  display: flex;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  padding:10px; border-radius: 2px;
  position: fixed;
  right: 10px;
  top: 100px;
  z-index: 9999;
  width: 350px;
}
.error-box {
  max-width: 450px;
  background-color:#be1c1c;
  display: flex;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  padding:10px; border-radius: 2px;
  position: fixed;
right: 10px;
top: 100px;
z-index: 9999;
width: 350px;
}
.italic-style{font-style:italic;}
.check-size{font-size:25px;}