/* 

TemplateMo 562 Space Dynamic

https://templatemo.com/tm-562-space-dynamic

*/

/* ---------------------------------------------
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=Poppins:wght@100;200;300;400;500;600;700;800;900&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: 'Poppins', 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: black; */
  background: linear-gradient(105deg, rgb(20, 3, 20) 80%, rgb(241, 44, 255) 100%);
  /* background-image: url(../images/abstract-background-with-flowing-waves.jpg); */
  font-family: 'Poppins', 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 h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

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

.section-heading h2 span {
  color: purple;
}

.main-blue-button a {
  display: inline-block;
  background-color: purple;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button a {
  display: inline-block;
  background-color: plum;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: plum;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

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

.background-header {
  background-color: black!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: rgb(228, 21, 228)!important;
}

.background-header .main-nav .nav li:hover a {
  color: rgb(228, 21, 228)!important;
}

.background-header .nav li a.active {
  color: rgb(228, 21, 228)!important;
}

.header-area {
  background-color: black;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 110px;
  -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 {
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  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;
}

.header-area .main-nav .logo h4 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgb(228, 21, 228);
    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;
}



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

.header-area .main-nav .logo {
  display: flex;
  align-items: center;
  height: 100px; /* match the header height */
}

.header-area .main-nav .logo img {
  max-height: 80px !important ; /* or adjust as needed */
  width: 250px;
  display: block;
}


.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 {
  color: #fff !important;
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: purple!important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: rgb(228, 21, 228);
  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 a {
  color: rgb(218, 86, 218);
}

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

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

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  background-color: white;
}

.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: white;
  position: absolute;
  right: 18px;
  top: 12px;
}

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

.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: white!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: purple!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: plum;
  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: plum;
  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: 100px;
}

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

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


@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: purple!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: black;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .main-nav .logo img {
    max-height: 20px;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .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:purple !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: plum!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;
  }
}
.headingsection{
  text-align: center;
  padding: 50px 0;
  background: #000; /* Black background */
  color: #fff;      /* White text */
  box-shadow: 0 4px 15px rgba(128, 0, 128, 0.5); /* Purple glow effect */
  transition: all 0.3s ease;
}
.header-area .main-nav .logo img {
  max-height: 50px;
}

.headingsection h2 {
  font-size: 42px;
  font-weight: bold;
  color: rgb(228, 21, 228); /* Purple text */
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.3s;
}

.headingsection:hover h2 {
  color: #fff; /* White text on hover */
}



/* 
---------------------------------------------
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: #fe3f40;
    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: #fe3f40;
    border-radius: 50%;
}



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

.main-banner {
  background-image: url(../images/abstract-background-with-flowing-waves.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  /* background-image: url(../images/baner-dec-left.png); */
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 193px;
  height: 467px;
}

.main-banner:before {
  content: '';
  /* background-image: url(../images/baner-dec-right.png); */
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 98px;
  height: 290px;
}

.main-banner .left-content {
  margin-right: 45px;
}
.main-banner .left-content .btn1  {
  display: inline-block;
  background: purple;
  color: #fff;
  padding: 12px 30px;
  font-size: 16px;
  text-decoration: none;
  border-radius: 30px;
  transition: background 0.3s;
}

.main-banner .left-content .btn1:hover {
  background: #fff;
  color: purple;
}


.main-banner .left-content h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: plum;
  margin-bottom: 15px;
}
.main-banner .left-content h6 span{
  font-size: 40px;
  color: plum;
}

.main-banner .left-content h2 {
  font-size: 50px;
  font-weight: 700;
  color: white;
  line-height: 72px;
}

.main-banner .left-content h2 em {
  color: rgb(248, 10, 248);
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: rgb(248, 10, 248);
}

.main-banner .left-content p {
  margin: 20px 0px;
  color: plum;
}

.main-banner .left-content form {
  margin-top: 30px;
  width: 470px;
  height: 66px;
  position: relative;
}

.main-banner .left-content form button {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #fe3f40;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
}

.main-banner .left-content form input {
  width: 470px;
  height: 66px;
  background-color: purple;
  border-radius: 33px;
  border: none;
  outline: none;
  padding: 0px 25px;
  color: #fff;
  letter-spacing: 0.25px;
  font-size: 15px;
  font-weight: 300;
}

.main-banner .left-content form input::placeholder {
  color: #fff;
}



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

#about {
  /* margin-top: 120px; */
}
.icon i {
  font-size: 40px;
  /* color: plum;  */
  color: plum;
  margin-bottom: 15px;
  transition: color 0.3s;
}

.item:hover .icon i {
  color: rgb(232, 4, 232);
}

.about-us {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}

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

.about-us .services .item {
  margin-bottom: 30px;
}

.about-us .services .item .icon {
  float: left;
  margin-right: 25px;
}

.about-us .services .item .icon img {
  max-width: 70px;
}

.about-us .services .item h4 {
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-us .services .item p {
  color: #fff;
}

@media (max-width: 992px) {
  .about-us .left-image {
    display: none;
  }
}

/* Section Styling */
.packages-section {
  color: #fff;
  padding: 80px 0;
  text-align: center;
}

.section-heading h2 {
  font-size: 42px;
  color: purple;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-heading p {
  font-size: 18px;
  color: white;
  margin-bottom: 40px;
}

.package-card {
  background: #1e1e1e;
  border: 2px solid purple;
  border-radius: 10px;
  padding: 40px;
  transition: transform 0.3s;
  margin-bottom: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; /* Centering content horizontally */
}

/* Card Title and Price */
.package-card h3 {
  font-size: 28px;
  color: purple;
}

.package-card .price {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin: 15px 0;
}

/* Card List */
.package-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  width: 100%; /* Ensure the list takes full width */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align list items to the left */
  gap: 10px; /* Add space between list items */
}

.package-card ul li {
  font-size: 16px;
  line-height: 2;
  color: #ccc;
}

/* Highlighted Card */
.package-card.highlight {
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.8);
  transform: scale(1.05);
}

/* Button Styling */
.btn {
  display: inline-block;
  background: purple;
  color: #fff;
  padding: 12px 30px;
  font-size: 16px;
  text-decoration: none;
  border-radius: 30px;
  transition: background 0.3s;
}

.btn:hover {
  background: #fff;
  color: purple;
}

/* Hover Effect */
.package-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(128, 0, 128, 0.9);
}

/* Responsive Styling */
@media (max-width: 992px) {
  .package-card {
      margin-bottom: 20px;
      height: auto;
  }

  .package-card ul {
    align-items: center; /* Center items on smaller screens */
  }
}


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

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

.our-services .left-image {
  margin-right: 45px;
}

.our-services .section-heading h2 {
  margin-right: 100px;
  color: white;
}
.our-services .section-heading h2 em{
  color: purple;
}

.our-services .section-heading p {
  margin-top: 30px;
  margin-bottom: 60px;
  color: plum;
}

.our-services .progress-skill-bar {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}

.our-services .progress-skill-bar span {
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  color: purple;
}

.our-services .first-bar span {
  left: 69%;
}

.our-services .second-bar span {
  left: 81%;
}

.our-services .third-bar span {
  left: 88%;
}

.our-services .progress-skill-bar h4 {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-bottom: 14px;
}

.our-services .progress-skill-bar .full-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #f7eff1;
  position: relative;
  z-index: 1;
}

.our-services .progress-skill-bar .filled-bar {
  background: purple;
  /* background: linear-gradient(105deg, rgb(241, 44, 255) 100%); */
  height: 6px;
  border-radius: 3px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}







.reviews-section {
  /* background: #000; */
  color: #fff;
  padding: 100px 0;
  text-align: center;
}

/* Section Heading */
.section-heading h2 {
  font-size: 42px;
  color: purple;
  margin-bottom: 10px;
}

.section-heading p {
  font-size: 18px;
  color: #ccc;
  margin-bottom: 50px;
}

/* Reviews Row */
.reviews-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: stretch;  /* Ensures same height */
  margin-bottom: 80px;
}

/* Review Box */
.review-box {
  /* background: #1a1a1a; */
  border: 2px solid purple;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.7);
  width: calc(33.33% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  transition: transform 0.3s, box-shadow 0.3s;
  min-height: 280px;  /* Ensure same height */
  max-height: 280px;
}

.review-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(128, 0, 128, 0.9);
}

/* Review Content */
.review-content h4 {
  font-size: 24px;
  color: purple;
  margin-bottom: 10px;
}

.review-content .company-name {
  font-size: 18px;
  color: #ccc;
  font-style: italic;
  margin-bottom: 15px;
}

.review-content p {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}

/* Rating Styling */
.rating {
  font-size: 10px;
  color: gold;
  margin-top: 15px;
}

/* Add Review Form */
.add-review {
  margin-top: 50px;
  padding: 50px;
  background: #121212;
  border: 2px solid #9b59b6;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(155, 89, 182, 0.7);
  text-align: center;
}

.add-review h3 {
  font-size: 36px;
  color: #b56bff;
  margin-bottom: 25px;
}

/* Form Inputs */
form input,
form textarea,
form select {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #9b59b6;
  background: #1e1e1e;
  color: #fff;
  transition: 0.3s;
  font-size: 16px;
}

form input:focus,
form textarea:focus,
form select:focus {
  border: 1px solid #d184ff;
  box-shadow: 0 0 15px rgba(187, 128, 255, 0.8);
  outline: none;
}

/* Submit Button */
button {
  background: #9b59b6;
  color: #fff;
  padding: 15px 35px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 18px;
}

button:hover {
  background: #fff;
  color: #9b59b6;
  box-shadow: 0 0 20px rgba(155, 89, 182, 0.8);
}

/* Review Section */
#reviewsRow {
  display: flex;
  gap: 20px;
  overflow: hidden;
  transition: transform 0.5s ease;
  padding: 10px 0;
}

/* Review Card */
.review-box {
  flex: 0 0 calc(33.33% - 20px);
  padding: 20px;
  background: black;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(155, 89, 182, 0.2);
  transition: transform 0.3s ease;
  height: 300px;
  border-left: 4px solid #9b59b6;
  color: white;
}

.review-box:hover {
  transform: scale(1.03);
}

.review-box h4 {
  margin-bottom: 5px;
  color: #ffffff;
}

.review-box h5 {
  margin-bottom: 10px;
  color: #c8a2c8;
  font-weight: normal;
}

.review-box p {
  font-style: italic;
  color: #dddddd;
}

.rating {
  color: #f1c40f;
  margin-top: 10px;
}

/* Edit/Delete Buttons */
.review-actions button {
  font-size: 10px;
  padding: 5px 10px;
  margin-right: 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.9s ease;
}

.edit-btn, .delete-btn {
  font-size: 16px;  /* Smaller font size for buttons */
  padding: 10px 20px;  /* Smaller padding */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.9s ease;
  min-width: 70px;  /* Ensures buttons are not too small */
}

.edit-btn {
  background-color: #8e44ad;
  color: white;
}

.edit-btn:hover {
  background-color: #732d91;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}

/* Add this to your CSS for smooth transition effect */
/* Add this to your CSS for smooth transition effect */
.review {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.review.show {
  opacity: 1;
}

#reviewsRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.review {
  flex-basis: 30%; /* To make the reviews align nicely */
  margin: 10px;
}


/* Responsive Design */
@media (max-width: 992px) {
  .reviews-row {
      flex-direction: column;
  }

  .review-box {
      width: 90%;
      min-height: auto;
  }
}








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

.contact-us {
  padding: 160px 0px;
  /* background-image: url(../images/contact-bg.png); */
  /* background: linear-gradient(105deg, rgb(26, 18, 26) 50%, rgb(241, 44, 255) 100%); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #fff;
}

.contact-us .section-heading p {
  color: #fff;
  margin-top: 30px;
}

.phone-info {
  margin-top: 40px;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: purple;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

form#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

form#contact .contact-dec img {
  max-width: 178px;
}

form#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 20px;
}

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

form#contact input::placeholder {
  color: #2a2a2a;
}

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

form#contact textarea::placeholder {
  color: #2a2a2a;
}

form#contact button {
  display: inline-block;
  background-color: purple;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: rgb(222, 26, 222);
}


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


/* footer */
/* Global Resets */

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden; /* ✅ prevent horizontal scroll */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* Footer Section */
.footer-section {
  background: #111;
  color: #fff;
  padding: 60px 0;
}

/* Footer Box Container */
.footer-box-container {
  background-color: #000;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  flex-wrap: wrap;
  word-break: break-word;
}

/* Individual Footer Box */
.footer-box {
  flex: 1;
  min-width: 0;              /* ✅ allows content to shrink within flexbox */
  padding: 0 10px;           /* ✅ for mobile spacing */
  word-wrap: break-word;     /* ✅ breaks long words */
  overflow-wrap: break-word;
}

.footer-box h4 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #e0e0e0;
}

.footer-box p,
.footer-box ul {
  font-size: 16px;
  line-height: 1.8;
  color: white;
}

.footer-box ul {
  list-style: none;
  padding: 0;
}

.footer-box ul li {
  margin-bottom: 10px;
}

.footer-box ul li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-box ul li a:hover {
  color: #ccc;
}

.footer-box ul li i {
  margin-right: 10px;
  color: #e0e0e0;
}

/* Social Icons */
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;           /* ✅ wrap on small screens */
  gap: 20px;
  margin: 20px 0;
  margin-right: 150px;
}

.social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 40px;
  font-size: 24px;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.social-icons a.facebook { background: #3b5998; }
.social-icons a.twitter { background: #1da1f2; }
.social-icons a.linkedin { background: #0077b5; }
.social-icons a.instagram { background: #e4405f; }
.social-icons a.youtube { background: #ff0000; }
.social-icons a.github { background: #333; }
.social-icons a.whatsapp { background: #25d366; }

.social-icons a:hover {
  transform: translateY(-8px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  color: #aaa;
}

.footer-bottom p {
  margin: 0;
}

/* ===================== Responsive ====================== */

@media (max-width: 992px) {
  .footer-box-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-box {
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .social-icons {
    gap: 15px;
    margin-right: 0;
  }

  .social-icons a {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .social-icons {
    gap: 12px;
  }

  .social-icons a {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ✅ Custom for very small screens like 360px–374px */
@media (max-width: 374px) {
  .footer-section {
    padding: 40px 15px;
  }

  .footer-box p {
    font-size: 14px;
    line-height: 1.6;
  }

  .footer-box {
    padding: 0 5px;
  }

  .social-icons {
    gap: 10px;
    justify-content: center;
  }

  .social-icons a {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .footer-bottom {
    font-size: 12px;
    padding-top: 15px;
  }
}