/*

Lava Landing Page

https://templatemo.com/tm-540-lava-landing-page

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. welcome
06. features
07. testimonials
08. contact
09. footer
10. preloader

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
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;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 25px;
  color: #888;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Poppins", sans-serif;
}

::selection {
  background: #f1556a;
  color: #fff;
}

::-moz-selection {
  background: #f1556a;
  color: #fff;
}

@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

a.main-button-slider {
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #d47eb5;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

a.main-button-slider:hover {
  background-color: #9b009d;
}

a.main-button {
  font-size: 14px;
  border-radius: 25px;
  padding: 5px 10px;
  border: 2px solid #9b009d; /* Outline color and thickness */
  border-radius: 25px;
  background-color: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  text-transform: uppercase;
  color: #ac0ab1;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

a.main-button:hover {
  background-color: #eab8d5;
}

button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #9b009d;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
  z-index: 10;
}

button.main-button:hover {
  background-color: #eab8d5;
  z-index: 10;
}

.center-heading {
  margin-bottom: 70px;
}

.center-heading h2 {
  margin-top: 0px;
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 25px;
}

.center-heading h2 em {
  font-style: normal;
  color: #ac0ab1;
}

.center-heading p {
  font-size: 15px;
  color: #888;
  text-align: center;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff;
  height: 80px !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e !important;
}

.background-header .main-nav .nav li:hover a {
  color: #ac0ab1 !important;
}

.background-header .nav li a.active {
  color: #ac0ab1 !important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -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;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #191a20;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -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;
  margin-left: 10px;
}
.header-area .main-nav .logo-img {
  width: 50px; /* Adjust image size */
  height: auto; /* Keep aspect ratio */
}

.header-area .main-nav .nav {
  float: left;
  margin-top: 27px;
  margin-left: 15%;
  margin-right: 0px;
  background-color: #fff;
  padding: 0px 20px;
  -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;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -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 {
  color: #ac0ab1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #7a7a7a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transform: translateY(-2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s,
    z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  display: block;
  background: #fff;
  color: #7a7a7a !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -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;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
}

.header-area .main-nav .nav li.submenu ul li a:before {
  content: "";
  position: absolute;
  width: 0px;
  height: 40px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  -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;
  background: #ac0ab1;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #ac0ab1 !important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #ac0ab1;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 991px) {
  .logo {
    text-align: center;
    float: none !important;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    margin-top: 0px !important;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ac0ab1 !important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3b566e;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
welcome
--------------------------------------------- 
*/
.welcome-area {
  width: 100%;
  height: 100vh;
  min-height: 800px;
  background-image: url(../images/ipadmock.png);
  background-repeat: no-repeat;
  background-position: calc(80%) calc(45%);
  background-size: auto 600px;
}

.welcome-area .header-text .left-text {
  position: relative;
  align-self: center;
  margin-top: 30%;
  transform: perspective(1px) translateY(-30%) !important;
}

.welcome-area .header-text {
  width: 70%;
  margin-left: 5%;
}

.welcome-area .header-text h1 {
  font-weight: 900;
  font-size: 60px;
  line-height: 80px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  color: #191a20;
}

.welcome-area .header-text h1 em {
  font-style: normal;
  color: #ac0ab1;
}

.welcome-area .header-text p {
  font-weight: 300;
  font-size: 17px;
  color: #7a7a7a;
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
}

@media (max-width: 1420px) {
  .welcome-area .header-text {
    width: 50%;
    margin-left: 5%;
  }
}

@media (max-width: 1320px) {
  .welcome-area .header-text .left-text {
    margin-top: 50%;
    transform: none !important;
  }
  .welcome-area .header-text {
    width: 60%;
    margin-left: 5%;
  }
}

@media (max-width: 1140px) {
  .welcome-area {
    height: auto;
  }
  .welcome-area .header-text {
    width: 80%;
    padding-top: 50px;
    margin: 0 auto;
  }
  .welcome-area .header-text .left-text {
    margin-top: 5%;
    transform: none !important;
  }
}

@media (max-width: 810px) {
  .welcome-area {
    background-size: contain;
    background-position: center top;
    height: auto;
    min-height: inherit;
  }
  .welcome-area .header-text {
    padding-top: 30px;
    width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .welcome-area .header-text h1 {
    font-size: 40px;
    line-height: 50px;
  }
  .welcome-area .header-text p {
    font-size: 14px;
    line-height: 24px;
  }
}
/*
---------------------------------------------
info
---------------------------------------------
*/
#info {
  margin-top: -80px;
  padding-top: 120px; /* Adjust based on your header's height plus a buffer */
  position: relative;
  padding: 80px 30px; /* Adjusts padding for top/bottom and left/right */

  background-color: #fce1f3;
  /*rgba(255, 201, 150, 0.37); /*#fff4e6; /* Light orange hue */
  border-radius: 10px; /* Remove rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 76%; /* Full width */
  margin: 80px auto; /* Moves section lower */
  min-height: 450px; /* Set a minimum height for the section */
  display: flex; /* Use Flexbox for alignment */
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
}

#info h2 {
  font-weight: 800; /* Bold font weight */
  font-size: 52px; /* Large font size */
  line-height: 80px; /* Line height to match spacing */
  letter-spacing: 1px; /* Spacing between letters */
  margin-bottom: 40px; /* Space below the header */
  color: #191a20; /* Dark color for the header */
  text-align: center; /* Center align the title */
}

#info h2 em {
  font-style: normal; /* Normal style for emphasized text */
  color: #ac0ab1; /* Yellow color for emphasis */
}

#info p {
  font-weight: 300; /* Lighter font weight */
  font-size: 17px; /* Font size for paragraph */
  color: #7a7a7a; /* Gray color for paragraph */
  line-height: 30px; /* Line height for paragraph */
  letter-spacing: 0.25px; /* Slight letter spacing */
  margin-top: 20px; /* Space above the paragraph */
  margin-bottom: 0; /* Remove bottom margin */
  position: relative; /* Positioning context */
  text-align: center; /* Center align the paragraph text */
}
#info .box-container {
  display: flex; /* Use Flexbox for the box layout */
  justify-content: space-between; /* Space out the boxes */
  width: 100%; /* Use full width of the section */
  margin-top: 20px; /* Space above the box container */
}

#info .info-box {
  background-color: #fff; /* White background for the boxes */
  border-radius: 10px; /* Rounded corners for the boxes */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px; /* Padding inside the boxes */
  flex: 1; /* Allow boxes to grow equally */
  margin: 0 10px; /* Margin between boxes */
  text-align: center; /* Center text within each box */
}
#info .box-subheading {
  font-weight: 600; /* Bold font weight for subheading */
  font-size: 20px; /* Font size for subheading */
  margin-bottom: 0px; /* Space below the subheading */
  color: #9b009d; /* Dark color for the subheading */
}

#info .info-box .icon {
  height: 40px;
  width: auto;
  margin-bottom: 10px;
}
#info .info-box:first-child {
  margin-left: 0; /* Remove left margin for the first box */
}

#info .info-box:last-child {
  margin-right: 0; /* Remove right margin for the last box */
}
/*
---------------------------------------------
team
---------------------------------------------
*/
#team {
  padding: 0px 0px 100px;
  position: relative;
  z-index: 9;
}
.section-header {
  padding-top: 80px;
  font-weight: 900; /* Bold font weight */
  font-size: 52px; /* Large font size */
  line-height: 80px; /* Adjusted line height for vertical spacing */
  letter-spacing: 1px; /* Spacing between letters */
  margin: 0 auto 40px; /* Center the header and space below it */
  color: #191a20; /* Dark color for the header */
  text-align: center; /* Center align the header */
}

@media (max-width: 992px) {
  .features-item {
    margin-bottom: 45px;
  }
}

.features-item {
  border-radius: 5px;
  padding: 30px 30px;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 8;
  background-color: #fff;
}

.features-item h2 {
  z-index: 9;
  position: absolute;
  top: 15px;
  left: 45px;
  font-size: 100px;
  font-weight: 600;
  color: #fce1f3;
}
.features-item img {
  z-index: 10;
  position: relative;
  max-width: 100%;
  margin-bottom: 40px;
  width: 200px; /* Set to desired width */
  height: 200px; /* Set to desired height */
}

.features-item h4 {
  margin-top: 0px;
  font-size: 22px;
  color: #1e1e1e;
  margin-bottom: 25px;
}

.name-with-logo {
  display: inline-flex; /* Allows items to be inline */
  align-items: center; /* Align items vertically */
}

.name-with-logo h4 {
  margin: 0; /* Remove margin to ensure proper alignment */
  font-size: 22px;
  color: #1e1e1e;
  margin-right: 10px;
}
.name-with-logo h5 {
  margin: 0;
  font-size: 10px;
  color: #1e1e1e;
}

.linkedin-logo {
  margin-left: auto;
  width: 18px !important;
  height: 18px !important;
  margin: 0px !important;
  margin-bottom: 4px !important;
}

.features-item .main-button {
  margin-top: 35px;
  display: inline-block;
}

/*
---------------------------------------------
projects
---------------------------------------------
*/
.left-image-decor {
  background-image: url(../images/left-bg-decor.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 100%;
  margin-top: -200px;
  background-size: contain;
  z-index: 1;
}
#project {
  padding: 50px 0px; /* Space above and below the project section */
  position: relative;
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
}
.position-relative {
  position: relative; /* Set the parent container to relative */
}
.left-image {
  margin-left: -150px;
  z-index: 1; /* Lower z-index to place behind content */
}

.rowList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  margin-left: -50px;
  margin-right: 0;
  max-width: 100%; /* Adjust to move further right */
}

.rowList .right-text ul {
  padding: 0;
  margin: 0;
  list-style: none; /* Remove default list styling */
}

.rowList .right-text ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: nowrap;
  min-width: 600px;
}

.rowList .right-text ul li:last-child {
  margin-bottom: 0px; /* No margin for the last item */
}

.right-text img {
  float: left; /* Keep the float to align text beside image */
  margin-right: 30px; /* Space between the image and text */
  margin-left: -85px; /* Move image further left (adjust as needed) */
  width: 70px;
  height: auto;
}

.right-text h4 {
  font-size: 22px; /* Font size for heading */
  color: #1e1e1e; /* Color for heading */
  margin-bottom: 10px; /* Space below the heading */
  margin-top: 3px; /* Space above the heading */
}
#project h2 {
  font-weight: 800; /* Bold font weight */
  font-size: 52px; /* Large font size */
  line-height: 80px; /* Line height to match spacing */
  letter-spacing: 1px; /* Spacing between letters */
  margin-bottom: 40px; /* Space below the header */
  color: #191a20; /* Dark color for the header */
  text-align: center; /* Center align the title */
}

#project h2 em {
  font-style: normal; /* Normal style for emphasized text */
  color: #ac0ab1; /* Yellow color for emphasis */
}
/* Responsive Styles */
@media (max-width: 900px) {
  .rowList {
    grid-template-columns: 1fr; /* Stack items in a single column */
    gap: 10px;
    margin-left: 0; /* Reset the left margin */
    width: 100%; /* Ensure full width without extra margin */
  }

  .left-image {
    display: none; /* Hide the left image on smaller screens */
  }

  #project h2 {
    font-size: 2.5rem;
  }

  .right-text img {
    margin: 0 10px 0 0;
    width: 40px;
  }

  .right-text h4 {
    font-size: 18px;
  }
}

@media (max-width: 100%) {
  .rowList {
    gap: 15px;
  }

  #project h2 {
    font-size: 2rem;
  }

  .right-text img {
    width: 30px;
    margin-right: 8px;
  }

  .right-text h4 {
    font-size: 14px;
  }

  .rowList .right-text ul li {
    flex-wrap: wrap;
  }

  .rowList .right-text ul li a.main-button {
    margin-top: 10px;
    flex: 1 1 100%;
    text-align: center;
  }
}
/*
--------------------------------------------
testimonials
--------------------------------------------
*/
.right-image-decor {
  background-image: url(../images/right-bg-decor.png);
  background-repeat: no-repeat;
  background-position: right center;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -500px;
}

#testimonials {
  padding-top: 100px;
  position: relative;
  z-index: 9;
}

#testimonials .item {
  position: relative;
}

#testimonials .item .testimonial-content {
  background: #AC0AB1(244, 129, 63);
  background: linear-gradient(145deg, #d47eb5 0%, #ac0ab1 100%);
  margin-left: 60px;
  padding: 40px 30px;
  text-align: center;
  border-radius: 5px;
}

#testimonials .item .testimonial-content ul li {
  display: inline-block;
  margin: 0px 1px;
}

#testimonials .item .testimonial-content ul li i {
  color: #fff;
  font-size: 13px;
}

#testimonials .item .testimonial-content h4 {
  font-size: 22px;
  margin-top: 20px;
  color: #fff;
}

#testimonials .item .testimonial-content p {
  color: #fff;
  font-style: italic;
  font-weight: 200;
  margin: 20px 0px 15px 0px;
}

#testimonials .item .testimonial-content span {
  color: #fff;
  font-weight: 200;
  font-size: 13px;
}

#testimonials .author img {
  max-width: 120px;
  margin-bottom: -60px;
}

.owl-carousel .owl-nav button.owl-next span {
  z-index: 10;
  top: 45%;
  border-radius: 10px;
  font-size: 46px;
  color: #fff;
  right: -210px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  background: #ac0ab1;
  background: linear-gradient(145deg, #d47eb5 0%, #ac0ab1 100%);
  position: absolute;
}

.owl-carousel .owl-nav button.owl-prev span {
  z-index: 9;
  top: 30%;
  border-radius: 10px;
  font-size: 46px;
  color: #fff;
  right: -150px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  background: #ac0ab1;
  background: linear-gradient(145deg, #d47eb5 0%, #ac0ab1 100%);
  position: absolute;
}

@media screen and (max-width: 1060px) {
  .owl-carousel .owl-nav {
    display: none !important;
  }
}

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

@media (max-width: 992px) {
  footer {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  .contact-form {
    margin-bottom: 45px;
  }
  footer .right-content {
    text-align: center;
  }
  footer .footer-content {
    padding: 60px 0px !important;
  }
  .video-container {
    width: 100%; /* Make the video responsive */
    height: auto; /* Adjust height as needed for responsiveness */
  }

  .overlay-link {
    font-size: 12px; /* Adjust text size for smaller screens */
    padding: 6px 10px; /* Adjust padding for smaller screens */
  }
}

footer {
  margin-top: 0px;
  padding-top: 200px;
  background-image: url(../images/footer-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
}

footer .footer-content {
  padding: 120px 0px;
}

footer .right-content {
  align-self: right;
}

.contact-form input,
.contact-form textarea {
  color: #777;
  font-size: 13px;
  border: 1px solid #eee;
  background-color: #f7f7f7;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
  margin-top: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form {
  text-align: center;
}

.contact-form ::-webkit-input-placeholder {
  /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.footer-content .right-content {
  color: #fff;
}

.footer-content .right-content h2 {
  margin-top: 40px;
  margin-bottom: 30px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer-content .right-content h2 em {
  font-style: normal;
  color: #fcbb2d;
}

.footer-content .right-content p {
  color: #fff;
}

.footer-content .right-content a {
  color: #fff;
}

.footer-content .right-content a:hover {
  color: #d47eb5;
}

footer .social {
  overflow: hidden;
  margin-top: 30px;
}

footer .social li:first-child {
  margin-left: 0px;
}

footer .social li {
  margin: 0px 7.5px;
  display: inline-block;
}

footer .social li a {
  color: #fff;
  text-align: center;
  background-color: transparent;
  border: 1px solid #fff;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  display: inline-block;
  font-size: 16px;
  -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;
}

footer .social li a:hover {
  background-color: #d47eb5;
  border-color: #d47eb5;
  color: #fff;
}

footer .copyright {
  margin-top: 10px;
  font-weight: 400;
  font-size: 15px;
  color: #4a4a4a;
  letter-spacing: 0.88px;
  text-transform: capitalize;
}

footer .sub-footer {
  padding: 60px 0px;
  border-top: 1px solid rgba(250, 250, 250, 0.3);
  text-align: center;
}

footer .sub-footer a {
  color: #fff;
}

footer .sub-footer a:hover {
  color: #d47eb5;
}

footer .sub-footer p {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

@media (max-width: 991px) {
  footer .copyright {
    text-align: center;
  }
  footer .social {
    text-align: center;
  }
  .centered-image {
    max-width: 80px; /* Adjust for mobile image size */
    margin-bottom: 20px;
    margin-top: 20px;
  }
}
.video-container {
  position: relative;
  width: 560px; /* Adjust as needed */
  height: 315px; /* Adjust as needed */
  margin: 0 auto; /* Center the video container */
}

.video-container iframe {
  width: 100%;
  height: 100%;
}
.centered-image {
  max-width: 180px; /* Adjust max-width as needed for smaller size */
  display: block;
  max-height: 180px;
  margin-bottom: 20px;
  align-self: center;
  margin-top: 20px;
}

.overlay-link {
  position: absolute;
  top: 10px; /* Adjust positioning */
  left: 10px; /* Adjust positioning */
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.overlay-link:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
#preloader {
  overflow: hidden;
  background-image: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}