@media (max-width: 576px) {
  html {
    font-size: 110%; 
  }
}

@font-face {
  font-family: "Nulshock bd";
  src: url("/webfonts/nulshock bd.ttf");
}

@font-face {
  font-family: "Simple Nathalie";
  src: url("/webfonts/Simple Nathalie.otf");
}

@font-face {
  font-family: "cfont";
  src: url("/webfonts/cfont.otf");
}

body.light-theme {
  --bg-navbar: rgba(255, 255, 255, 0.95);
  --bg-color1: rgb(255, 255, 255); 
  --bg-color2: rgb(255, 255, 255);
  --bg-color3: rgb(255, 255, 255);
  --bg-color4: #e9f5ff;
  --bg-hover: rgb(235, 235, 235);
  --bg-btn1: #f4faff;
  --bg-btn1-hover:#e9f5ff;
  --bg-btn2: #f4faff;
  --bg-btn2-hover:#e9f5ff;
  --bg-btn3: #e6f4ff; 
  --bg-btn3-hover: #cce8ff;
  --bg-popover1:rgb(243, 250, 255); 
  --bg-popover2:#e6f4ff; 

  --color-text-main1: #006dba;
  --color-text-main2: rgba(10, 10, 40, 0.9);
  --color-text-muted: rgba(10, 10, 20, 0.8);
  --color-text-placeholder: rgba(50, 50, 50, 0.5);
  --color-text-btn:#006dba;

  --border-color: #e2eaf7; 
  --box-shadow: rgba(100, 100, 100, 0.4);
}

body.dark-theme {
  --bg-navbar: rgba(39, 36, 45,0.95); 
  --bg-color1: #16151a;
  --bg-color2: #27242d;
  --bg-color3: #302d37;
  --bg-color4: #3b3744;
  --bg-hover: #302d37;
  --bg-btn1: #302d37; 
  --bg-btn1-hover:#3d3946; 
  --bg-btn2: #3d3946; 
  --bg-btn2-hover:#555061; 
  --bg-btn3: #3d3946; 
  --bg-btn3-hover:#555061; 
  --bg-popover1: #302d37;
  --bg-popover2:#27242d;

  --color-text-main1: rgb(255,255,255); 
  --color-text-main2: rgb(245, 245, 245);
  --color-text-muted: rgb(150, 150, 150);
  --color-text-placeholder: rgba(255, 255, 255, 0.4);
  --color-text-btn:white;
  
  --border-color: rgba(85, 80, 97, 0.6); 
  --box-shadow:rgba(22, 21, 26, 0.6); 
}

body {
  background-color: var(--bg-color1);
  color: var(--color-text-main1);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.fullscreen {
  min-height: calc(100vh - var(--navbar-height));
  height: auto;
}

#left-sidebar-wrapper {
  /* width: 50px; */
  width: 0px; 
}

#main-wrapper {
  margin-left: 0px;
}

@media (min-width: 576px) {
  #main-wrapper {
   /* margin-left: 50px; */
   margin-left: 0px;

  }
}

@media (min-width: 768px) {
  #left-sidebar-wrapper {
    width: 230px;
  }

  #main-wrapper {
    margin-left: 230px;
  }
}

h1, h2, h3, h4, h5, h6,
p, small, span, a {
  color: var(--color-text-main2);
}

.c-text-main1,
.c-text-main1:hover {
  color: var(--color-text-main1);
}

.c-text-main2,
.c-text-main2:hover {
  color: var(--color-text-main2);
}

.c-text-muted,
.c-text-muted:hover {
  color: var(--color-text-muted);
}

.c-text-danger { color: #EC407A!important; }
.c-text-warning { color: #FFCA28!important;  }
.c-text-success { color: #00E676!important;  }
.c-text-secondary { color: #673AB7!important;  }

.c-bg1 {
  background: var(--bg-color1);
  color:var(--color-text-main2);
}

.c-bg2 {
  background: var(--bg-color2); 
  color:var(--color-text-main2);
}

.c-bg3 {
  background: var(--bg-color3);
  color:var(--color-text-main2);
}

.c-bg4 {
  background: var(--bg-color4); 
  color:var(--color-text-main2);
}

.c-btn1 {
  background: var(--bg-btn1)!important;  ; 
  color: var(--color-text-btn);
  box-shadow: none!important;
}

.c-btn1:hover, .c-btn1:active {
  background: var(--bg-btn1-hover)!important; 
  color: var(--color-text-btn);
  box-shadow: none!important;
}

.c-btn2 {
	background:var(--bg-btn2)!important;  ;  
  color: var(--color-text-btn);
  box-shadow: none!important;
}

.c-btn2:hover, .c-btn2:active {
	background:var(--bg-btn2-hover)!important;  
  color: var(--color-text-btn);
  box-shadow: none;
}

.c-btn3 {
	background:var(--bg-btn3)!important;    
  color: var(--color-text-btn);
  box-shadow: none!important;
}

.c-btn3:hover, .c-btn3:active {
	background:var(--bg-btn3-hover)!important;  
  color: var(--color-text-btn);
  box-shadow: none;
}

.c-dropdown, .c-dropdown li a {
  background: var(--bg-color3) !important;
  color: var(--color-text-main1) !important;
}

.c-dropdown li a:hover,
.c-dropdown li a:active {
  background: var(--bg-color4) !important;
  color: var(--color-text-main1) !important;
}

.c-modal {
  background: var(--bg-color2);
  color: var(--color-text-main2);
}

.c-card1 {
  background: var(--bg-color2); 
  color:var(--color-text-main2);
}

.c-popover {
  background: var(--bg-popover1); 
  color:var(--color-text-main2);
}

.c-popover-header {
  background: var(--bg-popover2); 
  color:var(--color-text-main1);
}

input, 
select,
textarea {
  background: transparent !important;
  color: var(--color-text-main2) !important;
}

::placeholder {
  color: var(--color-text-placeholder)!important;
}

.hover-effect1 li:hover {
  background: var(--bg-color4); 
  border-radius:5px; 
}

.story-mask {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.bg-image:hover .story-mask {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(6px);
}

.hover-info {
  opacity: 0;
}

.bg-image:hover .hover-info {
  opacity: 1;
}

.bg-image:hover .hover-badge {
  display: none;
}

.slider {
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 10px 50px;
}

.slider-item {
  flex: 0 0 320px;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.slider-btn-left { left: 0; }
.slider-btn-right { right: 0; }

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  display: none;
}

.c-badge {
  background:var(--bg-btn2-hover);
  color:var(--color-text-main2);
}

.c-badge-danger { background: #ef5d8d; color: white; }
.c-badge-warning { background: #e3ba02; color: white; }
.c-badge-success { background: #00b35c; color: white; }
.c-badge-secondary { background: #8b64ce; color: white; }

.c-border {
  border:1px solid var(--border-color); 
}

.c-border-top {
  border-top:1px solid var(--border-color); 
}

.c-border-bottom {
  border-bottom:1px solid var(--border-color); 
}

.c-border-right {
  border-right:1px solid var(--border-color); 
}

.c-box-shadow {
  box-shadow:6px 6px 6px var(--box-shadow); 
}

.tooltip-inner{
  background-color:var(--bg-btn2-hover);
  color: var(--color-text-main1);             
  font-size:0.8rem;
  padding:6px 10px;
  border-radius:8px;
}

.smooth {
  transition: all 1.5s ease;
}

.username {
  display:none!important; 
}