html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #726ae3;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #726ae3;
}
.section-heading h1 {
  margin: 2rem;
  padding-top: 6rem;
  display: inline-block;
  color: #726ae3;
  position: relative;
  letter-spacing: 0.2rem;
}
.section-heading h1::before,
.section-heading h1::after {
  content: "";
  position: absolute;
  height: 2.5rem;
  width: 2.5rem;
  border-top: 0.4rem solid #726ae3;
  border-left: 0.4rem solid #726ae3;
}

.section-heading h1::before {
  top: 5rem;
  left: -1.4rem;
}

.section-heading h1::after {
  bottom: -0.5rem;
  transform: rotate(180deg);
  right: -2rem;
}

.border-first-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #726ae3 !important;
  border: 1px solid #726ae3 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.5s;
}

.border-first-button a:hover {
  background-color: #726ae3;
  color: #fff !important;
}
.intro-banner a:hover {
  background-color: #726ae3;
  color: #fff !important;
}
.demos h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
  font-weight: 700;
  text-transform: uppercase;
}
/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #726ae3;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #726ae3;
  border-radius: 50%;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.logo-img {
  width: 69px;
  height: auto;
}
.pre-header {
  background-color: #efefef;
  height: 60px;
  padding: 15px 0px;
}
.pre-header ul li {
  display: inline-block;
}
.pre-header ul.info li {
  margin-right: 45px;
}
.pre-header ul.info li a {
  color: #afafaf;
  font-size: 14px;
  transition: all 0.3s;
}
.pre-header ul.info li a:hover {
  color: #726ae3;
}
.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 8px;
}
.pre-header ul.social-media {
  text-align: right;
}
.pre-header ul.social-media li {
  margin-left: 5px;
}
.pre-header ul.social-media li a {
  background-color: #afafaf;
  color: #fff;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.3s;
}

.pre-header ul.social-media li a i {
  margin-top: 8px;
}

.pre-header ul.social-media li a:hover {
  background-color: #1521be;
}

.background-header {
  background-color: #fff !important;
  height: 80px !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
}
.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}
.background-header .main-nav .nav li:hover a {
  color: #726ae3;
}

.header-area {
  background-color: #fefdfd;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 90px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.background-header .main-nav .logo {
  line-height: 50px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  text-align: center;
  background: whitesmoke;
  margin-top: 20px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

@media (max-width: 960px) {
  .header-area .main-nav .nav  {
   background: whitesmoke;;
  }
}
.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child a,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
  color: #fff !important;
}
.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #726ae3 !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #726ae3 !important;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}
@media (max-width: 767px) {
  .header-area .menu-trigger {
    display: block !important;
  }
}

/* About Section */
.about_section {
  margin-bottom: 3rem;
  margin-top: 2rem;
}
/* .about-right-content{
  margin-top: -17em;
} */

/*** Service Start ***/
.service .service-item {
  background: var(--bs-light);
  border-radius: 10px;
  transition: 0.5s;
}
.service .service-item:hover {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
}
.service .service-item .service-img {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: 0.5s;
}
.service .service-item .service-img img {
  transition: 0.5s;
}
.service .service-item:hover .service-img img {
  transform: scale(1.2);
}
/*** Service End ***/
.main-banner {
  background-position: center center;
  background-size: cover;
  padding: 100px 0px 12px 0px;
  position: relative;
  overflow: hidden;
}
.contact-map {
  width: 100%;
  height: auto;
  flex: 50%;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
}

.contact-form-txt::placeholder {
  color: #aaa;
  font-size: 1.5rem;
}
.contact-form-email::placeholder {
  color: #aaa;
  font-size: 1.5rem;
}
.contact-form-txtarea {
  margin-left: 2rem;
  width: 95%;
  height: 130px;
  color: #000;
  border: 1px solid #bcbcbc;
  border-radius: 10px;
  outline: none;
  margin-bottom: 20px;
  padding: 15px;
  font-family: "Poppins", sans-serif;
}
.contact-form-txtarea::placeholder {
  color: #aaa;
  font-size: 1.5rem;
}
.footer .footer-top {
  background: #040524;
  padding: 60px 0 30px 0;
}
.text-blue {
  color: #726ae3;
}
.footer {
  position: relative;
  padding: 0 0 20px 0;
  background: whitesmoke;
}
.footer .credit,
.footer .copyright {
  text-align: center;
  padding-top: 10px;
}
/*** Project Start ***/
.project-img {
  position: relative;
  padding: 15px;
}
.project-img::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  background: #26d48c;
  border-radius: 10px;
  opacity: 1;
  z-index: -1;
  transition: 0.5s;
}

.project-img::after {
  content: "";
  width: 150px;
  height: 150px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #1d1dc0;
  border-radius: 10px;
  opacity: 1;
  z-index: -1;
  transition: 0.5s;
}

.project-content a {
  display: inline-block;
  padding: 20px 25px;
  background: var(--bs-primary);
  border-radius: 10px;
}

.project-item:hover .project-content {
  opacity: 1;
  transition: 0.5s;
}

.project-item:hover .project-img::before,
.project-item:hover .project-img::after {
  opacity: 0;
}

/*** Project End ***/
/* Image inside the container */
.image-container img {
  width: 100%;
  height: 300px;
}
.text-pink {
  color: #031d33;
}
.icon-black {
  color: black;
}
.fa {
  color: black;
}
/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding-top: 0px;
}
.contact-us .section-heading .line-dec {
  margin: 0 auto;
}
.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}
.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}
form#contact {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}
.fill-form {
  padding: 80px 60px 80px 30px;
}
.fill-form .info-post {
  margin-bottom: 20px;
}
.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
  padding: 25px 15px;
}
.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}
.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all 0.3s;
}
.fill-form .icon:hover a {
  color: #726ae3;
}
form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #726ae3;
  outline: 1px;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}
form#contact input::placeholder {
  color: #aaa;
}
form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #726ae3;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}
form#contact textarea::placeholder {
  color: #aaa;
}
form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #726ae3;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #726ae3;
  transition: all 0.3s;
  outline: none;
}
form#contact button:hover {
  background-color: #726ae3 !important;
  color: #fff !important;
}
.contact-map {
  position: relative;
  width: 100%;
  height: 560px;
  margin-bottom: 30px;
}
.contact-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-slide-left {
  animation: slideInLeft 1s ease-out;
}
.animate-slide-right {
  animation: slideInRight 1s ease-out;
}
.right-image img {
  max-width: 100%;
  height: auto;
}
@keyframes slideInFromTop {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideInFromBottom {
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-top {
  opacity: 0;
  animation: slideInFromTop 1s ease-out forwards;
}
.animate-slide-bottom {
  opacity: 0;
  animation: slideInFromBottom 1s ease-out forwards;
}
@keyframes slideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-down {
  animation: slideDown 1s ease-out forwards;
}
@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-up {
  animation: slideUp 1s ease-out forwards;
}
@keyframes slideInFromRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-slide-in-right {
  animation: slideInFromRight 1s ease-out forwards;
}
@keyframes slideUpFromBottom {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-up {
  animation: slideUpFromBottom 1s ease-out forwards;
}
.section-heading {
  background-image: url("assets/img/gallery/slider-left-dec.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.right-image {
  background-image: url("assets/img/gallery/slider-right-dec.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.section-heading {
  background-image: url("assets/img/gallery/slider-right-dec.jpg");
}
body {
  background-image: url("assets/img/gallery/slider-right-dec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  padding: 10px;
}

.service-item {
  text-align: center;
}
.service-img img {
  width: 100%;
  height: auto;
}
.text-center {
  text-align: center;
}
.btn-primary {
  display: inline-block;
}
@media (max-width: 768px) {
  .service-item {
    padding: 10px;
  }
}
ul li a {
  text-decoration: none;
  color: inherit;
}
.shift-up {
  margin-top: 0px;
}