/*====================
1. Google fonts
======================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');


/*====================
2. Theme variables
======================*/

:root {
  --body-font: 'Roboto', sans-serif;
  --body-bg: #FFFFFF;
  --body-bg2: #FFFFFF;
  --heading-font: "Poppins", sans-serif;
  --theme-color: #052992;
  --theme-color2: #cc1519;
  --theme-bg-light: #F6F6F6;
  --color-dark: #050A30;
  --body-text-color: #757F95;
  --color-white: #FFFFFF;
  --box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);
  --transition: all .5s ease-in-out;
  --transition2: all .3s ease-in-out;
  --border-info-color: rgba(0, 0, 0, 0.08);
  --border-info-color2: rgba(0, 0, 0, 0.05);
  --border-white-color: rgba(255, 255, 255, 0.08);
  --border-white-color2: rgba(255, 255, 255, 0.05);
  --footer-bg: #050A30;
  --footer-text-color: #F5FAFF;
}

.theme-mode-variables{
  --body-bg: #03061E;
  --body-bg2: #030515;
  --color-dark: #FFFFFF;
  --theme-bg-light: #050A30;
  --border-info-color: rgba(255, 255, 255, 0.1);
  --box-shadow: 0px 8px 32px rgba(255, 255, 255, 0.05);
}



/*====================
3. General css
======================*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  scroll-behavior: inherit !important;
}

html,
body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  color: var(--body-text-color);
  line-height: 1.8;
  background: var(--body-bg);
}

a {
  color:  var(--color-dark);
  display: inline-block;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

a:hover {
  color: var(--color-blue);
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-dark);
  margin: 0px;
  font-weight: 600;
  font-family: var(--heading-font);
  line-height: 1.2;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
    margin: 0px;
    font-size: 14px;
}

.img,
img {
  max-width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: auto;
}

label {
  color: #999;
  cursor: pointer;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

::selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

*::placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}



/*====================
4. Preloader
======================*/

.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--body-bg);
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader-ripple div {
  position: absolute;
  border: 4px solid var(--theme-color);
  opacity: 1;
  border-radius: 50%;
  animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loader-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes loader-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}




/*===================
5. Theme default css
======================*/

.ovrflow-hidden {
  overflow: hidden;
}

.position-relative {
  position: relative;
  z-index: 1;
}

.text-right {
  text-align: right;
}

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-pd {
  padding: 0 7rem;
}

.s-pd {
  padding: 0 12rem;
}

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}

.bg {
  background: var(--theme-bg-light);
}



/*====================
6. Margin & padding
======================*/

.pt-0 {
  padding-top: 0px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-120 {
  padding-top: 120px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-120 {
  padding-bottom: 120px;
}

.py-80 {
  padding: 80px 0;
}
.py-50 {
  padding: 50px 0;
}


.py-90 {
  padding: 90px 0;
}

.py-100 {
  padding: 100px 0;
}

.py-110 {
  padding: 110px 0;
}

.py-120 {
  padding: 120px 0;
}

.mt-0 {
  margin-top: 0px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-120 {
  margin-top: 120px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-120 {
  margin-bottom: 120px;
}

.my-80 {
  margin: 80px 0;
}

.my-90 {
  margin: 90px 0;
}

.my-100 {
  margin: 100px 0;
}

.my-110 {
  margin: 110px 0;
}

.my-120 {
  margin: 120px 0;
}



/*====================
7. Site title css
======================*/

.site-heading {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.site-heading .site-title-tagline {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color2);
    margin-bottom: 0px;
    position: relative;
}
.site-heading .site-title {
    font-weight: 600;
    text-transform: capitalize;
    font-size: 30px;
    color: var(--color-dark);
    margin-bottom: 20px;
}

.site-heading .site-title span {
    color: var(--theme-color2);
}

.site-heading .site-heading p {
  margin-top: 15px;
}

.site-heading-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 5px double var(--border-info-color);
}

.site-heading-inline .site-title {
  text-transform: capitalize;
  font-size: 22px;
  color:  var(--color-dark);
  margin-bottom: 0;
  position: relative;
  padding-left: 15px;
}

.site-heading-inline .site-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 10px;
  background: var(--theme-color2);
  border-radius: 5px;
  transform: translateY(-50%);
}



/*====================
8. Theme button
======================*/

.theme-btn {
    font-size: 16px;
    color: var(--color-white);
    padding: 7px 21px;
    transition: all 0.5s;
    text-transform: capitalize;
    position: relative;
    border-radius: 7px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    border: none;
    background: var(--theme-color);
    box-shadow: var(--box-shadow);
    z-index: 1;
}
.items_google{
    background: #d61608;
    padding: 2px 19px;
    border-radius: 5px;
    color: #fff;
    display: table;
    margin: 0 auto;
}
.theme-btn::before {
  content: "";
  height: 300px;
  width: 300px;
  background: var(--theme-color2);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.theme-btn:hover {
  color: var(--color-white);
}

.theme-btn:hover::before {
  transform: translateY(-50%) translateX(-50%) scale(1);
}

.theme-btn i {
  margin-left: 5px;
}

.theme-btn span {
  margin-right: 5px;
}

.theme-btn2{
  background: var(--color-white);
  color: var(--theme-color);
}

.theme-btn2::before{
  background: var(--theme-color);
}

.theme-btn2:hover{
  color: var(--color-white);
}

.theme-btn-link {
    font-weight: 500;
    color: var(--theme-color2);
    font-size: 14px;
}

.theme-btn-link:hover{
  color: var(--theme-color2);
}

.theme-link{
  display: unset;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%);
  background-size: 0px 6%;
  background-repeat: no-repeat;
  background-position: left 100%;
  transition-duration: .5s;
      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    overflow: hidden;
}

.theme-link:hover {
  background-size: 100% 6%;
}




/*====================
9. Bs custom css
======================*/

.badge{
  border-radius: 50px;
  color: var(--color-white) !important;
  background: var(--theme-color);
}

.bg-success{
  background-color: #0CBC87 !important;
}

.bg-danger{
  background-color: #FF2768 !important;
}

.bg-info{
  background-color: #5A42FF !important;
}

.bg-primary{
  background-color: #0D6EFD !important;
}

.bg-warning{
  background-color: #EFB000 !important;
}



/*====================
10. Container
======================*/

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1200px;
  }
}



/*====================
11. Scroll top css
======================*/

#scroll-top {
  position: fixed;
  bottom: -20px;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  border-radius: 50px;
  color: var(--color-white);
  background-color: var(--theme-color);
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-shadow: var(--box-shadow2);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

#scroll-top.active{
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}


@media all and (min-width: 768px) and (max-width: 1199px) {
  #scroll-top.active {
    bottom: 100px;
  }
}



/*====================
12. Header css
======================*/
@media all and (max-width: 991px) {
  .header{
    margin-bottom: 50px;
  }
}



/*====================
13. Header top css
======================*/

.header-top {
  position: relative;
  padding: 6px 0 9px 0;
  background: var(--theme-color);
  z-index: 5;
}

.header-top-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.header-top-list ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.header-top-list ul li{
  position: relative;
}

.header-top-list ul li:nth-child(2)::before {
  content: '';
  position: absolute;
  border-left: 2px solid var(--color-white);
  top: 7px;
  bottom: 5px;
  right: -12px;
  opacity: .5;
}

.header-top-list a {
  color: var(--color-white);
  transition: var(--transition);
}

.header-top-list a:hover{
  color: var(--color-dark);
}

.header-top-list a i{
  color: var(--color-white);
  margin-right: 5px;
}

.header-top-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.header-top-link a{
  color: var(--color-white);
  margin-right: 12px;
}

.header-top-link a:hover{
  color: var(--theme-color);
}

.header-top-social span{
  color: var(--color-white);
}

.header-top-social a {
    color: var(--color-white);
    font-size: 14px;
    text-align: center;
    margin-left: 14px;
    transition: var(--transition);
}

.header-top-social a:hover {
  color: #fff;
}

.header-top-lang .top-lang{
  color: var(--color-white);
}

.header-top-lang .dropdown-menu{
  min-width: 60px;
  border-radius: 15px;
  padding: 10px;
  border: none;
  background: var(--body-bg);
  box-shadow: var(--box-shadow);
}

.header-top-lang .dropdown-toggle::after{
  vertical-align: 3px;
}

.header-top-lang .dropdown-item{
  color: var(--color-dark);
  border-radius: 10px;
}

.header-top-lang .dropdown-item:hover{
  background: var(--theme-color);
  color: var(--color-white);
}

@media all and (max-width: 1199px) {
  .header-top-contact ul {
    gap: 10px;
  }

  .header-top-social a {
    width: 34px;
    height: 34px;
    line-height: 37px;
    margin-left: 0;
  }

  .header-top-left {
    margin-right: 5px;
  }
}

@media all and (max-width: 991px) {
  .header-top-list ul {
    gap: 0px;
  }

  .header-top-list ul li{
    margin-right: 10px;
  }

  .header-top-list ul li:last-child{
    display: none;
  }

  .header-middle-link .theme-mode{
    flex: 1;
  }
}




/*====================
14. Header middle css
======================*/

.header-middle{
  padding: 20px 0;
}

.header-middle-link{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  height: 100%;
}

.header-middle-link a{
  font-weight: 500;
  color: var(--color-dark);
}

.header-middle-link a:hover{
  color: var(--theme-color);
}

.header-middle-link .account i{
  margin-right: 8px;
}

.header-middle-link .theme-btn{
  color: var(--color-white) !important;
}

.header-middle-img a{
  width: 100%;
}

.header-middle-img img{
  border-radius: 8px;
  width: 100%;
}

@media all and (min-width: 991px) and (max-width: 1199px) {
  .header-middle-link .theme-btn{
    display: none;
  }
}

@media all and (max-width: 991px) {
  .header-middle .navbar-brand{
    display: none;
  }

  .header-middle-img{
    margin-bottom: 10px;
  }

  .header-middle-link{
    justify-content: flex-start;
  }
}




/*====================
15. Theme mode css
======================*/

.theme-mode .checkbox {
  opacity: 0;
  position: absolute;
}

.theme-mode .checkbox-label {
  background-color: var(--footer-bg);
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-info-color);
}

.theme-mode i {
  color: var(--color-white)
}

.theme-mode .checkbox-label .ball {
  background-color: var(--theme-color);
  width: 20px;
  height: 20px;
  position: absolute;
  left: 3px;
  top: 2px;
  border-radius: 50px;
  transition: transform 0.2s linear;
}

.theme-mode .checkbox:checked + .checkbox-label .ball {
  transform: translateX(22px);
}



/*====================
16. Navbar css
======================*/

.navbar {
    background: var(--body-bg);
    border-top: 1px solid var(--border-info-color);
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 4;
    border-bottom: 1px solid #eeeeeecc;
}

.navbar.fixed-top {
  position: fixed;
  border-bottom: 1px solid var(--border-info-color);
  box-shadow: var(--box-shadow2);
  animation: slide-down 0.7s;
}


@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.navbar .navbar-brand .logo-display {
  display: block;
}

.navbar .navbar-brand .logo-scrolled {
  display: none;
}

.navbar.fixed-top .navbar-brand .logo-display {
  display: none;
}

.navbar.fixed-top .navbar-brand .logo-scrolled {
  display: block;
}

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

.navbar-toggler-mobile-icon {
  display: inline-block;
  width: inherit;
  height: inherit;
}

.navbar-brand {
  margin-right: 0;
}

.navbar-brand img {
  width: 200px;
}

.navbar .dropdown-toggle::after {
  display: inline-block;
  margin-left: 5px;
  vertical-align: baseline;
  font-family: 'Font Awesome 6 Pro';
  content: "\f107";
  font-weight: 600;
  border: none;
  font-size: 14px;
}

@media all and (max-width: 1199px) {
  .nav-right {
    margin-left: 25px !important;
  }

  .navbar .nav-item .nav-link {
    margin-right: 15px;
  }

  .navbar .nav-right-btn {
    display: none;
  }
}

@media all and (min-width: 992px) {
  .navbar .navbar-brand{
    display: none;
  }

.navbar .nav-item .nav-link {
    margin-right: 25px;
    padding: 15px 0 15px 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--color-dark);
    text-transform: capitalize;
}

  .navbar .nav-item:last-child .nav-link {
    margin-right: 0;
  }

  .navbar .nav-item .dropdown-menu {
    display: block;
    padding: 10px;
    margin-top: 0;
    left: -15px;
    border-radius: 15px;
    width: 220px;
    border: none;
    background: var(--body-bg);
    box-shadow: var(--box-shadow);
    transition: var(--transition2);
    opacity: 0;
    visibility: hidden;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item {
    font-size: 16px;
    padding: 6px 15px;
    font-weight: 500;
    color: var(--color-dark);
    white-space: wrap;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    transition: var(--transition2);
    z-index: 1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover {
    background: var(--theme-color);
    color: var(--color-white);
    padding-left: 32px;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: "//";
    position: absolute;
    left: 15px;
    top: 6px;
    color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: -1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {
    opacity: 1;
    visibility: visible;
  }

  .navbar .nav-item .nav-link {
    position: relative;
  }

  .navbar .nav-item .nav-link.active,
  .navbar .nav-item:hover .nav-link {
    color: var(--theme-color2);
  }

  .navbar .nav-item:hover .dropdown-menu {
    transition: .3s;
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: rotateX(0deg);
  }

  .navbar .dropdown-menu-end {
    right: 0;
    left: auto;
  }

  .navbar .dropdown-menu.fade-down {
    top: 80%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
  }

  .navbar .dropdown-menu.fade-up {
    top: 140%;
  }

  .navbar #main_nav {
    justify-content: space-between;
  }

  /* mega menu */
  .navbar .mega-menu {
    position: static;
  }
  
  .navbar .nav-item.mega-menu .dropdown-menu{
    width: 98%;
    left: 50%;
    transform: translateX(-50%);
  } 

  .navbar .mega-menu .mega-content{
    padding: 5px 8px 5px 15px;
  }

  .navbar .mega-menu .mega-menu-title{
    position: relative;
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--color-dark);
  }

  .navbar .mega-menu .mega-menu-title::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    border-bottom: 2px solid var(--theme-color);
  }

  .navbar .mega-menu-img img{
    border-radius: 10px;
  }

  .navbar .nav-item.mega-menu .dropdown-item{
    padding-left: 0;
  }

  .navbar .nav-item.mega-menu .dropdown-item::before{
    left: 0;
  }

  .navbar .nav-item.mega-menu .dropdown-item:hover{
    padding-left: 15px;
  }

  /* nav right */
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: 45px;
  }

  .nav-right-link {
    position: relative;
    font-size: 20px;
    color: var(--color-dark);
    transition: var(--transition);
  }

  .nav-right-link:hover {
    color: var(--theme-color) !important;
  }

  .nav-right .search-btn .nav-right-link {
    border: none;
    background: transparent;
    color: var(--color-dark);
    font-size: 28px;
    padding-right: 0;
  }

  .nav-right .sidebar-btn .nav-right-link{
    background: transparent;
    font-size: 25px;
    border: none;
  }

  .nav-right .search-btn .nav-right-link {
    font-size: 20px;
    padding: 0;
  }
}


/* mobile menu */
.mobile-menu-right {
  display: none;
}

@media all and (max-width:991px) {
  .navbar {
    position: absolute;
    width: 100%;
    height: auto;
  }

  .navbar .navbar-brand{
    display: block;
  }

  .navbar-brand img {
    width: 130px;
  }

  .navbar-collapse {
    max-height: 220px;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 20px;
    margin-bottom: 10px;
    background-color: var(--theme-bg-light);
    border-radius: 15px;
  }

  .navbar-toggler {
    padding: 0;
    border: none;
  }

  .navbar .dropdown-toggle::after {
    float: right;
    margin-top: 2.5px;
  }

  .navbar .nav-item .nav-link {
    color:  var(--color-dark);
    font-weight: 700;
    margin-right: 0px;
    transition: var(--transition);
  }

  .navbar .nav-item .nav-link:hover {
    color: var(--theme-color) !important;
  }

  .mobile-menu-right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .mobile-menu-right .nav-right-link {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--color-dark);
  }

  .mobile-menu-right .nav-right-link:hover{
    color: var(--theme-color);
  }

  .navbar-toggler-mobile-icon {
    font-size: 25px;
    color:  var(--color-dark);
    font-weight: 500;
  }

  .navbar .dropdown-menu {
    border-radius: 15px;
    border: none;
    background: var(--body-bg);
  }

  .nav-right {
    display: none;
  }
}


/*============================
17. Multi level dropdown menu
==============================*/

.navbar .nav-item .dropdown-submenu {
  position: relative;
}

.navbar .nav-item .dropdown-submenu .dropdown-menu::before {
  display: none;
}

.navbar .nav-item .dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 15px;
  top: 8px;
  font-weight: 600;
}

.navbar .nav-item .dropdown-submenu a:hover {
  background: transparent;
  color: var(--color-white);
}

.navbar .nav-item .dropdown-submenu .dropdown-menu {
  top: 120%;
  left: 100%;
  opacity: 0;
  visibility: hidden;
}

.navbar .nav-item .dropdown-submenu:hover .dropdown-menu {
  top: 0;
  opacity: 1;
  visibility: visible;
}

@media all and (max-width: 991px) {
  .navbar .nav-item .dropdown-menu .dropdown-item{
    color: var(--color-dark)
  }

  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    margin: 0 17px;
  }

  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    opacity: unset;
    visibility: unset;
  }

  .navbar .nav-item .dropdown-submenu a::after {
    top: 3px;
  }

  .navbar .nav-item .dropdown-submenu a:hover {
    color: var(--theme-color);
  }
}



/* ======================
18. Search popup
====================== */

.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, .8);
  transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

.sidenav-bar-visible .search-popup {
  width: 80%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  border: none;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50px;
  text-align: center;
  background: var(--theme-color);
  text-align: center;
  width: 50px;
  height: 50px;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  transition-delay: 1500ms;
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
  position: relative;
  width: 100%;
  height: 60px;
  outline: none;
  border-radius: 50px;
  border: none;
  background: var(--body-bg);
  color: var(--color-dark);
  padding: 0 70px 0 35px;
  transition: all 500ms ease;
  text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
  font-size: 20px;
  color: var(--color-white) !important;
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  transition: all 500ms ease;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  background: var(--theme-color);
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: var(--color-dark);
}



/*====================
19. Sidebar popup css 
======================*/

.sidebar-popup {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.sidebar-popup.open {
  visibility: visible;
  opacity: 1;
}

.sidebar-wrapper {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  background: var(--body-bg);
  visibility: hidden;
  opacity: 0;
  padding: 25px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9999;
}

.sidebar-wrapper.open {
  right: 0;
  visibility: visible;
  opacity: 1;
}

.sidebar-content{
  position: relative;
  overflow-y: auto;
  height: calc(100vh - 75px);
}

.close-sidebar-popup {
    position: absolute;
    top: 2px;
    right: 1px;
    width: 27px;
    height: 27px;
    line-height: 27px;
    border-radius: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    background: var(--theme-color);
    color: var(--color-white);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.close-sidebar-popup:hover{
  background: var(--theme-color2);
}


.sidebar-about{
  margin-top: 15px;
}

.sidebar-about h4 {
    margin-bottom: 5px;
    font-size: 18px;
}
.sidebar-contact{
  margin-top: 20px;
}

.sidebar-contact h4 {
    margin-bottom: 9px;
    font-size: 18px;
}

.sidebar-contact li a {
    font-size: 13px;
}
.sidebar-contact li{
  margin: 3px 0;
}

.sidebar-contact li i{
  margin-right: 5px;
  color: var(--theme-color);
}

.sidebar-contact li a:hover{
  color: var(--theme-color);
}

.sidebar-social{
  margin-top: 25px;
}

.sidebar-social h4 {
    margin-bottom: 10px;
    font-size: 18px;
}

.sidebar-social a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    border-radius: 50px;
    margin-right: 8px;
    background: var(--theme-color2);
    color: var(--color-white);
    box-shadow: var(--box-shadow);
}

.sidebar-social a:hover{
  background: var(--theme-color2);
}





    .sidebar-menu{
    margin:0;
    padding:0;
    list-style:none;
}

.sidebar-menu li{
    border-bottom:1px solid #e9e9e9;
}

.sidebar-menu li:last-child{
    border-bottom:none;
}

.sidebar-menu li a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
    color:#0b1f52;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    transition:all .3s ease;
    position:relative;
}

.sidebar-menu li a i{
    font-size:14px;
    transition:all .3s ease;
}

.sidebar-menu li a:hover{
    background:#f5f7ff;
    color:#d60000;
    padding-left:22px;
}

.sidebar-menu li a:hover i{
    transform:translateX(5px);
    color:#d60000;
}

.user-box{
    background: radial-gradient(circle at top right, rgba(246,196,83,.18), transparent 24%),
                linear-gradient(135deg,#cc1e12 0%,#f6584d 48%,#8e0e05 100%);
    padding:12px 15px;
    display:flex;
    align-items:center;
    width:100%;
    margin:0;
    border-radius:0;
    box-sizing:border-box;
}

.sidebar-wrapper{
    padding:0 !important;
}

.sidebar-content{
    padding:10px !important;
}

.user-avatar img{
    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.2);
}

.user-info{
    margin-left:12px;
    flex:1;
}

.user-info h5{
    color:#fff;
    font-size:18px;
    margin:0;
    font-weight:600;
}

.verify-badge{
    display:inline-block;
    margin-top:4px;
    padding:1px 13px;
    background:#2ecc71;
    color:#fff;
    border-radius:20px;
    font-size:10px;
}

.user-info small{
    display:block;
    margin-top:4px;
    color:white;
    font-size:11px;
}

.close-btn{
    background:#1d4ed8;
    color:#fff;
    border:none;
    width:28px;
    margin-top: -50px;
    height:28px;
    border-radius:50%;
    cursor:pointer;
}


/*==========================
20. Menu category & news css 
============================*/

.menu-category .dropdown-item{
  background: none !important;
}

.menu-category .dropdown-item:hover{
  color: var(--theme-color) !important;
}

.menu-category .dropdown-item::before{
  color: var(--theme-color) !important;
}

.menu-news-big-item,
.menu-news-item{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding-left: 0 !important;
  background: none !important;
}

.menu-news-item::before{
  display: none;
}

.menu-news-img{
  overflow: hidden;
  border-radius: 10px;
}

.menu-news-big-item .menu-news-img{
  border-radius: 15px;
}

.menu-news-item img{
  width: 70px;
  height: 70px;
  border-radius: 10px;
}

.menu-news-big-item:hover .menu-news-img img,
.menu-news-item:hover .menu-news-img img{
  transform: scale(1.1);
}

.menu-news-content{
  flex: 1;
}

.menu-news-content h6{
  font-weight: 500;
  white-space: wrap;
  margin-bottom: 5px;
  transition: var(--transition);
}

.menu-news-content h6:hover{
  color: var(--theme-color);
}

.menu-news-content span{
  color: var(--theme-color);
  font-size: 15px;
}

.menu-news-big-item{
  flex-direction: column;
  gap: 15px;
  padding: 0 !important;
  margin: 0 !important;
}

.menu-news-big-item img{
  width: 100%;
  border-radius: 15px;
}

.menu-news-big-item h6{
  font-weight: 600;
}


@media all and (max-width: 991px) {
  .mega-menu-title{
    margin-bottom: 15px;
  }

  .mega-menu-item .theme-btn{
    margin-bottom: 10px;
  }
}



/*==========================
. reel-card css 
============================*/

body{
    overflow: hidden;
}

.reel-card{
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}


.reels-wrapper::-webkit-scrollbar{
    display: none;
}

.reels-wrapper{
    height:560px;
    overflow-y:scroll;
      scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
}

.reels-wrapper::-webkit-scrollbar{
    display: none;
}

.reel-card{
    position: relative;
    width: 100%;
    height: 560px;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    scroll-snap-align: start;
}

.reel-card video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 5%,
        rgba(0,0,0,0.15) 45%,
        rgba(0,0,0,0.35) 100%
    );
 
}

.likeBtn.active i,
.big-like i {

    background: linear-gradient(45deg, #ff512f, #dd2476);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

}
.reel-top{
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reel-tag{
    background: #ff0050;
    color: #fff;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 600;
}

.reel-dots{
    display: flex;
    gap: 6px;
}

.reel-dots span{
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.reel-content {
    position: absolute;
    bottom: 25px;
    left: 20px;
    right: 85px;
    z-index: 1;
    color: #fff;
}

.reel-content h3 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.reel-content p {
    color: #f1f1f1;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* font-weight: 600; */
}

.reel-profile{
    display: flex;
    align-items: center;
    gap: 10px;
}

.reel-profile img{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.reel-profile span {
    color: #fff;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 12px;
}

.reel-icons {
    position: absolute;
    right: 18px;
    bottom: 30px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.reel-icons a {
    width: 45px;
    height: 45px;
    background: rgb(255 255 255 / 40%) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 19px;
    border: 1px solid #e0e0e04a !important;
    backdrop-filter: blur(5px);
    box-shadow: 0px 2px 4px #8e8e8e !important;
}


.like-btn{
    color:#fff;
    transition:0.3s;
}

.like-btn.active{
    color:rgb(255, 48, 64);
}



/*==========================
21. Menu video css 
============================*/

.menu-video.mega-content{
  padding: 8px !important;
}

.menu-video-img{
  position: relative;
}

.menu-video-img img{
  border-radius: 15px;
}

.menu-video-play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  line-height: 41px;
  text-align: center;
  font-size: 18px;
  padding-left: 3px;
  background: var(--theme-color);
  color: var(--color-white) !important;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
}

.menu-video-content{
  text-transform: capitalize;
  margin-top: 15px;
}

.menu-video-content span{
  color: var(--theme-color);
}

.menu-video-content h6{
  margin-top: 8px;
}

.menu-video-content a{
  color: var(--color-dark);
}

.menu-video-content a:hover{
  color: var(--theme-color);
}

.menu-video-slider.owl-theme .owl-nav button{
  color: var(--color-white);
  font-size: 25px;
  background: var(--theme-color);
  height: 40px;
  width: 40px;
  line-height: 41px;
  text-align: center;
  border-radius: 50%;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: all .5s ease-in-out;
}

.menu-video-slider.owl-theme .owl-nav .owl-prev {
  left: 5px;
}

.menu-video-slider.owl-theme .owl-nav .owl-next {
  right: 5px;
}




/*====================
22. Main section css 
======================*/

.main {
  margin-top: 0rem;
}



/*====================
23. Hero news css 
======================*/

.hero-news .news-item{
  position: relative;
}

.hero-news .news-item:before {
    content: "";
    position: absolute;
    height: 35%;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(180deg, #00000047, #010523ed);
    border-radius: 15px;
    z-index: 1;
}
.hero-news .news-img{
  overflow: hidden;
  border-radius: 15px;
}


.news-img a{
  width: 100%;
}
.hero-news .news-img img {
    border-radius: 15px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 260px;
}

.hero-news .news-item:hover .news-img img{
  transform: scale(1.1);
}

.hero-news .news-item.mid .news-img img{
  width: 100%;
  height: 276px;
  object-fit: cover;
}

.hero-news .news-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 5px;
}

.hero-news .news-meta .news-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.hero-news .news-meta .news-author img{
  width: 40px;
  border-radius: 50px;
}

.hero-news .news-content {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 20px;
    z-index: 1;
}

.hero-news .news-content h4{
  margin-top: 2px;
}

.news-content .badge{
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0px;
}

.hero-news .news-content h4 a {
    font-size: 18px;
    color: var(--color-white);
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.hero-news .news-item.big .news-content h4 a{
  font-size: 25px;
}

.hero-news .news-content p{
  color: #e2e2e2;
}

.hero-news .news-content .news-author a {
    color: var(--color-white);
    text-transform: capitalize;
}
.hero-news .news-content .news-date {
    color: var(--color-white);
    font-size: 11px;
}

.hero-news .news-content .news-meta i{
  margin-right: 5px;
}

/* hero slider 1 */
.hero-slider-1 .owl-dots {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-slider-1 .owl-dots .owl-dot span {
  background: var(--color-white);
  margin: 5px;
  border-radius: 10px;
  width: 15px;
  height: 7px;
  display: inline-block;
  transition: var(--transition);
}

.hero-slider-1 .owl-dots .owl-dot.active span {
  background-color: var(--color-white);
  width: 8px;
}

/* hero slider 2 */
.hero-slider-2.owl-theme .owl-nav [class*=owl-] {
  color: var(--color-white);
  font-size: 25px;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .4);
  display: inline-block;
  cursor: pointer;
  height: 48px;
  width: 48px;
  line-height: 48px;
  border-radius: 50px;
  text-align: center;
  transition: var(--transition);
}

.hero-slider-2.owl-theme .owl-nav [class*=owl-]:hover {
  background: var(--color-white);
  color: var(--theme-color);
}

.hero-slider-2.owl-theme .owl-nav .owl-prev {
  left: 20px;
}

.hero-slider-2.owl-theme .owl-nav .owl-next {
  right: 20px;
}

.hero-slider-2.owl-theme .owl-nav .owl-prev,
.hero-slider-2.owl-theme .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

@media all and (max-width: 767px) {
   .hero-news.pt-40.pb-50 {
  padding: 10px;
}
  .home-3 .hero-news .hero-slider-2 .news-img img{
    width: 100%;
    height: 500px;
    object-fit: cover;
  }
}



/*===================
24. Author main css
=====================*/
.author-main-content {
  display: flex;
  justify-content: start;
  align-items: center;
  background: var(--theme-bg-light);
  margin-bottom: 50px;
  padding: 20px;
  border-radius: 15px;
}

.author-main-content .author-img img {
  border-radius: 15px;
  width: 340px;
}

.author-main-content .author-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.author-main-content .author-meta li i{
  color: var(--theme-color);
  margin-right: 5px;
}

.author-main-content .author-name {
  font-size: 22px;
  color: var(--theme-color);
  margin-bottom: 8px;
}

.author-main-content .author-info {
  padding: 0 20px;
}

.author-main-content .author-social {
  margin-top: 10px;
}

.author-main-content .author-social a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}

.author-main-content .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

@media all and (max-width: 991px) {
  .author-main-content{
    flex-direction: column;
    gap: 20px;
  }

  .author-main-content .author-info{
    text-align: center;
  }

  .author-main-content .author-meta{
    justify-content: center;
  }
}



/*===================
25. News main css
=====================*/

.news-main{
  position: relative;
}

.news-wrap {
    margin-bottom: 10px;
}


/* news-1 */
.news-1 .news-item{
  position: relative;
}

.news-1 .news-img{
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.news-1 .news-img img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    height: 165px;
}

.news-1 .news-item:hover .news-img img{
  transform: scale(1.1);
}


.news-1 .news-img .badge{
  position: absolute;
  right: 15px;
  top: 15px;
  display: inline-block;
  width: fit-content;
}

.news-1 .news-item .news-content{
  margin-top: 10px;
}

.news-1 .news-item .news-content h5 a {
    font-size: 15px;
    font-weight: 500;
}

.news-1 .news-item .news-content h5 a:hover{
  color: var(--theme-color2);
}

.news-1 .news-item .news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 0px;
    justify-content: space-between;
}

.news-1 .news-item .news-author a {
    color: var(--theme-color);
    font-size: 11px;
}

.news-1 .news-item .news-author a:hover{
  color: var(--theme-color2);
}

.news-1 .news-item .news-author img{
  width: 35px;
  border-radius: 50px;
  margin-right: 5px;
}

.news-1 .news-item .news-date {
    color: var(--body-text-color);
    font-size: 11px;
}
.news-1.inline .news-item{
  display: flex;
  align-items: center;
  gap: 20px;
}

.news-1.inline .news-item .news-img img{
  width: 260px;
}

.news-1.inline .news-item .news-content{
  margin-top: 0;
  flex: 1;
}

.news-slider-1 .owl-nav{
  position: absolute;
  right: 0;
  top: -65px;
  padding: 0px 10px;
  color: var(--color-white);
}

.news-slider-1 .owl-nav::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border-radius: 10px;
  transform: skewX(-10deg);
  z-index: -1;
}

.news-slider-1 .owl-nav::after{
  content: "|";
  position: absolute;
  left: 50%;
  top: -1.1px;
  color: var(--color-white);
  transform: translateX(-50%);
  opacity: .3;
  z-index: -1;
}

.news-slider-1 .owl-nav .owl-prev{
  margin-right: 15px;
}

@media all and (max-width: 991px) {
  .news-1.inline .news-item{
    flex-direction: column;
    align-items: unset;
  }

  .news-1 .news-img img{
    width: 100% !important;
  }
}


/* news-2 */
.news-2 .nav{
  background: var(--theme-bg-light);
  border-radius: 8px;
  padding: 5px;
  gap: 8px;
}

.news-2 .nav .nav-link {
    padding: 0 7px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-dark);
}

.news-2 .nav .nav-link.active{
  color: var(--color-white);
  background: var(--theme-color2);
}

.news-2 .nav .dropdown-menu{
  border-radius: 10px;
  border: none;
  background: var(--body-bg);
  box-shadow: var(--box-shadow);
  padding: 5px;
}

.news-2 .nav .dropdown-menu .dropdown-item{
  color: var(--color-dark);
  font-weight: 500;
  border-radius: 10px;
}

.news-2 .nav .dropdown-menu .dropdown-item:hover{
  background: var(--theme-color);
  color: var(--color-white);
}

.news-2 .news-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 12px;
    margin: 13px 0;
    border-bottom: 1px dashed var(--border-info-color);
}

.news-2 .news-item:first-child{
  margin-top: 0;
}

.news-2 .news-item:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.news-2 .news-item .news-img{
  overflow: hidden;
  border-radius: 10px !important;
}

.news-2 .news-item .news-img img{
    width: 100px;
    border-radius: 10px !important;
    object-fit: cover;
    object-position: center;
    height: 70px;
}

.news-2 .news-item:hover .news-img img{
  transform: scale(1.1);
}

.news-2 .news-item .news-content{
  flex: 1;
}

.news-2 .news-item .news-content h6 {
    font-size: 16px;
    margin-bottom: 5px;
}

.news-2 .news-item .news-content h6 a {
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 500;
}

.news-2 .news-item .news-content h6 a:hover{
  color: var(--theme-color2);
}

.news-2 .news-item .news-info{
  display: flex;
  align-items: center;
  gap: 15px;
}

.news-2 .news-item .news-info a{
  color: var(--theme-color);
}

.news-2 .news-item .news-info a:hover{
  color: var(--theme-color2);
}

.news-2 .news-item .news-info span {
    color: var(--body-text-color);
    font-size: 11px;
}

.news-2 .news-item.big{
  flex-direction: column;
  align-items: flex-start;
}

.news-2 .news-item.big .news-img{
  width: 100%;
}

.news-2 .news-item.big .news-img img{
  width: 100%;
  height: 255px;
  object-fit: cover;
  border-radius: 15px;
} 

/* news-3 */

.news-3 .news-img img {
    border-radius: 15px;
    height: 315px;
    width: 100%;
    object-fit: cover;
}

.news-3 .news-item .news-content h6 a {
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 500;
}

.news-3 .news-item .news-content h6 a:hover{
  color: var(--theme-color);
}

.news-3 .news-item .news-info{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 5px;
}

.news-3 .news-item.sm{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--border-info-color);
}

.news-3 .news-item.sm:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.news-3 .news-item.sm .news-img img{
  width: 100px;
  height: 55px;
}

.news-3 .news-item.sm .news-content{
  flex: 1;
}

.news-3 .news-item.mid{
  margin-top: 20px;
}

.news-3 .news-item.mid .news-img img{
  width: 100%;
  height: 155px;
  object-fit: cover;
   object-position: center;
}

.news-3 .news-item.mid:first-child{
  margin-top: 0;
}

.news-3 .news-item.mid .news-content{
  margin-top: 10px;
}

.news-3 .news-item.mid .news-info{
  margin-top: 10px;
  margin-bottom: 0;
}

.news-3 .news-item.big .news-content{
  margin-top: 15px;
}

.news-3 .news-item.big .news-content h6 a{
  font-size: 22px;
}

.news-3 .news-item.big .news-content p{
  margin-top: 14px;
}

.news-3 .news-item.big .news-info{
  margin-top: 15px;
  margin-bottom: 0;
}

/* news-video */
.news-video .news-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55px;
    height: 40px;
    line-height: 40px;
    color: #ec1e3a;
    font-size: 22px;
    box-shadow: 0px 0px 6px pink;
    text-align: center;
    padding-left: 4px;
    background: #fffdfd;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px 7px rgb(0 0 0 / 58%);
    z-index: 1;
}

.news-2 .news-item .news-content h5{
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 10px;
}

.news-info .date{
    font-size:11px;
}

/* news-banner */
.news-banner {
    /*margin-bottom: 30px;*/
}

.featured-news {
    margin-top: 40px;
}
.news-banner{
    /*margin-top: 30px;*/
}
.category-news{
        margin-top: 40px;
}

.international-news{
     margin-top: 40px;
}

.cate_n_second {
    margin-top: 10px;
}
.news-banner img{
  border-radius: 15px;
}

.news-video{
        margin-top: 40px;
}
.today-news{
        margin-top: 40px;
}

.more-news{
    margin-top: 40px;
}

.news-photo{
    margin-top: 40px;
}
/* category-news */
.category-news-1.news-2 .news-img{
  border-radius: 50%;
}

.category-news-1.news-2 .news-img img{
  border-radius: 50%;
}

.category-news-1.news-2 .big .news-img{
  border-radius: 15px;
}

.category-news-slider .owl-nav{
  position: absolute;
  right: 0;
  top: -65px;
  padding: 0px 10px;
  color: var(--color-white);
}

.category-news-slider .owl-nav::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border-radius: 10px;
  transform: skewX(-10deg);
  z-index: -1;
}

.category-news-slider .owl-nav::after{
  content: "|";
  position: absolute;
  left: 50%;
  top: -1.1px;
  color: var(--color-white);
  transform: translateX(-50%);
  opacity: .3;
  z-index: -1;
}

.category-news-slider .owl-nav .owl-prev{
  margin-right: 15px;
}

/* news-photo */
.news-photo .photo-item{
  position: relative;
}

.news-photo .photo-item.big img{
  width: 100%;
  height: 355px;
  object-fit: cover;
}

.news-photo img{
  border-radius: 15px;
}

.news-photo .photo-item .popup-img{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--theme-color2);
  color: var(--color-white);
  border-radius: 50px;
  box-shadow: var(--box-shadow);
}



/*===================
26. News sidebar css
=====================*/

.news-sidebar{
  position: relative;
}

.news-sidebar-widget{
    margin-bottom: 20px;
    margin-top: 15px;
}

.news-sidebar-widget .title{
  font-size: 22px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 5px double var(--border-info-color);
}

.news-sidebar .social{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.news-sidebar .social a {
    display: flex;
    align-items: center;
    background: var(--theme-color);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
}

/* sidebar search */
.news-sidebar .search-form .form-group{
  position: relative;
}

.news-sidebar .search-form .form-control {
  padding: 12px 15px 12px 20px;
  border-radius: 10px;
  box-shadow: none;
  color: var(--color-dark);
  border-color: var(--border-info-color);
  background-color: var(--body-bg);
}

.news-sidebar .search-form .form-control::placeholder{
  color: var(--color-dark);
}

.news-sidebar .search-form .form-control:focus {
  border-color: var(--theme-color);
}

.news-sidebar .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 8px 18px 6px 18px;
  background: transparent;
  border: none;
  color: var(--theme-color);
}


/* sidebar social */
.news-sidebar .social a i {
    width: 18px;
    margin-right: 6px;
    border-right: 1px solid rgba(255, 255, 255, .4);
}

.news-sidebar .social .fb{
  background: #0866FF;
}

.news-sidebar .social .tw{
  background: #50ABF1;
}

.news-sidebar .social .in{
  background: #9B45D5;
}

.news-sidebar .social .yt{
  background: #FF0808;
}

.news-sidebar .social .rss{
  background: #F26522;
}

.news-sidebar .social .ld{
  background: #0A88B3;
}


/* sidebar news */
.sidebar-news .nav{
  background: var(--theme-bg-light);
  border-radius: 10px;
  padding: 5px;
}

.sidebar-news .nav .nav-link {
    border-radius: 10px;
    font-weight: 500;
    padding: 6px 5px;
    font-size: 14px;
    color: var(--color-dark);
}
.sidebar-news .nav .nav-link.active{
  color: var(--color-white);
  background: var(--theme-color);
}

.sidebar-news .tab-content-news{
  margin-top: 30px;
}

.sidebar-news .news-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 12px;
    margin: 13px 0;
    border-bottom: 1px dashed var(--border-info-color);
}

.sidebar-news .news-item:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sidebar-news .news-item .news-img {
    overflow: hidden;
    border-radius: 10px;
}

.sidebar-news .news-item .news-img img {
    width: 100px !important;
    border-radius: 10px;
    height:75px;
    object-fit: cover;
}
.sidebar-news .news-item:hover .news-img img{
  transform: scale(1.1);
}

.sidebar-news .news-item .news-content{
  flex: 1;
}

.sidebar-news .news-item .news-content h6 {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 500;
}

.sidebar-news .news-item .news-content h6 a {
    color: var(--color-dark);
    font-size: 15px;
}

.sidebar-news .news-item .news-content h6 a:hover{
  color: var(--theme-color2);
}

.sidebar-news .news-item .news-info{
  display: flex;
  align-items: center;
  gap: 15px;
}

.sidebar-news .news-item .news-info a{
  color: var(--theme-color);
  font-size:11px;
}

.sidebar-news .news-item .news-info a:hover{
  color: var(--theme-color2);
   
}

.sidebar-news .news-item .news-info span{
  color: var(--body-text-color);
  font-size:11px;
}


/* sidebar banner */
.news-sidebar .banner img{
  border-radius: 15px;
}

/* sidebar tags */
.news-sidebar .tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-sidebar .tags a {
    color: var(--color-dark);
    padding: 1px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-info-color);
    font-size: 14px;
}

.news-sidebar .tags a:hover{
  background: var(--theme-color);
  color: var(--color-white);
}


/* sidebar download */
.news-sidebar .download-app h6{
  margin-bottom: 3px;
}

.news-sidebar .download{
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.news-sidebar .download a{
  box-shadow: var(--box-shadow);
}

/* sidebar newsletter */
 .newsletter{
  background: var(--theme-bg-light);
  border-radius: 15px;
  padding: 15px;
}

 .newsletter .icon{
  text-align: center;
  margin-bottom: 10px;
}

 .newsletter .icon i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    background: var(--theme-color);
    color: var(--color-white);
    border-radius: 50px;
    box-shadow: var(--box-shadow);
}

 .newsletter .top-text h4 {
    /*margin-bottom: 5px;*/
    font-size: 16px;
}

.newsletter .top-text{
  text-align: center;
  margin-bottom: 10px;
}

 .newsletter .form-group{
  margin-bottom: 7px;
}

.newsletter .form-control{
  padding: 9px 18px;
  border-radius: 10px;
  box-shadow: none;
  border-color: var(--border-info-color);
  color: var(--color-dark);
  background: var(--body-bg);
}

 .newsletter .form-control::placeholder{
  color: var(--body-text-color);
}

.newsletter .form-control:focus{
  border-color: var(--theme-color);
}

.newsletter .form-check-label {
    color: var(--body-text-color);
    font-size: 14px;
}

 .newsletter .form-check-input{
  margin-top: 7px;
  box-shadow: none;
  border-radius: 5px;
  background-color: var(--body-bg);
  border-color: var(--border-info-color);
}

.newsletter .form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
.today-news .news-banner{
    margin:0px !important;
}
.news-photo-wrap .news-banner{
    margin:0px !important;
}

/* sidebar topic */
.news-sidebar .topic{
  background: var(--theme-bg-light);
  padding: 20px;
  border-radius: 15px;
}

.news-sidebar .topic a{
  display: block;
  color: var(--color-dark);
  margin-bottom: 15px;
}

.news-sidebar .topic a:last-child{
  margin-bottom: 0;
}

.news-sidebar .topic a:hover{
  color: var(--theme-color);
}

.news-sidebar .topic a i{
  margin-right: 8px;
}

.news-sidebar .topic a span{
  float: right;
}




/*===================
27. News single
=====================*/
.news-single{
  position: relative;
}

.news-single-img{
  position: relative;
}

.news-single-img img{
  border-radius: 15px;
}

.news-single-img .badge{
  position: absolute;
  right: 15px;
  top: 15px;
  box-shadow: var(--box-shadow);
}

.news-single-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 1px;
    margin-bottom: 10px;
}


.news-single-meta ul{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.news-single-meta i{
  color: var(--theme-color);
}
.news_title{
        font-size: 25px;
    font-weight: 500;
}

.socila_icon {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
    color: #fff !important;
    margin-right: 3px;
     margin-right: 7px;
}

.pit.socila_icon {
        background: #ca0648;
}
.like.socila_icon{
    background: #1877F2;
}
.socila_icon2 {
    width: 105px;
    height: 30px;
    font-size: 13px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
    color: #fff !important;
    margin-right: 7px;
}

.socila_icon2 i{
    font-size: 17px;
    margin-right: 3px;
}
.fb.socila_icon2 {
    background: #0777d9;
    color: #fff;
}

.tw.socila_icon2{
        background: #3da4ff;
}
.yt.socila_icon {
        background: #ed1f0f;
}
.prt.socila_icon{
        background: #38393b;
}

.news-single-content{
        margin-top: 22px;
}

.in.socila_icon{
       background: linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
}

.ld.socila_icon {
        background: #02539a;
}
.news-single-meta a {
    color: var(--body-text-color);
    font-weight: 400;
    font-size: 12px;
    text-transform: capitalize;
}
.news-single-meta a:hover{
  color: var(--theme-color);
}

.news-single-meta .like-link{
  margin-right: 12px;
}

.news-single-content .title {
    color: var(--color-dark);
    font-size: 25px;
    font-weight: 500;
}

.news-single-info{
  margin-top: 7px;
}

.news-single-info .blockqoute {
  background: var(--theme-bg-light);
  border-left: 5px solid var(--theme-color);
  padding: 30px;
  font-size: 17px;
  font-style: italic;
  margin: 20px 0;
  border-radius: 0px;
  position: relative;
}

.news-single-info .blockqoute-icon{
  position: absolute;
  right: 20px;
  bottom: 5px;
  color: var(--theme-color);
  font-size: 70px;
}

.news-single-info .blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
  color:  var(--color-dark);
}

.news-single-info .blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--theme-color);
  left: 0;
  top: 10px;
}

.news-single-info .more-img img{
  border-radius: 15px;
}

.news-single-info .tags {
  display: flex;
  align-items: center;
  gap: 20px;
}

.news-single-info .tags h5 {
    color: var(--color-dark);
    font-weight: 500;
    font-size: 14px;
}

.news-single-info .tags ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

.play-btn222 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 38px;
    height: 25px;
    border: none;
    border-radius: 24%;
    background: #ff1c1c;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.news-single-info .tags ul a {
    background: #fff6f6;
    color: var(--color-dark);
    padding: 2px 14px;
    font-size: 13px;
    border-radius: 5px;
    transition: var(--transition);
    border: 1px solid #e0e0e0;
}

.news-single-info .tags ul a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.news-single-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  border: 1px solid var(--border-info-color);
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.news-single-pagination::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  bottom: 15px;
  width: 1px;
  border-left: 1px solid var(--border-info-color);
}

.news-single-pagination a{
  display: flex;
  align-items: center;
  gap: 15px;
}

.news-single-pagination a img{
  width: 90px;
  border-radius: 10px;
}

.news-single-pagination a:last-child{
  text-align: end;
}

.news-single-pagination a h6{
  color: var(--color-dark);
  transition: var(--transition);
}

.news-single-pagination a:hover h6{
  color: var(--theme-color);
}

.news-single-pagination a span{
  font-weight: 500;
  color: var(--theme-color);
  transition: var(--transition);
}

.news-single-pagination a:hover span{
  color: var(--theme-color2);
}

.news-single-author {
  display: flex;
  justify-content: start;
  align-items: center;
  background: var(--theme-bg-light);
  margin: 50px 0;
  padding: 20px;
  border-radius: 15px;
}

.news-single-author .author-img {
  width: 320px;
}

.news-single-author .author-img img {
  border-radius: 15px;
}

.news-single-author .author-name {
  font-size: 22px;
  color: var(--theme-color);
  margin: 8px 0;
}

.news-single-author .author-info {
  padding: 0 20px;
}

.news-single-author .author-social {
  margin-top: 10px;
}

.news-single-author .author-social a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}

.news-single-author .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

.news-single-comments h3 {
    color: var(--color-dark);
    font-size: 16px;
    color: #c90a12;
}

.news-single-comments .comments-wrap {
  margin: 10px 0;
}

.news-single-comments .comments-single {
  display: flex;
  justify-content: start;
  align-items: flex-start;
  margin-top: 9px;
}
.news_img{
    border-radius: 10px;
}
.news-single-comments .comments-single img {
  border-radius: 50%;
}

.news-single-comments .comments-content {
  padding: 0 0 0 20px;
}

.news-single-comments .comments-content span {
    font-size: 11px;
    color: var(--theme-color);
    font-weight: 400;
}
.news-single-comments .comments-content a {
    font-weight: 500;
    margin-top: 5px;
    color: var(--theme-color);
    font-size: 12px;
}
.news-single-comments .comments-content a:hover {
  color:  var(--color-dark);
}

.news-single-comments .comments-content h5 {
    color: var(--color-dark);
    font-size: 14px;
    font-weight: 500;
}

.news-single-comments .comments-reply {
  margin-left: 50px;
}

.news-single-comments .comments-form {
  padding: 30px;
  margin-top: 50px;
  border-radius: 15px;
  background: var(--theme-bg-light);
}

.news-single-comments .comments-form h3 {
  margin-bottom: 20px;
}

.news-single-comments .comments-form .input-group{
  margin-bottom: 22px;
}

.news-single-comments .comments-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.news-single-comments .comments-form .input-group.textarea:focus-within{
  border-radius: 30px;
}

.news-single-comments .comments-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--body-bg);
}

.news-single-comments .comments-form .input-group .nice-select{
  line-height: 25px;
}

.news-single-comments .comments-form .input-group .form-control,
.news-single-comments .comments-form .input-group .form-select,
.news-single-comments .comments-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.news-single-comments .comments-form .input-group .input-group-text{
  background: var(--body-bg);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.news-single-comments .comments-form .input-group.textarea .input-group-text,
.news-single-comments .comments-form .input-group.textarea .form-control{
  border-radius: 30px;
}

.news-single-comments .comments-form .input-group.textarea .input-group-text{
  align-items: flex-start;
  padding-top: 20px;
}

@media all and (max-width: 991px) {
  .news-single .news-sidebar{
    margin-top: 50px;
  }
}

@media all and (max-width: 767px) {
  .news-single-pagination{
    flex-direction: column;
  }

  .news-single-pagination::before{
    display: none;
  }

  .news-single-info .tags {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-single-author {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .news-single-author .author-info{
    margin-top: 25px;
  }

  .news-single-comments .comments-single {
    flex-direction: column;
    text-align: center;
    padding: 30px 0px;
    background: var(--body-bg2);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border-radius: 15px;
  }

  .news-single-comments .comments-single img{
    margin: 0 auto 20px auto;
  }

  .news-single-comments .comments-reply {
    margin-left: 0px;
  }
}



/*===================
28. News topic css
=====================*/

.news-topic .topic-img{
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.news-topic .topic-img img{
  border-radius: 15px;
}

.news-topic .topic-item:hover .topic-img img{
  transform: scale(1.1);
}

.news-topic .topic-content{
  margin-top: 10px;
}

.news-topic .topic-content h5 a{
  color: var(--color-dark);
}

.news-topic .topic-content h5 a:hover{
  color: var(--theme-color);
}

.news-topic .topic-content span{
  color: var(--theme-color);
}

.news-topic-slider .owl-nav{
  position: absolute;
  right: 0;
  top: -65px;
  padding: 0px 10px;
  color: var(--color-white);
}

.news-topic-slider .owl-nav::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border-radius: 10px;
  transform: skewX(-10deg);
  z-index: -1;
}

.news-topic-slider .owl-nav::after{
  content: "|";
  position: absolute;
  left: 50%;
  top: -1.1px;
  color: var(--color-white);
  transform: translateX(-50%);
  opacity: .3;
  z-index: -1;
}

.news-topic-slider .owl-nav .owl-prev{
  margin-right: 15px;
}



/*===================
29. Play btn
=====================*/

.play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  background: var(--theme-color);
  color: var(--color-white) !important;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.play-btn i::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--theme-color);
  border-radius: 50px;
  animation: ripple-wave 1s linear infinite;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}

@keyframes ripple-wave {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}



/* ===================
30. Top news css 
====================== */

.top-news{
  position: relative;
}
.top-news-wrap {
    background: #E89B00;
    border-radius: 1px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0px 4px 5px #e9e9e987;
    background: linear-gradient(90deg, #262728, #272930);
}
.top-news-content{
  display: flex;
  align-items: center;
}

.trending-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 4px 18px 4px 6px;
    background: linear-gradient(135deg, #fe1010, #d80000);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    border-radius: 0px 0 0 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 1;
}
/* White diagonal stripe */
.trending-badge::before {
    content: "";
    position: absolute;
    top: 0;
    right: 9px;
    width: 4px;
    z-index: 22;
    height: 100%;
    background: #ffffff;
    transform: skewX(-20deg);
}
/* Red diagonal stripe */
.trending-badge::after {
    content: "";
    position: absolute;
    top: 0;
    right: 4px;
    width: 8px;
    height: 100%;
    background: #ff2b2b;
    transform: skewX(-20deg);
}

/* Blue angled end */
.trending-badge .trending-text::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -40px;
    width: 29px;
    height: 50px;
    background: #262729;
    transform: skewX(-20deg);
    z-index: 0;
}

/* Keep text above decorative elements */
.trending-icon,
.trending-text {
    position: relative;
    z-index: 2;
}

.trending-icon {
    font-size: 20px;
    line-height: 1;
}


.instagram-img img{
    height:90px !important;
}


.trending-text {
    position: relative;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.top-news-head {
    position: relative;
    background: #cd4545;
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 1px;
    padding: 7px 15px 7px 16px;
    border-radius: 0 0px 0px 0;
    font-size: 14px;
}

.top-news-head::before {
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    border: 10px solid #1f44a7;
    border-right-color: transparent;
}

.top-news-head span i{
  margin-left: 8px;
}

.top-news-content .ticker-info{
  max-width: calc(100% - 192px);
  padding-left: 5px;
}

.top-news-content .ticker li a {
    font-size: 13px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 0px;
    margin-left: 5px;
}
.top-news-content .ticker li a i {
    color: #e2c08f;
    font-size: 11px;
    margin-right: 10px;
}

@media all and (max-width: 991px) {
  .top-news{
    margin-top: 40px;
  }

  .top-news-head{
    font-size: 12px;
    padding: 6px 7px;
  }

  .top-news-head::before{
    border-width: 5px;
  }

  .top-news-head span i{
    margin-left: 2px;
  }

  .top-news-content .ticker li a{
    font-size: 12px;
  }

  .top-news-content .ticker-info{
    max-width: calc(100% - 135px);
    padding-left: 5px;
  }
}



/* ===================
31. About Section css 
====================== */


 .about-section{
    padding:50px 0;
    background:#fff;
    overflow:hidden;
    position:relative;
    font-family:"Poppins", sans-serif;
}

  .about-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

.about-image{
    flex:1;
    min-width:320px;
    position:relative;
}

.image-box{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    z-index:2;
    box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.image-box img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:28px;
}

.red-shape{
    width:90px;
    height:160px;
    background:#cc1519;
    position:absolute;
    left:-20px;
    bottom:-20px;
    border-radius:20px;
    z-index:1;
}

.media-badge{
    position:absolute;
    right:-25px;
    top:120px;
    width:100px;
    height:100px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:13px;
    font-weight:700;
    color:#cc1519;
    line-height:1.4;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.shape-dots{
    position:absolute;
    top:-30px;
    left:-20px;
    width:90px;
    height:90px;
    background-image:radial-gradient(#cc1519 2px, transparent 2px);
    background-size:12px 12px;
}

.about-content{
    flex:1;
    min-width:320px;
}

.about-subtitle{
    color:#cc1519;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    position:relative;
   
    text-transform:uppercase;
}

.about-content h2{
    font-size: 39px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    margin: 12px 0 16px;

}

.about-content h2 span{
    color:#cc1519;
}

.title-line{
    width:60px;
    height:3px;
    background:#cc1519;
    border-radius:10px;
    margin-bottom:20px;
}

.about-content p{
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 18px;

}



.about-btns{
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:30px;
    flex-wrap:wrap;
}

.journey-btn{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#222;
    font-size:15px;
    font-weight:600;
}

.journey-btn i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#cc1519;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}


@media(max-width:991px){

    .about-wrapper{
        flex-direction:column;
    }

    .about-content h2{
        font-size:38px;
    }

    .image-box img{
        height:420px;
    }

    .info-boxes{
        gap:20px;
    }

    .info-box{
        border-right:none;
        border-bottom:1px solid #eee;
        padding-bottom:20px;
    }

    .info-box:last-child{
        border-bottom:none;
    }

}

@media(max-width:576px){

    .about-section{
        padding:40px 0;
    }

    .about-content h2{
        font-size:24px;
    }

    .about-content p{
        font-size:13px;
    }

    .image-box img{
        height:320px;
    }

    .media-badge{
        width:80px;
        height:80px;
        font-size:11px;
        right:-10px;
    }

    .about-btn{
        width:100%;
        justify-content:center;
    }
    
    .site-heading .site-title {
        font-size:20px;
    }
    .mission-vision-section {
        padding-top:0px;
    }
}







/* ===================
31. About css 
====================== */

.about-area {
  position: relative;
  display: block;
}

.about-left {
  position: relative;
  display: block;
  margin-right: 30px;
}

.about-img{
  position: relative;
}

.about-img::before{
  content: "";
  position: absolute;
  border: 5px solid var(--theme-color);
  border-radius: 20px;
  right: -30px;
  top: 50px;
  bottom: 50px;
  width: 50%;
  z-index: -1;
}

.about-img img{
  border-radius: 15px;
}

.about-right {
  position: relative;
  display: block;
  padding-left: 30px;
}

.about-experience{
  background: var(--theme-color);
  box-shadow: var(--box-shadow);
  position: absolute;
  left: -30px;
  bottom: 80px;
  padding: 40px 20px;
  border-radius: 10px;
  text-align: center;
}

.about-experience h5{
  color: var(--color-white);
  font-size: 20px;
}

.about-experience span{
  color: var(--color-white);
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
}

.about-list-wrapper {
  position: relative;
  display: block;
  margin-top: 25px;
  margin-bottom: 35px;
}

.about-list {
  position: relative;
  display: block;
}

.about-list li {
  position: relative;
  display: flex;
  align-items: center;
}

.about-list li+li {
  margin-top: 25px;
}

.about-list li .icon {
  width: 60px;
  height: 60px;
  line-height: 58px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
}

.about-list li .icon img{
  width: 38px;
  filter: brightness(0) invert(1);
}

.about-list li .content {
  margin-left: 16px;
}

.about-list li .content h4{
  font-size: 18px;
  color: var(--color-dark);
}

.about-list li .content p {
  margin-top: 5px;
}

@media all and (max-width: 991px) {
  .about-right {
    margin-top: 30px;
  }

  .about-img img{
    width: 100%;
  }

}

@media all and (max-width: 767px) {
  .about-title {
    font-size: 30px;
  }
  .about-left {
    margin-right: 0;
  }
  .about-left-content {
    bottom: -70px;
  }
  .about-img{
    width: 90%;
  }
  .about-experience{
    left: -7px;
  }
}




/* ===================
32. Instagram css 
====================== */

.instagram-area{
  position: relative;
}

.instagram-item {
    position: relative;
    margin: 5px 5px;
}
.owl-carousel .owl-item img {
    border-radius: 10px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 220px;

}

.news-1 .news-item .news-content h4 a {
  font-size: 18px;
    font-weight: 600;
}

.instagram-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  z-index: 0;
  transition: 0.4s;
}

.instagram-item a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  background: var(--theme-color);
  color: var(--color-white);
  font-size: 20px;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  z-index: 2;
  transition: 0.4s;
  transform: translate(-50%, -50%);
}

.instagram-item:hover::after {
  width: 100%;
  opacity: 1;
}

.instagram-item:hover a {
  visibility: visible;
  opacity: 1;
}



/*====================
33. Feature css 
======================*/

.feature-area {
  position: relative;
}
.feature-item {
    padding: 15px 10px;
    text-align: center;
    position: relative;
    background: var(--body-bg2);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    z-index: 1;
    height:100%;
}

.feature-item:hover{
  transform: translateY(-10px);
}

.feature-item p{
        font-size: 13px;
    line-height: 19px;
}

.feature-item .count {
    font-size: 65px;
    font-weight: 400;
    -webkit-text-stroke: 2px var(--theme-color2);
    -webkit-text-fill-color: transparent;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%);
    opacity: .1;
    z-index: -1;
}

.feature-icon {
    margin-bottom: 7px;
    transition: var(--transition);
    font-size: 25px;
    color: #de0d17;
}

.feature-icon img {
  width: 70px;
}

.feature-item:hover .feature-icon {
  transform: rotateY(360deg);
}

.feature-item h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 5px;
}



/* ===================
34. Counter css 
====================== */

.counter-area {
    position: relative;
    background: var(--theme-color);
    z-index: 1;
    padding: 25px 30px;
    border-radius: 10px;
}

.counter-area::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/counter.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  border-radius: 15px;
}
.counter-box{
      text-align: center;
}
.counter-box .icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 19px;
    border-radius: 50px;
    text-align: center;
    color: var(--color-white);
    background: #bc030b;
    position: relative;
    margin: auto;
}

.counter-box .icon img{
  width: 38px;
  filter: brightness(0) invert(1);
}

.counter-box .counter {
    display: block;
    line-height: 1;
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
    margin-top: 12px;
}

.counter-box .title {
    color: #ffffff;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 500;
}



/* ===================
35. Pricing css 
====================== */
.pricing-area{
  position: relative;
}

.pricing-item {
  background: var(--body-bg);
  border-radius: 15px;
  position: relative;
  padding: 40px;
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: all .5s ease-in-out;
  z-index: 1;
}

.pricing-item::before{
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: var(--theme-color);
  right: -40px;
  top: -40px;
  border-radius: 80px;
  transform: rotate(45deg);
  opacity: .1;
  transition: var(--transition);
  z-index: -1;
}

.pricing-item::after{
  content: "";
  position: absolute;
  height: 3px;
  left: 40px;
  right: 40px;
  bottom: 0;
  background: var(--theme-color);
  z-index: -1;
}

.pricing-item:hover{
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
} 

.pricing-header-wrapper{
  margin-bottom: 30px;
}

.pricing-header{
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 3px solid var(--theme-color);
}

.pricing-header h5 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  color: var(--theme-color);
}

.pricing-header p{
  color: var(--color-dark);
}

.pricing-amount{
  margin: 15px 0;
}

.pricing-amount strong {
  font-size: 50px;
  font-weight: 900;
  color: var(--color-dark);
  line-height: 1;
}

.pricing-amount-type {
  color: var(--color-dark);
  font-size: 16px;
}

.pricing-text{
  color: var(--color-dark);
  text-transform: uppercase;
  font-size: 15px;
}

.pricing-feature {
  padding: 40px 0 0 0;
}

.pricing-feature li {
  margin-bottom: 15px;
}

.pricing-feature li:last-child {
  margin-bottom: 0px;
}

.pricing-feature li i {
  color: var(--theme-color);
  margin-right: 10px;
}

.pricing-btn-wrapper .theme-btn{
  width: 100%;
}

@media all and (max-width: 991px) {
  .pricing-amount strong {
    font-size: 50px;
  }
}




/*====================
36. Video css 
======================*/

.video-content {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.video-content::before {
  content: "";
  position: absolute;
  background: rgba(3, 2, 7, .2);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  height: 420px;
  z-index: 1;
}

.video-wrapper img {
  border-radius: 12px;
}

.video-area .play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  text-align: center;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media all and (max-width: 767px) {
  .video-wrapper {
    height: 250px;
  }
}




/*====================
37. Testimonial css 
======================*/

.testimonial-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.testimonial-area::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/03.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: -1;
}

.testimonial-single {
  margin-bottom: 20px;
}

.testimonial-quote {
  background: var(--body-bg);
  padding: 40px 30px 50px 30px;
  position: relative;
  border-radius: 15px;
}

.testimonial-quote::before {
  content: "\f0dd";
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  bottom: -52px;
  left: 40px;
  font-weight: bold;
  font-size: 70px;
  color: var(--body-bg);
}

.testimonial-quote p{
  color: var(--color-dark);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
}

.testimonial-content {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  margin-left: 20px;
}

.testimonial-author-img {
  margin-right: 20px;
  width: 80px;
  padding: 5px;
  border-radius: 50px;
  border: 2px dashed var(--theme-color);
}

.testimonial-author-img img {
  border-radius: 50%;
}

.testimonial-author-info h4 {
  font-size: 20px;
  color: var(--color-dark);
}

.testimonial-author-info p {
  color: var(--theme-color);
}

.testimonial-quote-icon{
  position: absolute;
  right: 20px;
  bottom: 5px;
}

.testimonial-quote-icon i {
  font-size: 55px;
  color: var(--theme-color);
}

.testimonial-rate {
  color: var(--theme-color);
}

.testimonial-area .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.testimonial-area .owl-dots .owl-dot span {
  background: var(--theme-color);
  margin: 5px;
  border-radius: 10px;
  width: 15px;
  height: 7px;
  display: inline-block;
  transition: var(--transition);
}

.testimonial-area .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
  width: 8px;
  height: 8px;
}



/*====================
38. Cta css 
======================*/

.cta-wrapper{
  position: relative;
}

.cta-content-wrap{
  border-radius: 15px;
  padding: 35px 30px;
  position: relative;
  background-image: url(../img/shape/04.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
}

.cta-content{
  text-align: center;
}

.cta-content h1{
  color: var(--color-white);
}

.cta-content p{
  color: var(--color-white);
  margin-top: 10px;
  margin-bottom: 30px;
}



/*====================
39. Blog css 
======================*/

.blog-area{
  position: relative;
}

.blog-item{
  padding: 20px;
  background: var(--body-bg2);
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.blog-item-img{
  border-radius: 12px;
  overflow: hidden;
}

.blog-item-img img {
  border-radius: 12px;
}

.blog-item:hover .blog-item-img img{
  transform: scale(1.1);
} 

.blog-item-info {
  padding: 15px 0 0 0;
}

.blog-item-meta ul {
  margin: 0;
  margin-bottom: 14px;
  padding: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-info-color);
}

.blog-item-meta ul li {
  display: inline-block;
  margin-right: 15px;
  font-weight: 500;
  position: relative;
  color: var(--color-dark);
}

.blog-item-meta ul li i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-item-meta a{
  color: var(--color-dark);
}

.blog-item-meta a:hover {
  color: var(--theme-color);
}

.blog-title {
  font-size: 22px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.blog-item-info h4 a {
  color:  var(--color-dark);
}

.blog-item-info h4 a:hover {
  color: var(--theme-color);
}

.blog-item-info p {
  margin-bottom: 16px;
}

.blog-item-info .theme-btn {
  margin-top: 10px;
}




/*========================
40. Blog single css
==========================*/

.blog-single{
  position: relative;
}

.blog-single .blog-thumb-img {
  margin-bottom: 20px;
}

.blog-single .blog-single-content img {
  border-radius: 15px;
}

.blog-single .blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.blog-single .blog-meta-left ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-single .blog-meta-left ul li{
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-single .blog-meta a {
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta a:hover {
  color: var(--theme-color);
}

.blog-single .blog-details-title {
  font-size: 34px;
  color:  var(--color-dark);
}

.blog-single .blockqoute {
  background: var(--theme-bg-light);
  border-left: 5px solid var(--theme-color);
  padding: 30px;
  font-size: 17px;
  font-style: italic;
  margin: 20px 0;
  border-radius: 0px;
  position: relative;
}

.blog-single .blockqoute .blockqoute-icon{
  position: absolute;
  right: 20px;
  bottom: 5px;
  color: var(--theme-color);
  font-size: 70px;
}

.blog-single .blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
  color:  var(--color-dark);
}

.blog-single .blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--theme-color);
  left: 0;
  top: 10px;
}

.blog-single .blog-details-tags {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-single .blog-details-tags h5 {
  color:  var(--color-dark);
}

.blog-single .blog-details-tags ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-single .blog-details-tags ul a {
  background: var(--theme-bg-light);
  color:  var(--color-dark);
  padding: 5px 18px;
  border-radius: 50px;
  transition: var(--transition);
}

.blog-single .blog-details-tags ul a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.blog-single .blog-author {
  display: flex;
  justify-content: start;
  align-items: center;
  background: var(--theme-bg-light);
  margin: 50px 0;
  padding: 20px;
  border-radius: 15px;
}

.blog-single .blog-author-img {
  width: 320px;
}

.blog-single .blog-author-img img {
  border-radius: 15px;
}

.blog-single .author-name {
  font-size: 22px;
  color: var(--theme-color);
  margin: 8px 0;
}

.blog-single .author-info {
  padding: 0 20px;
}

.blog-single .author-social {
  margin-top: 10px;
}

.blog-single .author-social a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}

.blog-single .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

.blog-single .blog-comments h3 {
  color:  var(--color-dark);
}

.blog-single .blog-comments-wrapper {
  margin: 30px 0;
}

.blog-single .blog-comments-single {
  display: flex;
  justify-content: start;
  align-items: flex-start;
  margin-top: 50px;
}

.blog-single .blog-comments-single img {
  border-radius: 50%;
}

.blog-single .blog-comments-content {
  padding: 0 0 0 20px;
}

.blog-single .blog-comments-content span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}

.blog-single .blog-comments-content a {
  font-weight: 500;
  margin-top: 5px;
  color: var(--theme-color);
}

.blog-single .blog-comments-content a:hover {
  color:  var(--color-dark);
}

.blog-single .blog-comments-content h5 {
  color:  var(--color-dark);
}

.blog-single .blog-comments-reply {
  margin-left: 50px;
}

.blog-single .blog-comments-form {
  padding: 30px;
  margin-top: 50px;
  border-radius: 15px;
  background: var(--theme-bg-light);
}

.blog-single .blog-comments-form h3 {
  margin-bottom: 20px;
}

.blog-single .blog-comments-form .input-group{
  margin-bottom: 22px;
}

.blog-single .blog-comments-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.blog-single .blog-comments-form .input-group.textarea:focus-within{
  border-radius: 30px;
}

.blog-single .blog-comments-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--body-bg);
}

.blog-single .blog-comments-form .input-group .nice-select{
  line-height: 25px;
}

.blog-single .blog-comments-form .input-group .form-control,
.blog-single .blog-comments-form .input-group .form-select,
.blog-single .blog-comments-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.blog-single .blog-comments-form .input-group .input-group-text{
  background: var(--body-bg);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.blog-single .blog-comments-form .input-group.textarea .input-group-text,
.blog-single .blog-comments-form .input-group.textarea .form-control{
  border-radius: 30px;
}

.blog-single .blog-comments-form .input-group.textarea .input-group-text{
  align-items: flex-start;
  padding-top: 20px;
}


@media all and (max-width: 767px) {
  .blog-single .blog-meta {
    flex-direction: column;
    font-size: 15px;
  }

  .blog-single .blog-meta-left ul {
    gap: 10px;
  }

  .blog-single .blog-details-tags {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-single .blog-author {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .blog-single .author-info{
    margin-top: 25px;
  }

  .blog-single .blog-comments-single {
    flex-direction: column;
    text-align: center;
    padding: 30px 0px;
    background: var(--body-bg2);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border-radius: 15px;
  }

  .blog-single .blog-comments-single img{
    margin: 0 auto 20px auto;
  }

  .blog-single .blog-comments-reply {
    margin-left: 0px;
  }
}



/*=======================
41. Widget sidebar css
=========================*/

.widget {
  background: var(--theme-bg-light);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
}

.widget .widget-title {
  padding-bottom: 10px;
  margin-bottom: 30px;
  position: relative;
  font-size: 25px;
  color:  var(--color-dark);
}

.widget .widget-title::before {
  position: absolute;
  content: '';
  width: 15px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 0;
}

.widget .widget-title::after {
  position: absolute;
  content: '';
  width: 30px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 22px;
}

.widget .search-form .form-control {
  padding: 12px 15px 12px 20px;
  border-radius: 50px;
  box-shadow: none;
  color: var(--color-dark);
  border-color: var(--border-info-color);
  background-color: var(--body-bg);
}

.widget .search-form .form-control::placeholder{
  color: var(--color-dark);
}

.widget .search-form {
  position: relative;
}

.widget .search-form .form-control:focus {
  border-color: var(--theme-color);
}

.widget .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 8px 18px 6px 18px;
  background: transparent;
  border: none;
  color: var(--theme-color);
}

.widget .category-list a {
  display: block;
  padding: 10px 0;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--border-info-color);
  transition: var(--transition);
}

.widget .category-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.widget .category-list a:hover {
  padding-left: 10px;
  color: var(--theme-color);
}

.widget .category-list a i {
  margin-right: 5px;
  color: var(--theme-color);
}

.widget .category-list a span {
  float: right;
}

.widget .recent-post-single {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.widget .recent-post-single:last-child{
  margin-bottom: 0px;
}

.widget .recent-post-img img {
  width: 75px;
  border-radius: 15px;
}

.widget .recent-post-bio{
  flex: 1;
}

.widget .recent-post-bio h6 {
  font-size: 18px;
  font-weight: 500;
}

.widget .recent-post-bio span {
  font-size: 14px;
  color: var(--theme-color);
}

.widget .recent-post-bio span i {
  margin-right: 5px;
}

.widget .recent-post-bio h6 a:hover {
  color: var(--theme-color);
}

.widget .social-share-link a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: var(--transition);
}

.widget .social-share-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.widget .tag-list a {
  background: var(--body-bg);
  color:  var(--color-dark);
  padding: 5px 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 50px;
  display: inline-block;
  transition: var(--transition);
}

.widget .tag-list a:hover {
  background-color: var(--theme-color);
  color: var(--color-white);
}



/*===================
42. Contact us css 
=====================*/

.contact-wrapper {
  position: relative;
}

.contact-img img{
  width: 100%;
  border-radius: 15px;
}

.contact-form{
  background: var(--theme-bg-light);
  padding: 20px 25px;
  border-radius: 15px;
}

.contact-form-header {
  margin-bottom: 30px;
}

.contact-form-header h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color:  var(--color-dark);
}

.contact-form .input-group{
  margin-bottom: 22px;
}

.contact-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.contact-form .input-group.textarea:focus-within{
  border-radius: 30px;
}

.contact-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--body-bg);
}

.contact-form .input-group .nice-select{
  line-height: 25px;
}

.contact-form .input-group .form-control,
.contact-form .input-group .form-select,
.contact-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.contact-form .input-group .input-group-text{
  background: var(--body-bg);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.contact-form .input-group.textarea .input-group-text,
.contact-form .input-group.textarea .form-control{
  border-radius: 30px;
}

.contact-form .input-group.textarea .input-group-text{
  align-items: flex-start;
  padding-top: 20px;
}

.contact-form .text-success{
  color: var(--theme-color);
}

.contact-map {
  margin-bottom: -9px;
}

.contact-map iframe {
  width: 100%;
  height: 450px;
}


.contact-info {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 15px 9px;
    position: relative;
    margin-bottom: 25px;
    border-radius: 10px;
    background: #ffffff8f;
    transition: var(--transition);
    box-shadow: 0px 3px 10px #5f5d5d36;
    /*height: 100px;*/
    border: 1px solid #e2e2e2b5;
}


.contact-info:hover{
  transform: translateY(-8px)
}

.contact-info-icon i {
    font-size: 20px;
    color: var(--color-white);
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50px;
    background: var(--theme-color2);
}

.contact-info h5 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 3px;
    color: var(--color-dark);
}

.contact-info p {
    color: #787878;
    font-weight: 400;
    font-size: 14px;
}

@media all and (max-width: 768px) {
  .contact-content {
    margin-top: 50px;
    margin-bottom: 0;
  }
  
  .contact-area {
      padding-top:0px;
      padding-bottom: 0px;
  }
  .contact-info {
         margin-bottom: 20px;
        padding: 15px 9px;
}

}




/* ===================
43. Team css 
====================== */

.team-area{
  position: relative;
  overflow: hidden;
}

.team-item {
  position: relative;
  background: var(--body-bg2);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.team-item::before{
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0px;
  height: 4px;
  background: var(--theme-color);
}

.team-item:hover{
  transform: translateY(-8px);
}

.team-item img{
  border-radius: 10px;
  width: 100%;
}

.team-bio {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
}

.team-bio h5 {
  font-size: 22px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-transform: capitalize;
}

.team-bio h5 a{
  color: var(--color-dark);
}

.team-bio span{
  color: var(--theme-color);
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}

.team-bio h5 a:hover{
  color: var(--theme-color);
}

.team-social {
  position: absolute;
  margin-bottom: 10px;
  text-align: center;
  top: 25px;
  right: 0px;
  bottom: 0;
  opacity: 0;
  transition: var(--transition);
}

.team-item:hover .team-social{
  opacity: 1;
  right: 25px;
}

.team-social a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
}

.team-social a:hover {
 background: var(--theme-color);
 color: var(--color-white);
}



/*====================
44. Faq css 
======================*/

.faq-area .accordion-item {
  border: none;
  margin-bottom: 30px;
  background: var(--body-bg2);
  border-radius: 12px !important;
  box-shadow: var(--box-shadow);
}

.faq-area .accordion-item span {
  width: 45px;
  height: 45px;
  margin-right: 15px;
}

.faq-area .accordion-item i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
  color: var(--color-white);
}

.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.faq-area .accordion-button {
  border-radius: 0px !important;
  background: transparent;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-dark);
  box-shadow: none !important;
}

.faq-area .accordion-button:not(.collapsed) {
  border-bottom: 1px solid var(--theme-color);
}

.faq-area .accordion-button::after{
  content: "\f107";
  font-family: "Font Awesome 6 Pro";
  color: var(--theme-color);
  font-size: 22px;
  font-weight: 500;
  background: none;
  width: unset;
  height: unset;
}

.faq-area .accordion-body{
  color: var(--color-dark);
  font-weight: 500;
}

@media all and (max-width: 991px) {
  .faq-area .faq-right {
    margin-bottom: 50px;
  }

  .faq-area .accordion-button {
    font-size: 16px;
  }
}



/*====================
45. Breadcrumb css
======================*/

.site-breadcrumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    z-index: 1;
    background: #252627 !important;
}
.site-breadcrumb::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .6);
  z-index: -1;
}

.site-breadcrumb-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-breadcrumb .breadcrumb-title {
  font-size: 30px;
  color: var(--color-white);
  font-weight: 600;
  text-transform: capitalize;
}

.site-breadcrumb .breadcrumb-menu {
  position: relative;
  z-index: 1;
}

.site-breadcrumb .breadcrumb-menu li {
  position: relative;
  display: inline-block;
  margin-left: 25px;
  color: var(--color-white);
  font-weight: 500;
  text-transform: capitalize;
}

.site-breadcrumb .breadcrumb-menu li a {
  color: var(--color-white);
  transition: all 0.5s ease-in-out;
}

.site-breadcrumb .breadcrumb-menu li::before {
  position: absolute;
  content: '\f101';
  font-family: 'Font Awesome 6 Pro';
  right: -21px;
  top: 1px;
  text-align: center;
  font-size: 16px;
  color: var(--color-white);
}

.site-breadcrumb .breadcrumb-menu li:first-child {
  margin-left: 0;
}

.site-breadcrumb .breadcrumb-menu li:last-child:before {
  display: none;
}

.site-breadcrumb .breadcrumb-menu li a:hover {
  color: var(--theme-color);
}

.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--theme-color);
}

@media (max-width: 991px) {
  .site-breadcrumb{
    padding-top: 80px;
  }
  .site-breadcrumb-wrap{
    flex-direction: column;
  }
}


/*====================
46. Pagination css 
======================*/

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.pagination .page-link {
  border: none;
  background:  var(--theme-bg-light);
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 10px;
  border-radius: 12px !important;
  width: 40px;
  height: 40px;
  line-height: 27px;
  text-align: center;
  transition: var(--transition);
  z-index: 1;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: var(--theme-color);
  color: var(--color-white);
}



/*====================
47. Auth css 
======================*/
.login-form {
    padding: 25px;
    background: var(--body-bg2);
    border-radius: 15px;
    border: 1px solid #eaeaea;
    box-shadow: 0px 4px 15px #b8b8b842;
}

.login-form .login-header {
  text-align: center;
  margin-bottom: 5px;
}
.bpn-login-note {
    margin-top: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #d4e6ff57 0%, #ffffff 100%);
    border: 1px solid var(--bpn-border);
    padding: 9px 13px;
    color: var(--bpn-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* Divider */
.login-divider {
    position: relative;
    text-align: center;
    margin: 15px 0 11px;
}

.login-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e5e7eb;
    transform: translateY(-50%);
}

.login-divider span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #ffffff;
    /* border: 1px solid #e5e7eb; */
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

/* Register Section */
.register-section {
    text-align: center;
    margin-top: 10px;
}

.register-text {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #0f172a;
}

/* Register Button */
.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 50px;
    /*background: #ffffff;*/
    color: #e00c4f;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.register-btn i {
    font-size: 15px;
}
.login-form .login-header img {
  width: 200px;
  margin-bottom: 10px;
}

.login-form .login-header h3 {
  color: var(--theme-color);
  margin-bottom: 5px;
  font-weight: 800;
}
.login-form .login-header p {
    color: #606163;
    font-size: 14px;
    margin-top: 13px;
    margin-bottom: 6px;
}
.text_h6{
    font-size: 14px;
    font-weight: 500;
}
.login-form .login-footer {
  margin-top: 25px;
}

.login-form .login-footer p {
  color: var(--color-dark);
  text-align: center;
}

.login-form .login-footer a {
  color: var(--theme-color);
  transition: .5s;
}

.login-form .login-footer a:hover {
  color:  var(--color-dark);
}

.login-form .input-group{
  margin-bottom: 10px;
}

.login-form label {
    color: #4d4f59;
    margin-bottom: 5px;
    font-size: 13px;
}
.login-form .input-group:focus-within{
  border-radius: 6px;
}

.login-form .input-group .form-control {
    padding: 10px 15px 10px 0px;
    border-radius: 50px;
    border: none;
    box-shadow: none;
    border: 1px solid #0529924a;
    box-shadow: 0px 2px 15px rgb(229 229 229 / 36%);
    z-index: 0;
}
.login-form .input-group .nice-select{
  line-height: 25px;
}

.login-form .input-group .form-control::placeholder {
    color: #cccaca;
    font-size: 14px;
    opacity: 1; /* Firefox compatibility */
}

/* Jab user type karega to text black rahega */
.login-form .input-group .form-control,
.login-form .input-group .form-select {
    color: #000;
    font-size: 14px;
}

.login-form .input-group .input-group-text {
    background: #ffffff;
    color: var(--theme-color);
    border-radius: 50px;
    padding-left: 20px;
    border: none;
    border: 1px solid #ededed;
    box-shadow: 0px 2px 15px rgb(229 229 229 / 36%);
    border-right: 0px;
}
.login-form .form-check{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.login-form .form-check-input{
  margin: 0;
  box-shadow: none;
  border-radius: 50px;
  width: 15px;
  height: 15px;
  background-color: var(--body-bg2);
}

.login-form .form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.login-form .form-check-label{
  margin-bottom: 0;
}

.login-form .form-check-label a {
  color: var(--theme-color);
  transition: var(--transition);
}

.login-form .form-check-label a:hover {
  color: var(--theme-color);
}

.login-form .forgot-password{
  color: var(--theme-color);
  transition: var(--transition);
      font-size: 14px;
}

.login-form .forgot-password:hover {
  color: var(--color-dark);
}

.login-form .theme-btn {
  width: 100%;
}

.login-form .theme-btn::before{
  width: 100%;
  height: 420px;
  transition: var(--transition2);
}

.login-form .social-login {
  border-top: 1px solid var(--border-info-color);
  margin-top: 15px;
}

.login-form .social-login p {
  color: var(--color-dark);
  margin: 10px 0;
}

.login-form .social-login-list {
  text-align: center;
}

.login-form .social-login-list a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: var(--theme-color);
  border-radius: 50px;
  margin: 5px;
}

.login-form .social-login-list a i {
  color: var(--color-white);
}

.login-form .social-login-list a:hover {
  background: var(--body-bg);
  color: var(--theme-color);
}

@media only screen and (max-width: 991px) {
  .login-form {
    padding: 40px 20px;
  }
}



/*====================
48. Coming soon css 
======================*/

.coming-soon {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  min-height: 100vh;
  width: 100%;
  z-index: 1;
}

.coming-soon:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.coming-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

.coming-content{
  text-align: center;
}

.coming-info h1{
  color: var(--color-white);
  font-weight: 700;
  font-size: 50px;
}

.coming-info p{
  font-size: 18px;
  color: var(--color-white);
  margin-top: 10px;
}

.coming-countdown-wrap{
  margin-top: 30px;
  margin-bottom: 30px;
}

.coming-countdown .time-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.coming-countdown .time{
  background: var(--theme-color);
  width: 125px;
  border-radius: 15px;
  padding: 14px 10px;
}

.coming-countdown .time span{
  display: block;
}

.coming-countdown .time span:first-child{
  color: var(--color-white);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
}

.coming-countdown .time .unit{
  color: var(--color-white);
  font-weight: 500;
}

.coming-countdown .divider{
  display: none;
}

.coming-newsletter-form{
  margin-top: 50px;
  margin-bottom: 25px;
}

.coming-newsletter-form .form-group{
  position: relative;
}

.coming-newsletter-form .form-control{
  padding: 17px 150px 17px 20px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  color: var(--body-text-color);
}

.coming-newsletter-form .form-control::placeholder{
  color: var(--body-text-color);
}

.coming-newsletter-form .theme-btn{
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 9px 15px;
}

.coming-social{
  margin-top: 40px;
  text-align: center;
}

.coming-social a{
  display: inline-block;
  background: var(--theme-color);
  color: var(--color-white);
  margin: 5px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50px;
  transition: .5s;
  box-shadow: var(--box-shadow2);
}

.coming-social a:hover{
  background: var(--theme-color2);
}

@media all and (max-width: 767px) {
  .coming-info h1{
    font-size: 40px;
  }
}



/*====================
49. Error css 
======================*/

.error-wrapper {
  text-align: center;
}

.error-wrapper h1 {
  font-size: 250px;
  letter-spacing: 5px;
  font-weight: bold;
  color: var(--theme-color);
}

.error-wrapper h1 span {
  color:  var(--color-dark);
}

.error-wrapper h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}

.error-wrapper img {
  width: 100%;
}

.error-wrapper .theme-btn {
  margin-top: 30px;
}


@media all and (max-width: 767px) {
  .error-wrapper h1 {
    font-size: 160px;
  }
}



/*====================
50. Terms/privacy css 
====================== */

.terms-content:not(:last-child) {
  margin-bottom: 54px;
}

.terms-content:first-child {
  margin-top: -3px;
}

.terms-content .terms-list {
  margin-top: 37px;
}

.terms-content h3 {
  margin-bottom: 23px;
  position: relative;
}

.terms-content p:not(:last-child) {
  margin-bottom: 26px;
}

.terms-list li:not(:last-child) {
  margin-bottom: 16px;
}



/*====================
51. Footer css 
======================*/

.footer-area {
  background: var(--footer-bg);
  position: relative;
  z-index: 1;
}

.footer-shape img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .1;
}

.footer-widget-box {
  margin-bottom: 20px;
}

.footer-widget-box.about-us{
  margin-right: 50px;
}

.footer-widget {
  position: relative;
  z-index: 1;
}

.footer-logo img {
    width: 220px;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 5px 5px;
    background: #fff;
}

.add_tex{
        width: 90%;
}

.copyright {
    padding: 5px 0;
    border-top: 1px solid rgb(255 255 255 / 20%);
}

.copyright .footer-menu {
  margin: 0;
  padding: 0;
  text-align: right;
}

.copyright .footer-menu li {
  display: inline-block;
  margin-left: 25px;
  font-size: 15px;
  position: relative;
}

.copyright .footer-menu li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -17px;
    width: 1px;
    height: 15px;
    background: #a3a3a3;
    border-radius: 50px;
}

.copyright .footer-menu li:first-child::before{
  display: none;
}

.copyright .footer-menu li a {
  color: var(--footer-text-color);
  transition: var(--transition);
}

.copyright .footer-menu li a:hover {
  color: var(--theme-color2);
}

.copyright .copyright-text {
  color: var(--footer-text-color);
  margin-bottom: 0px;
  font-size: 15px;
}

.copyright .copyright-text a {
  color: var(--theme-color);
  font-weight: 500;
}

.footer-widget-title {
    color: var(--color-white);
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 21px;
    font-size: 16px;
    z-index: 1;
}

.footer-widget-title::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 90px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  left: 0;
}

.footer-widget-title::after {
    position: absolute;
    content: '';
    z-index: -1;
    width: 30px;
    height: 2px;
    background-color: #bdceff;
    bottom: 0;
    left: 18px;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-list li a {
  color: var(--color-white);
  transition: var(--transition);
}

.footer-list li a i {
    margin-right: 5px;
    color: var(--theme-color2);
}

.footer-list li a:hover {
  padding-left: 10px;
  color: var(--theme-color2);
}

.footer-widget-box p {
    color: var(--color-white);
    padding-right: 18px;
    margin-bottom: 20px;
    font-size: 14px;
}
.footer-social-wrap h6{
  color: var(--color-white);
  margin-bottom: 15px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social li a i {
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50px;
  background: var(--body-bg);
  color: var(--theme-color2);
      font-size: 14px;
  transition: var(--transition);
}

.footer-social li a i:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.footer-contact li {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    color: var(--footer-text-color);
    font-size: 14px;
    margin-bottom: 8px;
}

.footer-contact li a {
  color: var(--footer-text-color);
  transition: var(--transition);
}

.footer-contact li i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    margin-right: 10px;
    border-radius: 22px;
    background: #ffffff;
    text-align: center;
    transition: var(--transition);
    color: #cc1519;
}

.footer-list li{
        font-size: 14px;
}

.footer-newsletter{
  margin-right: 10px;
}

.subscribe-form-group{
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscribe-form-group .form-group{
  flex: 1;
}

.footer-newsletter h6{
  color: var(--color-white);
  margin-bottom: 20px;
}

.subscribe-form .form-control {
  padding: 14px 20px;
  border-radius: 50px;
  color: var(--color-dark);
  background: var(--body-bg);
  box-shadow: none;
  border: none;
}

.subscribe-form .form-control:focus{
  outline: 2px solid var(--theme-color);
}

.subscribe-form .form-control::placeholder{
  color: var(--color-dark);
}

.subscribe-form .theme-btn {
  padding: 10px 20px;
}

.subscribe-form .theme-btn:hover {
  color: var(--theme-color);
}

.subscribe-form .theme-btn::before{
  background: var(--color-white);
}


@media all and (max-width: 1199px) {
  .footer-widget-box {
    margin-bottom: 50px;
  }

  .footer-widget-box.about-us{
    margin-right: 0;
  }
}

@media all and (max-width: 991px) {
  .footer-widget-wrapper {
    padding-bottom: 0px;
  }

  .footer-area::before{
    height: 60%;
  }

  .copyright .footer-menu {
    float: left;
    margin-top: 20px;
    text-align: left;
  }

  .copyright .footer-menu li {
    margin-left: 0;
    margin-right: 15px;
  }
}

@media all and (max-width: 767px) {
  .footer-widget-wrapper {
    padding-bottom: 0px;
  }

  .footer-social {
    justify-content: flex-start;
    margin-top: 20px;
  }
}



/*====================
52. Home 2
======================*/

.home-2 .navbar{
  border-top: none;
}

.home-2 .navbar .navbar-collapse{
  background-color: var(--footer-bg);
  border-radius: 10px;
  padding-left: 18px;
  padding-right: 18px;
}

.home-2 .navbar.fixed-top{
  background: var(--footer-bg);
}

@media all and (min-width: 992px) {
  .home-2 .navbar .nav-item .nav-link {
    color: var(--color-white);
  }

  .home-2 .nav-right-link{
    color: var(--color-white);
  }

  .home-2 .nav-right .search-btn .nav-right-link{
    color: var(--color-white);
  }
}

@media all and (max-width: 991px) {
  .home-2 .navbar{
    background: var(--footer-bg);
  }

  .home-2 .mobile-menu-right .nav-right-link,
  .home-2 .navbar-toggler-mobile-icon{
    color: var(--color-white);
  }

  .home-2 .navbar .navbar-collapse{
    background-color: var(--body-bg);
  }
}



/*====================
53. Home 3
======================*/

.home-3 .header{
  background: var(--footer-bg);
}

.home-3 .theme-mode .checkbox-label{
  border-color: rgba(255, 255, 255, .1);
}

.home-3 .header-middle-link a{
  color: var(--color-white);
}

.home-3 .header-middle-link a:hover{
  color: var(--theme-color);
}

.home-3 .navbar{
  background: var(--footer-bg);
  border-color: rgba(255, 255, 255, .1);
}

.home-3 .top-news-head{
  border-radius: 8px;
  margin: 5px;
  padding: 5px 10px 5px 10px;
}

.home-3 .top-news-head::before{
  display: none;
}

.home-3 .top-news-content .ticker-info {
  max-width: calc(100% - 144px);
}

.home-3 .hero-news .news-2 .news-item::before{
  display: none;
}

.home-3 .hero-news .news-2 .news-content{
  position: relative;
  padding: 0;
}

.home-3 .hero-news .news-2 .news-item .news-img img{
  width: 98px;
}


@media all and (min-width: 992px) {
  .home-3 .navbar .nav-item .nav-link {
    color: var(--color-white);
  }

  .home-3 .navbar .nav-item .nav-link:hover,
  .home-3 .navbar .nav-item .nav-link.active {
    color: var(--theme-color);
  }

  .home-3 .nav-right-link{
    color: var(--color-white);
  }

  .home-3 .nav-right .search-btn .nav-right-link{
    color: var(--color-white);
  }
}

@media all and (max-width: 991px) {
  .home-3 .mobile-menu-right .nav-right-link{
    color: var(--color-white);
  }

  .home-3 .navbar-toggler-mobile-icon{
    color: var(--color-white);
  }
}





/* --- membership form ----*/

.membership-package-box {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #ffd8b078;
    background: linear-gradient(145deg, #fffaf44a, #ffffffba);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.package-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.membership-package-box h3 {
    font-size: 15px;
    margin-bottom: 3px;
    color: #3c3d3e;
}

.membership-package-box p {
    color: #a0a0a0;
    font-size: 14px;
}
.membership-package-box::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,138,0,0.12), transparent 70%);
    pointer-events: none;
}

.benefits-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: #fbfcfe;
    border: 1px solid #e5eaf1;
}
.benefit-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    color: #344054;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 6px 16px rgba(15,23,42,0.04);
}

.benefit-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: green;
    box-shadow: 0 0 0 4px rgba(19,138,73,0.10);
    flex: 0 0 auto;
}
.package-price-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff1df, #fff8ef);
    border: 1px solid #ffd8b0;
    color: #d96f03;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.plan-card {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 9px 15px;
    border-radius: 18px;
    border: 1px solid #e4e7ec;
    background: #ffffff;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
    overflow: hidden;
    min-width: 0;
}
.plan-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}
.plan-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.mb_form_title {
    position: relative;
    display: inline-block;
    font-size: 24px;
    color: #cc1519;
    /* text-shadow: 0px 1px 2px #a20505; */
    line-height: 45px;
}

.register {

    background: var(--body-bg2);
    border-radius: 15px;
        padding: 15px;

    border: none !important;
    box-shadow: 0px 2px 10px #b8b8b842 !important;
}

.mb_form_title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 65px;
    height: 2px;
    background: #d45054;
    border-radius: 10px;
    transform: translateX(-100%);
    margin-left: -8px;
}

/* Center Blue Dot */
.mb_form_title span {
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 8px;
    height: 8px;
    background: #052992;
    border-radius: 50%;
    transform: translateX(-50%);
    display: block;
}
/* Right Blue Line */
.mb_form_title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 55px;
    height: 2px;
    background: #033ac4;
    border-radius: 10px;
    margin-left: 8px;
}
.plan-card.is-active {
    background: linear-gradient(145deg, #fff7ecc9, #ffffff);
    border-color: #fcd3a78c;
    box-shadow: 0 10px 21px rgba(15,23,42,0.08);
}

.plan-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}
.plan-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.plan-card strong {
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    color: var(--text);
}
.plan-card-price {
    color: var(--red);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.plan-card small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}


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

.account_bx_1 img{
 width:60px;
 height:60px;
 border-radius:8px;
}

.account_bx_1 h4{
 font-size: 17px;
    color: #fff;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom:5px;
}


.account_bx_1 h4 span{
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #7d7e8c59;
    padding: 5px 10px;
    border-radius: 30px;
}











.acn-card{
    position: relative;
    padding:17px;
    border-radius: 20px;
    background:linear-gradient(145deg,#ffffff,#fff7f7);
    border: 1px solid rgba(255, 255, 255, .10);
    
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 35px rgba(15,23,42,.06);
    overflow: hidden;
}


.acn-card h4{
    font-size: 24px;
    font-weight: 700;
    color: black;
    margin-bottom: 10px;
}

.acn-card-grid{
  display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
    margin-top: 18px;
}

.acn-menu-item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    min-height: 165px;
    padding: 18px;
    border-radius: 20px;
    
    border: 1px solid #e9eef6;
    background: linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
    text-decoration: none;
    overflow: hidden;
    transition: .35s ease;
}

/* hover */
.acn-menu-item:hover{
    transform: translateY(-8px);
    border-color: #1677ff40;
    box-shadow: 0 18px 40px rgba(22,119,255,.12);
}

/* shape */
.acn-menu-item::before{
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(22,119,255,.08);
    bottom: -60px;
    right: -60px;
    transition: .4s;
}

.acn-menu-item:hover::before{
    transform: scale(1.1);
}

.acn_sidebar_widget{
    
    
    background:#e9eff75c;
    border:1px solid #e9eff7;
    padding:20px;
    border-radius:12px;
}



.acn_sidebar_widget h5{
    font-size:22px;
    margin-bottom:10px;
    
}    
.acn_sidebar_widget p{
    font-size:14px;
    
    margin-bottom:10px;
}




@media (min-width:400px) and (max-width:767px) {

.acn-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

}


.acn-menu-item::before{
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(22,119,255,.12),
        rgba(64,150,255,.08)
    );
    transition: .4s ease;
}

.acn-menu-item:hover::before{
    transform: scale(1.1);
}


.acn_menu_icon{
     width: 45px;
    height: 45px;
    border-radius: 16px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg,#1677ff,#4096ff);
    box-shadow: 0 15px 30px rgba(22,119,255,.25);
    transition: .3s ease;
}

.acn-menu-item:hover .acn_menu_icon{
    transform: translateY(-4px);
}

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

.acn_menu_title{
    position: relative;
    z-index: 2;
     font-size: 15px;
    margin-bottom: 5px;
    line-height: 1.5;
    font-weight: 700;
    color: #0f172a;
 
    transition: .3s ease;
}

.acn-menu-item:hover .acn_menu_title{
    color: #1677ff;
}


.acn_menu_sub{
    font-size: 11px;
    line-height: 1.6;
}




 
.profile-card{
        background: radial-gradient(circle at top right, rgba(246, 196, 83, .18), transparent 24%), linear-gradient(135deg, #cc1e12 0%, #f6584d 48%, #8e0e05 100%);
    border-radius: 24px;
    padding: 30px;
    display: flex;
        height: 190px;
        margin-bottom: 30px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
}

.profile-card::before{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    top: -100px;
    right: -80px;
}

.profile-left{
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 2;
}

.profile-img img{
    width: 85px;
    height: 85px;
    border-radius: 20px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.15);
}

.profile-info h4{
    color: #fff2c9;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.verified-badge{
    display: inline-flex;
    align-items: center;
    gap: 7px;
   
    background: rgb(255 255 255 / 23%);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 12px;
}

.verified-badge i{
    color: #4ade80;
}

.profile-info p{
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-size: 15px;
}

.profile-info p span{
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

.profile-status{
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.35);
    padding: 12px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    z-index: 2;
}

.status-dot{
    width: 10px;
    height: 10px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
    }
    70%{
        box-shadow: 0 0 0 10px rgba(74,222,128,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(74,222,128,0);
    }
}

 
   
   
   
 
.profileo-card{
        background: radial-gradient(circle at top right, rgba(246, 196, 83, .18), transparent 24%), linear-gradient(135deg, #cc1e12 0%, #f6584d 48%, #8e0e05 100%);
    border-radius: 24px;
    padding: 30px;
    display: flex;
        /*height: 190px;*/
        margin-bottom: 30px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
}

.profileo-card::before{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    top: -100px;
    right: -80px;
}

.profileo-left{
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 2;
}

.profileo-img img {
    width: 115px;
    height: 125px;
    border-radius: 20px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.15);
}
.profileo-info h4 {
    color: #fff2c9;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.verified-badge{
    display: inline-flex;
    align-items: center;
    gap: 7px;
   
    background: rgb(255 255 255 / 23%);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 12px;
}

.verified-badge i{
    color: #4ade80;
}

.profileo-info p{
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-size: 15px;
}

.profileo-info p span{
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

.profileo-status{
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.35);
    padding: 12px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    z-index: 2;
}

.status-dot{
    width: 10px;
    height: 10px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
    }
    70%{
        box-shadow: 0 0 0 10px rgba(74,222,128,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(74,222,128,0);
    }
}

@media(max-width:768px){

    .profileo-card{
        flex-direction: column;
        align-items: flex-start;
        padding: 5px 20px;
    }

    .profileo-left{
        display:none;
    }

    .profileo-info h4{
        font-size: 22px;
    }
}

 .bpn-quick-card{
    position: relative;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(145deg,#ffffff,#fff7f7);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 35px rgba(15, 23, 42, .06);
    overflow: hidden;
  
   
}

.bpn-quick-card::before{
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}

.bpn-quick-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.bpn-card-title{
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
}

.bpn-mini-badge{
      background: linear-gradient(145deg, #ffffff, #fff7f7);
        border: 1px solid #f2e8e8;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 600;
    color: black;

}

.bpn-quick-box {
    background: linear-gradient(145deg, #ffffff, #fff7f7);
    border: 1px solid #f2e8e8;
    border-radius: 10px;
    padding: 12px 6px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.bpn-quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg,#4f7cff,#1f56e8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bpn-quick-icon svg{
    width: 20px;
    height: 20px;
    stroke: #fff;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bpn-quick-content{
    display: flex;
    flex-direction: column;
}

.bpn-quick-title{
    font-size: 13px;
    font-weight: 700;
    color:black;
    line-height: 1.3;
}

.bpn-quick-sub{
    font-size: 11px;
    color:black;
    line-height: 1.5;
    margin-top: 2px;
}

.bpn-quick-actions{
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.bpn-btn {
    font-size: 14px;
    padding: 5px 30px;
    transition: all 0.5s;
    text-transform: capitalize;
    position: relative;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    border: none;
    background: radial-gradient(circle at top right, rgba(246, 196, 83, .18), transparent 24%), linear-gradient(135deg, #4b356c 0%, #772a51 48%, #8e0e05 100%);
    color: #fff !important;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
    z-index: 1;
}


.bpn-btn-light{
    background: #fff;
    color: #111;
}
 
 


 
 
 .compact-btn{
    border: 1px solid #d7d7d7;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #243b63;
    background: #fff;
}

.download-box{
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #d9d9d9;
    border-radius: 22px;
    padding: 16px;
    background: #fff;
}

.download-icon{
    width: 62px;
    height: 62px;
    min-width: 62px;
    background: linear-gradient(135deg,#3b82f6,#1d4ed8);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-icon i{
    color: #fff;
    font-size: 24px;
}

.download-content h5{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000;
}

.download-content p{
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 22px;
}

.download-btn{
    display: block;
    width: 100%;
    text-align: center;
    background: #d90416;
    color: #fff;
    padding: 16px;
    border-radius: 18px;
    margin-top: 14px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.download-btn:hover{
    color: #fff;
}
 
 
    
    
    
    .acnquick_box{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, #e9eff7 0%, #e9eff7 100%);
    border: 1px solid var(--bpn-line);
    margin-bottom: 12px;
}

.acnquick_boxicon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 12px 22px rgba(37, 99, 235, .18);
    flex: 0 0 auto;
}

.acnquick_boxicon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.acnquick_boxcontent {
    flex: 1 1 auto;
    min-width: 0;
}


.acnquick_boxtitle {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #182338;
    margin-bottom: 0px;
}

.acnquick_boxsub {
    display: block;
    font-size: 12px;
    color: var(--bpn-soft);
    line-height: 1.6;
}

/*.hero-news .account_content {*/
/*    background-image: linear-gradient(45deg, #14183a, #bcbcbc);*/
/*    padding: 20px;*/
/*    border-radius:20px;*/

/*}*/

.account_bx_1 p {
        font-size: 12px;
    color: #fff;
    font-weight: 400;
    margin:0;
}

.account_bx_2{
   display:flex;
   align-items:center;
   justify-content:space-between;
   margin-top:25px;
}

.account_bx_2 .account_bx_2span{
        background: #d6e7d6cf;
    padding: 2px 20px;
    display: inline-block;
    font-size: 14px;
    border-radius: 30px;
    color: green;
}

.account_bx_2 .account_bx_2span .span_dot{
    
    width: 8px;
    height: 8px;
    position: relative;
    display: inline-block;
    background: green;
    border-radius: 50%;
    margin-right: 4px;
}

.account_bx_2 .account_bx_2span1{
        padding: 8px 15px;
    background: #4b4e661f;
    font-size: 14px;
    border-radius: 30px;
    color: #fff;
    margin-right: 8px;
}


.account_bx_2 .account_bx_2span2{
        padding: 8px 15px;
    background: #4b4e661f;
    font-size: 14px;
    border-radius: 30px;
    color: #fff;
}



.ipn-dashboard-card{
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(15,23,42,0.04);
}

.ipn-dashboard-card::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(59,130,246,0.05),transparent 70%);
}

.ipn-dashboard-header{
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.ipn-dashboard-header h2{
    font-size:25px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0;
   
}



.ipn-dashboard-header span{
    color: #cc1519;
}

.ipn-dashboard-header p{
    margin: 4px 0 0;
    font-size: 12px;
    color: #64748b;
}

/* GRID */

.ipn-dashboard-grid{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
    position: relative;
    z-index: 2;
}



.ipn-dashboard-item{
    background: linear-gradient(145deg,#ffffff,#fafcff);
    border: 1px solid #edf1f7;
    border-radius: 20px;
    padding: 14px 10px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 14px rgba(15,23,42,0.04),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.ipn-dashboard-item::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(255,255,255,0.35),transparent);
    opacity: 0;
    transition: 0.3s ease;
}

.ipn-dashboard-item:hover{
    transform: translateY(-5px);
    border-color:#cc1519;
    box-shadow:
        0 14px 24px rgba(15,23,42,0.08),
        0 6px 12px rgba(37,99,235,0.04);
}

.ipn-dashboard-item:hover::before{
    opacity: 1;
}

/* REMOVE OLD COLOR CSS FIRST */

/* NEW ICON COLORS */

.ipn-icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    transition: 0.35s ease;
    box-shadow:
        0 4px 12px rgba(15,23,42,0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.ipn-icon::after{
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.45);
    animation: ipnRotate 12s linear infinite;
}

/* BLUE */

.blue{
    background: linear-gradient(135deg,#6d7cff,#4f46e5) !important;
    color: #fff !important;
}


.purple{
    background: linear-gradient(135deg,#c084fc,#9333ea) !important;
    color: #fff !important;
}


.darkblue{
    background: linear-gradient(135deg,#60a5fa,#2563eb) !important;
    color: #fff !important;
}

 .green{
    background: linear-gradient(135deg,#34d399,#10b981) !important;
    color: #fff !important;
}

.orange{
    background: linear-gradient(135deg,#fcd34d,#f59e0b) !important;
    color: #fff !important;
}

.pink{
    background: linear-gradient(135deg,#fb7185,#ec4899) !important;
    color: #fff !important;
}

.ipn-icon i{
    font-size: 18px;
    transition: 0.3s ease;
    position: relative;
    z-index: 2;
}

.ipn-dashboard-item:hover .ipn-icon{
    transform: scale(1.08);
    box-shadow:
        0 10px 20px rgba(37,99,235,0.12);
}

.ipn-dashboard-item:hover .ipn-icon i{
    transform: scale(1.1);
}

/* TEXT */

.ipn-dashboard-item h4{
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0;
    text-align: center;
}

.ipn-dashboard-item p{
    display: none;
}

/* ARROW */

.ipn-arrow{
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #f3f6fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #111827;
    transition: 0.3s ease;
}

.ipn-dashboard-item:hover .ipn-arrow{
    background: #2563eb;
    color: #fff;
    transform: translateX(3px);
}

/* ANIMATION */

@keyframes ipnRotate{
    100%{
        transform: rotate(360deg);
    }
}





.bpn-side-card{
    background: linear-gradient(145deg,#ffffff,#fafcff);
    border: 1px solid #edf1f7;
    border-radius: 28px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}

.bpn-card-title{
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}



.bpn-wallet-box{
    background: linear-gradient(145deg,#fff,#fff8f8);
    border: 1px solid #ffd6d6;
    border-radius: 22px;
    padding: 18px;
}

.bpn-wallet-amount{
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.bpn-wallet-label{
    display: block;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 18px;
}

.bpn-action-row{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pn-btn{
    width: 100%;
    height: 46px;
    border-radius: 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    transition: 0.3s ease;
}

.pn-btn-light{
    background: #fff;
    border: 1px solid #d7dce5;
    color: #111827;
}

.pn-btn-primary{
       background: radial-gradient(circle at top right, rgba(246, 196, 83, .18), transparent 24%), linear-gradient(135deg, #cc1e12 0%, #f6584d 48%, #8e0e05 100%);
    color: #fff;
}

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



.bpn-small-note{
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
    color: #64748b;
}



.bpn-faq-card details{
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.bpn-faq-card summary{
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 20px;
}

.bpn-faq-card summary::-webkit-details-marker{
    display: none;
}

.bpn-faq-card summary::after{
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    color: #e60023;
    font-size: 18px;
    font-weight: 700;
}

.bpn-faq-card details[open] summary::after{
    content: "-";
}

.bpn-faq-card p{
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
}

/* SUPPORT */

.bpn-support-box{
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.8;
    color: #111827;
}

.bpn-support-box strong{
    display: block;
    margin-bottom: 4px;
}

.bpn-support-box a{
    color: #d4001f;
    text-decoration: none;
}






/*--- login register form ----*/

/* Input group container */
.login-form .input-group {
    position: relative;
}

/* Input field */
.login-form .input-group .form-control {
    height: 45px;
    padding: 10px 20px 10px 20px;
    border-radius: 6px  !important;
}

.login-form .input-group textarea {
    height: auto !important;
}

/* Placeholder hidden on focus */
.login-form .input-group .form-control::placeholder {
    color: #cfcfcf;
    transition: all 0.3s ease;
}

.login-form .input-group .form-control:focus::placeholder {
    color: transparent;
}


/* Floating label */
.login-form .input-group label {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #093f99;
    background: #fefefe;
    padding: 0 3px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Floating label active hone par */
.login-form .input-group .form-control:focus + label,
.login-form .input-group .form-control:not(:placeholder-shown) + label {
    top: 0;
    left: 42px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #093f99;
    z-index: 2;
}

.login-form .input-group .input-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #093f99;
    z-index: 2;
    background: #fefefe;
    padding: 0 7px;
    transition: all 0.3s ease;
}

/* 
   Jab input focus me ho YA input me text ho,
   to icon label ke sath upar hi rahe.
   (Chrome me :has() support karta hai.)
*/
.login-form .input-group:focus-within .input-icon,
.login-form .input-group:has(.form-control:not(:placeholder-shown)) .input-icon {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
}
/* Jab input focus ho to icon bhi label ke sath upar chala jaye */
.login-form .input-group:focus-within .input-icon {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
}

/*--- register head---*/
.hero-section {
    width: 100%;
    background: linear-gradient(135deg, #ffffff, #fff9f8c2);
    border-radius: 15px;
    border: 1px solid #e8e8e8;
    position: relative;
    overflow: hidden;
    padding: 20px 20px;
    box-shadow: 0px 4px 15px #b8b8b842;
}
.hero-section::before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  background:radial-gradient(circle, rgba(255,138,0,0.12), transparent 70%);
  border-radius:50%;
  top:-120px;
  right:-80px;
}

.hero-left {
    width: 100%;
    position: relative;
    z-index: 2;
}
.hero-badge{
  display:inline-block;
  background:#ffe9e9;
  color:#ff3d3d;
  padding:8px 18px;
  border-radius:50px;
  font-size:14px;
  font-weight:600;
  margin-bottom:20px;
}

.hero-left h1 {
    font-size: 30px;
    line-height: 45px;
    color: #111827;
    margin-bottom: 10px;
    font-weight: 600;
}

.hero-left h1 span{
  color:#ce1623;
}

.hero-left p {
    font-size: 14px;
    color: #787878;
    /* line-height: 0.8; */
    margin-bottom: 15px;
    /* max-width: 702px; */
}

.hero-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
  padding:15px 28px;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.primary-btn{
  background:#ff3d3d;
  color:#fff;
  box-shadow:0 10px 20px #ff3d3d20;
}

.secondary-btn{
  background:#fff;
  border:1px solid #e5e7eb;
}

.hero-right {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    gap: 30px;
    position: relative;
    z-index: 2;
}
.info-card {
    background: #fffafa;
    border-radius: 13px;
    padding: 10px 15px;
    border: 1px solid #ececec;
    box-shadow: 0 10px 30px rgb(233 233 233 / 3%);
}
.live-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    gap: 20px;
}
.live-top h4{
    font-size: 13px;
    font-weight: 400;
    color: #7d7d7d;
}
.live-top span {
    background: #e10000;
    color: #fff;
    padding: 1px 10px;
    border-radius: 59px;
    font-size: 10px;
    font-weight: 700;
}
.count-number {
    font-size: 17px;
    font-weight: 600;
    color: #d01508;
    margin-bottom: 0px;
    line-height: 25px;
}

.joined-title {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 0px;
    letter-spacing: 1px;
}

.green-dot{
  width:10px;
  height:10px;
  background:#16a34a;
  border-radius:50%;
}

.info-card h3 {
    font-size: 14px;
    color: #111827;
    margin-bottom: 0px;
    font-weight: 500;
    margin-top: 4px;
}
.info-card p {
    color: #6b7280;
    font-size: 11px;
}
.hero-bottom{
  margin-top:35px;
  background:#fff;
  border-radius:18px;
  padding:18px 25px;
  border:1px solid #ececec;
  display:flex;
  gap:35px;
  flex-wrap:wrap;
}

.bottom-item{
  display:flex;
  align-items:center;
  gap:10px;
  color:#374151;
  font-size:15px;
  font-weight:500;
}

.orange-dot{
  width:10px;
  height:10px;
  background:orange;
  border-radius:50%;
}

@media(max-width:1000px){

  .hero-section{
    flex-direction:column;
    padding:30px;
  }

  .hero-left{
    width:100%;
  }

  .hero-right{
    width:100%;
  }

  .hero-left h1{
    font-size:38px;
  }

}


.upi-box {
    margin-top: 10px;
    padding: 10px 10px;
    border: 1px solid #f59e0b;
    border-radius: 7px;
    background: #fcf3ee;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 420px;
}


.upi-logo {
    width: 50px;
    height: auto;
}

.modal-header {
    padding: 7px 18px;
    font-size: 10px;
    background: #023bb7;
}
.modal-title{
        font-size: 15px;
    color: #ffffff;
}

.modal-title i{
    margin-right: 5px;
}
.btn-close{
        filter: invert(1);
    opacity: 1;
}
.form-label_model{

        color: #4d4f59;
    margin-bottom: 5px;
    font-size: 13px;
}
.upi-id {
    font-size: 17px;
    font-weight: 600;
    color: #393939;
}
.file-group{
    position: relative;
    margin-top: 0;
}

.file-label {
    position: absolute;
    left: 115px;
    top: 14px;
    background: #fff;
    padding: 0 5px;
    color: #999;
    transition: .3s;
    pointer-events: none;
    color:#c4c4c4 !important;
}

.file-group.active .file-label{
    top: -10px;
    font-size: 12px;
    color: #0d6efd;
}
.file-group.active .file-label {
    top: -13px;
    font-size: 12px;
    color: #093f99 !important;
    left: 13px;
}
.artical{
    box-shadow:none !important;
    padding:0px !important;
    border:none !important;
}
.file-group input[type="file"] {
    height:45px;
    border: 1px solid #b2bddb;
        line-height: 31px !important;
            padding: 6px 12px !important;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0 ;
    box-shadow: none !important;
    border: 1px solid var(--theme-color) !important;
}



.bootstrap-tagsinput {
width: 100% !important;
display: block;
padding: 10px 12px;
height: 45px;
border-radius: 6px !important;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
background: #0d6efd;
padding: 3px 6px;
border-radius: 3px;
}


.register .input__group:focus-within {
    outline: none !important;
    border-radius: 0 !important;
}

.ql-toolbar{
    width: 100%;
    border-radius: 6px 6px 0px 0px !important;
    border-color: #b2bddb !important;
    box-shadow: 0px 0px 9px #efefef !important;
}

.ql-container {
    width: 100%;
    border-radius: 0px 0px 6px 6px !important;
    border-color: #b2bddb !important;
    box-shadow: 0px 0px 9px #efefef !important;
}


.bootstrap-tagsinput {
    border:1px solid #0529924a !important;
    padding: 14px 6px !important;
}


.media_news .news-item{
    display: flex;
    gap: 30px;
}
.media_news .news-img{
        width: 200px;
    height: 160px;
    border-radius: 10px;
}

.media_news .news-content a{
    font-size: 20px;
    font-weight: 600;
}

.media_news .news-meta{
        display: flex;
    gap: 30px;
    align-items: center;
}

.media_news .news-meta a{
    font-size: 10px;
    font-weight: 400;
}

.media_news .news-date{
        font-size: 10px;
}

.media_tags {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.media_tags li{
    font-size: 10px;
    text-transform: capitalize;
    background: #f7fff9;
    padding: 0px 10px;
    border-radius: 5px;
    line-height: 21px;
    color: #07521e;
    border: 1px solid #1c5c307d;
    height: 23px;
}


.delete_btnnn {
    display: inline-block;
    padding: 5px 9px;
    background: #ce180b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    border-radius: 50%;
    margin-bottom: 4px;
}

.edit_btnnn {
    display: inline-block;
    padding: 5px 9px;
    background: #1a622d;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    border-radius: 50%;
    margin-bottom: 4px;
}
.theme_detailsbtn{
        background: #052992;
    box-shadow: 0px 0px 3px #c7c7c7;
    /* padding: 1px 10px; */
    border-radius: 50%;
    color: #fff !important;
    width: 25px;
    font-size: 14px;
    height: 25px;
    text-align: center;
    line-height: 25px;
}
.second_widget .title {
    font-size: 18px;
    padding-bottom: 0px;
       margin-bottom: 0px !important;
    border-bottom: 5px double var(--border-info-color);
    background: #c9181b;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 10px 10px 0px 0px;
}

.second_widget .social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.second_widget .news-item-wrap{
        padding: 10px;
}

.details_cont p{
        display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.second_widget h4 {
    font-size: 15px;
    font-weight: 500;
           display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
      
}

.second_widget .news-meta{
        display: flex;
    font-size: 10px;
    gap: 12px;
    margin-top: 2px;
}
.theme-link{
               display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
      margin-top: 2px;
}
.second_widget .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}

.second_widget .tab-content{
        padding: 10px;
}
.second_widget .nav {
    background: #c90e15;
    border-radius: 10px 10px 0px 0px;
    padding: 5px;
    color: #fff;
}

.second_widget .nav-link {
    border-radius: 5px !important;
    font-weight: 500;
    padding: 3px 5px !important;
    font-size: 14px;
    color: #fff !important;
}
.second_widget .nav-link.active {
    color: #000 !important;
    background: #fef8f8 !important;
}

.second_widget .category-news-slider .owl-nav {
    position: absolute;
    right: 11px;
    top: -32px;
    padding: 0px 10px;
    color: var(--color-white);
}

.second_widget .category-news-slider .owl-nav::before {

    background: #fef4f4;
 
}
.second_widget .category-news-slider .owl-nav {
    color: #000;
}
.second_widget {
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 2px 6px #dedede;
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    width: 200px;
    height: 140px;
}

.thumbnail-img{
    width:100%;
    object-fit:cover;
    border-radius:10px;
}

.play-btn22 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 54px;
    height: 40px;
    border: none;
    border-radius: 24%;
    background: #ff1c1c;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    text-align:center;
    line-height:40px;
    z-index: 2;
}

.video-player {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    height: 100%;
}


.like-icon {
    border: none;
    background: #ededed;
    padding: 2px 7px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #b1b1b1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #333;
}

/* Hover effect */
.like-icon:hover {
    transform: scale(1.05);
}

/* Active (liked) */
.like-icon.active {
    background: #fff4f3;
    color: #28a745;
    box-shadow: 0 1px 3px rgb(255 207 203);
    border: 1px solid #ff4334;
}

/* Icon animation */
.like-icon i {
    transition: transform 0.3s ease;
}

/* POP animation on click */
.like-icon.pop i {
    animation: pop 0.4s ease;
}

@keyframes pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}

/* floating heart effect */


@keyframes floatUp {
    0% { opacity: 0; transform: translateY(0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}



.like-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
}

.like-btn i{
    font-size:24px;
    color:#fff;
    transition:all .3s ease;
}

.like-btn.active i{
    color:#ff1744;
    animation:heartPop .5s ease;
}

.likeCount {
    margin-top: 0px;
    font-size: 12px;
    color: #222020;
    font-weight: 600;
}
.like-screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.88);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transition:0.3s;
    z-index:9999;
}

.like-screen.active{
    opacity:1;
    visibility:visible;
}

.big-like{
    font-size:180px;
    animation:popLike 1s infinite;
}

.like-text{
    color:#fff;
    font-size:40px;
    margin-top:20px;
    font-weight:bold;
}

@keyframes popLike{
    0%{ transform:scale(0.6) rotate(-10deg); }
    50%{ transform:scale(1.2) rotate(10deg); }
    100%{ transform:scale(0.6) rotate(-10deg); }
}
/* default icon */
.likeBtn i {
    color: #181616;
    transition: 0.3s;
}

/* ACTIVE STATE WITH GRADIENT */
.likeBtn.active i {
    background: linear-gradient(45deg, #ff823e, #ff464b, #ef0b91);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transform: scale(1.2);
    transition: 0.3s;
    font-size: 15px;
}
.lik_btnnne{
    background: linear-gradient(45deg, #e97739, #df3c40, #c21c7d);
        -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes heartPop{
    0%{
        transform:scale(1);
    }
    30%{
        transform:scale(1.5);
    }
    60%{
        transform:scale(.9);
    }
    100%{
        transform:scale(1);
    }
}

.reel-card video,
.like-btn,
.reel-icons a{
    cursor: pointer;
}


    .author_profile_card{
        background: radial-gradient(circle at top right, rgba(246, 196, 83, .18), transparent 24%), linear-gradient(135deg, #cc1e12 0%, #f6584d 48%, #8e0e05 100%);
    border-radius: 26px;
    padding: 10px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.author_profile_card::before{
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    top: -80px;
    left: -80px;
}

.author_profile_img{
    width: 90px;
    height: 90px;
    border-radius: 28px;
    overflow: hidden;
    margin: 0 auto 18px;
    border: 4px solid rgba(255,255,255,0.25);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.author_profile_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author_profile_card h4{
    color: #fff2c9;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.member_badge{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgb(255 255 255 / 23%);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 12px;
}

.member_badge i{
        color: #4ade80;
    font-size: 16px;
}

.member_id{
        color: rgba(255, 255, 255, 0.75);
    margin: 0;
    font-size: 15px;
}

.member_id span{
    font-weight: 700;
}



.public_view_card{
     position: relative;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #fff7f7);
    border: 1px solid #CD0816;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 35px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.public_view_card h3{
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}

.public_text{
    font-size: 13px;
    line-height: 22px;
    color: #666;
    margin-bottom: 16px;
    
    
}

.public_btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #CD0816;
    color: #fff !important;
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    transition: .3s;
}

.public_btn:hover{
    color: #fff;
    transform: translateY(-2px);
}

.public_note{
    margin-top: 14px;
    font-size: 12px;
    color: #777;
    line-height: 20px;
}


.highlight-ad{
    position: relative;
    animation: blink 1s infinite;
    border-radius: 10px;
}

.highlight-ad::after{
    content: '➜';
    position: absolute;
    left: -35px;
    top: 40%;
    font-size: 40px;
    color: red;
    font-weight: bold;
}

.highlight-ad::before{
    content: '';
    position: absolute;
    inset: -8px;
    border: 4px solid red;
    border-radius: 12px;
    animation: pulse 1s infinite;
}

@keyframes pulse{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(1.05);
        opacity: 0;
    }
}

@keyframes blink{
    50%{
        transform: scale(1.02);
    }
}

   .ads-section{
        padding:20px;
        background:#fff;
    }
.ads-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}



.ads-box{
    background:#fff;
    border-radius:14px;
    padding:18px 12px 14px;
    text-align:center;
    border:1px solid #e8e8e8;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
    margin-bottom: 20px;
    transition:.35s;
}

.ads-box:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(0,0,0,.12);
}

.ads-box:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#0d47a1,#e30613);
}

.ads-dots{
    position:absolute;
    top:50px;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:20px;
    background-image:radial-gradient(#c7d4ff 1.5px,transparent 1.5px);
    background-size:7px 7px;
    z-index:0;
}

.ipn-icon_ad{
    background:transparent !important;
    width:auto !important;
    height:auto !important;
    position:relative;
    z-index:2;
}

.ads-number{
    width:46px;
    height:46px;
    border-radius:10px;
    background:#0d47a1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    box-shadow:0 8px 18px rgba(13,71,161,.25);
}

.ads-number h4{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#fff;
}

.ads-price{
    margin-top:12px;
}

.text-center{
    margin-bottom:0 !important;
    font-size:18px;
    font-weight:700;
    color:#16213e;
}

.add_span{
    font-size:14px;
    color:#777;
    font-weight:500;
}

.ads-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#0d47a1;
    margin:12px auto 14px;
}
.ads-dot:before,
.ads-dot:after{
    content:'';
    position:absolute;
    top:55%;
    width:55px; 
    height:1px;
    background:#cc1519;
    transform:translateY(-50%);
}

.ads-dot:before{
    right:12px;
}

.ads-dot:after{
    left:12px;
}

.btn_ad-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.btn_ad{
    display:block;
    text-decoration:none;
    padding:3px 10px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    transition:.3s;
}

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

.btn_outline{
    border:1px solid #b9c8ff;
    background:#fff;
    color:#0d47a1;
}

.btn_outline:hover{
    background:#f4f7ff;
    color:#0d47a1;
}

.btn_fill{
    background:#0d47a1;
    color:#fff;
    border:none;
    box-shadow:0 4px 12px rgba(13,71,161,.20);
}

.btn_fill:hover{
    background:#0839a1;
    color:#fff;
}


.single_bx {
    background: linear-gradient(45deg, #403873, #c4171f);
    border: 1px solid #e8eef7;
    /* border-left: 5px solid #cc1519; */
    border-radius: 9px;
    padding: 7px 20px 7px 7px;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    margin-bottom: 20px;
    transition: .3s;
}

.single_bx img{
    width:100%;
    height:140px;
    /*object-fit:cover;*/
    border-radius:10px;
}

.badge-btn {
    background: linear-gradient(45deg, #ffffff, #e9ecef);
    color: #403873;
    border-radius: 8px;
    padding: 3px 11px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 600;
}



.read-more-btn{
    color:#fff;
    font-weight:600;
    cursor:pointer;
    margin-left:5px;
}



.pagename{
    color:#ef4444;
    font-size:14px;
}

.bx-row{
    display:flex;
    gap:50px;
    margin-top:15px;
}

.desc-text{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.des_tx p{
        margin: 0px;
    font-size: 12px !important;
    margin-top: 0px;
    color: #ececec;
}

.desc-box.expanded p{
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
}
.desc-box.expanded .desc-text{
    white-space:normal;
}

.read-more-btnn{
    color:#fff;
    font-weight:600;
    cursor:pointer;
    margin-left:5px;
}



.data_bx p, .data_bx2 p, .data_bx3 p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #f3f3f3;
}


.data_head {
    font-size: 13px;
    font-weight: 500;
    color: #e2e2e2;
        margin-bottom: 5px;
}

.data_head2{
        font-size: 13px;
    font-weight: 500;
    color: #e2e2e2;
        margin-bottom: 5px;
}


.data_head3 {
    font-size: 13px;
    font-weight: 500;
    color: #e2e2e2;
        margin-bottom: 5px;
}
.data_bx, .data_bx2, .data_bx3{
    display: flex;
    gap: 15px;
    align-items: center;
}

.data_bx i, .data_bx2 i, .data_bx3 i{
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 50%;
    line-height: 26px;
}
.data_bx i{
    background: #F44336;
    color: #fff;
    outline: 2px solid #ff8197;
}
.data_bx2 i{
    background: #FFC107;
    color: #fff;
    outline: 2px solid #ffe597;
}
.data_bx3 i{
     background: #8BC34A;
    color: #fff;
    outline: 2px solid #b6ffb9;
}

.single_bx h4 {
    font-size: 20px;
    text-transform: capitalize;
    margin-top: 5px;
    margin-bottom: 0px;
    color: #f6f6f6;
}

.pagename{
    font-size: 11px;
    color: #F44336;
}



.ads-card{
    background:#fff;
    border-radius:18px;
    border:1px solid #e5e7eb;
    padding:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    overflow:hidden;
    transition:.3s;
}



.media-box{
    position:relative;
    margin-bottom:12px;
}

.ads-img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
}
.cat_add {
    position: absolute;
    top: 0px;
    right: 12px;
    z-index: 2;
    background: linear-gradient(135deg, #951209, #cc1f13);
    color: #fff;
    padding: 3px 9px;
    border-radius: 0px 5px 0px 5px;
    font-size: 12px;
    font-weight: 600;
}
.add_p {
    margin-bottom: 3px;
}
.add_p p{
    margin:0;
    font-size:13px;
    color:#64748b;
}


.bg_bdage{
    border-radius:25px !important;
    padding:6px 14px !important;
    font-size:11px !important;
    font-weight:600;
}

.price-bar {
    background: linear-gradient(135deg, #102993f7, #0b48e0);
    /* border-radius: 12px; */
    padding: 8px 10px;
    margin: 8px 0;
}

.price-bar p{
    flex:1;
    margin:0;
    color:#fff;
    text-align:center;
    font-size:12px;
    font-weight:600;
}

.price-bar p:not(:last-child){
    border-right:1px solid rgba(255,255,255,.25);
}

.ads-card h5 {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 9px;
    line-height: 1.4;
}

.ad_typ {
    background: #f5f7fb;
    /* border-left: 4px solid #2563eb; */
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 7px;
    color: #475569;
    font-size: 12px;
}

.ad_typ span{
    color:#2563eb;
    font-weight:600;
}


.desc-box {
    color: #64748b;
    font-size: 13px;
    line-height: 23px;
    max-height: 80px;
    overflow: hidden;
    margin-bottom: 0px;
}

.ad_typ b{
    color: #305de6;
    font-size: 12px;
}
.ad_typ p{
    font-size: 12px;
}
.read-more-btn{
    display:inline-block;
    margin-top:5px;
    color:#dc2626;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}

.read-more-btn:hover{
    color:#b91c1c;
}

.read-more-btn::after{
    content:" →";
}

.video-thumbnail-wrapper{
    position:relative;
}

.play-btn22{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#ef4444;
    color:#fff;
    font-size:18px;
}

@media(max-width:768px){

    .ads-img{
        height:160px;
    }

    .price-bar{
        flex-wrap:wrap;
        gap:10px;
    }

    .price-bar p{
        width:100%;
        border-right:none !important;
        padding-right:0;
    }

    .ads-card h5{
        font-size:18px;
    }

    .desc-box{
        font-size:13px;
    }
}






.desc-box{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.desc-box.show{
    -webkit-line-clamp: unset;
}

.read-more-btn {
    color: #c80e00;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}



.desc-box p{
    margin:0px !important;
}

.ad_typ span{
        color: #0f44df;
    font-size: 11px;
}

.report-btn {
    background: #dc3545;
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 13px;
}

.ads-counter{
    text-align:center;
    padding:0;
}

.counter-title {
    font-size: 14px;
    font-weight: 600;
    color: #282626;
    letter-spacing: 0px;
    margin-bottom: 2px;
}

.counter-wrap{
    position:relative;
    width:100px;
    margin:auto;
}

.counter-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(from 220deg, #da2e22 0deg, #ff7369 120deg, #fd9d96 220deg, #fde9e8 300deg, #da362a 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.counter-circle::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: #fff;
    border-radius: 50%;
}
.counter-circle span {
    position: relative;
    z-index: 2;
    font-size: 37px;
    font-weight: 700;
    color: #ad1004;
    line-height: 1;
}
.counter-icon {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    z-index: 1;
}

.counter-icon i {
    font-size: 23px;
    color: #F44336;
    background: #fff;
    width: 45px;
    height: 23px;
    border-radius: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0px 0px rgba(139,92,246,.15);
}

.report-info {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    justify-content: center;
}

.report-info i {
    color: #878787;
    font-size: 11px;
}

.report-info p {
    margin: 0;
    font-weight: 500;
    color: #343231;
    font-size: 13px;
}

.report-info small {
    color: #777;
    font-size: 12px;
}

.submit-report-btn{
    width:100%;
    border:0;
    padding:12px;
    border-radius:30px;
    background:#7c3aed;
    color:#fff;
    font-weight:600;
}
.work-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px 10px 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    margin-bottom: 20px;
    border: 1px solid #c1c1c1db;
    /* height: 100%; */
    width: 100%;
}
.work-card-bx {
    display: flex;
    gap: 10px;
    align-items: center;
}

.work-img img {
    width: 150px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 0;
    border: 1px solid #eeeeee;
}
.work-card h4 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0px;
}
.w__b{
        width: 10%;
            display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.w__ss{
        width: 35%;
}
 .work-submit-btn{
     width:100%;
     text-align:center;
 }
.report-btn_2 {
    border: 1px solid #f536574f;
    background: #ffffff;
    color: #e90606 !important;
    padding: 4px 12px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 13px;
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 5px #ff97a9a6;
}
.report-btn_3 {
    border: 1px solid #52484a4f;
    background: #ffffff;
    color: #2d2828 !important;
    padding: 4px 12px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 13px;
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 5px #d5d5d5a6;
}
.work-grid {
    display: flex;
    gap: 10px;
    margin-bottom: 0px;
    align-items: center;
    flex-wrap: wrap;
}
.work-grid div {
    font-size: 12px;
}
.work-grid span{
        color: #c8c8c8;
}
.work-box p{
     font-size: 12px; 
}

.web_url{
    font-size: 12px;
}
 .bpn-create-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bpn-create-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ffffff52;
    border: 1px solid #e6e4e4;
    color: #5f5e5e;
    font-size: 12px;
    font-weight: 500;
}
.latest_box{
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg,#ffffff,#fff7f5);
    border: 1px solid #ffe1da;
    overflow: hidden;
    transition: 0.35s ease;
    box-shadow: 0 8px 25px rgba(236,40,0,0.08);
  

}

.latest_box:hover{
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(236,40,0,0.15);
    border-color: #ffcabd;
}


.latest_box::before{
    content: '';
    position: absolute;
    left: -40px;
    top: -40px;
    width: 120px;
    height: 120px;
    background: rgba(236,40,0,0.05);
    border-radius: 50%;
}

.latest_heading{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.latest_heading h5{
    margin: 0;
}

.short_title{
    margin-bottom: 4px;
}

.acn_menu_icon2{
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#CD0816,#cd1419);
    color: #fff;
    font-size: 34px;
    position: relative;
    box-shadow: 0 12px 25px rgba(236,40,0,0.28);

}

.acn_menu_icon2::after{
    content: '';
    position: absolute;

    width: 60px;
    height: 60px;
    left: -12px;
    bottom: -12px;
    background-image: radial-gradient(#ffd0c7 1.6px, transparent 1.6px);
    background-size: 9px 9px;
    z-index: -2;
}


.short_title{
    display: inline-block;
    font-size: 12px !important;
    font-weight: 600;
    color: #CD0816 !important;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.latest_box h5{
    font-size: 18px;

    color: #101828;
    margin-bottom: 8px;
}



.latest_des{
    font-size: 11px !important;
    line-height: 20px;
    color: #667085;
    max-width: 650px;
    margin-bottom: 10px;
}


.latest_tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.latest_tags span{
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #ffd8cf;
    border-radius: 30px;
    font-size: 13px;
    color: #555;
    transition: .3s;
}

.latest_tags span:hover{
    background: #ec2800;
    color: #fff;
    border-color: #ec2800;
}


.latest_btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,#ff2d00,#d61400);
    color: #fff !important;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
    box-shadow: 0 10px 20px rgba(236,40,0,0.22);
}

.latest_btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 28px rgba(236,40,0,0.30);
    color: #fff;
}
.work-body {
    width: 40%;
}
.text-content{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.work-img{
      
}

.desc-content,
.terms-content_work{
    -webkit-line-clamp: 2;
}

.read-more-btn{
    display:none;
}

.work-info-box {
    background: #fff;
    padding: 12px 25px;
}

.info-item {
    display: flex;
    align-items: start;
    gap: 7px;
}

.info-item small{
    display:block;
    color:#6c757d;
    font-size:11px;
    margin-bottom:2px;
}

.info-item h6 {
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    color: #1c1c1c;
}

.divider{
    width:1px;
    height:50px;
    background:#e5e5e5;
}

.icon {
    font-size: 11px;
}
.icon.start{
    color:#ff3b30;
}

.icon.end{
    color:#0d6efd;
}

.icon.amount_1{
    color:#16a34a;
}
.nav-tabs .nav-link {
    font-weight: 500;
    color: #333;
    font-size: 15px;
      border: none;
}

.nav-tabs {
        border: none!important;  
}
.nav-tabs .nav-link.active {
    background: #fff;
    color: #cb0e12;
    border-bottom: 3px solid #cb0e12 !important;
    border: none;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: var(--bs-nav-tabs-link-hover-border-color);
    border: none;
    color: #cb0e12;
}

.des_box p{
        color: #666767;
    font-size: 13px;
}



.table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-color-type: var(--bs-table-striped-color) !important;
    --bs-table-bg-type: var(--bs-table-striped-bg) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-body-bg) !important;
}

.sect__btn {

  
   border-radius: 0px 5px 5px 0px !important;
  
    padding: 5px 11px !important;
}



.terms-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 13px rgb(0 0 0 / 9%);
    border: 1px solid #ececec;
}

.terms-header {
    background: linear-gradient(135deg, #a80004, #aa0304);
    color: #fff;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.terms-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.terms-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #f8f8f8f0;
    text-transform: capitalize;
}
.terms-header p {
    margin-top: 0px;
    margin-bottom: 0;
    opacity: .8;
    font-size: 12px;
    /* letter-spacing: 1px; */
}

.terms-body{
    padding:10px;
}


/* Common */
.terms-body p, .terms-body ul li, .terms-body ol li {
    position: relative;
    list-style: none;
    margin-bottom: 5px;
    padding-left: 35px;
    line-height: 19px;
    font-size: 13px;
}

/* Remove default bullets */
.terms-body ul,
.terms-body ol{
    list-style: none;
    padding-left: 0;
    margin: 0;
}



/* Main Dot */
.terms-body p::before, .terms-body ul li::before, .terms-body ol li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #cb0e12;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #cb0e12;
    animation: pulseDot 1.8s infinite;
    z-index: 2;
}

/* Pulse Animation */
@keyframes pulseDot{
    0%{
        box-shadow:0 0 0 0 rgba(203,14,18,.7);
    }
    70%{
        box-shadow:0 0 0 5px rgba(203,14,18,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(203,14,18,0);
    }
}
.work__details img{
        border-radius: 10px;
}


.work_data h3{
        font-size: 25px;
    margin-bottom: 7px;

}

.work_data h2{
        font-size: 25px;
    color: #c4161e;
    margin-bottom: 5px;
}



@media(max-width:991px){
    .work-card-bx{
        grid-template-columns:120px 1fr;
    }

    .w__ss,
    .w__b{
        grid-column:1 / -1;
    }

    .w__ss .d-flex{
        justify-content:flex-start !important;
        padding:0 !important;
    }

    .work-info-box{
        justify-content:flex-start !important;
        padding:10px 0 0;
    }

    .w__b{
        justify-content:flex-start;
    }
}

@media(max-width:767px){
    .work-body {
    width: 100%;
     }
    .pt-30.pb-30{
        padding-top:20px;
        padding-bottom:20px;
    }

    .about-hero{
        min-height:230px;
        padding:55px 0;
    }

    .about-hero-title{
        font-size:26px;
        line-height:34px;
    }

    .about-hero-text{
        font-size:14px;
        line-height:24px;
    }

    .col-md-6 form .d-flex{
        /*flex-wrap:wrap;*/
        margin-bottom: 15px;
        gap:8px !important;
    }

    .input-group{
        width:100%;
    }

    .col-md-6 form .btn{
        height:38px !important;
    }

    .work-card-bx{
        display:block;
        padding:12px;
    }

    .work-img{
        margin-bottom:12px;
    }
    
    .work-img a{
        width:100%;
        height:180px;
        border-radius:10px;
    }

    .work-img img{
        width:100%;
        height:180px;
        border-radius:10px;
    }

    .work-body h4{
        font-size:17px;
    }

    .work-body p{
        font-size:13px;
    }

    .work-grid{
        display:block;
        line-height:24px;
    }

    .work-grid > span{
        display:none;
    }

    .w__ss{
        margin-top:10px;
        width: 100%;
    }

    .w__ss > .d-flex:first-child{
        justify-content:flex-start !important;
        flex-wrap:wrap;
        margin-bottom: 20px;
    }

    .work-info-box{
        display:grid !important;
        grid-template-columns:1fr;
        gap:10px !important;
        padding:12px 0 0;
    }

    .divider{
        display:none;
    }

    .info-item{
        background:#f7f8fb;
        border-radius:8px;
        padding:9px 10px;
        width:100%;
    }

    .w__b{
        width:100%;
        margin-top:12px;
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        gap:8px;
    }

    .w__b a{
        width:100%;
        min-width:auto;
        font-size:12px;
        padding:8px 6px;
    }

    .modal-dialog{
        margin:10px;
    }
}

@media(max-width:420px){
    .work-body
 {
    width: 100%;
}


    .work-img img{
        height:150px;
    }

    .nav-tabs .nav-link{
        font-size:13px;
        padding:7px 10px;
    }

    .about-hero-title{
        font-size:22px;
        line-height:30px;
    }
}




.sound-btn{
    position:absolute;
    top:70px;
    right:15px;
    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:1;
    font-size:18px;
    backdrop-filter:blur(8px);
}

.sound-btn:hover{
    background:rgba(0,0,0,.7);
}



.play-pause-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:35px;
    opacity:0;
    transition:.3s;
    pointer-events:none;
    z-index:99999;
}

.play-pause-icon.show{
    opacity:1;
}


.reel-nav{
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

.reel-nav button{
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.reel-nav button:hover{
    background: rgba(0,0,0,.9);
}

@media (max-width: 768px){
    .reel-nav{
        display: none;
    }
}


.no-more-reels{
    height:calc(100dvh - 40px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    background:#000;
    text-align:center;
}

.no-more-reels i{
    font-size:30px;
    margin:20px 0;
}

.no-more-reels h3{
    margin:10px 0;
}


.home__wap .reel-card{
    height: 560px !important;
}