/*

TemplateMo 563 SEO Dream

https://templatemo.com/tm-563-seo-dream

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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

/* 
---------------------------------------------
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;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.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: 'Open Sans', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -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: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  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;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #b75e64;
  text-transform: uppercase;
  margin-bottom: 15px;

}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}

.section-heading h2 em {
  font-style: normal;
  color:#b75e64;
}

.section-heading h2 span {
  color: #b75e64;
}

.main-blue-button a {
  display: inline-block;
  background-color: #4771cb;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #fff !important;
  transition: all .3s;
}

.main-blue-button a:hover {
  background-color: #fff !important;
  color: #4771cb !important;
  border-bottom: 2px solid #4771cb !important;
}

.main-green-button a {
  display: inline-block;
  background-color: #b75e64;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #b75e64 !important;
  transition: all .3s;
}

.main-green-button a:hover {
  background-color: #b75e64 !important;
  color: #fff !important;
  border-bottom: 2px solid #b75e64 !important;
}


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

.background-header {
  background-color: #33ccc5 !important;
  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: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #33ccc5;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #4771cb;
  content: '';
  left: 50%;
  bottom: 0px;
  transform: translateX(-10px);
}

.header-area {
  background-color: #33ccc5;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

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

.header-area .main-nav .logo {
  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;
}

.header-area .main-nav .logo h4 {
  font-size: 30px;
  font-weight: 800;
  text-transform: capitalize;
  color: #fff;
  line-height: 100px;
  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;
}

.header-area .main-nav .logo h4 img {
  max-width: 30px;
  margin-top: -20px;
  margin-left: 5px;
}

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

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

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  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;
}

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

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

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

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
  color: #4771cb !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  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: #fff !important;
}

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

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

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

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.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: 50px;
  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 {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a !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;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #33ccc5 !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: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.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: #fff;
  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: #fff;
}

.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: #fff;
  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: #fff;
}

.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: #fff;
}

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

.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: #fff;
}

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

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

.header-area .nav {
  margin-top: 30px;
}

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

@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: 992px) {

  .header-area .main-nav .nav li:last-child,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }

  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }

  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #33ccc5 !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #33ccc5;
    padding: 0px 15px;
    height: 100px;
    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%;
    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;
  }

  .background-header .nav {
    margin-top: 80px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    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: #33ccc5 !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: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
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;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

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

@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: #33ccc5;
  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: #33ccc5;
  border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 125px 0px 120px 0px;
  position: relative;
  overflow: hidden;
  background-color: black;
}

.main-banner:after {
  content: '';
  background-image: url(../images/banner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 212px;
  height: 653px;
  z-index: -1;
}

.main-banner:before {
  content: '';
  /* background-image: url(../images/banner-dec-right.png); */
  background-color: black;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  margin-bottom: 8px;
}

.main-banner .left-content h4 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: #2a2a2a;
}

.main-banner .left-content h2 {
  border-top: 1px solid #eee;
  margin-top: 30px;
  padding-top: 20px;
  margin-bottom: 45px;
  font-size: 60px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 72px;
  background: #FA9D4D;
  background: -webkit-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: -moz-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 2;
}

.main-banner .right-image img {
  max-width: 593px;
}



/* 
---------------------------------------------
Features Style
--------------------------------------------- 
*/

#features {
  margin-top: -86px;
}

.features .features-content {
  z-index: 2;
  position: relative;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.features-item {
  text-align: center;
  padding: 30px;
  border-radius: 50px;
  background: rgb(255, 255, 255);
  background: linear-gradient(105deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
  transition: background-color .5s;
  -webkit-transition: background-color .5s;
  -o-transition: background-color .5s;
  -moz-transition: background-color .5s;
}

.features-item:hover {
  background: rgb(51, 204, 197);
  background: linear-gradient(105deg, #b75e64 0%,#b75e64 100%);
}

.features-item:hover h4 {
  color: #fff;
}

.features-item:hover p {
  color: #fff;
}

.features-item:hover .line-dec {
  background-color: rgba(255, 255, 255, 0.3);
}

.first-feature:hover .icon {
  background-image: url(../images/features-icon-white-01.png);
}

.second-feature:hover .icon {
  background-image: url(../images/features-icon-white-02.png);
}

.features-item .number h6 {
  background-repeat: no-repeat;
  width: 110px;
  height: 69px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 69px;
  margin-top: -65px;
  margin-bottom: 30px;
}

.features-item .first-number h6 {
  background-image: url(../images/features-number-01.png);
}

.features-item .second-number h6 {
  background-image: url(../images/features-number-02.png);
}

.features-item .third-number h6 {
  background-image: url(../images/features-number-03.png);
}

.features-item .fourth-number h6 {
  background-image: url(../images/features-number-04.png);
}

.first-feature .icon {
  background-image: url(../images/features-icon-black-01.png);
}

.second-feature .icon {
  background-image: url(../images/features-icon-black-02.png);
}

.features-item .icon {
  width: 63px;
  height: 63px;
  margin: 0 auto;
  transition: all 0.5s;
}

.features-item h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #b75e64;
  position: relative;
  transition: all 0.5s;
}

.features-item .line-dec {
  width: 100px;
  height: 2px;
  background-color: rgb(131 159 48);
  margin: 30px auto;
  transition: all 0.5s;
}

.features-item p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 32px;
  text-align: center;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}

.progress .progress-value div {
  margin-top: 10px;
}

.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}

.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}

.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}

.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}

.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

.progress {
  margin-bottom: 1em;
}


/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  padding-top: 130px;
}

.about-us .section-heading {
  margin-bottom: 40px;
}

.about-us .left-image {
  margin-right: 45px;
}

.about-us .about-item h4 {
  font-size: 38px;
  font-weight: 800;
  color: #088ec3;
}

.about-us .about-item h6 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
  color: #2a2a2a;
  text-transform: capitalize;
}

.about-us p {
  margin: 40px 0px;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-left: 75px;
  margin-right: 75px;
}

.our-services .container-fluid {
  padding: 0px 80px;
}

.service-item {
  padding: 60px 30px;
  border: 2px solid #f7f7f7;
  border-radius: 5px;
  transition: all .3s;
  margin-bottom: 30px;
}

.service-item:hover {
  background-color: #fff;
  border: 2px solid transparent;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.service-item .icon {
  margin-top: 10px;
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  background-color: #f7f7f7;
  border-radius: 50%;
}

.service-item .icon img {
  width: 38px;
  height: 38px;
}

.service-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 15px;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 100px;
  overflow: hidden;
}

.our-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.portfolio-item {
  margin-bottom: 30px;
  border-radius: 50px;
}

.portfolio-item:hover .thumb .hover-content {
  opacity: 1;
  visibility: visible;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item .thumb img {
  border-radius: 50px;
  overflow: hidden;
}

.portfolio-item .thumb .hover-content {
  border-radius: 50px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(51, 204, 197);
  background: linear-gradient(105deg, rgba(51, 204, 197, 1) 0%, rgba(8, 141, 195, 1) 100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.portfolio-item .thumb .hover-content .inner-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.portfolio-item .thumb .hover-content .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.portfolio-item .thumb .hover-content .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .owl-nav {
  display: inline-block !important;
  position: absolute;
  top: -117px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #ddd;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #33ccc5;
  border-color: #33ccc5;
}



/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  margin-top: 90px;
  padding: 120px 0px;
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}


.contact-us .contact-info {
  padding: 40px 30px;
  border: 2px solid #eee;
}

.contact-us .contact-info ul li {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.contact-us .contact-info ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .5s;
}

.contact-us .contact-info ul li:hover a {
  color: #2a2a2a;
}

.contact-us .contact-info ul li:last-child {
  margin-bottom: 0px;
}

.contact-us .contact-info ul li .icon {
  margin-bottom: 10px;
}

.contact-us .contact-info ul li .icon img {
  max-width: 32px;
}

form#contact {
  position: relative;
  background-color: #fff;
  padding: 60px 80px;
  border-radius: 50px;
  text-align: center;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #efefef;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #efefef;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #b75e64;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin-top: 20px;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #4771cb !important;
  transition: all .3s;
  outline: none;
  border: none;
}

form#contact button:hover {
  background-color:#b75e64 !important;
  color: #fff !important;
  border-bottom: 2px solid #33ccc5 !important;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer p {
  /* text-align: center; */
  margin: 20px 0px;
}

footer p a {
  color: #000000;
  transition: all .5s;
}

footer p a:hover {
  color:#96414a !important;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }

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

@media (max-width: 992px) {
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }

  .main-banner .left-content {
    margin-right: 0px;
  }

  .main-banner {
    text-align: center;
  }

  .main-banner:before {
    display: none;
  }

  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }

  .features-item {
    margin-bottom: 45px;
  }

  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }

  .skill-item {
    margin-bottom: 30px;
  }

  .service-item {
    text-align: center;
  }

  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }

  .our-portfolio .owl-nav {
    display: none !important;
  }

  .contact-info {
    margin-top: 60px;
  }

  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }

  .main-banner .info-stat {
    margin-bottom: 15px;
  }

  .service-item {
    text-align: center;
    padding: 30px;
  }

  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .service-item .right-content {
    display: inline-block;
  }

  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }

  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }

  .about-us .about-item {
    margin-top: 15px;
  }

  form#contact {
    padding: 30px;
  }
}



/* Own Changes Made By BS */

/* Services Dropdown Button Start */
.header-area .nav .dropdown {
  position: relative;
}

.header-area .nav .dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -408px;
  background-color: #000000;
  border: 1px solid #ddd;
  padding: 10px 0;
  list-style: none;
  min-width: 953px;
  z-index: 1000;
  color: black;
}

.dropdown a {
  font-size: 12px !important;
}

.header-area .nav .dropdown:hover .dropdown-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.header-area .nav .dropdown .dropdown-menu li {
  padding: 5px 20px;
}

.header-area .nav .dropdown .dropdown-menu li a {
  color: #333;
  text-decoration: none;
}

.header-area .nav .dropdown .dropdown-menu li a:hover {
  color: #007bff;
}

/* Services Dropdown End */


/* New Section Start */
.np {
  padding: 0px;
}

.featuredPropBox {}

.featuredPropBox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: outside none none;
  padding: 0;
}

.featuredPropBox ul li {
  background-color: #eeeeee;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
  height: 250px;
  margin: 5px;
  width: 32%;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.featuredPropBox ul li:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(22, 22, 22, 0.6);
  transition: all 0.3s;
}

.featuredPropBox ul li:nth-child(1) {
  background-image: url('../NEWIMAGES/Ser.jpg ');
}

.featuredPropBox ul li:nth-child(2) {
  background-image: url('../NEWIMAGES/Ser5.jpg');
}

.featuredPropBox ul li:nth-child(3) {
  background-image: url('../NEWIMAGES/Ser2.jpg');
}

.featuredPropBox ul li:nth-child(4) {
  background-image: url('../NEWIMAGES/ser4.jpeg');
}

.featuredPropBox ul li:nth-child(5) {
  background-image: url('../NEWIMAGES/ser5.jpeg');
}

.featuredPropBox ul li:nth-child(6) {
  background-image: url('../NEWIMAGES/ser6.jpeg');
}

.featuredPropBox ul li:nth-child(7) {
  background-image: url('../NEWIMAGES/Service6.jpg');
}

.featuredPropBox ul li:nth-child(8) {
  background-image: url('../NEWIMAGES/ser8.jpeg');
}

.featuredPropBox ul li:nth-child(9) {
  background-image: url('../NEWIMAGES/ser9.jpeg');
}

.featuredPropBox ul li .fplogo {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  z-index: 1;
  transition: all 0.3s;
}

.featuredPropBox ul li .fplogo img {
  width: 100%;
}
.featuredPropBox ul li .fplogo:hover {
  width: 100%;
  filter: blur(8px);
}
.featuredPropBox ul li .fplogo img:hover {
  width: 100%;
  filter: blur(8px);
}

.featuredPropBox ul li .fptext {
  display: none;
  font-size: 16px;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease 0s;
  width: 65%;
  z-index: 1;
}

.featuredPropBox ul li .fptext p {
  color:white;
  margin: 0px;
  background-color: #b75e64;
}

.featuredPropBox ul li:hover {
  box-shadow: 0 0 0 25px rgba(7, 7, 7, 0.86) inset;

}
.featuredPropBox ul li:hover  {
  box-shadow: 0 0 0 25px rgba(7, 7, 7, 0.86) inset;
  .featuredPropBox ul li:hover {
    box-shadow: 0 0 0 25px rgba(7, 7, 7, 0.86) inset;
  }
}

.featuredPropBox ul li:hover:after {
  background-color: rgba(22, 22, 22, 0.3);
}

.featuredPropBox ul li:hover .fplogo {
  display: none;
}

.featuredPropBox ul li:hover .fptext {
  display: block;
}

/* New Section End */

/* New Section-2 Start */

.flex-container-mission {
  /* position: absolute; */
  height: 70vh;
  width: 100%;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .flex-container-mission {
    flex-direction: column;
  }
}

.flex-title-mission {
  color: #f1f1f1;
  position: relative;
  font-size: 2vw;
  margin: auto;
  text-align: center;
  transform: rotate(90deg);
  top: 15%;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

@media screen and (max-width: 768px) {
  .flex-title-mission {
    transform: rotate(0deg) !important;
  }
}

.flex-about-mission {
  opacity: 0;
  color: #f1f1f1;
  position: relative;
  width: 70%;
  font-size: 2vw;
  padding: 5%;
  top: 20%;
  border: 2px solid #f1f1f1;
  border-radius: 10px;
  line-height: 1.3;
  margin: auto;
  text-align: left;
  transform: rotate(0deg);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

@media screen and (max-width: 768px) {
  .flex-about-mission {
    padding: 0%;
    border: 0px solid #f1f1f1;
  }
}

.flex-slide-mission {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

@media screen and (max-width: 768px) {
  .flex-slide-mission {
    overflow: auto;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 768px) {
  .flex-slide-mission p {
    font-size: 2em;
  }
}

@media screen and (max-width: 768px) {
  .flex-slide-mission ul li {
    font-size: 2em;
  }
}

.flex-slide-mission:hover {
  -webkit-flex-grow: 3;
  flex-grow: 3;
}

.home-mission {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.home-mission1 {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../NEWIMAGES/brand1.jpg);
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
}

.home-mission2 {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../NEWIMAGES/brand2.jpg);
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
}

.home-mission3 {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../NEWIMAGES/brand3.jpg);
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
}

.home-mission4 {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../NEWIMAGES/brand4.jpg);
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
}

.home-mission5 {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../NEWIMAGES/brand5.jpg);
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
}

.home-mission6 {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../NEWIMAGES/brand6.jpg);
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
}

@media screen and (min-width: 768px) {
  .home-mission {
    animation: aboutFlexSlide 3s 1;
    animation-delay: 0s;
  }
}

@keyframes aboutFlexSlide-mission {
  0% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }

  50% {
    -webkit-flex-grow: 3;
    flex-grow: 3;
  }

  100% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
}

@media screen and (min-width: 768px) {
  .flex-title-home-mission {
    transform: rotate(90deg);
    top: 15%;
    animation: aboutFlexSlide 3s 1;
    animation-delay: 0s;
  }
}

@keyframes homeFlextitle-mission {
  0% {
    transform: rotate(90deg);
    top: 15%;
  }

  50% {
    transform: rotate(0deg);
    top: 15%;
  }

  100% {
    transform: rotate(90deg);
    top: 15%;
  }
}

.flex-about-home-mission {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .flex-about-home-mission {
    animation: aboutFlexSlide 3s 1;
    animation-delay: 0s;
  }
}

@keyframes flexAboutHome-mission {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.about-mission {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.contact-form-mission {
  width: 100%;
}

input-mission {
  width: 100%;
}

textarea-mission {
  width: 100%;
}

.contact-mission {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.work-mission {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.spinner1 {
  position: fixed;
  top: 0;
  left: 0;
  background: #222;
  height: 100%;
  width: 100%;
  z-index: 11;
  margin-top: 0;
  color: #fff;
  font-size: 1em;
}

.cube1,
.cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }

  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }

  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }

  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }

  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }

  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }

  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }

  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

.flex-slide-mission:hover .flex-about-home-mission {
  opacity: 1;
}

.flex-slide-mission:hover .flex-title-home-mission {
  transform: rotate(360deg);

}

.flex-about-mission p {
  color: white;
}

/* New Section-2 End */


/* New Testimonial Section Start */
.testimonial {
  border-right: 4px solid #2a3d7d;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  padding: 30px 30px 30px 130px;
  margin: 0 15px 30px 15px;
  overflow: hidden;
  position: relative;
}

.testimonial:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -17px;
  border-top: 25px solid #29d18b;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  transform: rotate(45deg);
}

.testimonial:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -17px;
  border-top: 25px solid #29d18b;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  transform: rotate(135deg);
}

.testimonial .pic {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 60px;
  left: 20px;
}

.testimonial .pic img {
  width: 100%;
  height: auto;
}

.testimonial .description {
  font-size: 15px;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 25px;
  margin-bottom: 15px;
}

.testimonial .title {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:#839f30;
  margin: 0;
}

.testimonial .post {
  display: inline-block;
  font-size: 17px;
  color: #839f30;
  font-style: italic;
}

.owl-theme .owl-controls .owl-page span {
  border: 2px solid #2a3d7d;
  background: #fff !important;
  border-radius: 0 !important;
  opacity: 1;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span {
  background: #29d18b !important;
  border-color: #29d18b;
}

@media only screen and (max-width: 767px) {
  .testimonial {
    padding: 20px;
    text-align: center;
  }

  .testimonial .pic {
    display: block;
    position: static;
    margin: 0 auto 15px;
  }
}

/* New Testimonial Section End */


/* New Team Section Start */
/* 4 card in 1 row  */
/* section .cards {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 2rem;
} */

/* 2 card in 1 row  */
section .cards {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.teamcard{
  max-width: 500px;
}
.cards{
  margin-left: 100px;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
}

@media screen and (min-width: 51rem) {
  section .cards {
    gap: 1.5rem;
  }
}

section .cards .card {
  position: relative;
  text-align: left;
  /*hover states*/
}

section .cards .card .social-icon {
  background: #111;
  padding: 1rem 1.75rem;
  display: inline-block;
  position: absolute;
  left: 0;
}

section .cards .card .social-icon i {
  color: #fff;
  font-size: 1.4rem;
}

section .cards .card .social-icon:hover i {
  color: #003ef5;
}

section .cards .card img {
  
  transition: 0.5s ease;
}

section .cards .card img:hover {
  filter: grayscale(0%);
}

section .cards .card .card-content-wrapper {
  /* margin-left: auto; */
  width: 100%;
}

section .cards .card .card-content-wrapper .card-content {
  display: block;
  background: white;
  transition: 0.5s ease;
  padding: 4.5rem 2rem 0 3.2rem;
}

section .cards .card .card-content-wrapper .card-content>div {
  text-align: justify;
}

section .cards .card .card-content-wrapper .card-content h3,
section .cards .card .card-content-wrapper .card-content p {
  text-transform: capitalize;
}

section .cards .card .card-content-wrapper .card-content h3 {
  font-size: clamp(1.15rem, 1.1071rem + 0.1714vw, 1.3rem);
  font-weight: 800;
  color: #111;
}

section .cards .card .card-content-wrapper .card-content p {
  color: #454545;
  font-size: 0.9rem;
}

section .cards .card .card-content-wrapper .card-content svg {
  display: inline-block;
  text-align: right;
  width: 60px;
  color: #b75e64;
}

section .cards .card .card-img-wrapper:hover~.card-content-wrapper .card-content {
  background: #003ef5;
}

section .cards .card .card-img-wrapper:hover~.card-content-wrapper .card-content h3,
section .cards .card .card-img-wrapper:hover~.card-content-wrapper .card-content p,
section .cards .card .card-img-wrapper:hover~.card-content-wrapper .card-content svg {
  color: #fff;
}

section .cards .card .card-content-wrapper:hover .card-content {
  background:#b75e64;
}

section .cards .card .card-content-wrapper:hover .card-content h3,
section .cards .card .card-content-wrapper:hover .card-content p,
section .cards .card .card-content-wrapper:hover .card-content svg {
  color: #fff;
}

section img {
  max-width: 75%;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top;
}



.card-description {
  display: none; /* Hidden initially */
}

.toggle-arrow {
  cursor: pointer;
  transition: transform 0.3s; /* Smooth rotation */
}

.rotate {
  transform: rotate(180deg); /* Rotate the arrow when active */
}
/* New Team Section End */

/* Client Start */
.logo-slider {
  overflow: hidden;
  padding: 30px 0 0 0;
  white-space: nowrap;
  position: relative;
}

.logo-slider:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 45s slide infinite linear;
}

.logos-slide img {
  width: 183px;
  height: 83px;
  margin: 0 40px;
}


@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Client End */

/* Blog Start */
.wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
  padding: 0.5em;
  perspective: 500px;
}

.article {
  display: flex;
  flex-direction: column;
  height: 300px;
  position: relative;
  background-size: cover;
  border-radius: 7px;
  overflow: hidden;
  padding: 1em;
  cursor: pointer;
  transform: rotateX(0deg) rotateY(0deg);
  transition: all 0.2s linear;
  will-change: transform;
}

.article:nth-child(5n+1) {
  background-image: url("../NEWIMAGES/Ser5.jpg");
}

.article:nth-child(5n+2) {
  background-image: url("../NEWIMAGES/Ser2.jpg");
}

.article:nth-child(5n+3) {
  background-image: url("../NEWIMAGES/ser3.jpg");
}

.article:nth-child(5n+4) {
  background-image: url("../NEWIMAGES/ser4.jpeg");
}

.article:nth-child(5n+5) {
  background-image: url("../NEWIMAGES/Ser1.jpg");
}


.overlay {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.4) 50%);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.article h1 {
  font-size: 1.5em;
  font-family: 'Oswald';
  margin-top: auto;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.article h1 {
  transform: translateY(-20px)
}

.article h1 span {
  color: #ffffff;
}

.article span.cat {
  letter-spacing: 2px;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  position: relative;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  color: #fff;
}

@media screen and (min-width:1000px) {
  .wrap {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    padding: 1em;
  }

  .article h1 {
    transform: translateY(0px);
  }

  .article:hover h1 {
    transform: translateY(-20px)
  }

  .article span.cat {
    color: transparent;
  }

  .article span.cat::before,
  .article span.cat::after {
    content: attr(data-hover);
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0%;
    transition: max-width 300ms ease-out;
  }

  .article span.cat::before {
    color: yellow;
    transition-delay: 100ms;
  }

  .article span.cat::after {
    color: white;
  }

  .article:hover span.cat:after,
  .article:hover span.cat:before {
    max-width: 100%;
  }

  .article:hover span.cat:after {
    transition-delay: 300ms;
  }
}


/* Blog End */

/* Footer Start */
.footer {
  padding: 60px 0px;
  /* background-color: rgb(156, 231, 231); */
  background-color: rgb(227 253 253);

}

.fplogo h4 {
  color: white;
  font-size: 23px;
  font-weight: 900;
}


/* Sticky Social Icon Start */
.sticky-icon {
  z-index: 1;
  position: fixed;
  top: 15%;
  right: 0%;
  width: 220px;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.sticky-icon a {
  transform: translate(160px, 0px);
  border-radius: 50px 0px 0px 50px;
  text-align: left;
  margin: 2px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  font-size: 22px;
  font-family: 'Oswald', sans-serif;
  transition: all 0.8s;
}

.sticky-icon a:hover {
  color: #FFF;
  transform: translate(0px, 0px);
}

.sticky-icon a:hover i {
  transform: rotate(360deg);
}

/*.search_icon a:hover i  {
	transform:rotate(360deg);}*/
.Facebook {
  background-color: #b75e64;
  color: #FFF;
}

.Youtube {
  background-color: #b75e64;
  color: #FFF;
}

.Twitter {
  background-color:#b75e64;
  color: #FFF;
}

.Instagram {
  background-color: #b75e64;
  color: #FFF;
}

.Google {
  background-color: #b75e64;
  color: #FFF;
}

.sticky-icon a i {
  background-color: #FFF;
  height: 40px;
  width: 40px;
  color: #000;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  margin-right: 20px;
  transition: all 0.5s;
}

.sticky-icon a i.fa-facebook-f {
  background-color: #FFF;
  color: #2C80D3;
}

.sticky-icon a i.fa-google-plus-g {
  background-color: #FFF;
  color: #d34836;
}

.sticky-icon a i.fa-instagram {
  background-color: #FFF;
  color: #FD1D1D;
}

.sticky-icon a i.fa-youtube {
  background-color: #FFF;
  color: #fa0910;
}

.sticky-icon a i.fa-twitter {
  background-color: #FFF;
  color: #53c5ff;
}

.fas fa-shopping-cart {
  background-color: #FFF;
}

#myBtn {
  height: 50px;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  text-align: center;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: none;
  outline: none;
  background-color: #1e88e5;
  color: white;
  cursor: pointer;
  border-radius: 50%;
}

.fa-arrow-circle-up {
  font-size: 30px;
}

#myBtn:hover {
  background-color: #555;
}

.whatsapp-float img {
  width: 50px;
  position: fixed;
  bottom: 40px;
  right: 30px;
  border-radius: 50px;
  z-index: 1000;
}

.bg1 {
  background-image: url(../NEWIMAGES/bg1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.section-heading1 h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #fff6f6;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}




/* Home Banner Area css
============================================================================================ */

/* For Contact Banner  */
.Contact-banner {
  position: relative;
  background: url('../NEWIMAGES/ContactUs.jpg') no-repeat center center/cover;
  height: 500px;
  /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

.black-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Adjust the opacity as needed */
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding-top: 48px;
  /* Adjust padding as needed */
}

.page_link a {
  color: white;
  text-decoration: none;
  margin: 0 5px;
}

.page_link a:hover {
  text-decoration: underline;
}


/* For About   */
.About-banner {
  position: relative;
  background: url('../NEWIMAGES/About.avif') no-repeat center center/cover;
  height: 500px;
  /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

/* For Job As Brand  */
.JoinBrand-banner {
  position: relative;
  background: url('../NEWIMAGES/JoinAs\ Brand.jpeg') no-repeat center center/cover;
  height: 500px;
  /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}



/* For Job As Creater  */
.JoinCreater-banner {
  position: relative;
  background: url('../NEWIMAGES/JoinAsCreater.avif') no-repeat center center/cover;
  height: 500px;
  /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

/* For Service  */
.Service-banner {
  position: relative;
  background: url('../NEWIMAGES/Service.jpg') no-repeat center center/cover;
  height: 500px;
  /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}



/* End Home Banner Area css
============================================================================================ */


/* Contact Section Start  */
.contact-section {
  padding: 50px 0;
  background-color: #f9f9f9;
}

.contact-section h2 {
  font-size: 36px;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

/* .contact-form {
  background: #ffffff;
  padding: 30px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
} */

/* .contact-form:hover {
  transform: translateY(-10px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
} */

.contact-form .form-control {
  border-radius: 0;
  margin-bottom: 20px;
  box-shadow: none;
  border: 1px solid #ddd;
  transition: border-color 0.3s ease;
}

.contact-form .form-control:focus {
  border-color: #007bff;
  box-shadow: none;
}

.contact-form button {
  background-color: #007bff;
  border-color: #007bff;
  border-radius: 0;
  padding: 10px 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.map {
  height: 100%;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

.contact-info {
  margin-top: 20px;
  text-align: center;
  color: #555;
}

/* Contact Section End  */


/* Mission Vision Values Section strart */
.mission-vision-values {
  padding: 50px 0;
  background-color: #f4f4f4;
}

.mission-vision-values .box {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.mission-vision-values .box:hover {
  transform: translateY(-10px);
  opacity: 1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.mission-vision-values .box .image-container {
  position: relative;
  height: 200px;
  /* Adjust as needed */
  overflow: hidden;
  margin-bottom: 15px;
}

.mission-vision-values .box .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.8;
}

.mission-vision-values .box:hover .image-container img {
  opacity: 1;
}

.mission-vision-values .box h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color:#b75e64;
}

.mission-vision-values .box p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* Mission Vision Values Section End */



/* Service Section Image Start  */

.service-section {
  margin-bottom: 4rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-section:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.service-image {
  border-radius: 10px;
  transition: transform 0.3s;
}

.service-section:hover .service-image {
  transform: scale(1.05);
}

.service-content {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.service-section:hover .service-content {
  background-color: #f1f1f1;
}

/* Service Section Image End  */


/* Career section Start  */
.job-card {
  margin-bottom: 20px;
}

.job-card-block {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

.job-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.job-card-item {
  flex: 1;
  min-width: 200px;
}

.job-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.jobname {
  color: #555;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color:#b75e64;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #0056b3;
}

/* Career section End  */


/* Apply form Section Start  */
.apply-section {
  background-color: #f4f4f4;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.apply-section h2 {
  color: #333;
  margin-bottom: 20px;
}

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.form-group label {
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  outline: none;
}

.submit-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(45deg, #007bff, #00c6ff);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-btn:hover {
  background: linear-gradient(45deg, #0056b3, #00aaff);
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.submit-btn:active {
  background: linear-gradient(45deg, #004494, #0099cc);
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-btn:focus {
  outline: none;
}

/* Apply Section end  */




/*  New ADd */
/*** Navbar ***/
.sticky-top {
  background-color: #0c0000 !important;
  /* top: -100px; */
  transition: .5s;
}

.navbar .navbar-nav .nav-link {
  margin-right: 35px;
  padding: 20px 0;
  color: rgb(97, 95, 95);
  font-size: 18px !important;
  font-weight: 500;
  outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color:#d38c92;
}

.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: middle;
  margin-left: 8px;
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link  {
      margin-right: 0;
      padding: 10px 0;
  }

  .navbar .navbar-nav {
      margin-top: 15px;
      border-top: 1px solid #EEEEEE;
  }
}

@media (min-width: 992px) {
  .sticky-top {
      /* margin-top: -34px; */
  }

  .navbar {
      height: 68px;
  }

  .navbar .nav-item .dropdown-menu {
      display: block;
      border: none;
      margin-top: 0;
      top: 150%;
      /* left: -150%; */
      opacity: 0;
      visibility: hidden;
      transition: .5s;
      box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
  }

  .navbar .nav-item:hover .dropdown-menu {
      top: 100%;
      visibility: visible;
      transition: .5s;
      opacity: 1;
  }

  .navbar .nav-item .dropdown-menu11 {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    /* left: -150%; */
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
}

.navbar .nav-item:hover .dropdown-menu11 {
    top: 100%;
    visibility: visible;
    transition: .5s;
    opacity: 1;
}

}



@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
      justify-content: end;
  }
  .dropdown-menu{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px;
  }
  
  .dropdown-menu1{
    display: block !important;
  }
  .mrleft{
    left: -150% !important;
  }
}

.bg-primarynew{
  background-color:#e3fdfd!important;
}

/* .dropdown-menu a{
  padding: 20px 0px;
} */

.dropdown-menu1 a{
  padding: 20px;
}
.logoheader{
  height: 53px;
    width: 180px;

}
.logofooter{
  height: 53px;
    width: 180px;

}
a:hover {
  color: #839f30 !important;
}
.text-md-start a{
  color: rgb(204, 102, 119);
}
.text-md-start p{
  color: yellowgreen;
}
.text-md-end a{
  color: rgb(204, 102, 119);
}
.service-content h2{
  color:#b85f65 ;
}
.bg-primarynew {
  background-color: black;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* CSS rules for tablet devices */
  
}


/*  New ADd */

/* carousel */
.carousel-caption{
  /* justify-content: start; */
  padding-bottom: 250px;
  padding-right: 900px;

  /* padding-left: -20px !important; */
}

.carousel-caption h1{
  font-size: 75px !important;
  font-weight: 900;
 
}







/* service dropdown  */
.dropdown-menu11 {
  display: none;
  position: absolute;
  top: 100%;
  /* left: -408px; */
  /* background-color: #000000; */
  border: 1px solid #ddd;
  /* padding: 10px 0; */
  list-style: none;
  /* min-width: 953px; */
  width: 100vw;
  margin-left: -850px !important;
    padding: 20px 100px; /* Horizontal padding of 100px */
  /* margin-right: 200px !important; */
  z-index: 1000;
  color: black;
}

.header-area .nav .dropdown .dropdown-menu11 {
  display: none;
  position: absolute;
  top: 100%;
  left: -408px;
  background-color: #000000;
  border: 1px solid #ddd;
  padding: 10px 0;
  list-style: none;
  /* min-width: 953px; */
  width: 100vw;
  z-index: 1000;
  color: black;
}

.dropdown a {
  font-size: 12px !important;
}

.header-area .nav .dropdown:hover .dropdown-menu11 {
  display: grid ;
  grid-template-columns: repeat(4, 1fr) ; /* Create 4 equal columns */
  grid-auto-rows: minmax(100px, auto) ; /* Ensure rows are flexible and accommodate content */
  width: calc(100vw - 200px) ; /* Adjust width for horizontal padding if needed */
  padding: 0 100px; /* Horizontal padding */
  box-sizing: border-box; /* Include padding in width calculation */
  background-color: #ffffff; /* Background color for the dropdown */
  left: 0; /* Align dropdown to the left of the viewport */
  top: 100%; /* Position dropdown below the parent element */
  border: 1px solid #ddd; /* Border styling */
  z-index: 1000; /* Ensure dropdown appears above other elements */
}

/* Ensure every two items are placed vertically in the same column */
.header-area .nav .dropdown:hover .dropdown-menu11 .dropdown-item:nth-child(odd) {
  grid-row: span 2; /* Each odd item spans 2 rows */
}



.header-area .nav .dropdown .dropdown-menu11 li {
  padding: 5px 20px;
}

.header-area .nav .dropdown .dropdown-menu11 li a {
  color: #333;
  text-decoration: none;
}

.header-area .nav .dropdown .dropdown-menu11 li a:hover {
  color: #007bff;
}


.dropdown-item i {
  font-size: 40px;
  color: #b85f65 ;
}

.dropdown-item {
  font-size: 50px !important;
  font-weight: 600;
  /* color: #b85f65 ; */
}

.dropdown-menu11 .row .col {
  margin-bottom: 40px;
}


@media(max-width:600px){
  .dropdown-menu11 {
    display: none;
    position: absolute;
    top: 100%;
    /* left: -408px; */
    /* background-color: #000000; */
    border: 1px solid #ddd;
    /* padding: 10px 0; */
    list-style: none;
    /* min-width: 953px; */
    width: 100vw;
    margin-left: 0px !important;
    padding: 20px 100px;
    /* margin-right: 200px !important; */
    z-index: 1000;
    color: black;
}
#features {
  margin-top: 0px;
}
.carousel-caption {
  /* justify-content: start; */
  padding-bottom: 0px;
  padding-right: 0px;
}
.carousel-caption h1 {
  font-size: 36px !important;
  font-weight: 900;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 3.25rem;
}
.featuredPropBox ul {
  display: block;
}
.featuredPropBox ul li {
  background-color: #eeeeee;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
  height: 250px;
  margin: 5px;
  width: 100%;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}
.flex-title-mission {
  color: #f1f1f1;
  position: relative;
  font-size: 4vw;
  margin: auto;
  text-align: center;
  transform: rotate(90deg);
  top: 50%;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
section .cards {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}
.cards {
   margin-left: 0px;
  }
  .featuredPropBox ul li .fplogo {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 1;
    transition: all 0.3s;
}
.About-banner {
  position: relative;
  background: url(../NEWIMAGES/About.avif) no-repeat center center / cover;
  height: 300px;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 0px 20px;
}
.JoinCreater-banner {
  position: relative;
  background: url(../NEWIMAGES/JoinAsCreater.avif) no-repeat center center / cover;
  height: 300px;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}
.join-section {
  background: linear-gradient(90deg, #b85f65, #e68d93);
  color: white;
  padding: 50px;
  border-radius: 25px;
  position: relative;
  height: 1504px !important;
  margin-bottom: 300px;
  margin-top: 50px;
}
.join-section .form-section {
  border: 2px;
  background: white;
  color: black;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 685px !important;
  right: -50px;
  width: 100%;
  max-width: 600px;
}
.join-section .form-section {
  border: 2px;
  background: white;
  color: black;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 80px;
  right: 0px !important;
  width: 100%;
  max-width: 600px;
}
.bgcontent h1 {
  font-size: 53px !important;
}
.maindivv {
  font-family: Arial, sans-serif;
  background-color: #b75e64;
  margin: 0;
  display: block !important;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
}
.form-container {
  margin-top: 60px;
}
.JoinBrand-banner {
  position: relative;
  /* background: url(../NEWIMAGES/JoinAs Brand.jpeg) no-repeat center center / cover; */
  height: 300px;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}
.Service-banner {
  position: relative;
  background: url(../NEWIMAGES/Service.jpg) no-repeat center center / cover;
  height: 300px;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}
}



.logos-slide img {
  width: 204px;
  height: 87px;
  margin: 0 40px;
}
.card {
  width: 400px;
}

.main-green-button1 a {
  display: inline-block;
  background-color: #b75e64;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #b75e64 !important;
  transition: all .3s;
  width: 150px;
}
.card-img-wrapper{
  height: 250px;
}


.whatsapp-float img {
  border-radius: 50%;
}

/* Button Styling */
.btn-primary {
  display: inline-block;
  padding: 12px 25px;
  background-color: #ff7a59; /* Primary color */
  color: #fff;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #ff5722; /* Darker shade on hover */
  color: #fff;
}


.job-skills2 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 20px;
}


.job-skills2 span {
  /* background-color: #f0f2f7; */
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  color: #2d2f5c;
  border: 1px solid;
}