body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: #090603;
  padding-top: 72px;
}
/*==========================
SOCIAL ICONS
==========================*/

.social-icons{
    display:flex;
    align-items:center;
    gap:10px;
}

.social-icons .header-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:17px;
    transition:.35s;
}

/* Facebook */

.social-icons .facebook:hover{
    background:#1877F2;
    color:#fff !important;
    border-color:#1877F2;
    transform:translateY(-3px);
}

/* Instagram */

.social-icons .instagram:hover{
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
    color:#fff !important;
    border-color:#dd2a7b;
    transform:translateY(-3px);
}

/* YouTube */

.social-icons .youtube:hover{
    background:#FF0000;
    color:#fff !important;
    border-color:#FF0000;
    transform:translateY(-3px);
}

/* LinkedIn */

.social-icons .linkedin:hover{
    background:#0A66C2;
    color:#fff !important;
    border-color:#0A66C2;
    transform:translateY(-3px);
}


/*==========================
MOBILE SOCIAL ICONS
==========================*/

.mobile-social-icons{

    display:flex;
    justify-content:center;
    gap:15px;

    margin-top:30px;
}

.mobile-social-icons a{

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#1b130d;
    color:#D4AF37;

    text-decoration:none;

    border:1px solid rgba(212,175,55,.25);

    transition:.35s;
}

.mobile-social-icons a:hover{

    background:#D4AF37;
    color:#081633;

    transform:translateY(-4px);
}
body{
    background:#081633 !important;
}

body::before{
    background:
    radial-gradient(circle at top right,
    rgba(212,175,55,.12),
    transparent 45%) !important;
}

/* Floating */

.floating-call,
.scroll-toggle-btn{
    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;
    color:#081633!important;
}

.floating-call:hover,
.scroll-toggle-btn:hover{
    background:#D4AF37!important;
}

.floating-whatsapp{
    box-shadow:0 10px 25px rgba(37,211,102,.35)!important;
}

/* Navbar */

.navbar,
.navbar.scrolled{

    background:rgba(8,22,51,.94)!important;

    border-bottom:1px solid rgba(212,175,55,.18)!important;

}

.logo span{
    color:#D4AF37!important;
}

.navbar-nav .nav-link{

    color:#fff!important;

}

.navbar-nav .nav-link:hover{

    color:#D4AF37!important;

    background:rgba(212,175,55,.10)!important;

}

.header-icon{

    color:#D4AF37!important;

    border-color:rgba(212,175,55,.25)!important;

}

.header-icon:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

.talk-btn{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

    box-shadow:0 12px 28px rgba(212,175,55,.30)!important;

}

.talk-btn small{

    color:#333!important;

}

.talk-btn .divider{

    background:rgba(0,0,0,.25)!important;

}

/* Dropdown */

.dropdown-menu{

    background:#102B5C!important;

    border-color:rgba(212,175,55,.20)!important;

}

.dropdown-item{

    color:#fff!important;

}

.dropdown-item:hover{

    background:rgba(212,175,55,.12)!important;

    color:#D4AF37!important;

}

/* Mobile */

.offcanvas{

    background:#081633!important;

}

.offcanvas-header{

    border-bottom:1px solid rgba(212,175,55,.15)!important;

}

.mobile-login{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

}

.mobile-login:hover{

    background:#D4AF37!important;

}

.mobile-menu li a,

.mobile-menu .accordion-item,

.accordion-button{

    background:#102B5C!important;

    color:#fff!important;

}

.mobile-menu li a:hover,

.accordion-body a:hover{

    background:#173A75!important;

    color:#D4AF37!important;

}

.accordion-body{

    background:#0E2348!important;

}
/* Online Box */

.online-box{

    background:rgba(255,255,255,.06)!important;

    border:1px solid rgba(212,175,55,.20)!important;

    backdrop-filter:blur(14px);

}

.online-box strong{

    color:#fff!important;

}

.online-box span{

    color:#DCE3F0!important;

}

.online-users img{

    border-color:#102B5C!important;

}

/* Hero Heading */

.hero h1{

    color:#fff!important;

}

.hero h1 span{

    color:#D4AF37!important;

}

/* Hero List */

.hero-list li{

    color:#E6ECF6!important;

}

.hero-list i{

    color:#D4AF37!important;

}

/* Button */

.hero-btn{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

    box-shadow:0 15px 35px rgba(212,175,55,.35)!important;

}

.hero-btn:hover{

    background:#D4AF37!important;

}

/* Counter */

.counter-row h2{

    color:#D4AF37!important;

}

.counter-row p{

    color:#D6DEEB!important;

}

/* Hero Cards */

.hero-card.active{

    border-color:#D4AF37!important;

    box-shadow:

    0 25px 50px rgba(0,0,0,.35),

    0 0 25px rgba(212,175,55,.20)!important;

}

/* Activity */

.activity-bar{

    background:rgba(255,255,255,.04)!important;

    border-top:1px solid rgba(212,175,55,.15)!important;

    border-bottom:1px solid rgba(212,175,55,.15)!important;

}

.activity-item{

    color:#E6ECF6!important;

}

.activity-item strong{

    color:#D4AF37!important;

}

.activity-item small{

    color:#AAB7CF!important;

}

.dot{

    background:#D4AF37!important;

}
      .floating-call{

    position:fixed;

    right:20px;

    bottom:90px;

    width:60px;

    height:60px;

    background:#FFD600;

    color:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    z-index:9999;

    text-decoration:none;

    box-shadow:0 8px 20px rgba(0,0,0,.25);

}

.floating-call:hover{

    color:#111;

    transform:scale(1.08);

}
.floating-whatsapp{

    position:fixed;

    right:20px;

    bottom:20px;

    width:60px;

    height:60px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    z-index:9999;

    text-decoration:none;

    box-shadow:0 8px 20px rgba(0,0,0,.25);

}

.floating-whatsapp:hover{

    color:#fff;

    transform:scale(1.08);

}
.scroll-toggle-btn{

    position:fixed;

    left:20px;

    bottom:20px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#FFD600;

    color:#111;

    font-size:22px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

    transition:.3s;

}

.scroll-toggle-btn:hover{

    transform:scale(1.08);

    background:#ffca00;

}

@media(max-width:768px){

.scroll-toggle-btn{

    width:48px;

    height:48px;

    left:15px;

    bottom:15px;

    font-size:18px;

}

}
body::before {

  content: "";

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background:

    radial-gradient(circle at center,

      rgba(255, 170, 60, .18),

      transparent 55%);

  pointer-events: none;

  z-index: -2;

}
.custom-close{

    filter: invert(1);

    opacity:1;

    background-size:18px;

    width:42px;

    height:42px;

    border-radius:12px;

    background-color:rgba(255,255,255,.08);
}

.custom-close:hover{

    background:#2b2014;

    transform:rotate(90deg);
}
.navbar.scrolled {

  background: rgba(15, 10, 7, .82);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 6px 25px rgba(0, 0, 0, .35);

}

.navbar {
  background: #130d08;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* Logo */

.logo img {
  width: 38px;
  height: 38px;
  margin-right: 8px;
}

.logo span {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.navbar-nav {
  gap: 4px;
}

.navbar-nav .nav-link {

  color: #fff;

  font-size: 15px;

  padding: 12px 16px;

  border-radius: 25px;

  transition: .3s;

}

.navbar-nav .nav-link:hover {

  background: #2d2116;

  color: #fff;

}

.navbar {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 9999;

  background: rgba(19, 13, 8, .72);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  padding: 14px 0;

  min-height: 72px;

  transition: .35s;

}


.dropdown-toggle::after {
  font-size: 12px;
  margin-left: 6px;
}

.header-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: .3s;
}

.header-icon:hover {
  background: #FFD84A;
  color: #111;
}

/* CTA Button */

.talk-btn {
  margin-left: 15px;
  background: linear-gradient(90deg, #FFE86A, #FFD534);
  color: #111;
  border: none;
  border-radius: 40px;
  padding: 13px 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: .3s;
  box-shadow: 0 0 25px rgba(255, 223, 70, .35);
}

.talk-btn:hover {
  transform: translateY(-2px);
}

.talk-btn small {
  color: #666;
  font-weight: 500;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  width: 38px;
  height: 38px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, .12);
}

.talk-btn {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;

  background: linear-gradient(90deg, #FFE86A, #FFD534);
  color: #111;

  border: none;
  border-radius: 28px;

  padding: 0 18px;
  height: 40px;

  font-size: 14px;
  font-weight: 600;

  box-shadow: 0 0 15px rgba(255, 223, 70, .25);
  transition: .3s;
}

.talk-btn:hover {
  transform: translateY(-2px);
}

.talk-btn small {
  font-size: 13px;
  color: #555;
}

.talk-btn .divider {
  width: 1px;
  height: 16px;
  background: #777;
}

.navbar-brand {
  margin-right: 40px;
}

/* Mobile */

@media(max-width:991px) {

  .navbar-collapse {
    background: #130d08;
    padding: 20px;
    margin-top: 15px;
  }

  .header-icons {
    margin-top: 20px;
  }

  .talk-btn {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }

}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler i {
  color: #fff;
  font-size: 24px;
}

@media(max-width:991px) {

  .navbar-collapse {

    background: #130d08;

    padding: 20px;

    border-radius: 15px;

    margin-top: 15px;

  }

  .navbar-nav {

    gap: 10px;

  }

  .navbar-nav .nav-link {

    padding: 12px 15px;

  }

  .d-lg-flex {

    flex-direction: column;

    align-items: flex-start !important;

  }

  .header-icons {

    margin-top: 20px;

  }

  .talk-btn {

    width: 100%;

    justify-content: center;

    margin-top: 20px;

    margin-left: 0;

  }

}

.navbar-collapse {

  justify-content: space-between;

}

.navbar-brand {

  margin-right: 30px;

}

.header-icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  cursor: pointer;

  transition: .3s;

}

.header-icon:hover {

  background: #2b2014;

  border-color: #FFD84A;

  color: #FFD84A;

}

/* Dropdown */
.nav-item.dropdown {
  position: relative;
}

.dropdown-menu {

  display: block;

  opacity: 0;

  visibility: hidden;

  transform: translateY(15px);

  transition: .25s ease;

  background: #171008;

  border: 1px solid rgba(255, 210, 90, .15);

  border-radius: 18px;

  width: 220px;
  min-width: 220px;
  padding: 8px;

  margin-top: 5px;

}

.nav-item.dropdown:hover>.dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  color: #ddd;
  padding: 12px 18px;
  border-radius: 12px;
  transition: .3s;
  font-size: 14px;
}

.dropdown-item i {
  margin-left: auto;
  font-size: 12px;
  color: #fff;
}

.dropdown-item:hover {

  background: #2a1f14;

  color: #FFD84A;

}

.dropdown-item i {

  font-size: 12px;

}

.dropdown-toggle::after {

  transition: .3s;

}

.nav-item.dropdown:hover .dropdown-toggle::after {

  transform: rotate(180deg);

}

@media(max-width:991px) {

  .dropdown-menu {

    display: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    position: static;

    background: #1b130d;

    border: none;

    box-shadow: none;

    padding-left: 15px;

  }

  .nav-item.dropdown.show .dropdown-menu {

    display: block;

  }

}
/* Hide desktop menu on mobile */

@media(max-width:991px){

.navbar-collapse{
    display:none !important;
}

.offcanvas{

    width:85%;

    max-width:360px;

    background:#130d08;

    color:#fff;

}

.offcanvas-header{

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:20px;
}

.offcanvas-header .logo span{

    color:#fff;
}

.btn-close{

    filter:invert(1);
}

.offcanvas-body{

    padding:25px 20px;
}

.mobile-menu{

    list-style:none;

    padding:0;

    margin:0;
}

.mobile-menu li{

    margin-bottom:10px;
}

.mobile-menu li a{

    display:block;

    padding:16px 18px;

    color:#fff;

    text-decoration:none;

    border-radius:14px;

    background:#1b140d;

    transition:.3s;
}

.mobile-menu li a:hover{

    background:#2d2116;

    color:#FFD84A;
}

}
.mobile-menu{

    padding-top:20px;
}

.mobile-login{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    height:55px;

    background:#FFF176;

    border-radius:16px;

    color:#111;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    margin-bottom:10px;
}

.free-text{

    text-align:center;

    color:#999;

    font-size:14px;

    margin-bottom:25px;
}

.menu-heading{

    color:#8f8f8f;

    font-size:14px;

    margin:25px 0 12px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.mobile-menu .accordion-item{

    background:#1b130d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    overflow:hidden;

    margin-bottom:12px;
}

.mobile-menu .accordion-button{

    background:#1b130d;

    color:#fff;

    box-shadow:none;

    padding:18px;
}

.mobile-menu .accordion-button:not(.collapsed){

    background:#1b130d;

    color:#FFD84A;
}

.mobile-menu .accordion-body{

    background:#171008;

    padding:0;
}

.mobile-menu .accordion-body a{

    display:block;

    padding:14px 20px;

    color:#bbb;

    text-decoration:none;

    border-top:1px solid rgba(255,255,255,.05);
}

.mobile-menu .accordion-body a:hover{

    color:#FFD84A;

    background:#22170d;
}

.mobile-links{

    margin-top:30px;
}

.mobile-links a{

    display:block;

    color:#fff;

    text-decoration:none;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.06);
}
.offcanvas{
    width:340px !important;
    top:0;
    left:0;
    height:100vh;
 z-index: 10050;
    background:#130d08;
}

/*=====================================
HEADER
=====================================*/

.offcanvas-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.offcanvas-header .logo{

    display:flex;

    align-items:center;

    text-decoration:none;
}

.offcanvas-header .logo img{

    width:42px;

    height:42px;

    border-radius:50%;

    margin-right:10px;
}

.offcanvas-header .logo span{

    color:#fff;

    font-size:28px;

    font-weight:600;
}
.btn-close{

    filter:invert(1);

    opacity:1;

    width:42px;

    height:42px;

    background-size:18px;

    background-position:center;

    background-repeat:no-repeat;
}
.btn-close:hover{

    background:#2d2116;

    transform:rotate(90deg);
}

.btn-close-white{

    filter:invert(1);
}

/*=====================================
BODY
=====================================*/

.offcanvas-body{

    padding:20px;
}

/*=====================================
LOGIN BUTTON
=====================================*/

.mobile-login{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    height:58px;

    background:#FFF176;

    color:#111;

    font-size:18px;

    font-weight:600;

    border-radius:18px;

    text-decoration:none;

    transition:.3s;
}

.mobile-login:hover{

    background:#FFD84A;

    color:#111;
}

.mobile-login i{

    font-size:18px;
}

.mobile-free{

    text-align:center;

    color:#8f8f8f;

    font-size:14px;

    margin:14px 0 28px;
}

/*=====================================
SECTION TITLE
=====================================*/

.mobile-title{

    color:#777;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:12px;

    margin-top:20px;
}

/*=====================================
ACCORDION
=====================================*/

.mobile-menu .accordion-item,
.accordion-item{

    background:#1b130d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

    margin-bottom:12px;
}

.accordion-button{

    background:#1b130d;

    color:#fff;

    box-shadow:none;

    padding:18px;

    font-size:17px;

    font-weight:500;
}

.accordion-button:not(.collapsed){

    background:#1b130d;

    color:#FFD84A;
}

.accordion-button::after{

    filter:invert(1);
}

.accordion-body{

    padding:0;

    background:#171008;
}

.accordion-body a{

    display:block;

    padding:15px 22px;

    color:#bbb;

    text-decoration:none;

    font-size:15px;

    border-top:1px solid rgba(255,255,255,.05);

    transition:.3s;
}

.accordion-body a:hover{

    background:#2a1f14;

    color:#FFD84A;

    padding-left:30px;
}

/*=====================================
NORMAL LINKS
=====================================*/

.mobile-menu{

    list-style:none;

    margin:0;

    padding:0;
}

.mobile-menu li{

    margin-bottom:8px;
}

.mobile-menu li a{

    display:block;

    padding:16px 18px;

    border-radius:14px;

    color:#fff;

    text-decoration:none;

    background:#1b130d;

    border:1px solid rgba(255,255,255,.06);

    transition:.3s;
}

.mobile-menu li a:hover{

    background:#2a1f14;

    color:#FFD84A;

    padding-left:26px;
}

/*=====================================
SCROLLBAR
=====================================*/

.offcanvas::-webkit-scrollbar{

    width:5px;
}

.offcanvas::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;
}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:576px){

.offcanvas{

    width:88% !important;
}

.offcanvas-header{

    padding:18px;
}

.offcanvas-header .logo span{

    font-size:22px;
}

.mobile-login{

    height:54px;

    font-size:16px;
}

.accordion-button{

    font-size:16px;
}

.mobile-menu li a{

    font-size:16px;
}

}


/* =========================
   Stars Background
========================= */

#stars {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: -1;

}

.star {

  position: absolute;

  background: #fff;

  border-radius: 50%;

  animation: twinkle linear infinite;

}

@keyframes twinkle {

  0% {

    opacity: .15;
    transform: scale(.6);

  }

  50% {

    opacity: 1;
    transform: scale(1.3);

  }

  100% {

    opacity: .2;
    transform: scale(.7);

  }

}
.hero {
  padding: 40px 0 40px;
  overflow: hidden;
  position: relative;
}

/*==========================
ONLINE BOX
==========================*/

.online-box {

  width: 390px;

  height: 64px;

  background: #16120d;

  border: 1px solid rgba(255, 213, 90, .15);

  border-radius: 60px;

  display: flex;

  align-items: center;

  padding: 0 8px 0 20px;

  gap: 10px;

  box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
}

.green-dot {

  width: 10px;
  height: 10px;

  background: #1ED760;

  border-radius: 50%;

  position: relative;

  flex: none;
}

.green-dot::after {

  content: "";

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  background: #1ED76055;

  animation: pulse 1.8s infinite;
}

.online-box strong {

  color: #fff;

  font-size: 18px;

  font-weight: 700;
}

.online-box span {

  color: #cfcfcf;

  font-size: 15px;
}

.online-users {

  margin-left: auto;

  display: flex;
}

.online-users img {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid #16120d;

  margin-left: -12px;
}

.online-users img:first-child {

  margin-left: 0;
}

@keyframes pulse {

  0% {
    transform: scale(.8);
    opacity: 1;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }

}
.hero h1 {
  font-size: 58px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  margin: 22px 0;
}

.hero h1 span {
  display: block;
  color: #F4A83A;
}

.hero-list {

  list-style: none;

  padding: 0;

  margin: 28px 0;
}

.hero-list li {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 16px;

  color: #C8C8C8;

  margin-bottom: 16px;
}

.hero-list i {

  color: #FFD84A;

  font-size: 18px;
}
.hero-btn {

  background: #FFD84A;

  color: #111;

  border: none;

  border-radius: 50px;

  padding: 10px 20px;

  font-size: 14px;

  font-weight: 700;

  transition: .3s;
}

.hero-btn:hover {

  background: #ffcb05;
}

.hero-btn i {

  margin-left: 10px;
}
.counter-row {

  display: flex;

  justify-content: space-between;

  margin-top: 35px;

  flex-wrap: wrap;

  gap: 20px;
}

.counter-row h2 {

    font-size: 28px;
      color: #fff;
      margin: 0;
      font-weight: 600;
}

.counter-row p {

  margin-top: 8px;

  font-size: 15px;

  color: #8d8d8d;
}
.hero-right {

  position: relative;

  height: 480px;
}

.hero-card {

  position: absolute;

  border-radius: 120px;

  overflow: hidden;

  transition: .6s;
}

.hero-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.hero-card.active {

  width: 270px;

  height: 350px;

  left: 180px;

  top: 40px;

  border: 3px solid #D5A83E;

  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);

  z-index: 20;
}

.hero-card.left {

  width: 150px;

  height: 200px;

  left: 40px;

  top: 160px;

  opacity: .75;
}

.hero-card.right {

  width: 150px;

  height: 200px;

  left: 420px;

  top: 160px;

  opacity: .75;
}
.activity-bar {

  padding: 15px 0;

  border-top: 1px solid rgba(255, 255, 255, .08);

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  overflow: hidden;
}

.activity-track {

  display: flex;

  width: max-content;

  animation: ticker 35s linear infinite;
}

.activity-item {

  display: flex;

  align-items: center;

  margin-right: 55px;

  color: #bfbfbf;

  font-size: 15px;

  white-space: nowrap;
}

.activity-item strong {

  color: #F5B145;

  margin: 0 6px;
}

.activity-item small {

  color: #8c8c8c;

  margin-left: 6px;
}

.dot {

  width: 8px;

  height: 8px;

  background: #F5B145;

  border-radius: 50%;

  margin-right: 12px;
}

@keyframes ticker {

  from {
    transform: translateX(0);
  }

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

}
@media(max-width:991px) {

  .hero {

    text-align: center;
  }

  .online-box {

    width: 100%;

    max-width: 380px;

    margin: auto;
  }

  .hero h1 {

    font-size: 25px;
  }
.hero-list {
    margin: 20px 0;
}


  .hero-list li {

    justify-content: center;

    font-size: 15px;
  }

  .hero-right {

    margin-top: 50px;

    height: 420px;
  }

  .hero-card.active {

    width: 220px;

    height: 340px;

    left: 50%;

    transform: translateX(-50%);
  }

  .hero-card.left {

    display: none;
  }

  .hero-card.right {

    display: none;
  }

  .counter-row {

    justify-content: center;
  }

  .counter-row h2 {

    font-size: 30px;
  }

  .activity-item {

    font-size: 14px;
  }

}
/*==========================
 Services
===========================*/

.service-section {

  padding: 40px 0 40px;

}

.service-card {

  background: #1b140d;

  border: 1px solid rgba(255, 196, 82, .12);

  border-radius: 22px;

  padding: 30px;

  min-height: 170px;

  transition: .35s;

  cursor: pointer;

}

.service-card:hover {

  transform: translateY(-8px);

  border-color: none;

  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);

}

.service-icon {

  width: 42px;

  height: 42px;

  border-radius: 18px;

  background: #f3c331;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 15px;

  color: #fff;

  margin-bottom: 24px;

  box-shadow: 0 8px 25px rgba(243, 195, 49, .28);

}

.service-card h4 {

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 8px;

}

.service-card p {

  color: #7d7d7d;

  font-size: 14px;

  margin: 0;

  line-height: 1.5;

}

/*==========================================
TOP ASTROLOGERS SECTION
==========================================*/

.top-astro-section {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}

.top-astro-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 193, 7, .06), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(255, 193, 7, .05), transparent 28%),
    radial-gradient(circle at 70% 80%, rgba(255, 193, 7, .04), transparent 35%);
  pointer-events: none;
}

.top-astro-section .container {
  position: relative;
  z-index: 2;
}

/*==========================================
LIVE TEXT
==========================================*/

.live-text {

  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 1px;
  text-transform: uppercase;

  color: #d98917;

  margin-bottom: 18px;
}

.live-text i {

  color: #d98917;
  font-size: 11px;
}

.top-title {

  font-size: 70px;

  line-height: 1.02;

  font-weight: 400;

  color: #F6F2EB;

  margin-bottom: 25px;
}

.top-title span {

  color: #d98917;

  font-weight: 500;
}
.top-desc {

  max-width: 650px;

  font-size: 18px !important;

  line-height: 1.75;

  color: #9f9990;
}

.view-btn {
width: 200px;
  height: 50px;
  border-radius: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #FFF176;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: .35s;
}

.view-btn:hover {

  background: #FFE44F;

  color: #111;

  transform: translateY(-4px);
}

.view-btn i {

  transition: .35s;
}

.view-btn:hover i {

  transform: translateX(6px);
}

/*==========================================
CARD
==========================================*/

.astro-card {

  position: relative;

  height: 350px !important;

  padding: 15px;

  border-radius: 22px;

  background: #1a130c;

  border: 1px solid rgba(255, 200, 90, .12);

  transition: .35s;

  overflow: hidden;
}

.astro-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg,
      rgba(255, 255, 255, .02),
      transparent);

  pointer-events: none;
}

.astro-card:hover {

  transform: translateY(-10px);

  border-color: rgba(255, 200, 90, .25);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, .45);
}
.astro-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 5px;
}

.astro-user {

  display: flex;

  align-items: center;

  gap: 14px;
}

.astro-img {

  position: relative;

  flex: none;
}

.astro-img img {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  object-fit: cover;

  border: 3px solid #22d663;
}

.online-dot {

  position: absolute;

  right: 1px;

  bottom: 2px;

  width: 14px;

  height: 14px;

  background: #20d95d;

  border-radius: 50%;

  border: 2px solid #1a130c;
}

/*==========================================
NAME
==========================================*/

.astro-head h5 {

  font-size: 15px;

  font-weight: 600;

  color: #F4F2EC;

  margin: 0;
}

.astro-head h5 i {

  color: #1FD760;

  font-size: 15px;

  margin-left: 4px;
}

.astro-head p {

  margin-top: 6px;

  font-size: 13px;

  color: #888078;
}

/*==========================================
BADGES
==========================================*/

.badge {
    height: 26px;
      padding: 0 3px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .5px;
      text-transform: uppercase;
}

.celebrity {

  background: #FFE8E8;

  color: #EA4B3A;
}

.top-choice {

  background: #FFF2C9;

  color: #CB7C00;
}
.skill-wrap {

  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-bottom: 8px;
}

.skill-wrap span {

  height: 25px;

  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 30px;

  border: 1px solid rgba(255, 255, 255, .08);

  background: rgba(255, 255, 255, .02);

  color: #bcb4aa;

  font-size: 12px;

  font-weight: 500;

  transition: .3s;
}

.skill-wrap span:hover {

  border-color: #d98917;

  color: #fff;

  background: rgba(217, 137, 23, .08);
}

/*==========================================
LANGUAGE
==========================================*/

.astro-lang {

  color: #b8b2a9;

  font-size: 13px;

  margin-bottom: 6px;
}

/*==========================================
EXPERIENCE
==========================================*/

.astro-exp {

  color: #ffffff;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 12px;
}

/*==========================================
RATING ROW
==========================================*/

.rating-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;
}

.rating-row div:first-child {

  display: flex;

  align-items: center;
}

.rating-row i {

  color: #ffb400;

  font-size: 15px;
}

.rating-row strong {

  color: #ffffff;

  margin-left: 8px;

  font-size: 14px;

  font-weight: 700;
}

.rating-row span {

  margin-left: 8px;

  color: #8f8780;

  font-size: 14px;
}

/*==========================================
ONLINE STATUS
==========================================*/

.status {

  color: #20d95d;

  font-size: 14px;

  font-weight: 600;
}

/*==========================================
PRICE
==========================================*/

.astro-card h3 {

  font-size: 23px !important;

  font-weight: 600;

  color: #ffffff;

  margin: 8px 0 18px;
}

/*==========================================
FIRST CHAT
==========================================*/

.first-chat {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #d98917;

  text-decoration: none;

  font-size: 16px;

  font-weight: 600;

  transition: .35s;
}

.first-chat:hover {

  color: #ffb02a;
}

.first-chat i {

  transition: .35s;
}

.first-chat:hover i {

  transform: translateX(6px);
}

/*==========================================
HOVER BUTTONS
==========================================*/

.hover-buttons {

  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 24px;

  display: flex;

  gap: 12px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(25px);

  transition: .35s;
}

.hover-buttons a {

  flex: 1;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border-radius: 40px;

  text-decoration: none;

  font-size: 17px;

  font-weight: 600;

  color: #ffffff;

  border: 1.5px solid #18d75d;

  transition: .3s;
}

.hover-buttons a:hover {

  background: #18d75d;

  color: #111;
}

.hover-buttons i {

  font-size: 18px;
}

/*==========================================
HOVER EFFECT
==========================================*/

.astro-card:hover .hover-buttons {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

.astro-card:hover .first-chat {

  opacity: 0;

  visibility: hidden;

  transform: translateY(-12px);
}

/*==========================================
CARD ANIMATION
==========================================*/

.astro-card::after {

  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 60%;

  height: 100%;

  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .08),
      transparent);

  transform: skewX(-20deg);

  transition: 1s;
}

.astro-card:hover::after {

  left: 150%;
}
/*==========================================
LARGE DESKTOP
==========================================*/

@media(min-width:1400px) {

  .top-title {

    font-size: 50px;
  }

  .top-desc {

    font-size: 28px;
  }

  .astro-card {

    height: 420px;
  }

  .astro-card h3 {

    font-size: 46px;
  }

}

/*==========================================
LAPTOP
==========================================*/

@media(max-width:1200px) {

  .top-title {

    font-size: 50px;
  }

  .top-desc {

    font-size: 18px;
  }

  .view-btn {

    width: 220px;
    height: 54px;

    font-size: 16px;
  }

  .astro-card {

    height: auto;

    min-height: 390px;
  }

  .astro-head h5 {

    font-size: 20px;
  }

  .astro-card h3 {

    font-size: 34px;
  }

  .skill-wrap span {

    font-size: 13px;

    padding: 0 14px;
  }

}

/*==========================================
TABLET
==========================================*/

@media(max-width:991px) {

  .top-astro-section {

    padding: 20px 0;
  }

  .live-text {

    justify-content: center;

    width: 100%;
  }

  .top-title {

    text-align: center;

    font-size: 40px;

    line-height: 1.1;
  }

  .top-desc {

    text-align: center;

    font-size: 17px;

    margin: auto;
  }

  .view-btn {

    margin-top: 30px;

    width: 230px;

    height: 54px;
  }

  .col-lg-5 {

    text-align: center !important;
  }

  .astro-card {

    height: auto;

    min-height: 390px;
  }

}

/*==========================================
MOBILE
==========================================*/

@media(max-width:767px) {

  .top-astro-section {

    padding: 20px 0;
  }

  .live-text {

    font-size: 12px;
  }

  .top-title {

    font-size: 30px;

    line-height: 1.15;
  }

  .top-title span {

    display: block;
  }

  .top-desc {

    font-size: 15px;

    line-height: 1.8;
  }

  .view-btn {

    width: 100%;

    max-width: 280px;

    height: 52px;

    font-size: 15px;
  }

  .astro-card {

    padding: 20px;

    border-radius: 18px;

    min-height: auto;
  }

  .astro-img img {

    width: 50px;

    height: 50px;
  }

  .online-dot {

    width: 12px;

    height: 12px;
  }

  .astro-head h5 {

    font-size: 18px;
  }

  .astro-head p {

    font-size: 13px;
  }

  .skill-wrap {

    gap: 8px;
  }

  .skill-wrap span {

    height: 30px;

    padding: 0 12px;

    font-size: 12px;
  }

  .astro-lang {

    font-size: 14px;
  }

  .astro-exp {

    font-size: 14px;
  }

  .rating-row {

    margin: 18px 0;
  }

  .rating-row strong {

    font-size: 16px;
  }

  .rating-row span {

    font-size: 13px;
  }

  .status {

    font-size: 14px;
  }

  .astro-card h3 {

    font-size: 30px;

    margin-bottom: 15px;
  }

  .first-chat {

    font-size: 17px;
  }

  .hover-buttons {

    position: static;

    opacity: 1;

    visibility: visible;

    transform: none;

    margin-top: 22px;

    gap: 10px;
  }

  .hover-buttons a {

    height: 46px;

    font-size: 15px;
  }

  .astro-card:hover .first-chat {

    opacity: 1;

    visibility: visible;

    transform: none;
  }

}

/*==========================================
SMALL MOBILE
==========================================*/

@media(max-width:480px) {

  .top-title {

    font-size: 32px;
  }

  .top-desc {

    font-size: 14px;
  }

  .view-btn {

    width: 100%;
  }

  .astro-head {

    flex-direction: column;

    gap: 15px;
  }

  .badge {

    align-self: flex-start;
  }

  .hover-buttons {

    flex-direction: column;
  }

  .hover-buttons a {

    width: 100%;
  }

  .rating-row {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
  }

  .astro-card h3 {

    font-size: 28px;
  }

}
.astro-card,
.hover-buttons,
.first-chat,
.view-btn,
.skill-wrap span {

  transition: all .35s ease;
}

.astro-card {

  will-change: transform;
}

/*==================================================
 SERVICES + TOP ASTROLOGERS COLOR OVERRIDE
==================================================*/

/* Services */

.service-section{
    background:transparent !important;
}

.service-card{

    background:linear-gradient(180deg,#102B5C,#0B2148)!important;

    border:1px solid rgba(212,175,55,.18)!important;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.service-card:hover{

    border-color:#D4AF37!important;

    transform:translateY(-10px);

    box-shadow:
    0 25px 45px rgba(0,0,0,.28),
    0 0 20px rgba(212,175,55,.12);

}

.service-icon{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

    box-shadow:0 10px 30px rgba(212,175,55,.35)!important;

}

.service-card h4{

    color:#fff!important;

}

.service-card p{

    color:#D0D8E7!important;

}

/*=============================
Top Astrologers
=============================*/

.top-astro-section::before{

    background:
    radial-gradient(circle at 20% 30%,rgba(212,175,55,.08),transparent 32%),
    radial-gradient(circle at 80% 20%,rgba(212,175,55,.06),transparent 28%),
    radial-gradient(circle at 70% 80%,rgba(212,175,55,.05),transparent 35%) !important;

}

.live-text,
.live-text i{

    color:#D4AF37!important;

}

.top-title{

    color:#fff!important;

}

.top-title span{

    color:#D4AF37!important;

}

.top-desc{

    color:#C9D2E3!important;

}

/* Button */

.view-btn{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

    box-shadow:0 15px 35px rgba(212,175,55,.28)!important;

}

.view-btn:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

/* Astrologer Card */

.astro-card{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

}

.astro-card:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 25px 45px rgba(0,0,0,.30),
    0 0 20px rgba(212,175,55,.12)!important;

}

.astro-card::before{

    background:linear-gradient(
    180deg,
    rgba(255,255,255,.05),
    transparent)!important;

}

/* Image */

.astro-img img{

    border-color:#D4AF37!important;

}

.online-dot{

    background:#00C853!important;

    border-color:#102B5C!important;

}

/* Text */

.astro-head h5{

    color:#fff!important;

}

.astro-head p{

    color:#C7D0E2!important;

}

.astro-lang{

    color:#C7D0E2!important;

}

.astro-exp{

    color:#fff!important;

}

/* Skills */

.skill-wrap span{

    background:rgba(255,255,255,.05)!important;

    color:#D6DEEB!important;

    border-color:rgba(212,175,55,.15)!important;

}

.skill-wrap span:hover{

    background:rgba(212,175,55,.15)!important;

    border-color:#D4AF37!important;

    color:#fff!important;

}

/* Rating */

.rating-row i{

    color:#D4AF37!important;

}

.rating-row strong{

    color:#fff!important;

}

.rating-row span{

    color:#BFC9DB!important;

}

.status{

    color:#00E676!important;

}

/* Price */

.astro-card h3{

    color:#D4AF37!important;

}

/* First Chat */

.first-chat{

    color:#D4AF37!important;

}

.first-chat:hover{

    color:#F2D27A!important;

}

/* Hover Buttons */

.hover-buttons a{

    border-color:#D4AF37!important;

    color:#D4AF37!important;

    background:transparent!important;

}

.hover-buttons a:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

/* Badges */

.celebrity{

    background:#5D2330!important;

    color:#FFD6D6!important;

}

.top-choice{

    background:#3B3212!important;

    color:#F2D27A!important;

}
.category-tag {

  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #c97a12;
  margin-bottom: 18px;

}

.category-title {

  font-size: 55px;
  line-height: .95;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0;

}

.category-title span {

  color: #c97a12;

}

.category-card {

  position: relative;

  height: 215px;

  padding: 30px;

  border-radius: 24px;

  background: #181108;

  border: 1px solid rgba(255, 210, 90, .12);

  overflow: hidden;

  transition: .45s cubic-bezier(.2, .8, .2, 1);

  cursor: pointer;

}

/* Hover */

.category-card:hover {

  transform: translateY(-8px) scale(1.03);

  border-color: #5f4522;

  box-shadow: 0 25px 60px rgba(0, 0, 0, .35);

}

.category-card:hover::before {

  opacity: 1;

}

/* Icon */

.cat-icon {

  width: 50px;
  height: 50px;

  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;

  margin-bottom: 28px;

}

.love .cat-icon {

  background: #43202d;
  color: #ff4d8a;

}

.marriage .cat-icon {

  background: #463314;
  color: #d88900;

}

.career .cat-icon {

  background: #173b34;
  color: #00d38d;

}

.women .cat-icon {

  background: #35234b;
  color: #9b58ff;

}

.business .cat-icon {

  background: #173340;
  color: #22d3ff;

}

.health .cat-icon {

  background: #482123;
  color: #ff4c5d;

}

/* Title */

.category-card h4 {

  font-size: 18px;

  font-weight: 600;

  color: #fff;

  margin-bottom: 18px;

}

/* Subtitle */

.category-card p {

  font-size: 15px;

  color: #8c8c8c;

  margin: 0;

}

/* Arrow */

.arrow-circle {

  position: absolute;

  right: 28px;
  bottom: 28px;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: .35s;

}

.love .arrow-circle {

  background: #43202d;
  color: #ff4d8a;

}

.marriage .arrow-circle {

  background: #463314;
  color: #d88900;

}

.career .arrow-circle {

  background: #173b34;
  color: #00d38d;

}

.women .arrow-circle {

  background: #35234b;
  color: #9b58ff;

}

.business .arrow-circle {

  background: #173340;
  color: #22d3ff;

}

.health .arrow-circle {

  background: #482123;
  color: #ff4c5d;

}

/* Arrow Animation */

.category-card:hover .arrow-circle {

  transform: translateX(6px);

}
/*==========================================
LAPTOP (1200px)
==========================================*/
@media (max-width:1200px){

.category-title{
    font-size:60px;
}

.category-card{
    height:200px;
    padding:26px;
}

.category-card h4{
    font-size:20px;
}

.category-card p{
    font-size:14px;
}

.arrow-circle{
    width:38px;
    height:38px;
}

}

/*==========================================
TABLET (991px)
==========================================*/
@media (max-width:991px){

.category-section .d-flex{
    flex-direction:column;
    align-items:center !important;
    text-align:center;
    gap:30px;
}

.category-tag{
    font-size:13px;
    margin-bottom:12px;
}

.category-title{
    font-size:48px;
    line-height:1.1;
}

.category-card{
    height:190px;
}

.cat-icon{
    width:48px;
    height:48px;
    font-size:20px;
    margin-bottom:22px;
}

.category-card h4{
    font-size:18px;
}

.category-card p{
    font-size:14px;
}

.arrow-circle{
    width:38px;
    height:38px;
    right:22px;
    bottom:22px;
}

}

/*==========================================
MOBILE (767px)
==========================================*/
@media (max-width:767px){

.category-title{
    font-size:38px;
}

.category-tag{
    font-size:12px;
    letter-spacing:1px;
}

.category-card{

    height:auto;

    min-height:180px;

    padding:24px;
}

.cat-icon{

    width:46px;
    height:46px;

    font-size:18px;

    border-radius:14px;

    margin-bottom:20px;
}

.category-card h4{

    font-size:18px;

    margin-bottom:10px;
}

.category-card p{

    font-size:14px;
}

.arrow-circle{

    width:40px;
    height:40px;
}

}

/*==========================================
SMALL MOBILE (576px)
==========================================*/
@media (max-width:576px){

.category-title{

    font-size:32px;

    line-height:1.15;
}

.category-card{

    padding:22px;

    border-radius:18px;

    min-height:170px;
}

.cat-icon{

    width:42px;
    height:42px;

    font-size:17px;

    margin-bottom:18px;
}

.category-card h4{

    font-size:17px;
}

.category-card p{

    font-size:13px;
}

.arrow-circle{

    width:36px;
    height:36px;

    right:18px;
    bottom:18px;
}

.arrow-circle i{

    font-size:14px;
}

}

/*==========================================
EXTRA SMALL (400px)
==========================================*/
@media (max-width:400px){

.category-title{

    font-size:28px;
}

.category-card{

    padding:18px;
}

.category-card h4{

    font-size:16px;
}

.category-card p{

    font-size:12px;
}

.cat-icon{

    width:40px;
    height:40px;

    font-size:16px;
}

.arrow-circle{

    width:34px;
    height:34px;
}

}
/*==========================
OUR SERVICES
==========================*/

.our-services-sec {
  padding: 50px 0;
  overflow: hidden;
}

.our-services-tag {
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 600;
  color: #d78618;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.our-services-heading {
  font-size: 55px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  margin-bottom: 55px;
}

.our-services-heading span {
  color: #d78618;
}

.ourServicesSwiper {
  width: 100%;
  overflow: hidden;
  padding: 10px 0 25px;
}

.ourServicesSwiper .swiper-slide {
  height: auto;
}

.our-service-box {

  position: relative;

  height: 205px;

  padding: 28px;

  background: #181108;

  border: 1px solid rgba(255, 190, 70, .16);

  border-radius: 24px;

  transition: .35s ease;

  overflow: hidden;

  cursor: pointer;

}

.our-service-box:hover {

  transform: translateY(-8px) scale(1.03);

  border-color: #8d6229;

  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);

}

.our-service-icon {

  width: 54px;

  height: 54px;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #2d2115;

  border: 1px solid rgba(255, 180, 50, .28);

  color: #d78618;

  font-size: 22px;

  margin-bottom: 20px;

  transition: .3s;

}

.our-service-box:hover .our-service-icon {

  box-shadow: 0 0 18px rgba(255, 180, 60, .25);

}

.our-service-box h4 {

  color: #fff;

  font-size: 17px;

  font-weight: 600;

  margin-bottom: 10px;

}

.our-service-box p {

  color: #8c8c8c;

  font-size: 15px;

  line-height: 1.45;

  margin: 0;

}

.our-service-box strong {

  display: block;

  margin-top: 3px;

  color: #e6e6e6;

  font-size: 15px;

  font-weight: 600;

}

.our-service-arrow {

  position: absolute;

  right: 22px;

  bottom: 22px;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #5a3c17;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #d78618;

  transition: .35s;

}

.our-service-box:hover .our-service-arrow {

  transform: translateX(5px);

  background: #6a4518;

}

@media(max-width:991px) {

  .our-services-heading {

    font-size: 52px;

  }

}

@media(max-width:576px) {

  .our-services-heading {

    font-size: 42px;

  }

}
.daily-horoscope-sec {
  position: relative;
}

.daily-tag {
  color: #d78618;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 20px;
}

.daily-heading {
  font-size: 55px;
  line-height: .95;
  font-weight: 400;
  color: #fff;
  margin-bottom: 25px;
}

.daily-heading span {
  color: #d78618;
}

.daily-subtitle {
  color: #8f8f8f;
  font-size: 17px;
}


/*=========================
TOP FILTER
=========================*/

.daily-filter {

  display: inline-flex;
  padding: 5px;
  border-radius: 40px;
  border: 1px solid rgba(255, 190, 70, .18);
  background: #261b10;

}

.time-btn {

  width: 96px;
  height: 46px;
  border: none;
  background: transparent;
  color: #8f8f8f;
  border-radius: 30px;
  font-size: 17px;
  transition: .35s;

}

.time-btn.active {

  background: #d78618;
  color: #fff;
  box-shadow: 0 0 0 2px #fff inset;

}

.zodiacSwiper {
  width: 100%;
  overflow: hidden;
  padding: 15px 0;
}

.zodiacSwiper .swiper-wrapper {
  align-items: stretch;
}

.zodiacSwiper .swiper-slide {

  width: 145px !important;

  flex-shrink: 0;

  height: auto;

}

.zodiac-card {

  height: 165px;
  border-radius: 22px;
  border: 1px solid rgba(255, 190, 70, .15);
  background: #19120a;
  text-align: center;
  padding: 18px 10px;
  cursor: pointer;
  transition: .35s;

}

.zodiac-card img {

  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid #d2c447;
  object-fit: cover;
  margin-bottom: 14px;

}

.zodiac-card h5 {

  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;

}

.zodiac-card span {

  color: #8b8b8b;
  font-size: 15px;

}

.zodiac-card:hover {

  transform: translateY(-8px);

}

.zodiac-card.active {

  background: #ffe27b;
  box-shadow: 0 18px 35px rgba(255, 210, 80, .35);

}

.zodiac-card.active h5 {

  color: #111;

}

.zodiac-card.active span {

  color: #5a4d2e;

}
/*==================================================
CATEGORY + OUR SERVICES + DAILY HOROSCOPE OVERRIDE
==================================================*/

/*=====================
CATEGORY
======================*/

.category-tag{
    color:#D4AF37!important;
}

.category-title{
    color:#fff!important;
}

.category-title span{
    color:#D4AF37!important;
}

.category-card{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

}

.category-card:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 25px 50px rgba(0,0,0,.30),
    0 0 18px rgba(212,175,55,.12)!important;

}

/* Icons */

.love .cat-icon,
.marriage .cat-icon,
.career .cat-icon,
.women .cat-icon,
.business .cat-icon,
.health .cat-icon{

    background:rgba(212,175,55,.15)!important;

    color:#D4AF37!important;

}

/* Title */

.category-card h4{

    color:#fff!important;

}

/* Text */

.category-card p{

    color:#D0D8E7!important;

}

/* Arrow */

.love .arrow-circle,
.marriage .arrow-circle,
.career .arrow-circle,
.women .arrow-circle,
.business .arrow-circle,
.health .arrow-circle{

    background:#D4AF37!important;

    color:#081633!important;

}

/*=====================
OUR SERVICES
======================*/

.our-services-tag{

    color:#D4AF37!important;

}

.our-services-heading{

    color:#fff!important;

}

.our-services-heading span{

    color:#D4AF37!important;

}

.our-service-box{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

}

.our-service-box:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 25px 45px rgba(0,0,0,.28),
    0 0 18px rgba(212,175,55,.15)!important;

}

.our-service-icon{

    background:rgba(212,175,55,.12)!important;

    border-color:#D4AF37!important;

    color:#D4AF37!important;

}

.our-service-box:hover .our-service-icon{

    box-shadow:0 0 20px rgba(212,175,55,.35)!important;

}

.our-service-box h4{

    color:#fff!important;

}

.our-service-box p{

    color:#D0D8E7!important;

}

.our-service-box strong{

    color:#F4F6FA!important;

}

.our-service-arrow{

    background:#D4AF37!important;

    color:#081633!important;

}

.our-service-box:hover .our-service-arrow{

    background:#F2D27A!important;

}

/*=====================
DAILY HOROSCOPE
======================*/

.daily-tag{

    color:#D4AF37!important;

}

.daily-heading{

    color:#fff!important;

}

.daily-heading span{

    color:#D4AF37!important;

}

.daily-subtitle{

    color:#CDD5E5!important;

}

/* Filter */

.daily-filter{

    background:#102B5C!important;

    border-color:rgba(212,175,55,.20)!important;

}

.time-btn{

    color:#D6DEEB!important;

}

.time-btn.active{

    background:#D4AF37!important;

    color:#081633!important;

    box-shadow:none!important;

}

/* Zodiac Card */

.zodiac-card{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

}

.zodiac-card:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    0 0 15px rgba(212,175,55,.12);

}

.zodiac-card img{

    border-color:#D4AF37!important;

}

.zodiac-card h5{

    color:#fff!important;

}

.zodiac-card span{

    color:#CDD5E5!important;

}

/* Active Card */

.zodiac-card.active{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    box-shadow:
    0 20px 40px rgba(212,175,55,.35)!important;

}

.zodiac-card.active h5{

    color:#081633!important;

}

.zodiac-card.active span{

    color:#1B2D52!important;

}

/*=========================
DETAIL CARD
=========================*/

.daily-details {

  border-radius: 34px;
  padding: 45px;
  background: linear-gradient(90deg, #887246, #4d3316);
  border: 1px solid rgba(255, 255, 255, .08);

}

.daily-top {

  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;

}

.daily-top img {

  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 4px solid #fff;

}

.daily-top h3 {

  color: #fff;
  font-size: 45px;
  margin: 0;

}

.daily-top h3 span {

  font-size: 28px;
  color: #cabd9f;
  margin-left: 8px;

}

.daily-top p {

  color: #cabd9f;
  font-size: 20px;
  margin-top: 8px;

}

.daily-description {

  color: #efe4d1;
  font-size: 21px;
  line-height: 1.8;
  margin: 30px 0;

}


/*=========================
INFO
=========================*/

.daily-info {

  display: flex;
  gap: 35px;
  flex-wrap: wrap;
  margin-bottom: 40px;

}

.daily-info span {

  color: #d3c8b7;
  font-size: 18px;

}

.daily-info strong {

  color: #fff;
  font-weight: 600;

}

#detailColor {

  width: 34px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
  background: #e7b6b7;
  vertical-align: middle;
  margin-left: 6px;

}


/*=========================
BUTTONS
=========================*/

.daily-buttons {

  display: flex;
  gap: 18px;
  flex-wrap: wrap;

}

.daily-btn-yellow {

  height: 60px;
  padding: 0 35px;
  display: flex;
  align-items: center;
  border-radius: 35px;
  background: #ffee72;
  color: #111;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  transition: .35s;

}

.daily-btn-yellow:hover {

  transform: translateY(-5px);
  color: #111;

}

.daily-btn-outline {

  height: 60px;
  padding: 0 35px;
  display: flex;
  align-items: center;
  border-radius: 35px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #ddd;
  text-decoration: none;
  transition: .35s;

}

.daily-btn-outline:hover {

  background: #fff;
  color: #111;

}


/*=========================
RIGHT BOX
=========================*/

.daily-score-box {

  padding: 30px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);

}

.score-item {

  margin-bottom: 28px;

}

.score-item:last-child {

  margin-bottom: 0;

}

.score-head {

  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;

}

.score-head span {

  color: #cbb99d;
  font-size: 16px;
  font-weight: 600;

}

.score-head strong {

  color: #fff;
  font-size: 17px;

}

.score-bar {

  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;

}

.score-bar span {

  display: block;
  height: 100%;
  border-radius: 10px;

}

#loveBar {

  width: 78%;
  background: #ff5f58;

}

#careerBar {

  width: 95%;
  background: #ffd34d;

}

#healthBar {

  width: 92%;
  background: #54d36b;

}

#moneyBar {

  width: 60%;
  background: #ea8b2d;

}


/*=========================
RESPONSIVE
=========================*/

@media(max-width:991px) {

  .daily-heading {

    font-size: 45px;

  }

  .daily-details {

    padding: 30px;

    margin-top: 40px;

  }

  .daily-top h3 {

    font-size: 32px;

  }

  .daily-description {

    font-size: 18px;

  }

  .daily-filter {

    margin-top: 35px;

  }

}
/*==========================================
LAPTOP (1200px)
==========================================*/
@media (max-width:1200px){

.daily-heading{
    font-size:48px;
}

.daily-subtitle{
    font-size:16px;
}

.daily-filter{
    margin-top:10px;
}

.time-btn{
    width:88px;
    font-size:15px;
}

.zodiacSwiper .swiper-slide{
    width:130px !important;
}

.zodiac-card{
    height:155px;
}

.daily-details{
    padding:35px;
}

.daily-top h3{
    font-size:36px;
}

.daily-description{
    font-size:18px;
}

.daily-btn-yellow,
.daily-btn-outline{
    padding:0 25px;
}

}

/*==========================================
TABLET
==========================================*/
@media (max-width:991px){

.daily-heading{
    font-size:48px;
    line-height:1.1;
}

.daily-tag{
    font-size:13px;
}

.daily-subtitle{
    font-size:15px;
}

.daily-filter{
    margin-top:30px;
    justify-content:center;
    width:100%;
}

.daily-details{
    margin-top:35px;
    padding:30px;
}

.daily-top{
    margin-bottom:20px;
}

.daily-top img{
    width:70px;
    height:70px;
}

.daily-top h3{
    font-size:32px;
}

.daily-top h3 span{
    font-size:20px;
}

.daily-top p{
    font-size:16px;
}

.daily-description{
    font-size:17px;
    line-height:1.7;
}

.daily-score-box{
    margin-top:30px;
}

.daily-buttons{
    gap:15px;
}

.daily-btn-yellow,
.daily-btn-outline{
    height:54px;
    font-size:16px;
}

}

/*==========================================
MOBILE
==========================================*/
@media (max-width:767px){

.daily-heading{
    font-size:36px;
}

.daily-subtitle{
    font-size:14px;
}

.daily-filter{

    display:flex;

    flex-wrap:nowrap;

    justify-content:center;

    gap:8px;

    padding:8px;

    border-radius:18px;
}

.time-btn{

    width:80px;

    height:42px;

    font-size:14px;
}

.zodiacSwiper{

    padding:10px 0;
}

.zodiacSwiper .swiper-slide{

    width:120px !important;
}

.zodiac-card{

    height:145px;

    padding:16px 10px;

    border-radius:18px;
}

.zodiac-card img{

    width:50px;

    height:50px;

    margin-bottom:10px;
}

.zodiac-card h5{

    font-size:16px;
}

.zodiac-card span{

    font-size:13px;
}

.daily-details{

    padding:24px;

    border-radius:24px;
}

.daily-top{

    flex-direction:column;

    text-align:center;

    gap:15px;
}

.daily-top img{

    width:72px;

    height:72px;
}

.daily-top h3{

    font-size:30px;
}

.daily-top h3 span{

    display:block;

    margin:5px 0 0;

    font-size:18px;
}

.daily-top p{

    font-size:15px;
}

.daily-description{

    text-align:center;

    font-size:16px;

    line-height:1.7;
}

.daily-info{

    justify-content:center;

    gap:18px;

    text-align:center;
}

.daily-info span{

    font-size:15px;
}

.daily-buttons{

    flex-direction:column;
}

.daily-btn-yellow,
.daily-btn-outline{

    width:100%;

    justify-content:center;

    height:52px;

    font-size:15px;
}

.daily-score-box{

    padding:22px;

    margin-top:25px;
}

.score-head span{

    font-size:14px;
}

.score-head strong{

    font-size:15px;
}

}

/*==========================================
SMALL MOBILE
==========================================*/
@media (max-width:576px){

.daily-heading{
    font-size:30px;
}

.daily-tag{
    font-size:12px;
    letter-spacing:2px;
}

.daily-subtitle{
    font-size:13px;
}

.time-btn{
    width:72px;
    font-size:13px;
}

.zodiacSwiper .swiper-slide{
    width:110px !important;
}

.zodiac-card{
    height:135px;
}

.zodiac-card img{
    width:46px;
    height:46px;
}

.zodiac-card h5{
    font-size:15px;
}

.zodiac-card span{
    font-size:12px;
}

.daily-details{
    padding:20px;
}

.daily-top h3{
    font-size:26px;
}

.daily-description{
    font-size:15px;
}

.daily-info{
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.daily-score-box{
    padding:18px;
}

.score-item{
    margin-bottom:22px;
}

.score-head span{
    font-size:13px;
}

.score-head strong{
    font-size:14px;
}

}

/*==========================================
EXTRA SMALL
==========================================*/
@media (max-width:400px){

.daily-heading{
    font-size:26px;
}

.time-btn{
    width:68px;
    height:40px;
    font-size:12px;
}

.zodiacSwiper .swiper-slide{
    width:100px !important;
}

.zodiac-card{
    height:125px;
}

.zodiac-card img{
    width:42px;
    height:42px;
}

.zodiac-card h5{
    font-size:14px;
}

.daily-top h3{
    font-size:22px;
}

.daily-description{
    font-size:14px;
}

.daily-btn-yellow,
.daily-btn-outline{
    font-size:14px;
}

}
/*=========================
TESTIMONIAL SECTION
=========================*/

.testimonial-section {
  padding: 60px 0;
}

.test-tag {
  color: #d88619;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 25px;
}

.test-title {
  font-size: 55px;
  line-height: .92;
  font-weight: 400;
  color: #fff;
  margin-bottom: 55px;
}

.test-title span {
  color: #d88619;
}

.rating-box {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 40px;
}

.rating-box h3 {
  font-size: 70px;
  color: #d88619;
  font-weight: 600;
  margin: 0;
}

.stars {
  color: #ffbe2f;
  font-size: 22px;
  margin-bottom: 6px;
}

.rating-box p {
  color: #9d9d9d;
  margin: 0;
  font-size: 17px;
}

.test-desc {
  color: #b1b1b1;
  font-size: 18px;
  line-height: 1.8;
  max-width: 470px;
  margin-bottom: 55px;
}

/*===================
NAV
===================*/

.testimonial-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.testimonial-nav button {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .12);

  background: transparent;

  color: #fff;

  transition: .35s;

  font-size: 18px;

}

.testimonial-nav button:hover {

  background: #d88619;

  color: #111;

  border-color: #d88619;

}

#reviewCount {

  color: #d2d2d2;

  font-size: 18px;

  font-weight: 500;

}

/*===================
RIGHT CARD
===================*/

.review-card {

  position: relative;

  background: #1a1209;

  border: 1px solid rgba(255, 190, 80, .18);

  border-radius: 34px;

  padding: 46px;

  overflow: hidden;

  min-height: 520px;

  transition: .35s;

}

.review-card:hover {

  transform: translateY(-6px);

  border-color: #6b4b20;

}

/* top stars */

.review-stars {

  height: 65px;

  border-radius: 30px;

  border: 1px solid rgba(255, 255, 255, .05);

  background: rgba(255, 255, 255, .02);

  display: flex;

  align-items: center;

  padding: 0 28px;

  color: #ffbe2f;

  font-size: 25px;

  letter-spacing: 5px;

  margin-bottom: 20px;

}

/* quote */

.quote-icon {

  font-size: 72px;

  color: rgba(255, 255, 255, .05);

  margin-bottom: 18px;

}

/* review */

.review-text {

  color: #f1f1f1;

  font-size: 22px;

  line-height: 1.7;

  font-weight: 400;

  margin-bottom: 20px;

}

/* footer */

.review-footer {

  border-top: 1px solid rgba(255, 255, 255, .08);

  padding-top: 28px;

}

.review-user {

  display: flex;

  align-items: center;

  gap: 18px;

}

.review-user img {

  width: 70px;

  height: 70px;

  border-radius: 50%;

  object-fit: cover;

}

.review-user h4 {

  color: #fff;

  margin: 0;

  font-size: 28px;

  font-weight: 600;

}

.review-user span {

  color: #9f9f9f;

  font-size: 18px;

}

/*==================
Fade Animation
==================*/

.review-card.fade {

  opacity: 0;

  transform: translateY(25px);

}

.review-card {

  transition: .45s;

}

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

@media(max-width:992px) {

  .test-title {

    font-size: 48px;

  }

  .review-card {

    margin-top: 50px;

    padding: 30px;

    min-height: auto;

  }

  .review-text {

    font-size: 20px;

  }

  .review-user h4 {

    font-size: 22px;

  }

}

@media(max-width:576px) {

  .test-title {

    font-size: 35px;

  }

  .rating-box {

    flex-direction: row;

    align-items: flex-start;

  }
.rating-box h3 {
    font-size: 40px;
}
.stars {
    font-size: 18px;
}
.rating-box p{
    font-size:15;
}
  .review-stars {

    font-size: 22px;

    height: 60px;

  }

  .review-text {

    font-size: 18px;

    line-height: 1.7;

  }

  .review-user img {

    width: 56px;

    height: 56px;

  }

  .review-user h4 {

    font-size: 18px;

  }

  .review-user span {

    font-size: 14px;

  }

}
/*==================================================
DAILY DETAILS + TESTIMONIAL OVERRIDE
==================================================*/

/*-----------------------
Daily Detail Card
-----------------------*/

.daily-details{

    background:linear-gradient(135deg,#081633,#102B5C,#163A74)!important;

    border:1px solid rgba(212,175,55,.18)!important;

    box-shadow:
    0 20px 45px rgba(0,0,0,.30);

}

.daily-top img{

    border:4px solid #D4AF37!important;

}

.daily-top h3{

    color:#fff!important;

}

.daily-top h3 span{

    color:#F2D27A!important;

}

.daily-top p{

    color:#D8E0ED!important;

}

.daily-description{

    color:#EEF2F8!important;

}

.daily-info span{

    color:#D4DBE8!important;

}

.daily-info strong{

    color:#fff!important;

}

#detailColor{

    background:#D4AF37!important;

}

/* Buttons */

.daily-btn-yellow{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

    box-shadow:0 10px 25px rgba(212,175,55,.30);

}

.daily-btn-yellow:hover{

    background:#D4AF37!important;

}

.daily-btn-outline{

    border:1px solid rgba(212,175,55,.35)!important;

    color:#D4AF37!important;

    background:transparent!important;

}

.daily-btn-outline:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

/* Score Box */

.daily-score-box{

    background:rgba(255,255,255,.05)!important;

    border-color:rgba(212,175,55,.18)!important;

}

.score-head span{

    color:#D6DEEB!important;

}

.score-head strong{

    color:#fff!important;

}

.score-bar{

    background:rgba(255,255,255,.08)!important;

}

#loveBar{

    background:#ff6584!important;

}

#careerBar{

    background:#D4AF37!important;

}

#healthBar{

    background:#25D366!important;

}

#moneyBar{

    background:#FF9800!important;

}

/*==================================================
TESTIMONIAL
==================================================*/

.test-tag{

    color:#D4AF37!important;

}

.test-title{

    color:#fff!important;

}

.test-title span{

    color:#D4AF37!important;

}

.rating-box h3{

    color:#D4AF37!important;

}

.stars{

    color:#F2D27A!important;

}

.rating-box p{

    color:#D2DBE9!important;

}

.test-desc{

    color:#C9D3E3!important;

}

/* Navigation */

.testimonial-nav button{

    border-color:rgba(212,175,55,.20)!important;

    color:#D4AF37!important;

    background:#102B5C!important;

}

.testimonial-nav button:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

#reviewCount{

    color:#D8E0ED!important;

}

/* Review Card */

.review-card{

    background:linear-gradient(180deg,#102B5C,#0C234A)!important;

    border:1px solid rgba(212,175,55,.18)!important;

}

.review-card:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 25px 45px rgba(0,0,0,.30),
    0 0 18px rgba(212,175,55,.12);

}

.review-stars{

    background:rgba(255,255,255,.05)!important;

    border-color:rgba(212,175,55,.15)!important;

    color:#D4AF37!important;

}

.quote-icon{

    color:rgba(212,175,55,.12)!important;

}

.review-text{

    color:#EEF2F8!important;

}

.review-footer{

    border-color:rgba(212,175,55,.12)!important;

}

.review-user img{

    border:3px solid #D4AF37!important;

}

.review-user h4{

    color:#fff!important;

}

.review-user span{

    color:#C9D3E3!important;

}
/*=========================
FEATURED ON
==========================*/

.featured-section {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 180, 50, .12);
  border-bottom: 1px solid rgba(255, 180, 50, .12);
  overflow: hidden;
}

.featured-title {
  text-align: center;
  color: #d78618;
  letter-spacing: 4px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 30px;
}

.featured-marquee {
  overflow: hidden;
  position: relative;
}

.featured-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: featuredMove 35s linear infinite;
}

.featured-marquee:hover .featured-track {
  animation-play-state: paused;
}

.featured-item {

  min-width: 180px;
  height: 82px;

  margin: 0 12px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid rgba(255, 180, 50, .15);
  border-radius: 18px;

  background: #1b140d;

  transition: .35s;
}

.featured-item img {

  max-width: 150px;

  max-height: 40px;

  object-fit: contain;

  filter: grayscale(100%);

  opacity: .8;

  transition: .35s;

}

.featured-item:hover img {

  filter: none;

  opacity: 1;

}

@keyframes featuredMove {

  from {
    transform: translateX(0);
  }

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

}

/*=========================
BLOG SECTION
=========================*/

.blog-section {

  padding: 110px 0;

}

.blog-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-bottom: 45px;

  flex-wrap: wrap;

  gap: 25px;

}

.blog-tag {

  color: #d78618;

  font-size: 15px;

  letter-spacing: 3px;

  font-weight: 600;

  margin-bottom: 18px;

}

.blog-title {

  font-size: 55px;

  font-weight: 400;

  color: #fff;

  line-height: .95;

  margin: 0;

}

.blog-title span {

  color: #d78618;

}

.blog-btn {

  width: 210px;

  height: 56px;

  border-radius: 40px;

  background: #ffee72;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: #111;

  font-size: 18px;

  font-weight: 600;

  transition: .35s;

  box-shadow: 0 0 35px rgba(255, 230, 90, .25);

}

.blog-btn:hover {

  color: #111;

  transform: translateY(-4px);

}

.blog-card {

  background: #1a1209;

  border: 1px solid rgba(255, 210, 80, .15);

  border-radius: 22px;

  overflow: hidden;

  transition: .35s;

  height: 100%;

}

.blog-card:hover {

  transform: translateY(-8px);

  border-color: #7d5625;

  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);

}

.blog-image {

  height: 250px;

  overflow: hidden;

}

.blog-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: .55s;

}

.blog-card:hover img {

  transform: scale(1.08);

}

.blog-body {

  padding: 22px;

}

.blog-author {

  color: #d78618;

  font-size: 14px;

  letter-spacing: 1px;

  text-transform: uppercase;

  display: block;

  margin-bottom: 14px;

}

.blog-body h4 {

  color: #fff;

  font-size: 18px;

  line-height: 1.45;

  font-weight: 600;

  margin-bottom: 22px;

  min-height: 78px;

}

.blog-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  color: #8b8b8b;

  font-size: 15px;

  border-top: 1px solid rgba(255, 255, 255, .05);

  padding-top: 18px;

}

.blog-meta span {

  white-space: nowrap;

}

@media(max-width:991px) {

  .blog-title {

    font-size: 48px;

  }

  .blog-head {

    align-items: flex-start;

  }

}

@media(max-width:768px) {

  .blog-title {

    font-size: 40px;

  }

  .blog-btn {

    width: 100%;

  }

  .blog-image {

    height: 220px;

  }

  .blog-body h4 {

    min-height: auto;

  }

  .blog-meta {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

  }

}

/*=========================
APP SECTION
=========================*/

.app-section {
  padding: 110px 0;
}

.app-tag {
  color: #d78618;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 22px;
}

.app-title {
  color: #fff;
  font-size: 55px;
  line-height: .95;
  font-weight: 400;
  margin-bottom: 20px;
}

.app-title span {
  color: #ffbe57;
}

.app-desc {
  max-width: 640px;
  color: #9d9d9d;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 45px;
}

.app-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #21170d;
  border: 1px solid rgba(255, 190, 70, .18);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffbe57;
  font-size: 18px;
}

.app-feature span {
  color: #b8b8b8;
  font-size: 17px;
}

.store-buttons {
  display: flex;
  gap: 18px;
  margin-top: 45px;
}

.store-buttons img {
  height: 58px;
  transition: .35s;
}

.store-buttons img:hover {
  transform: translateY(-4px);
}

/*=========================
PHONE
=========================*/

.mobile-phone {

  width: 390px;
  height: 680px;

  margin: auto;

  background: #f7f3eb;

  border-radius: 42px;

  border: 4px solid #3a2f16;

  overflow: hidden;

  position: relative;

  box-shadow:
    0 0 0 2px #8c6d2d,
    0 30px 70px rgba(0, 0, 0, .45);

}

/* notch */

.mobile-phone::before {

  content: "";

  position: absolute;

  top: 12px;

  left: 50%;

  transform: translateX(-50%);

  width: 120px;

  height: 24px;

  border-radius: 20px;

  background: #f7f3eb;

  z-index: 99;

}

/*=========================
HEADER
=========================*/

.phone-header {

  height: 88px;

  background: #faf6ef;

  border-bottom: 1px solid #e8dfcf;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 18px;

}

.phone-left {

  display: flex;

  align-items: center;

  gap: 14px;

}

.phone-left img {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 2px solid #16c85e;

  object-fit: cover;

}

.phone-left h5 {

  margin: 0;

  color: #222;

  font-size: 20px;

  font-weight: 600;

}

.phone-left h5 i {

  color: #18d760;

  font-size: 15px;

}

.phone-left p {

  margin: 0;

  color: #999;

  font-size: 14px;

}

.call-btn {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #ffd83d;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #111;

  font-size: 18px;

}

/*=========================
CHAT AREA
=========================*/

.chat-area {

  height: 590px;

  overflow: hidden;

  padding: 22px;

  background: #fbf8f2;

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.chat-time {

  align-self: center;

  background: #ece4d6;

  color: #8d8d8d;

  padding: 6px 16px;

  border-radius: 30px;

  font-size: 13px;

}

/*=========================
CHAT BUBBLES
=========================*/

.msg {

  max-width: 78%;

  padding: 15px 18px;

  border-radius: 18px;

  font-size: 17px;

  line-height: 1.5;

  animation: fadeUp .35s;

}

.user {

  background: #fff2a5;

  margin-left: auto;

  border: 1px solid #f0d85d;

}

.reply {

  background: #fff;

  color: #333;

  border: 1px solid #ececec;

  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);

}

/*=========================
TYPING
=========================*/

.typing {

  width: 82px;

  height: 42px;

  background: #fff;

  border-radius: 25px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

}

.typing span {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #aaa;

  animation: typing 1s infinite;

}

.typing span:nth-child(2) {

  animation-delay: .2s;

}

.typing span:nth-child(3) {

  animation-delay: .4s;

}

/*=========================
BOTTOM
=========================*/

.chat-bottom {

  height: 82px;

  background: #faf6ef;

  border-top: 1px solid #e8dfcf;

  display: flex;

  align-items: center;

  padding: 0 18px;

  gap: 10px;

}

.chat-bottom input {

  flex: 1;

  height: 46px;

  border: none;

  background: #f1ece2;

  border-radius: 30px;

  padding: 0 18px;

  outline: none;

  color: #999;

}

.chat-bottom button {

  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  background: #ffd83d;

  color: #111;

}

/*=========================
ANIMATION
=========================*/

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: none;

  }

}

@keyframes typing {

  0%,
  80%,
  100% {

    transform: scale(.7);

    opacity: .4;

  }

  40% {

    transform: scale(1.2);

    opacity: 1;

  }

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px) {

  .mobile-phone {

    width: 360px;

    height: 720px;

    margin-top: 60px;

  }

  .app-title {

    font-size: 48px;

  }

}
/*==========================
APP SECTION RESPONSIVE
==========================*/

@media (max-width:1199px){

    .app-title{
        font-size:52px;
        line-height:1.05;
    }

    .mobile-phone{
        width:340px;
        height:700px;
    }

}

@media (max-width:991px){

    .app-section{
        padding:80px 0;
    }

    .app-section .row{
        flex-direction:column-reverse;
    }

    .mobile-phone{

        width:340px;
        height:690px;

        margin:0 auto 60px;
    }

    .app-tag{

        text-align:center;

        letter-spacing:2px;
    }

    .app-title{

        font-size:42px;

        line-height:1.15;

        text-align:center;
    }

    .app-desc{

        font-size:17px;

        text-align:center;

        margin:25px auto 35px;
    }

    .app-feature{

        justify-content:center;

        text-align:left;
    }

    .store-buttons{

        justify-content:center;

        flex-wrap:wrap;
    }

}

@media (max-width:767px){

    .app-section{

        padding:70px 0;
    }

    .app-tag{

        font-size:13px;
    }

    .app-title{

        font-size:35px;

        line-height:1.2;
    }

    .app-desc{

        font-size:15px;

        line-height:1.8;
    }

    .app-feature{

        gap:12px;

        align-items:flex-start;

        margin-bottom:18px;
    }

    .feature-icon{

        width:46px;

        height:46px;

        font-size:17px;

        flex-shrink:0;
    }

    .app-feature span{

        font-size:15px;

        line-height:1.6;
    }

    .store-buttons{

        gap:12px;
    }

    .store-buttons img{

        height:48px;
    }

    .mobile-phone{

        width:100%;

        max-width:320px;

        height:640px;
    }

    .phone-header{

        height:74px;

        padding:0 14px;
    }

    .phone-left{

        gap:10px;
    }

    .phone-left img{

        width:38px;

        height:38px;
    }

    .phone-left h5{

        font-size:16px;
    }

    .phone-left p{

        font-size:12px;
    }

    .call-btn{

        width:38px;

        height:38px;

        font-size:15px;
    }

    .chat-area{

        height:510px;

        padding:16px;

        gap:12px;
    }

    .msg{

        font-size:14px;

        padding:12px 15px;

        max-width:85%;
    }

    .typing{

        width:70px;

        height:38px;
    }

    .chat-bottom{

        height:70px;

        padding:0 14px;
    }

    .chat-bottom input{

        height:42px;

        font-size:14px;
    }

    .chat-bottom button{

        width:42px;

        height:42px;
    }

}

@media (max-width:480px){

    .app-title{

        font-size:25px;
    }

    .app-desc{

        font-size:14px;
    }

    .mobile-phone{

        max-width:290px;

        height:600px;

        border-radius:30px;
    }

    .mobile-phone::before{

        width:90px;

        height:18px;
    }

    .phone-header{

        height:66px;
    }

    .chat-area{

        height:475px;
    }

    .msg{

        font-size:13px;
    }

    .store-buttons{

        flex-direction:column;

        align-items:center;
    }

    .store-buttons img{

        height:46px;
    }

}
/*==================================================
FEATURED + BLOG OVERRIDE
==================================================*/

/*=====================
FEATURED SECTION
======================*/

.featured-section{

    border-top:1px solid rgba(212,175,55,.18)!important;

    border-bottom:1px solid rgba(212,175,55,.18)!important;

    background:transparent!important;

}

.featured-title{

    color:#D4AF37!important;

}

.featured-item{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

    transition:.35s;

}

.featured-item:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    0 0 15px rgba(212,175,55,.15);

}

.featured-item img{

    opacity:.85!important;

}

.featured-item:hover img{

    opacity:1!important;

}

/*=====================
BLOG SECTION
======================*/

.blog-tag{

    color:#D4AF37!important;

}

.blog-title{

    color:#fff!important;

}

.blog-title span{

    color:#D4AF37!important;

}

/* Button */

.blog-btn{

    background:linear-gradient(135deg,#D4AF37,#F2D27A)!important;

    color:#081633!important;

    box-shadow:
    0 15px 35px rgba(212,175,55,.30)!important;

}

.blog-btn:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

/* Blog Card */

.blog-card{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

}

.blog-card:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 22px 45px rgba(0,0,0,.30),
    0 0 18px rgba(212,175,55,.12)!important;

}

.blog-image{

    background:#081633!important;

}

.blog-author{

    color:#D4AF37!important;

}

.blog-body h4{

    color:#fff!important;

}

.blog-meta{

    color:#CBD5E5!important;

    border-top:1px solid rgba(212,175,55,.12)!important;

}

.blog-meta span{

    color:#CBD5E5!important;

}

/*==========================
ASTRO INFO SECTION
===========================*/

.astro-info-section {
  position: relative;
}

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

.astro-subtitle {
  display: inline-block;
  color: #d78618;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.astro-heading h2 {
  font-size: 55px;
  line-height: 1.05;
  font-weight: 300;
  color: #fff;
  margin: 0;
}

.astro-heading h2 span {
  color: #d78618;
}


/*==========================
CONTENT BOX
===========================*/

.astro-box {

  background: rgba(34, 24, 13, .88);

  border: 1px solid rgba(255, 184, 74, .15);

  border-radius: 28px;

  padding: 40px 42px;

  margin-bottom: 38px;

  transition: .35s;

  position: relative;

  overflow: hidden;

}

.astro-box:hover {

  border-color: #8a6128;

  transform: translateY(-6px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);

}


/* Glow */

.astro-box::before {

  content: "";

  position: absolute;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  right: -120px;

  top: -120px;

  background: radial-gradient(circle,
      rgba(215, 134, 24, .18),
      transparent 70%);

  opacity: 0;

  transition: .45s;

}

.astro-box:hover::before {

  opacity: 1;

}



/*==========================
HEADINGS
===========================*/

.astro-box h3 {

  color: #fff;

  font-size: 25px;

  font-weight: 600;

  margin-bottom: 28px;

  line-height: 1.3;

}



/*==========================
PARAGRAPH
===========================*/

.astro-box p {

  color: #a8a8a8;

  font-size: 18px;

  line-height: 1.9;

  margin-bottom: 26px;

}

.astro-box p:last-child {

  margin-bottom: 0;

}



/*==========================
NUMBER LIST
===========================*/

.astro-list {

  margin: 0;

  padding: 0;

  list-style: none;

}

.astro-list li {

  display: flex;

  align-items: flex-start;

  gap: 22px;

  margin-bottom: 20px;

  color: #a8a8a8;

  font-size: 18px;

  line-height: 1.8;

}

.astro-list li:last-child {

  margin-bottom: 0;

}



/*==========================
NUMBER CIRCLE
===========================*/

.astro-list li span {

  min-width: 42px;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #3a260f;

  border: 1px solid rgba(215, 134, 24, .25);

  color: #d78618;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 18px;

  transition: .35s;

}

.astro-box:hover .astro-list li span {

  background: #d78618;

  color: #111;

}



/*==========================
SCROLL EFFECT
===========================*/

.astro-box {

  opacity: 1;

}

.astro-box.show {

  opacity: 1;
}



/*==========================
RESPONSIVE
===========================*/

@media(max-width:1200px) {

  .astro-heading h2 {

    font-size: 48px;

  }

  .astro-box h3 {

    font-size: 23px;

  }

  .astro-box p,
  .astro-list li {

    font-size: 17px;

  }

}



@media(max-width:991px) {

  .astro-heading h2 {

    font-size: 40px;

  }

  .astro-box {

    padding: 32px;

  }

  .astro-box h3 {

    font-size: 20px;

  }

  .astro-box p,
  .astro-list li {

    font-size: 16px;

    line-height: 1.8;

  }

}



@media(max-width:576px) {

  .astro-heading {

    margin-bottom: 35px;

  }

  .astro-heading h2 {

    font-size: 35px;

  }

  .astro-box {

    padding: 24px;

    border-radius: 20px;

  }

  .astro-box h3 {

    font-size: 20px;

  }

  .astro-box p,
  .astro-list li {

    font-size: 14px;

  }

  .astro-list li {

    gap: 15px;

  }

  .astro-list li span {

    width: 34px;

    height: 34px;

    min-width: 34px;

    font-size: 15px;

  }

}

/*==========================
FAQ SECTION
==========================*/

.faq-section {
  padding: 120px 0;
  position: relative;
}

.faq-left {
  position: sticky;
  top: 120px;
}

.faq-tag {
  display: inline-block;
  color: #d78618;
  letter-spacing: 3px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 25px;
}

.faq-heading {
  font-size: 55px;
  line-height: 1.02;
  color: #fff;
  font-weight: 300;
}

.faq-heading span {
  color: #d78618;
}


/*==========================
RIGHT SIDE
==========================*/

.faq-wrapper {
  width: 100%;
}


/*==========================
ITEM
==========================*/

.faq-item {

  border-bottom: 1px solid rgba(255, 180, 50, .15);

  padding: 15px 0;

}

.faq-item:first-child {

  border-top: 1px solid rgba(255, 180, 50, .15);

}


/*==========================
BUTTON
==========================*/

.faq-btn {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

  padding: 0;

  text-align: left;

}

.faq-btn span {

  font-size: 23px;

  font-weight: 500;

  line-height: 1.5;

  width: 90%;

}


/*==========================
PLUS BUTTON
==========================*/

.faq-icon {

  width: 54px;

  height: 54px;

  border-radius: 50%;

  border: 1px solid rgba(255, 180, 50, .18);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #b7a48b;

  font-size: 18px;

  transition: .35s;

  flex-shrink: 0;

}

.faq-item.active .faq-icon {

  background: #d78618;

  color: #fff;

  border-color: #d78618;

  transform: rotate(180deg);

}


/*==========================
CONTENT
==========================*/

.faq-content {

  max-height: 0;

  overflow: hidden;

  transition: max-height .45s ease;

}

.faq-content p {

  color: #a6a6a6;

  font-size: 20px;

  line-height: 2;

  margin-top: 30px;

  margin-bottom: 10px;

  width: 90%;

}


/*==========================
HOVER
==========================*/

.faq-item:hover .faq-btn span {

  color: #fff;

}

.faq-item:hover .faq-icon {

  border-color: #d78618;

  color: #d78618;

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px) {

  .faq-section {

    padding: 80px 0;

  }

  .faq-left {

    position: relative;

    top: 0;

    margin-bottom: 45px;

  }

  .faq-heading {

    font-size: 48px;

  }

  .faq-btn span {

    font-size: 20px;

  }

  .faq-content p {

    font-size: 17px;

    width: 100%;

  }

}

@media(max-width:576px) {

  .faq-heading {

    font-size: 42px;

  }

  .faq-btn span {

    font-size: 18px;

  }

  .faq-icon {

    width: 46px;

    height: 46px;

    font-size: 15px;

  }

  .faq-content p {

    font-size: 16px;

    line-height: 1.8;

  }

}

/*==================================
FOOTER
==================================*/

.astro-footer {
  position: relative;
  padding: 90px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.astro-footer a {
  text-decoration: none;
}

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

/*=========================
ABOUT
=========================*/

.footer-about {
  margin-bottom: 65px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}

.footer-logo img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-logo h2 {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  margin: 0;
}

.footer-about p {
  color: #a1a1a1;
  font-size: 19px;
  line-height: 1.9;
  max-width: 1500px;
}

/*=========================
GRID
=========================*/

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 70px;
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/*=========================
COLUMN
=========================*/

.footer-column h3 {

  color: #fff;

  font-size: 28px;

  margin-bottom: 24px;

  font-weight: 700;

}

.mt-40 {

  margin-top: 38px;

}

.footer-column ul li {

  margin-bottom: 17px;

}

.footer-column ul li:last-child {

  margin-bottom: 0;

}

.footer-column ul li a {

  color: #9f9f9f;

  font-size: 18px;

  transition: .35s;

}

.footer-column ul li a:hover {

  color: #d78618;

  padding-left: 8px;

}

/*=========================
DROPDOWN
=========================*/

.gem-dropdown {

  margin: 25px 0;

  position: relative;

}

.gem-btn {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: #1f170f;

  border: 1px solid rgba(255, 255, 255, .08);

  height: 54px;

  color: #fff;

  border-radius: 12px;

  cursor: pointer;

  padding: 0 18px;

  transition: .35s;

  font-size: 17px;

}

.gem-btn:hover {

  border-color: #d78618;

}

.gem-btn i {

  transition: .35s;

}

.gem-dropdown.active .gem-btn i {

  transform: rotate(180deg);

}

.gem-menu {

  display: none;

  background: #16100b;

  margin-top: 10px;

  border-radius: 12px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .07);

}

.gem-menu li {

  border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.gem-menu li:last-child {

  border-bottom: none;

}

.gem-menu li a {

  display: block;

  padding: 14px 18px;

  color: #b2b2b2;

  transition: .35s;

}

.gem-menu li a:hover {

  background: #24170d;

  color: #d78618;

  padding-left: 24px;

}

/*=========================
BOTTOM
=========================*/

.footer-bottom {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 70px;

  padding: 60px 0;

  border-bottom: 1px solid rgba(255, 255, 255, .08);

}

.footer-item h3 {

  color: #fff;

  font-size: 28px;

  margin-bottom: 22px;

  font-weight: 700;

}

.footer-item ul li {

  margin-bottom: 16px;

}

.footer-item ul li a {

  color: #a5a5a5;

  font-size: 18px;

  transition: .35s;

}

.footer-item ul li a:hover {

  color: #d78618;

  padding-left: 8px;

}

.footer-item p {

  color: #a5a5a5;

  font-size: 18px;

  margin-bottom: 12px;

}

/*=========================
SECURE
=========================*/

.secure-list {

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.secure-list div {

  display: flex;

  align-items: center;

  gap: 15px;

  color: #b2b2b2;

  font-size: 18px;

}

.secure-list i {

  width: 46px;

  height: 46px;

  background: #2d2115;

  border-radius: 12px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #d78618;

  font-size: 18px;

}

/*=========================
SOCIAL
=========================*/

.footer-social {

  display: flex;

  gap: 15px;

  margin-top: 35px;

}

.footer-social a {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #21160d;

  border: 1px solid rgba(255, 255, 255, .08);

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  transition: .35s;

}

.footer-social a:hover {

  background: #d78618;

  color: #111;

  transform: translateY(-5px);

}

/*=========================
STORE BUTTON
=========================*/

.store-btn {

  display: block;

  margin-bottom: 18px;

}

.store-btn img {

  width: 180px;

  transition: .35s;

}

.store-btn:hover img {

  transform: scale(1.05);

}

/*=========================
COPYRIGHT
=========================*/

.footer-copy {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 35px;

  gap: 30px;

  flex-wrap: wrap;

}

.footer-copy p {

  color: #8d8d8d;

  font-size: 16px;

  margin: 0;

}

/*=========================
THEME SWITCH
=========================*/

.theme-switcher {

  display: flex;

  background: #21160d;

  border-radius: 50px;

  padding: 5px;

  border: 1px solid rgba(255, 255, 255, .08);

}

.theme-btn {

  border: none;

  background: none;

  color: #a2a2a2;

  padding: 12px 24px;

  border-radius: 30px;

  cursor: pointer;

  transition: .35s;

  font-size: 16px;

}

.theme-btn.active {

  background: #f6dc47;

  color: #111;

  font-weight: 700;

}

.theme-btn i {

  margin-right: 8px;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1200px) {

  .footer-grid,
  .footer-bottom {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media(max-width:768px) {

  .footer-grid,
  .footer-bottom {

    grid-template-columns: 1fr;

    gap: 40px;

  }

  .footer-copy {

    flex-direction: column;

    text-align: center;

  }

  .theme-switcher {

    width: 100%;

    justify-content: center;

  }

  .theme-btn {

    flex: 1;

  }

  .footer-logo h2 {

    font-size: 30px;

  }

  .footer-about p {

    font-size: 16px;

  }

  .footer-column h3,
  .footer-item h3 {

    font-size: 22px;

  }

}
.footer-copy{
    padding:22px 0;

    display:flex;
}

.footer-copy p{
    margin:0;
    color:#9f9f9f;
    font-size:15px;
    font-weight:400;
    line-height:1.8;
    letter-spacing:.3px;
}

.footer-copy .company-link{
    color:#d78618;
    font-weight:700;
    text-decoration:none;
    margin-left:4px;
    transition:.35s ease;
    position:relative;
}

.footer-copy .company-link:hover{
    color:#FFD54A;
}

.footer-copy .company-link:hover::after{
    width:100%;
}

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

@media(max-width:768px){

.footer-copy{
    margin-top:35px;
    padding:18px 15px;
}

.footer-copy p{
    font-size:14px;
    line-height:1.7;
}

}

@media(max-width:480px){

.footer-copy{
    padding:16px 10px;
}

.footer-copy p{
    font-size:13px;
}

}

/*==================================
FOOTER
==================================*/

.astro-footer{
    /*background:#081633;*/
    border-top:1px solid rgba(212,175,55,.18);
    padding:70px 0 25px;
}

/*=========================
ABOUT
=========================*/

.footer-about{
    text-align:center;
    margin-bottom:55px;
}

.footer-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
}

.footer-logo img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}

.footer-logo h2{
    color:#fff;
    font-size:34px;
    font-weight:700;
    margin:0;
}

.footer-about p{
    max-width:760px;
    margin:auto;
    color:#c7d2e2;
    line-height:1.9;
    font-size:17px;
}

/*=========================
GRID
=========================*/

.footer-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

    padding:45px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*=========================
COLUMN
=========================*/

.footer-column h3{

    color:#D4AF37;

    font-size:24px;

    margin-bottom:25px;

    font-weight:700;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column ul li{

    margin-bottom:16px;

}

.footer-column ul li:last-child{

    margin-bottom:0;

}

.footer-column ul li a{

    color:#d8e2ef;

    text-decoration:none;

    font-size:17px;

    transition:.35s;

}

.footer-column ul li a:hover{

    color:#D4AF37;

    padding-left:6px;

}

.footer-column ul li{

    color:#d8e2ef;

    font-size:17px;

}

/*=========================
SOCIAL
=========================*/

.footer-social{

    display:flex;

    gap:14px;

    margin-top:10px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#102B5C;

    border:1px solid rgba(212,175,55,.18);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#D4AF37;

    color:#081633;

    transform:translateY(-5px);

}

/*=========================
COPYRIGHT
=========================*/

.footer-copy{

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding-top:25px;

}

.footer-copy p{

    margin:0;

    color:#bfc9d8;

    font-size:15px;

    line-height:1.8;

}

.company-link{

    color:#D4AF37;

    text-decoration:none;

    font-weight:700;

}

.company-link:hover{

    color:#F2D27A;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.footer-grid{

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

}

@media(max-width:768px){

.astro-footer{

    padding:55px 0 20px;

}

.footer-logo{

    flex-direction:column;

}

.footer-logo h2{

    font-size:28px;

}

.footer-about{

    margin-bottom:40px;

}

.footer-about p{

    font-size:15px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:35px;

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-copy{

    padding-top:20px;

}

.footer-copy p{

    font-size:14px;

}

}

/*==================================================
ASTRO INFO + FAQ + FOOTER OVERRIDE
==================================================*/

/*=====================
ASTRO INFO
======================*/

.astro-subtitle{
    color:#D4AF37!important;
}

.astro-heading h2{
    color:#fff!important;
}

.astro-heading h2 span{
    color:#D4AF37!important;
}

.astro-box{

    background:linear-gradient(180deg,#102B5C,#0D2349)!important;

    border:1px solid rgba(212,175,55,.18)!important;

    box-shadow:0 15px 35px rgba(0,0,0,.20);

}

.astro-box:hover{

    border-color:#D4AF37!important;

    box-shadow:
    0 25px 45px rgba(0,0,0,.30),
    0 0 18px rgba(212,175,55,.12);

}

.astro-box::before{

    background:radial-gradient(circle,
    rgba(212,175,55,.22),
    transparent 70%)!important;

}

.astro-box h3{

    color:#fff!important;

}

.astro-box p,
.astro-list li{

    color:#D3DBE9!important;

}

.astro-list li span{

    background:rgba(212,175,55,.15)!important;

    border-color:#D4AF37!important;

    color:#D4AF37!important;

}

.astro-box:hover .astro-list li span{

    background:#D4AF37!important;

    color:#081633!important;

}

/*=====================
FAQ
======================*/

.faq-tag{

    color:#D4AF37!important;

}

.faq-heading{

    color:#fff!important;

}

.faq-heading span{

    color:#D4AF37!important;

}

.faq-item{

    border-color:rgba(212,175,55,.18)!important;

}

.faq-btn{

    color:#fff!important;

}

.faq-icon{

    border-color:rgba(212,175,55,.25)!important;

    color:#D4AF37!important;

    background:#102B5C!important;

}

.faq-item.active .faq-icon{

    background:#D4AF37!important;

    color:#081633!important;

    border-color:#D4AF37!important;

}

.faq-content p{

    color:#CDD5E5!important;

}

.faq-item:hover .faq-icon{

    background:#D4AF37!important;

    color:#081633!important;

}

/*=====================
FOOTER
======================*/

.astro-footer{

    border-top:1px solid rgba(212,175,55,.15)!important;

    /*background:#081633!important;*/

}

.footer-logo h2,
.footer-column h3,
.footer-item h3{

    color:#fff!important;

}

.footer-about p,
.footer-item p,
.footer-copy p{

    color:#CBD5E5!important;

}

.footer-column ul li a,
.footer-item ul li a{

    color:#CBD5E5!important;

}

.footer-column ul li a:hover,
.footer-item ul li a:hover{

    color:#D4AF37!important;

}

.footer-grid,
.footer-bottom{

    border-color:rgba(212,175,55,.12)!important;

}

/* Dropdown */

.gem-btn{

    background:#102B5C!important;

    border-color:rgba(212,175,55,.18)!important;

    color:#fff!important;

}

.gem-btn:hover{

    border-color:#D4AF37!important;

}

.gem-menu{

    background:#0B2148!important;

    border-color:rgba(212,175,55,.15)!important;

}

.gem-menu li{

    border-color:rgba(212,175,55,.08)!important;

}

.gem-menu li a{

    color:#CBD5E5!important;

}

.gem-menu li a:hover{

    background:#143264!important;

    color:#D4AF37!important;

}

/* Secure */

.secure-list i{

    background:rgba(212,175,55,.15)!important;

    color:#D4AF37!important;

}

.secure-list div{

    color:#CBD5E5!important;

}

/* Social */

.footer-social a{

    background:#102B5C!important;

    border-color:rgba(212,175,55,.20)!important;

    color:#D4AF37!important;

}

.footer-social a:hover{

    background:#D4AF37!important;

    color:#081633!important;

}

/* Theme */

.theme-switcher{

    background:#102B5C!important;

    border-color:rgba(212,175,55,.18)!important;

}

.theme-btn{

    color:#CBD5E5!important;

}

.theme-btn.active{

    background:#D4AF37!important;

    color:#081633!important;

}

/* Copyright */

.footer-copy .company-link{

    color:#D4AF37!important;

}

.footer-copy .company-link:hover{

    color:#F2D27A!important;

}