body.preloader-site {
    overflow: hidden;
}

.preloader-wrapper {
    height: 100%;
    width: 100%;
    background-color: #000 !important;
    /*background-image: linear-gradient(0deg, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.2) 90%), url(/bundles/project/images/backgrounds/back1.png);*/
    background-size: cover; 
    background-position: bottom;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

.preloader-wrapper .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 120px;
}

.grecaptcha-badge { visibility: hidden; }


html, body, input, textarea, select, button {
  /*font-family: 'Lato', sans-serif !important;*/
  font-family: 'Nunito', sans-serif !important;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 30em;
  }
}

.preserve-breaks {
    white-space: pre-wrap;
}

/*.tab-wrapper {
    display: flex;
    align-items: center;
}

.hover-space {
    width: 10px;
}*/

.editableText:hover {
  cursor: text;
}

.cursor-move:hover {
  cursor: move;
}

.editableText[contenteditable="true"]:focus {
    outline: 1px solid rgba(0,0,0,0.3);
    background: #fff;

}

.hover-target {
  position: relative !important;
}

.btn-controls-xs {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    padding: 8px;
    cursor: pointer;
    border-radius: 25px;
    font-size: .7rem;
    border: 0px;
    z-index: 100;
}

.btn-controls-xs2 {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    padding: 5px;
    cursor: pointer;
    border-radius: 25px;
    font-size: .7rem;
    border: 0px;
    z-index: 100;
}

.btn-controls {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    padding: 12px;
    cursor: pointer;
    border-radius: 25px;
    font-size: .9rem;
    border: 0px;
    z-index: 100;
}

.btn-controls-lg {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    padding: 20px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 1.5rem;
    border: 0px;
    z-index: 100;
}

.btn-controls-xs:hover, .btn-controls-xs2:hover, .btn-controls:hover, .btn-controls-lg:hover{
    background-color: rgba(0,0,0,.6);
    color: #fff;
    border: 0px;
}

.btn-controls-bottom-right {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.btn-controls-top-right {
    position: absolute;
    right: 15px;
    top: 10px;
}

.btn-controls-top-right2 {
    position: absolute;
    right: 15px;
    top: 40px;
}

.btn-controls-top-left {
    position: absolute;
    left: 15px;
    top: 10px;
}

.btn-controls-middle-left {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-controls-middle-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-cards {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    padding: 10px;
    cursor: pointer;
    border-radius: 25px;
    font-size: .8rem;
    border: 0px;
    z-index: 100;
}

.btn-cards:hover {
    background-color: rgba(0,0,0,.6);
    color: #fff;
}

.btn-cards-left {
    position: absolute;
    left: 10px;
    top: 10px;
}

.btn-cards-right {
    position: absolute;
    right: 10px;
    top: 10px;
}

.rotate-180 {
    transform: rotate(180deg);
}

.col-overflow {
  flex: 0 0 auto;
}

.col-16-9 {
  width: 300px;
}

.col-1-1 {
  width: 235px;
}

.col-9-16 {
  width: 170px;
}

.card-1-1 {
  aspect-ratio: 1 / 1;
}

.card-16-9 {
  aspect-ratio: 16 / 9;
}

.card-9-16 {
  aspect-ratio: 9 / 16;
}

.rowFixedH1 {
  height: 20%;
}

.rowFixedH2 {
  height: 60%;
}

.rowFixedH3 {
  height: 20%;
}

.col-min {
  flex: 0 0 auto;
  width: 40px;
}

.col-music {
  min-width: 300px;
}

.col-pad-minus {
  padding-left: -5px;
  padding-right: -5px;
}

.col-pad0 {
  padding-left: 0px;
  padding-right: 0px;
}

.col-pad2 {
  padding-left: 5px;
  padding-right: 5px;
}

.col-pad-assets {
  padding-left: 5px;
  padding-right: 5px;
}

.col-pad {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.col-pad-card {
  padding-left: 10px;
  padding-right: 10px;
}

/* Base grid item styles */
.grid-item {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* Responsive breakpoints */
@media (min-width: 1200px) {
    .grid-sizer,
    .grid-item { width: 25%; }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .grid-sizer,
    .grid-item { width: 25%; } /* 4 columns */
}

@media (min-width: 768px) and (max-width: 959px) {
    .grid-sizer,
    .grid-item { width: 33.33%; } /* 3 columns */
}

@media (min-width: 600px) and (max-width: 767px) {
    .grid-sizer,
    .grid-item { width: 50%; } /* 2 columns */
}

@media (min-width: 480px) and (max-width: 599px) {
    .grid-sizer,
    .grid-item { width: 50%; } /* 2 columns */
}

@media (min-width: 320px) and (max-width: 479px) {
    .grid-sizer,
    .grid-item { width: 100%; } /* 1 column */
}

@media (max-width: 319px) {
    .grid-sizer,
    .grid-item { width: 100%; } /* 1 column */
}

/* Ensure grid-item cards have transparent background on all screen sizes */
.grid-item .card {
  background-color: transparent !important;
}

/* Ensure card-hover class has transparent background */
.card-hover {
  background-color: transparent !important;
}

/* Ensure card-hover2 class has transparent background */
.card-hover2 {
  background-color: transparent !important;
}

/* Mobile-specific fixes for card backgrounds */
@media (max-width: 768px) {
  .grid-item .card,
  .card-hover,
  .card-hover2,
  .card-element {
    background-color: transparent !important;
  }
  
  /* CRITICAL: On mobile, ensure content-hover cards contain buttons */
  .grid-item .card.content-hover,
  .grid-item .content-hover,
  .content-hover.image-container {
    overflow: hidden !important;
    position: relative !important;
  }
}

/* Ensure content-hover cards contain absolutely positioned buttons */
.content-hover {
  position: relative;
  overflow: hidden; /* keep overlays (buttons) inside the card bounds */
}

.image-container {
  position: relative;
  display: flex; /* set display property to flex */
  align-items: center; /* align items vertically in center */
  justify-content: center; /* justify content horizontally in center */
  overflow: hidden; /* keep overlays (buttons) inside the card bounds */
}

.hover-buttons {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 10;
  opacity: 0;
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 4px;
  padding: 8px;
  background: var(--bg-modal);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
  max-height: calc(100% - 16px); /* never exceed the visible area of the card */
  overflow-y: auto;              /* scroll internally if there are too many buttons */
  align-content: start;          /* keep buttons at top of container when scrolling */
}

.hover-buttons-visible {
  opacity: 1;
}

.hover-buttons .btn {
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.75rem;
  min-height: 32px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-secondary);
  color: var(--text-secondary);
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hover-buttons .btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

.hover-buttons .btn i {
  font-size: 0.875rem;
  margin-right: 2px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

/* Override any existing icon colors */
.hover-buttons .btn i.fas,
.hover-buttons .btn i.far,
.hover-buttons .btn i.fab {
  color: var(--text-secondary);
}

.hover-buttons .btn:hover i {
  color: var(--text-primary);
}

/* Card hover effect */
.card-hover:hover .hover-buttons {
  opacity: 1;
}

/* Special positioning for video hover buttons to avoid overlapping with video controls */
.card-hover[data-type="video"] .hover-buttons {
  bottom: 70px; /* Move buttons up to avoid video controls */
  max-height: calc(100% - 78px); /* keep inside card even on very small videos */
  /* Add some additional spacing and ensure good visibility */
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Responsive adjustments for video hover buttons */
@media (max-width: 768px) {
  .card-hover[data-type="video"] .hover-buttons {
    bottom: 60px;
  }
}

@media (max-width: 480px) {
  .card-hover[data-type="video"] .hover-buttons {
    bottom: 55px;
  }
}

/* Ensure buttons are visible on touch devices when active */
@media (hover: none) {
  .hover-buttons-visible {
    opacity: 1;
  }
}

/* Touch device specific styling */
.touch-device .content-hover {
  cursor: pointer;
  position: relative;
}

.touch-device .content-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  border-radius: 20px;
}

.touch-device .content-hover:hover::after {
  opacity: 1;
}

.touch-device .hover-buttons {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.touch-device .hover-buttons-visible .hover-buttons {
  opacity: 1;
}

/* Mobile mode indicators */
.touch-device .content-hover[data-mobile-mode="buttons-visible"] {
  box-shadow: 0 0 0 2px rgba(255, 65, 108, 0.3) !important;
}

.touch-device .content-hover[data-mobile-mode="buttons-visible"]::after {
  opacity: 1;
  background: rgba(255, 65, 108, 0.1);
}

/* Ensure mobile touch behavior is clear */
.touch-device .content-hover[data-mobile-mode="buttons-visible"] .image-click-area {
  pointer-events: none;
}

.touch-device .content-hover[data-mobile-mode="buttons-visible"] .btnsActions {
  pointer-events: auto;
}

/* Responsive hover buttons for smaller cards - same for assets and profiles */
@media (max-width: 768px) {
  .content-hover .hover-buttons {
    /* Force a compact grid instead of a tall single column */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
  }
  
  .content-hover .hover-buttons .btn {
    padding: 4px 6px;
    font-size: 0.75rem;
    min-height: 32px;
  }
  
  .content-hover .hover-buttons .btn i {
    font-size: 0.875rem;
    margin-right: 2px;
  }
}

@media (max-width: 480px) {
  .content-hover .hover-buttons {
    /* On very small screens, use 2 columns to avoid a long vertical list */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
  }
  
  .content-hover .hover-buttons .btn {
    padding: 3px 4px;
    font-size: 0.7rem;
    min-height: 28px;
    border-radius: 4px;
  }
  
  .content-hover .hover-buttons .btn i {
    font-size: 0.75rem;
    margin-right: 1px;
  }
}

.new-target {
    height: 100%; /* Or enough height to easily hover over */
    width: 100%; /* Ensure it's displayed */
}

.mini-sidebar {
    position: fixed; /* Fixed position to stay in place */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left side (adjust if you want it on the right side) */
    height: 100%; /* Full height */
    width: 40px; /* Width of the mini-sidebar */
    z-index: 1050; /* Ensure it's above other content */
    display: flex;
    align-items: center; /* Center the button vertically */
    justify-content: center; /* Center the button horizontally */
}

.toggle-btn {
    writing-mode: vertical-rl; /* Make the text vertical */
    text-orientation: mixed; /* Adjust text orientation */
}

.hr-grey {
  border-top: 3px solid rgba(0,0,0,.15);
}

.hidden-option {
    display: none;
}

.image-text-wrapper {
    position: relative;
    display: inline-block; /* Or 'block', depending on your layout needs */
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0; /* Ensures the text block spans the full width of the container */
    bottom: 0; /* Ensures the text block spans the full height of the container */
    overflow: hidden; /* Hides text that exceeds the image boundaries */
    padding: 10px; /* Provides padding within the text block. Adjust as needed */
    box-sizing: border-box; /* Ensures padding is included in the text block's dimensions */
    display: flex; /* Utilizes Flexbox for centering/alignment, if needed */
    align-items: flex-start; /* Aligns text to the top of the container */
    justify-content: center; /* Centers text horizontally, if needed */
    text-overflow: ellipsis; /* This property won't work as expected with multi-line text without additional setup */
    white-space: normal; /* Allows text to wrap */
}

.img-fluid-text {
    display: block;
    width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains the image's aspect ratio */
}

.timeline { 
    background-size: 50px 100%; /* Adjust the 50px to match your scale for one second */
    background-image: linear-gradient(to right, #fff 1px, transparent 1px);
    display: flex; 
    align-items: center; 
    overflow-x: scroll; 
    white-space: nowrap; 
}

.timeline-slot { 
    flex: 0 0 auto; 
    padding: 5px; 
    border: 1px solid #ccc; 
}

.resize-handle {
    width: 5px;
    height: 100%;
    background-color: #333;
    position: absolute;
    top: 0;
}
.left-handle {
    left: 0;
    cursor: w-resize;
}
.right-handle {
    right: 0;
    cursor: e-resize;
}
.timeline-clip {
    position: relative;
    background-color: #f8f9fa; 
    padding: 10px; 
    border: 1px solid #007bff; 
    position: relative;
}

.timeline-slot button {
    margin-top: 5px;
}

.clip-caption, .clip-length {
    display: block;
    text-align: center;
}

.nav-tabsList{
  background-color: #F1F3F4 !important;
}

.nav-tabsForm {
  border-bottom: 0px !important;
}

.nav-tabsForm .nav-link.active,
.nav-tabsForm .nav-link:hover,
.nav-tabsForm .nav-link:focus {
  background-color: #1a1d20 !important;
}

.nav-link {
    color: var(--text-tertiary) !important;
    transition: all 0.3s ease !important;
}

.text-nav {
    color: var(--text-tertiary) !important;
    text-decoration: none;
    transition: all 0.3s ease !important;
}

.text-nav:hover, .text-nav:focus, .text-nav.active {
    color: var(--text-secondary) !important;
    text-decoration: none;
    font-weight: 600 !important;
}

.nav-menu {
  border-bottom: 0px !important;
}

.nav-menu .nav-link.active,
.nav-menu .nav-link:hover,
.nav-menu .nav-link:focus {
  background-color: #1a1d20 !important;
  border: 0px;
}

.nav-title {
  font-size: 1.4rem !important;
  border: 0px;
}

.nav-pad {
    padding: 0.1rem 1rem !important;
}

.navbar {
  padding: 0.25rem 1rem !important;
}

.navbar-dark .nav-link {
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

.navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus, .navbar-dark .nav-link.active {
    color: var(--text-secondary) !important;
}

.navbar-light .nav-link {
    color: rgba(0,0,0,0.7) !important;
}

.navbar-light .nav-link:hover, .navbar-light .nav-link:focus, .navbar-light .nav-link.active {
    color: rgba(0,0,0,1) !important;
}

.footer-link {
    color: rgba(255,255,255,1) !important;
}

.footer-link:hover, .footer-link:focus, .footer-link.active {
    color: rgba(255,255,255,0.8) !important;
}

.link-logo:hover {
  text-decoration: none;
}

.control-label {
  color: var(--text-quaternary) !important;
  text-transform: none;
  font-weight: 400 !important;
  margin-bottom: .5rem;
  font-size: 0.9rem;
}

.text-label {
  color: var(--text-quaternary) !important;
  text-transform: none;
  font-weight: 400 !important;
  margin-bottom: .5rem;
  font-size: 0.9rem;
}

.p-content {
  white-space: pre-line !important;
}

main {
  min-height: 80vh !important;
}

/*.tooltip {
  z-index: 3000 !important;
}*/

.tooltip .tooltip-inner { background-color: #ffffff !important; color: #000 !important; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #ffffff !important;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #ffffff !important;
}
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #ffffff !important;
}
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #ffffff !important;
}

.tooltip.show {
    opacity: 1 !important;
} 

input,select,.form-control {
  background-color: rgba(0,0,0,0.5) !important;
  color: var(--text-tertiary) !important;
  border: 1px solid var(--border-secondary) !important;
  transition: all 0.3s ease !important;
}

input:focus,select:focus,.form-control:focus {
  background-color: rgba(0,0,0,0.5) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 73, 118, 0.25) !important;
}

.dropdownAccount {
  min-width: 180px !important;
}

/* Removed custom title styles - using Bootstrap 4 defaults */

/* Keep Bootstrap 4 default typography - no overrides */

/* Body text sizes */
p, .text-body { font-size: 1rem !important; line-height: 1.6 !important; font-weight: 400 !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.5 !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.6 !important; }
.text-subtitle { font-size: 2.2rem !important; }

/* CSS Custom Properties for Modern Dark Theme */
:root {
  /* Primary Brand Colors */
  --primary-pink: #FF4976;
  --primary-purple: #9B2B8A;
  --primary-gradient: linear-gradient(135deg, #FF4976 0%, #E94A7A 25%, #C73A88 75%, #9B2B8A 100%);
  --primary-gradient-hover: linear-gradient(135deg, #9B2B8A 0%, #C73A88 25%, #E94A7A 75%, #FF4976 100%);
  
  /* Modern Dark Background Colors */
  --bg-primary: #0a0e13;
  --bg-secondary: #12161b;
  --bg-tertiary: #1a1f25;
  --bg-quaternary: #232831;
  --bg-card: #1e232a;
  --bg-modal: #1a1f25;
  --bg-input: #232831;
  --bg-hover: #2a2f38;
  
  /* Background Gradients */
  --gradient-primary: linear-gradient(135deg, #0a0e13 0%, #12161b 25%, #1a1f25 75%, #232831 100%);
  --gradient-secondary: linear-gradient(135deg, #12161b 0%, #1a1f25 40%, #232831 60%, #2a2f38 100%);
  --gradient-card: linear-gradient(135deg, #1e232a 0%, #232831 50%, #2a2f38 100%);
  --gradient-modal: linear-gradient(135deg, #1a1f25 0%, #232831 50%, #2a2f38 100%);
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-tertiary: rgba(255, 255, 255, 0.7);
  --text-quaternary: rgba(255, 255, 255, 0.5);
  --text-muted: rgba(255, 255, 255, 0.4);
  
  /* Border Colors */
  --border-primary: rgba(255, 255, 255, 0.15);
  --border-secondary: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(255, 73, 118, 0.3);
  --border-hover: rgba(255, 255, 255, 0.25);
  
  /* Shadow Colors */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-primary: 0 8px 25px rgba(255, 73, 118, 0.35);
  --shadow-primary-hover: 0 12px 35px rgba(255, 73, 118, 0.5);
}

/* Enhanced Hero Titles */
.title-hero {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.subtitle-hero {
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

.text-hero {
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
}

/* Simplified gradient titles */

/* Coherent spacing system */
.section-spacing {
  padding: 4rem 0 !important;
}

.section-spacing-sm {
  padding: 2.5rem 0 !important;
}

.section-spacing-lg {
  padding: 6rem 0 !important;
}

/* Consistent margins */
.mb-section { margin-bottom: 3rem !important; }
.mt-section { margin-top: 3rem !important; }
.mb-feature { margin-bottom: 2rem !important; }
.mt-feature { margin-top: 2rem !important; }
.mb-card { margin-bottom: 1.5rem !important; }
.mt-card { margin-top: 1.5rem !important; }

/* Feature icon styles and animations */
.fade-up i.fa-4x {
  font-size: 3.5rem !important;
  margin-bottom: 1.5rem !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up:hover i.fa-4x {
  transform: translateY(-8px) scale(1.15);
  text-shadow: 0 15px 30px rgba(255, 65, 108, 0.4);
}

/* Ensure icons are properly sized across different sections */
.text-center i.fa-4x {
  display: block;
  width: 100%;
  font-size: 3.5rem !important;
  line-height: 1.2;
}

/* Enhanced button screen class */
.btn-screen {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-screen:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.text-logo {
  font-size: 1.3rem !important;
}

.navbar-brand {
  font-size: 1.3rem !important;
}

.text-main {
  color: #FF4976 !important;
}

a .text-main:hover {
  color: #9B2B8A !important;
}

.text-black {
  color: #000 !important;
}

.text-light {
  color: var(--text-primary) !important;
}

.text-light-70 {
  color: var(--text-tertiary) !important;
}

.text-light-50 {
  color: var(--text-quaternary) !important;
}

.text-light-85 {
  color: var(--text-secondary) !important;
}

.text-black-30 {
  color: rgba(0,0,0,0.4) !important;
}

.text-black-50 {
  color: rgba(0,0,0,0.6) !important;
}

.text-black-70 {
  color: rgba(0,0,0,0.8) !important;
}

.text-white-50 {
  color: var(--text-quaternary) !important;
}

.text-white-70 {
  color: var(--text-tertiary) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Section descriptions */
.section-description {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 2rem !important;
}

.bg-background {
  background: var(--gradient-primary) !important;
}

.bg-feedback {
  background: var(--gradient-secondary) !important;
}

.bg-grey {
  background: var(--gradient-secondary) !important;
}

.bg-dark, .modal-content {
  background: var(--gradient-modal) !important;
  border: 1px solid var(--border-accent) !important;
}

.bg-footer {
  background: linear-gradient(135deg, #080c10 0%, #0f1419 25%, #141820 50%, #1a1f25 100%) !important;
}

.bg-img {
  background-color: #464646 !important;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.2) 90%), url(/bundles/project/images/backgrounds/back1.png); 
  background-size: cover; 
  background-position: bottom;
}

.bg-main {
  background-color: #FF4976 !important;
}

.bg-transparent {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 25%, rgba(0, 0, 0, 0) 100%);
    transition: background-color 0.3s;
}

.bg-black {
  background: linear-gradient(135deg, #050709 0%, #0a0e13 25%, #12161b 50%, #1a1f25 100%) !important;
}

.bg-black2 {
  background: linear-gradient(135deg, #080c10 0%, #0f1419 25%, #141820 50%, #1a1f25 100%) !important;
}

.bg-trans {
  background-color: rgba(255,255,255,.1) !important;
}

#carouselHeader video, #carouselHeader img {
    width: 100%; /* Full width */
    object-fit: cover; /* Cover the area, cropping as necessary */
    height: 100vh;
}

/* Medium devices (tablets, less than 768px) */
@media (max-width: 767.98px) {
    #carouselHeader video, #carouselHeader img{
        height: 80vh; /* Increase height to create more vertical cropping */
    }

    .carousel-caption h1 {
        font-size: 2rem; /* Example: set to 2rem, adjust as needed */
    }
    .carousel-caption h5, .carousel-caption p {
        font-size: 1.2rem; /* Example: set to 1rem, adjust as needed */
    }

    .btn-screen {
        padding: 0.25rem 0.5rem; /* Smaller padding */
        font-size: 0.875rem; /* Smaller font size */
    }
}

/* Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    #carouselHeader video, #carouselHeader img {
        height: 100vh; /* Further increase height for even more vertical cropping */
    }

    .carousel-caption h1 {
        font-size: 1.4rem; /* Example: set to 2rem, adjust as needed */
    }
    .carousel-caption h5, .carousel-caption p {
        font-size: .9rem; /* Example: set to 1rem, adjust as needed */
    }
    .btn-screen {
        padding: 0.2rem 0.4rem; /* Even smaller padding */
        font-size: 0.75rem; /* Even smaller font size */
    }
}

.page-logo {
    max-height: 100vh; /* 100% of the viewport height */
    overflow-x: hidden; /* Ensures anything beyond the max-height is cropped */
}

.page-img {
    height: 100vh; /* Set the image height */
    object-fit: cover; /* Cover the area, cropping the image if needed */
    width: 100%; /* Ensure full width */
}

.badge-beta { 
  color: #000; 
  background-color: #f8f9fa; 
  font-size: 60%;
  vertical-align: middle;
}

.border-main {
  border-color: #FF4976 !important;
}

.badge-main { 
  color: #000; 
  background-color: #FF4976; 
}

.badge-outline-main {
  color: #FF4976; 
  background-color: #fff; 
  border: 1px solid #FF4976; 
}

.badge-list {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.badge-trans {
  background-color: rgba(255,255,255,0.25) !important;
}

.imgContainer {
  position: relative;
}

.imgContainer button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-caption {
    position: absolute;
    bottom: 30px; 
    left: 60px;   
    right: 60px;  
    transform: translateY(0%);
}

.height-1 {
  height: 30% !important;
}

.height-2 {
  height: 55% !important;
}

.height-3 {
  height: 15% !important;
}

.hover-buttons-text {
  font-size: 1rem !important;
}

.hover-buttons-image {
  position: absolute;
  /*top: 5px;
  right: 5px;*/
  font-size: 1rem !important;
}

.text-shadow {
  text-shadow: 0px 0px 1px rgba(0,0,0,1), 0px 0px 3px rgba(0,0,0,.7);
}

.title-shadow {
  text-shadow: 0px 0px 2px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,.7);
}

.text-logout-shadow {
  text-shadow: 0px 0px 2px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,.7), 0px 0px 20px rgba(0,0,0,.5);
}

.shadow-light {
  box-shadow: 0 .5rem 1rem rgba(255,255,255,.15);
}

.badge-light {
  background-color: rgba(255,255,255,0.85) !important;
}

.badge-outline-light {
  background-color: rgba(255,255,255,0.85) !important;
  border: 1px solid #464646 !important;
}

.badge-light2 {
  background-color: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.3) !important;
}

.alert {
  padding: 0.25rem 1.25rem;
}

.text-gradient {
  color: transparent;
  display: inline;
  position: relative;
  background: linear-gradient(135deg, #FF4976 0%, #E94A7A 20%, #C73A88 60%, #9B2B8A 100%) text;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.1em;
  font-weight: 700;
  transition: all 0.3s ease;
}

.text-gradient:hover {
  background: linear-gradient(135deg, #9B2B8A 0%, #C73A88 30%, #E94A7A 70%, #FF4976 100%) text;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-gradient-white {
  background: linear-gradient(90deg, rgba(255,255,255,0.95), #FF4976);  /* Soft White to Pink */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline;
  transition: all 0.3s ease;
}

.text-gradient-white-center {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, #E94A7A 25%, #FF4976 60%, #9B2B8A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
  transition: all 0.3s ease;
}

.btn-gradient-home { 
  color: #000 !important;
  box-shadow: var(--shadow-primary) !important;
  background: var(--primary-gradient) !important;
  border-width: initial !important;
  border-style: none !important;
  border-color: initial !important;
  border-image: initial !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} 

.btn-gradient-home:hover,
.btn-gradient-home:active, 
.btn-gradient-home.active, 
.open .dropdown-toggle.btn-gradient-home { 
  color: #000 !important;
  box-shadow: var(--shadow-primary-hover) !important;
  background: var(--primary-gradient-hover) !important;
  transform: translateY(-2px);
}

.btn-gradient { 
  color: #000 !important;
  box-shadow: var(--shadow-primary) !important;
  background: var(--primary-gradient) !important;
  border-width: initial !important;
  border-style: none !important;
  border-color: initial !important;
  border-image: initial !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} 

.btn-gradient:hover,
.btn-gradient:active, 
.btn-gradient.active, 
.open .dropdown-toggle.btn-gradient { 
  color: #000 !important;
  box-shadow: var(--shadow-primary-hover) !important;
  background: var(--primary-gradient-hover) !important;
  transform: translateY(-2px);
}

.badge-gradient {
  color: #000; 
  background: linear-gradient(90deg, #FF4976, #E94A7A, #9B2B8A);
}

.btn-gradient-trans { 
  color: #fff; 
  background: rgba(255, 73, 118, 0.5);
  border-color: rgba(255, 73, 118, 0.5);
  transition: all 0.3s ease;
} 
 
.btn-gradient-trans:hover, 
.btn-gradient-trans:active, 
.btn-gradient-trans.active, 
.open .dropdown-toggle.btn-gradient-trans { 
  color: #fff; 
  background: rgba(255, 73, 118, 0.75);
  border-color: rgba(255, 73, 118, 0.6);
  box-shadow: 0 8px 25px rgba(255, 73, 118, 0.3);
}

.text-success {
  color: #28a745 !important;
}

.alert-success {
  color: #28a745; 
  background-color: transparent; 
  border-color: #28a745; 
}

.badge-success { 
  color: #000; 
  background-color: #28a745; 
}

.btn-success { 
  color: #000; 
  background-color: #28a745; 
  border: #28a745; 
} 
 
.btn-success:hover,
.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success {
  color: #000;
  background-color: #28a745; 
  border-color: #28a745; 
} 

.btn-outline-success { 
  border-width: 1.5px !important;
} 


.text-danger {
  color: #DC2626 !important;
}

.badge-danger { 
  color: #000; 
  background-color: #DC2626; 
}

.alert-danger {
  color: #DC2626; 
  background-color: transparent; 
  border-color: #DC2626; 
}

.btn-danger { 
  color: #000; 
  background-color: #DC2626; 
  border-color: #DC2626; 
} 
 
.btn-danger:hover,
.btn-danger:active, 
.btn-danger.active, 
.open .dropdown-toggle.btn-danger {  
  color: #000;
  background-color: #C62222; 
  border-color: #C62222; 
} 

.btn-outline-danger { 
  border-width: 1.5px !important;
} 

.btn-outline-danger:hover,
.btn-outline-danger:active, 
.btn-outline-danger.active, 
.open .dropdown-toggle.btn-outline-danger {  
  color: #000;
} 

.btn {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 25px !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1.5rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.025em !important;
}

.btn-lg {
  font-size: 1rem !important;
  padding: 0.75rem 2rem !important;
}

.btn-sm {
  font-size: 0.75rem !important;
  padding: 0.375rem 1rem !important;
}

.btn-xs {
  padding: 0.2rem 0.4rem !important;
  font-size: .8rem !important;  
  line-height: 1.2 !important;
  border-radius: 1rem !important;
}

.btn-width {
  padding: 0.375rem 2rem !important;
}
.btn-main { 
  color: #000 !important; 
  background: var(--primary-gradient) !important;
  border: none !important;
  box-shadow: var(--shadow-primary) !important;
} 
 
.btn-main:hover, 
.btn-main:active, 
.btn-main.active, 
.open .dropdown-toggle.btn-main { 
  color: #000 !important; 
  background: var(--primary-gradient-hover) !important;
  box-shadow: var(--shadow-primary-hover) !important;
  transform: translateY(-2px);
} 
 
.btn-main:active, 
.btn-main.active, 
.open .dropdown-toggle.btn-main { 
  background-image: none; 
} 
 
.btn-main.disabled, 
.btn-main[disabled], 
fieldset[disabled] .btn-main, 
.btn-main.disabled:hover, 
.btn-main[disabled]:hover, 
fieldset[disabled] .btn-main:hover, 
.btn-main.disabled:focus, 
.btn-main[disabled]:focus, 
fieldset[disabled] .btn-main:focus, 
.btn-main.disabled:active, 
.btn-main[disabled]:active, 
fieldset[disabled] .btn-main:active, 
.btn-main.disabled.active, 
.btn-main[disabled].active, 
fieldset[disabled] .btn-main.active { 
  background-color: #FF4976; 
  border-color: #FF4976; 
} 

.btn-outline-main { 
  color: #FF4976; 
  background-color: transparent; 
  border: 1.5px solid #FF4976; 
  transition: all 0.3s ease;
} 
 
.btn-outline-main:hover, 
.btn-outline-main:active, 
.btn-outline-main.active, 
.open .dropdown-toggle.btn-outline-main { 
  color: #000; 
  background-color: #FF4976; 
  border: 1.5px solid #FF4976; 
  box-shadow: 0 8px 25px rgba(255, 73, 118, 0.3);
} 

.btn-outline-secondary { 
  color: #464646 !important;
  background-color: #fff !important;
  border: 1px solid #464646 !important;
  border-radius: 0.25rem !important;
} 
 
.btn-outline-secondary:hover, 
.btn-outline-secondary:active, 
.btn-outline-secondary.active, 
.open .dropdown-toggle.btn-outline-secondary { 
  color: #fff !important;
  background-color: #464646 !important;
  border: 1px solid #464646 !important;
} 

.btn-transparent { 
  color: #464646; 
  background-color: transparent; 
  border: 0px;
  margin: 0.35rem !important;
} 
 
.btn-transparent:hover, 
.btn-transparent:active, 
.btn-transparent.active, 
.open .dropdown-toggle.btn-transparent { 
  color: #fff; 
  background-color: #464646; 
  border: 1.5px solid #464646; 
} 

/* Gallery filter buttons - compact sizing to match selects */
#colGallery .btn-group .btn.btn-icon,
#colGallery #favoritesFilter .btn.btn-icon {
  padding: 0.2rem 0.4rem !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
}
#colGallery .btn-group .btn.btn-icon.mr-2 { margin-right: 0.2rem !important; }
#colGallery .btn-group .btn.btn-icon i { margin-right: 0.2rem; }


.btn-light { 
  color: #464646; 
  background-color: rgba(255,255,255,1); 
  border-color: rgba(255,255,255,1);
} 
 
.btn-light:hover, 
.btn-light:active, 
.btn-light.active, 
.open .dropdown-toggle.btn-light { 
  color: #464646; 
  background-color: rgba(255,255,255,0.8); 
  border-color: rgba(255,255,255,0.8);
} 
 
.btn-light:active, 
.btn-light.active, 
.open .dropdown-toggle.btn-light { 
  background-image: none; 
} 
 
.btn-light.disabled, 
.btn-light[disabled], 
fieldset[disabled] .btn-light, 
.btn-light.disabled:hover, 
.btn-light[disabled]:hover, 
fieldset[disabled] .btn-light:hover, 
.btn-light.disabled:focus, 
.btn-light[disabled]:focus, 
fieldset[disabled] .btn-light:focus, 
.btn-light.disabled:active, 
.btn-light[disabled]:active, 
fieldset[disabled] .btn-light:active, 
.btn-light.disabled.active, 
.btn-light[disabled].active, 
fieldset[disabled] .btn-light.active { 
  background-color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.7);
}

.btn-light-50 { 
  color: #fff !important; 
  background-color: rgba(255,255,255,0.15) !important; 
  border-color: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
} 
 
.btn-light-50:hover, 
.btn-light-50:active, 
.btn-light-50.active, 
.open .dropdown-toggle.btn-light-50 { 
  color: #fff !important; 
  background-color: rgba(255,255,255,0.25) !important; 
  border-color: rgba(255,255,255,0.25) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
} 
 
.btn-light-50:active, 
.btn-light-50.active, 
.open .dropdown-toggle.btn-light-50 { 
  background-image: none; 
} 
 
.btn-light-50.disabled, 
.btn-light-50[disabled], 
fieldset[disabled] .btn-light-50, 
.btn-light-50.disabled:hover, 
.btn-light-50[disabled]:hover, 
fieldset[disabled] .btn-light-50:hover, 
.btn-light-50.disabled:focus, 
.btn-light-50[disabled]:focus, 
fieldset[disabled] .btn-light-50:focus, 
.btn-light-50.disabled:active, 
.btn-light-50[disabled]:active, 
fieldset[disabled] .btn-light-50:active, 
.btn-light-50.disabled.active, 
.btn-light-50[disabled].active, 
fieldset[disabled] .btn-light-50.active { 
  background-color: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.1) !important;
} 

.btn-outline-light { 
  color: rgba(255,255,255,1);
  background-color: transparent; 
  border: 1.5px solid rgba(255,255,255,1);
} 
 
.btn-outline-light:hover, 
.btn-outline-light:active, 
.btn-outline-light.active, 
.open .dropdown-toggle.btn-outline-light { 
  color: #464646; 
  background-color: rgba(255,255,255,1); 
  border: 1.5px solid rgba(255,255,255,1);
} 

.btn-outline-light2 { 
  color: #464646;
  background-color: rgba(0,0,0,0.025);
  border: 1px solid #ced4da;
} 
 
.btn-outline-light2:hover, 
.btn-outline-light2:active, 
.btn-outline-light2.active, 
.open .dropdown-toggle.btn-outline-light2 { 
  color: #464646; 
  background-color: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.3);
} 

.btn-outline-handle {
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(0, 0, 0, 0.125);
  border: 2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(7px);
  transition: all 0.3s ease;
  border-radius: 30px !important;
}

.btn-outline-handle:hover,
.btn-outline-handle:focus,
.btn-outline-handle:active {
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.85);
}

.btn-icon {
  background-color: rgba(0,0,0,0.4) !important;
  color: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(0,0,0,0.6) !important;
  border-radius: 0.25rem !important;
  transition: all 0.3s ease !important;
}

.btn-icon:hover, .btn-icon:focus, .btn-icon.active  {
  color: #000 !important;
  background-color: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
}

.break {
  word-break: break-all !important;
}

.no-break {
  white-space:nowrap !important;
}

.modal-header {
  border-bottom: 3px solid #000 !important;
}

.modal-footer {
  border-top: 3px solid #000 !important;
}

.modal-content {
  border: 0px !important;
  /*border-radius: 1rem !important;*/
  border-radius: 15px !important;
}

.modal-xl {
  max-width: 1100px;  /* or any other width you prefer */
}

.list-group-item {
  background-color: transparent;
}

.list-group-item-sm {
  padding: 0.25rem 0.25rem !important;
  font-size: 90% !important;
}

.card-element {
  border: 0px !important;
  background-color: transparent !important; /* Override Bootstrap's default white background */
}

.card-img {
    width: 100% !important;
    height: auto !important;
}

.img-white {
  -webkit-filter: invert(100%); /* Safari */
  filter: invert(100%);
}

.img-grey {
  -webkit-filter: grayscale(100%); /* Safari */
  filter: grayscale(100%);
}

.img-filter1 {
  -webkit-filter: brightness(100%); /* Safari */
  filter: brightness(100%);
}

.img-filter2 {
  -webkit-filter: brightness(70%); /* Safari */
  filter: brightness(70%);
}

/*.imgCaption {
  max-width: 150px;
}*/

.imgLogout {
  color: #fff; 
  font-size: 18px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  text-align: center;
}

.shadow-container {
  display: inline-block;
  position: relative;
  width: 100%;
}

.shadow-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0px 0px 15px rgba(255,255,255,0.3) inset;
}

.shadow-container {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  background-color: var(--bg-modal) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 8px !important;
  z-index: 2000 !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(10px) !important;
}

.dropdown-item {
  color: var(--text-tertiary) !important;
  transition: all 0.2s ease !important;
}

.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
  color: var(--text-primary) !important;
  background-color: var(--bg-hover) !important;
}

.border-radius {
  border-radius: 20px !important ;
}

/* Enhanced gallery image corners */
#gallery .card-img,
#gallery .card-img-top,
.grid-item .card-img,
.grid-item img {
  border-radius: 20px !important;
}

/* Ensure gallery cards have proper rounded corners */
#gallery .card,
.grid-item .card {
  border-radius: 20px !important;
  overflow: hidden !important;
  background-color: transparent !important; /* Override Bootstrap's default white background */
}

.card-img-top {
  width: 100%;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

/* Improved card image styling */
.card-img {
  width: 100% !important;
  height: auto !important;
  border-radius: 15px !important;
}

.card-img.rounded {
  border-radius: 20px !important;
}

.card-header {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.card {
  border-radius: 15px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  will-change: transform;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-secondary) !important;
}

/* Specific styles for category cards */
#categories .card {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

#categories .card-img-top {
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Enhance category and profile card hover effects */
#categories .card:hover,
#famous .card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35), 0 0 25px rgba(255, 65, 108, 0.2) !important;
}

/* Profile section cards */
#famous .card {
  border-radius: 18px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

/* Ensure AOS animations don't conflict with hover */
.card.aos-animate {
  animation-fill-mode: forwards !important;
}

.card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 65, 108, 0.15) !important;
  z-index: 10 !important;
}

/* Specific card hover animations for different sections */
.card.bg-dark:hover {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-accent) !important;
}

/* Fix for cards with fade-up class */
.fade-up.card:hover,
.fade-up .card:hover {
  transform: translateY(-8px) !important;
}

/* Feature section hover effects */
.fade-up:hover {
  transform: translateY(-5px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure all cards respond to hover regardless of AOS */
div[data-aos]:hover,
.aos-animate:hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card[data-aos]:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 65, 108, 0.15) !important;
}

/* Gallery card specific styles */
.grid-item .card {
  overflow: visible;
  z-index: 1;
}

.grid-item .card:hover {
  z-index: 10;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 65, 108, 0.15);
}

/* CRITICAL: content-hover cards must contain buttons, even inside grid-item */
.grid-item .card.content-hover {
  overflow: hidden !important;
}

/* Ensure image containers don't clip */
.image-container {
  overflow: visible;
}

.image-container:hover {
  overflow: visible;
}

/* CRITICAL: image-container that is also content-hover must contain buttons */
.image-container.content-hover {
  overflow: hidden !important;
}

.stats-card { 
  border-radius: 15px !important;
}

.no-border-top-left {
  border-top-left-radius: 0px !important;
}

.card-pad {
  padding: 1.25rem 1.75rem 1rem 1.75rem !important;
}

.card-pad-home {
  padding: 1rem 1rem .5rem 1rem !important;
}

.card-pad2 {
  padding: 1rem !important;
}

.card-pad3 {
  padding: .5rem !important;
}

.card-pad0 {
  padding: 0rem !important;
}

.card-image {
  padding:  1rem .5rem .5rem 1rem !important;
}

.card-audio {
  padding:  .5rem .5rem .5rem .5rem !important;
}

/*.cardStory {
  border-radius: calc(0.25rem - 1px) !important;
  position: relative;
}*/

.card-link-overlay {
    z-index: 1;
}

.card-link-overlay-list {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* To ensure the link is above the other card content but below any nested links */
}

/*.card-height {
  min-height: 290px !important;
}*/

/*.card-hover { 
  transition: all .2s ease-in-out; 
}

.card-hover:hover{
  transform:scale(1.03); 
}*/

/*.imgClick { 
  transition: all .2s ease-in-out; 
}

.imgClick:hover{
  transform:scale(1.03); 
  cursor: pointer;
} */

.hover-target:hover{
  cursor: pointer;
}

.btnExpand:hover {
  cursor: pointer;
}

.btnUser {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%); 
  z-index: 100;
}

.text-1-lines {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-card-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-audio-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-image-lines {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font-lg {
  font-size: 110%;
}

.font-100 {
  font-size: 100%;
}

.font-90 {
  font-size: 86%;
}

.font-sm {
  font-size: 80%;
}

.font-xs {
  font-size: 60%;
}

.strong {
  font-weight: 700;
}

.regular {
  font-weight: 400;
}

.light {
  font-weight: 300;
}

.container {
    width: auto;
    padding: 0 15px;
}

/* dataTables */
.dataTables_wrapper {
  position: static;
}

.dataTables_length, .dataTables_info {
  color: var(--text-quaternary) !important;
  display: block !important;
  float: left !important;
}

.dataTables_length label select{
  border-radius: 5px !important;
  background-color: rgba(0,0,0,0.5) !important;
  border: 1px solid var(--border-secondary) !important;
  outline: 0 !important;
  color: var(--text-tertiary) !important;
}

.dataTables_filter {
  display: block !important;
  float: right !important;
  margin-left: 0 !important;
  text-align: right !important;
  margin-bottom: 5px !important;
  color: var(--text-quaternary) !important;
}

.dataTables_filter label{
  display: inline-block !important;
}

.dataTables_filter input{
  position: relative !important;
  background-color: rgba(0,0,0,0.5) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: 5px !important;
  margin-bottom: 5px !important;
  padding: 6px 10px !important;
  outline: 0 !important;
  color: var(--text-tertiary) !important;
  transition: all 0.3s ease !important;
}

.dataTables_filter input:focus {
  background-color: rgba(0,0,0,0.5) !important;
  border-color: var(--border-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 73, 118, 0.25) !important;
  color: var(--text-secondary) !important;
}

.paginate_button{
  background-color: rgba(0,0,0,0.5) !important;
  color: var(--text-tertiary) !important;
  border: 1px solid var(--border-secondary) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: rgba(255,255,255,0.75) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active{
  background: var(--bg-hover) !important;
  background-color: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-accent) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--text-muted) !important;
  border: 1px solid var(--border-secondary) !important;
  background-color: var(--bg-secondary) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.5 !important;
}

.dataTables_paginate {
  color: var(--text-tertiary) !important;
}

/* Table header styles */
table.dataTable thead th {
    background-color: var(--bg-secondary) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--border-secondary) !important;
    padding: 12px 8px;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

table.dataTable thead tr {
    border: 0 !important;
}

table.dataTable tbody td {
    border-top: 1px solid var(--border-secondary) !important;
    font-weight: 400 !important;
    color: var(--text-tertiary) !important;
    padding: 10px 8px;
}

table.dataTable tfoot th {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.btnTop {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 98;
    border-radius: 20px !important;
}

.btn-radio1 {
  border-radius: 25px 0px 0px 25px !important;
}

.btn-radio2 {
  border-radius: 0px 25px 25px 0px !important;
}

.btn-no-radius {
  border-radius: 5px !important;
}

@media (min-width: 768px) {
    .h-md-100 {
        height: 100% !important;
    }
}

@media (min-width: 992px) {
    .h-lg-100 {
        height: 100% !important;
    }
} 

.form-control-custom {
  background-color: #141619 !important;
  color: rgba(255,255,255,0.8) !important;
  border: 0px !important;
  font-weight: 400 !important;
  border-radius: 0.25rem !important;
  text-transform: none !important;
}

.btn-filter-custom {
  background-color: #141619 !important;
  color: rgba(255,255,255,0.6) !important;
  border: 0px solid rgba(255,255,255,0.6) !important;
  font-weight: 700 !important;
  border-radius: 0.25rem !important;
}

.btn-filter-custom.active, .btn-filter-custom:not(:disabled):hover {
  background-color: rgba(255,255,255,0.6) !important;
  color: rgba(0,0,0,0.8)  !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
}

.btn-filter-custom:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.border-dashed {
  border: 2px dashed #dee2e6;
}
.checkmark-overlay {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 123, 255, 0.8);
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#panelAssets .col-sm-6 {
  position: relative;
}

#panelAssets img {
  cursor: pointer;
}

#panelAssets img.selected {
  border: 3px solid #007bff;
}

.font-95 {
  font-size: 94%;
}

.badge-main2 { 
  color: #000; 
  background-color: #9B2B8A; 
}

.btn-main2 { 
  color: #000; 
  background: #FF4976;
  border-color: #FF4976; 
}

.border-top {
  border-top: 3px solid #000 !important;
}

.form-control-outline {
  background-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.8) !important;
  border: 0px !important;
  font-weight: 400 !important;
  border-radius: 0.25rem !important;
}

.bg-dark-input {
  background-color: rgba(0,0,0,0.5) !important;
}

.grid-item-profile {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* Profile grid - Responsive design */
@media (min-width: 1200px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 25%; } /* 4 columns for larger screens */
}

@media (min-width: 960px) and (max-width: 1199px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 33.33%; } /* 3 columns */
}

@media (min-width: 768px) and (max-width: 959px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 33.33%; } /* 3 columns */
}

@media (min-width: 600px) and (max-width: 767px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 50%; } /* 2 columns */
}

@media (min-width: 480px) and (max-width: 599px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 50%; } /* 2 columns */
}

@media (min-width: 320px) and (max-width: 479px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 100%; } /* 1 column */
}

@media (max-width: 319px) {
  .grid-sizer-profile,
  .grid-item-profile { width: 100%; } /* 1 column */
}

/* Global scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 4px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-accent);
}

/* For Firefox - global scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-primary) var(--bg-secondary);
}

/* Custom class for elements that need scrollbar styling */
.custom-scrollbar {
  /* Ensure the element has a scrollbar */
  overflow-y: auto;
  
  /* Hide default scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Show custom scrollbar only for Webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--border-accent);
}

.grid-item-gallery {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* Gallery grid - High density display optimized */
@media (min-width: 1200px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 16.666% }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 16.666%; } /* 6 columns */
} 

@media (min-width: 768px) and (max-width: 959px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 20%; } /* 5 columns */
}

@media (min-width: 600px) and (max-width: 767px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 25%; } /* 4 columns */
}

@media (min-width: 480px) and (max-width: 599px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 33.33%; } /* 3 columns */
}

@media (min-width: 320px) and (max-width: 479px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 50%; } /* 2 columns */
}

@media (max-width: 319px) {
    .grid-sizer-gallery,
    .grid-item-gallery { width: 100%; } /* 1 column */
}

.nohover:hover, .nohover:focus, .nohover.active {
  background-color: transparent !important;
}

/* Package selection card styles */
.btnPlan {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btnPlan:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
}

.btnPlan.active {
    border: 2px solid #FF4976;  /* Using your updated main theme color */
    box-shadow: 0 .5rem 1rem rgba(255,73,118,.25);  /* Matching shadow with theme color */
}

/* Terms of service text content styling */
.terms-text {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* More compact "Image Consent & Origin Declaration" blocks */
#editImageConsentContainer .alert,
#editVideoConsentContainer .alert {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
}

#editImageConsentContainer .control-label,
#editVideoConsentContainer .control-label {
  font-size: 0.8rem;
  margin-bottom: 0.25rem !important;
}

#editImageConsentContainer .custom-control-label,
#editVideoConsentContainer .custom-control-label {
  font-size: 0.72rem;
}

#editImageConsentContainer .form-group,
#editVideoConsentContainer .form-group {
  margin-bottom: 0.5rem !important;
}

#editImageConsentContainer .pl-3,
#editVideoConsentContainer .pl-3 {
  padding-left: 0.75rem !important;
}

/* Add these new classes */
.hero-container {
  position: relative;
  width: 100%;
}

.hero-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Adjust opacity as needed (0.5 = 50% dark) */
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure caption stays above the overlay */
.hero-container .carousel-caption {
  z-index: 2
}

/* Masonry wrapper and container styles moved to consolidated definitions below */

.masonry-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px; /* Adjust this value to control the height of the gradient */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  pointer-events: none; /* Allows clicking through the gradient */
  z-index: 10; /* Ensure gradient appears above the gallery items */
}

.profile-item {
  transition: all 0.3s ease;
}

#baseImagePreview:hover .overlay,
#variationsPreview:hover .overlay,
.empty-preview .overlay {
    opacity: 1 !important;
}

/* Consolidated masonry wrapper and container styles */
.masonry-wrapper {
  position: relative;
  overflow: visible;
  padding: 20px 0;
}

.masonry-container {
  position: relative;
  overflow: hidden;
  max-height: 1200px;
  padding-bottom: 0px;
}

/* Ensure images fill their containers properly */
.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Video-specific styling for grid items - match image behavior */
.grid-item video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* Ensure video containers don't overflow */
.grid-item-gallery video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Fix video aspect ratio in grid - match image containers */
.grid-item-gallery .card-hover[data-type="video"] {
  overflow: hidden !important;
}

.grid-item-gallery .card-hover[data-type="video"] video {
  width: 100% !important;
  height: auto !important;
}

/* Additional fixes for regular grid items */
.grid-item .card-hover[data-type="video"] {
  overflow: hidden !important;
}

.grid-item .card-hover[data-type="video"] video {
  width: 100% !important;
  height: auto !important;
}

/* Base image preview aspect ratio cropping */
#baseImagePreview {
  position: relative;
}

#baseImagePreview img {
  transition: all 0.3s ease;
}

/* Aspect ratio indicators */
.aspect-ratio-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  z-index: 5;
}

/* Video mode image selection styles */
body.video-mode .content-hover:not([data-type="video"]) {
  cursor: pointer;
  transition: all 0.3s ease;
}

body.video-mode .content-hover:not([data-type="video"]):hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(255, 65, 108, 0.3);
}

/* Selected image state */
body.image-selected .content-hover:not([data-type="video"])::after {
  display: none;
}

/* Base image preview styles */
#baseImagePreview {
  position: relative;
}

#baseImagePreview .position-relative {
  position: relative !important;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

#baseImagePreview img {
  transition: all 0.3s ease;
  border-radius: 8px;
}

/* Aspect ratio indicator styles */
.aspect-ratio-indicator {
  position: absolute !important;
  bottom: 5px !important;
  right: 5px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  z-index: 10 !important;
  backdrop-filter: blur(4px);
}

/* Selected image state */
body.image-selected .content-hover:not([data-type="video"])::after {
  display: none;
}

.nav-tabs .nav-link:not(.active):hover {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #1a1f25 0%, #1e232a 50%, #1c2128 100%) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.nav-tabs .nav-link:not(.active):hover i {
  color: rgba(255, 255, 255, 0.7) !important;
}
.nav-tabs .nav-link.active {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: linear-gradient(135deg, #1a1f25 0%, #1e232a 50%, #1c2128 100%) !important;
  color: #fff !important;
}
.nav-tabs .nav-link {
  border: 1px solid rgba(255, 65, 108, 0.3) !important;
  background: rgba(255, 65, 108, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Simple hover effects - consistent with existing design */

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

/* Removed news-specific styles */

/* Removed pagination news styles */

.article-content h1, .article-content h2, .article-content h3, 
.article-content h4, .article-content h5, .article-content h6 {
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content h1:first-child, .article-content h2:first-child, 
.article-content h3:first-child, .article-content h4:first-child, 
.article-content h5:first-child, .article-content h6:first-child {
    margin-top: 0;
}

.article-content p {
    margin-bottom: 1.2rem;
    line-height: 1.7;
}

.article-content blockquote {
    border-left: 4px solid;
    border-image: linear-gradient(45deg, #ff6b9d, #c44569, #f8b500) 1;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0 4px 4px 0;
}

.search-form .form-control:focus {
    border-color: #ff6b9d;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 157, 0.25);
}

#searchResults {
    max-height: 300px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

#searchResults::-webkit-scrollbar {
    width: 6px;
}

#searchResults::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#searchResults::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff6b9d, #c44569);
    border-radius: 3px;
}

.list-view .col-lg-3 {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
}

.list-view .card {
    display: flex;
    flex-direction: row;
    height: 200px;
}

.list-view .card-img-top {
    width: 300px;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem 0 0 0.375rem !important;
}

.list-view .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

@media (max-width: 768px) {
    .list-view .card {
        flex-direction: column;
        height: auto;
    }
    
    .list-view .card-img-top {
        width: 100%;
        height: 200px;
        border-radius: 0.375rem 0.375rem 0 0 !important;
    }
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
}

@supports (position: sticky) {
    .sticky-top {
        position: sticky;
    }
}

.reading-progress {
    background: linear-gradient(90deg, #ff6b9d, #c44569, #f8b500);
    height: 4px;
    transition: width 0.1s ease;
}

#tableOfContents .heading-h1 { margin-left: 0; }
#tableOfContents .heading-h2 { margin-left: 1rem; }
#tableOfContents .heading-h3 { margin-left: 2rem; }
#tableOfContents .heading-h4 { margin-left: 3rem; }
#tableOfContents .heading-h5 { margin-left: 4rem; }
#tableOfContents .heading-h6 { margin-left: 5rem; }

.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

/* Responsive improvements */
@media (max-width: 575.98px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .title-hero {
        font-size: 1.8rem;
    }
    
    .search-form .row > div {
        margin-bottom: 0.5rem;
    }
    
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination .page-item {
        margin: 0.2rem;
    }
}

/* Dark mode text selection */
::selection {
    background: rgba(255, 107, 157, 0.3);
    color: #fff;
}

/* Loading animations */
.skeleton {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 25%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Focus styles for accessibility */
.btn:focus,
.form-control:focus,
.page-link:focus {
    outline: 2px solid #ff6b9d;
    outline-offset: 2px;
}

/* Print styles for articles */
@media print {
    .sidebar,
    .navbar,
    .pagination,
    .btn,
    #backToTop,
    .progress {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .article-content {
        color: #000;
    }
    
    .bg-dark {
        background: #fff !important;
        color: #000 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-white-70 {
        color: #fff !important;
    }
    
    .border-secondary {
        border-color: #fff !important;
    }
}

/* News Social Sharing Enhancements */
.share-btn:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.share-btn[data-platform="twitter"]:hover {
    background-color: #1da1f2;
    border-color: #1da1f2;
    color: white !important;
}

.share-btn[data-platform="facebook"]:hover {
    background-color: #4267B2;
    border-color: #4267B2;
    color: white !important;
}

.share-btn[data-platform="linkedin"]:hover {
    background-color: #0077b5;
    border-color: #0077b5;
    color: white !important;
}

.share-btn[data-platform="whatsapp"]:hover {
    background-color: #25D366;
    border-color: #25D366;
    color: white !important;
}

#copyLinkBtn:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white !important;
}

/* News Search Enhancements */
.hover-bg-secondary:hover {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

/* Article view count styling */
.article-meta .text-white-70 {
    font-size: 0.9rem;
}

/* News Layout Improvements */
.line-height-sm {
    line-height: 1.3;
}

.border-left-gradient {
    border-left: 4px solid #ff6b9d;
}

.text-white-85 {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Article content styling */
.article-content h2,
.article-content h3,
.article-content h4 {
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.article-content h3 {
    color: #ff6b9d;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content blockquote {
    border-left: 4px solid #ff6b9d;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

/* News card improvements */
.card-hover-home:hover {
    transform: translateY(-8px);
    transition: all 0.3s ease;
}

/* Pagination improvements */
.pagination .page-link {
    padding: 0.75rem 1.25rem;
    font-weight: 500;
}

.pagination .page-link:hover {
    background-color: #495057;
    border-color: #495057;
    color: #fff;
}

/* Search form improvements */
.form-control-lg {
    border-radius: 0.5rem;
    border: 1px solid #495057;
    background-color: #212529;
    color: #fff;
}

.form-control-lg:focus {
    border-color: #ff6b9d;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 157, 0.25);
    background-color: #212529;
    color: #fff;
}

/* Badge improvements */
.badge-gradient {
    background: linear-gradient(45deg, #ff6b9d, #c44569);
    border: none;
    font-weight: 500;
}

/* Responsive improvements for mobile */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }
    
    .article-content {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .card-body {
        padding: 1.5rem !important;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

@media (max-width: 576px) {
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
    
    .h5 {
        font-size: 1rem;
    }
}

/* Video Duration Range Slider Styles */
input[type="range"].form-control-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    padding: 0 !important;
}

input[type="range"].form-control-range:hover {
    border-color: var(--border-accent);
}

input[type="range"].form-control-range:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 0.2rem rgba(255, 73, 118, 0.25);
}

/* Webkit (Chrome, Safari, Edge) */
input[type="range"].form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #FF4976 0%, #E94A7A 25%, #C73A88 75%, #9B2B8A 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 73, 118, 0.3);
}

input[type="range"].form-control-range::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, #9B2B8A 0%, #C73A88 25%, #E94A7A 75%, #FF4976 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(255, 73, 118, 0.5);
    transform: scale(1.1);
}

/* Firefox */
input[type="range"].form-control-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #FF4976 0%, #E94A7A 25%, #C73A88 75%, #9B2B8A 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 73, 118, 0.3);
}

input[type="range"].form-control-range::-moz-range-thumb:hover {
    background: linear-gradient(135deg, #9B2B8A 0%, #C73A88 25%, #E94A7A 75%, #FF4976 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(255, 73, 118, 0.5);
    transform: scale(1.1);
}

input[type="range"].form-control-range::-moz-range-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
}

/* Microsoft Edge and IE */
input[type="range"].form-control-range::-ms-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #FF4976 0%, #E94A7A 25%, #C73A88 75%, #9B2B8A 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 73, 118, 0.3);
}

input[type="range"].form-control-range::-ms-thumb:hover {
    background: linear-gradient(135deg, #9B2B8A 0%, #C73A88 25%, #E94A7A 75%, #FF4976 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(255, 73, 118, 0.5);
}

input[type="range"].form-control-range::-ms-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    color: transparent;
}

input[type="range"].form-control-range::-ms-fill-lower,
input[type="range"].form-control-range::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
}

/* Video Duration Display */
#videoDurationDisplay {
    min-width: 105px;
    text-align: center;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border-secondary);
    font-size: 0.95rem;
    white-space: nowrap;
    display: inline-block;
}