/* start mobile */
  /* Show only on mobile (example: max-width 768px) */
@media screen and (max-width: 768px) {
    .mobilehide {
       display: none !important;/* Or flex/inline depending on need */
    }
	
	.logomobile {
		display: none !important;
	}
	
	
}

   /* end mobile */
  
  @media screen and (min-width: 1024px) {
  .footerdesktopleft {
    padding-left: 60px;
  }

}
 
 
 
 
        .tooltip-cloud {
            position: absolute;
            top: -35px;
            left: -40px;
            background: #333;
            color: #fff;
            padding: 6px 10px;
            border-radius: 8px;
            font-size: 0.85em;
            opacity: 0;
            white-space: nowrap;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .tooltip-cloud.show {
            opacity: 1;
        }
  
  
   .inactive {
    background-color: #ccc; /* Gray background */
    color: #666;             /* Dimmed text */
    pointer-events: none;    /* Prevents clicking */
    cursor: not-allowed;
	opacity: 0.5;
  }
  

  
  .form-control {
    -webkit-transition: none !important;
    transition: none !important;
}


.input-clear-wrapperb {
    position: relative;
}

    .input-clear-wrapperb input {
        padding-right: 30px; /* Add space for the X button */
    }


.clear-btnb {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
	color: gray !important;
}

    .clear-btnb:hover {
        color: #333;
    }
   
 
  #charCount {
    
      font-size: 14px;
      margin-top: 5px;
	  float:right !important;
    }
  
  
  .form-control {border: 1px solid #cccccc !important;}
  
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 0.75rem 2.5rem 0.75rem 1rem;
      font-size: 1rem;
      border-radius: 8px;
      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1rem;
      cursor: pointer;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    select:focus {
      outline: none;
      border-color: #7b61ff;
      box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.2);
    }
	
	
.scroll-arrow {
  position: absolute;
  bottom: 20px;
  left: 40%;
  transform: translateX(-50%);
  font-size: 20px;
  color: #000; /* adjust as needed */
  animation: bounce 1.5s infinite;
  pointer-events: none; /* so it doesn't interfere with clicks */
  z-index: 10;
  opacity: 0.7;
}

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

.startbar-collapse {
  overflow-y: hidden !important; /* Hide vertical scrollbar */
}

/* If you want to keep the scrolling functionality but hide the scrollbar visually (works for most browsers): */
.startbar-collapse::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
}

/* For Firefox */
.startbar-collapse {
  scrollbar-width: none; /* Hide scrollbar */
  -ms-overflow-style: none; /* IE and Edge */
}



#searchInput::placeholder {
  font-weight: normal !important;
  font-family: inherit; /* Optional: ensure it matches the input's font */
  color: #a8b5d1; /* Optional: placeholder color */
}

 .startbar .startbar-menu .startbar-collapse {
    padding: 0 16px 16px !important;
    height: calc(100vh - 0px) !important;
    overflow-y: auto !important;
 }
 
 .startbar-menu .nav-link {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    gap: 10px;
    color: #96a0b5;
    font-size: 14px;
}

.startbar-menu .nav-link i {
    font-size: 16px !important;
    color: #96a0b5 !important;
}

.startbar-menu .nav-link span {
    margin: 0;
}

.startbar-menu .badge {
    margin-left: auto;
}

.menu-icon {
    width: 20px;
    text-align: center;
}


 
 body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
  }
  
  .home-page .app-search {
    display: none;
}

.faq-question  {font-size:14px !important;}
.faq-answer {font-size:14px !important; text-align: justify !important;}

  /* start gallery Lightbox */
  
 .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; /* adjust spacing as needed */
  }

  .gallery img {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (max-width: 768px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto); /* ensures two rows */
    }

    .gallery a:nth-child(n+5) {
      display: none; /* show only 4 images on mobile */
    }
  }
  /* Upgrade to 4 columns on wider screens (desktop) */
  @media (min-width: 768px) {
    .gallery {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Lightbox Styles */
  .lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .lightbox:target {
    display: flex;
  }

  .lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
  }

  .lightbox-content img {
    width: 100%;
    height: auto;
  }

  .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    color: white;
    text-decoration: none;
    padding: 0 10px;
  }

  .nav.prev { left: 0; }
  .nav.next { right: 0; }

  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2em;
    color: white;
    text-decoration: none;
  }
  
  
  /* close gallery Lightbox */
  
  .grayicon { font-size:21px !important; color:#96a0b5 !important; }
  
  .hint-bar {
      width: 100%;
	  padding:10px;
	  margin-top: 15px !important;
      text-align: center !important;
      background-color: #fff; /* Light gray background */
      display: flex;
      align-items: center; /* Vertical centering */
      justify-content: center; /* Horizontal centering */
      font-family: Arial, sans-serif;
      font-size: 15px;
      color: #93a1c5;
    }

.btnhovera:hover {
	border: 2px #000 solid !important;
}

.appbutton {
	border: 2px #a8b5d1 solid !important;
	background-color: #fff !important;
	color: #000 !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	border-radius: 25px !important;
	padding-top: 5px !important;
}

.appbutton:hover {
	border: 2px #000 solid !important;
	background-color: #fff !important;
	color: #000 !important;
	border-radius: 25px !important;
}

.appbuttoninactive {
	border: 2px #a8b5d1 solid !important;
	background-color: #fff !important;
	color: #000 !important;
	border-radius: 25px !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	padding-top: 5px !important;
}

.appbuttoninactive:hover {
	border: 2px #a8b5d1 solid !important;
	background-color: #fff !important;
	color: #000 !important;
	border-radius: 25px !important;
	cursor: default !important;
}

/* Keyframes for shake effect */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/* Apply animation on hover */
.shake-hover:hover {
  animation: shake 0.5s;
  animation-timing-function: ease-in-out;
}



select,
select option {
  background-color: #fff;
  color: #000;
}


.floating-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #3167f3;
      color: white;
      padding: 15px 25px;
      border: none;
      border-radius: 50px;
      font-size: 16px;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      transition: background-color 0.3s ease;
    }

    .floating-button:hover {
      background-color: #2552c4; /* Darker shade on hover */
    }
	
	
	
	
	
	 body {
      margin: 0;
      font-family: sans-serif;
    }

   .gallery {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.gallery a {
  display: block;
  width: 100%;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.85);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    :target.lightbox {
      display: flex;
    }

    .lightbox-content {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .lightbox-content img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 4px;
    }

    .nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2em;
      color: white;
      text-decoration: none;
      padding: 10px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      cursor: pointer;
      user-select: none;
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }

    .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 2em;
      color: white;
      text-decoration: none;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px 12px;
      border-radius: 5px;
    }

    #close {
      position: absolute;
      top: 0;
    }
	
	
	
	
	
	
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 20px;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .gallery img {
      width: 100%;
      height: auto;
      cursor: pointer;
      border-radius: 5px;
      transition: transform 0.2s;
    }
    .gallery img:hover {
      transform: scale(1.05);
    }

    /* Lightbox styles */
    .lightbox {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.8);
      align-items: center;
      justify-content: center;
    }
    .lightbox img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 10px;
    }
    .lightbox:target {
      display: flex;
    }


.simplebar-content {
      overflow: hidden !important; /* Hide vertical scrollbar */
}


    /* Dark Mode start */
	
	

	html[data-bs-theme="dark"] .faq-question  {font-size:14px !important; background-color:#000 !important;}
	html[data-bs-theme="dark"] 	.faq-answer {font-size:14px !important; text-align: justify !important; background-color:#000 !important;}

	html[data-bs-theme="dark"]  .mb-3 {color:#fff !important; }
	html[data-bs-theme="dark"]  .hellotext {color:#fff !important; }
	html[data-bs-theme="dark"]  .opacitybgbar {background-color: rgba(0, 0, 0, 0.7) !important; }
	
	
		html[data-bs-theme="dark"] #blekulogo {
 content: url('https://apiserwer.pl/simple/assets/images/logo-bleku-white.png');
}
	
		html[data-bs-theme="dark"] #blekutext {
  color: #fff !important;
   font-size: 31px;
  position: relative;

}
	
	
	
	
	
	html[data-bs-theme="dark"] #askChatGPT {
  color:#fff !important;
}
	html[data-bs-theme="dark"] #askGoogle {
  color:#fff !important;
}
	html[data-bs-theme="dark"] #generateImage {
  color:#fff !important;
}
	html[data-bs-theme="dark"] .startbar {
  background-color: #0f111a !important;
  border-right: 1px #0f111a solid !important;
}
	html[data-bs-theme="dark"] #searchInput {
  border-bottom: 1px solid #2c2c2c !important;
  color: #b1b1b1 !important;
}


	html[data-bs-theme="dark"] #searchInput::placeholder {
   color: #585858; /* Optional: placeholder color */
}







	.nav-link:hover {
background-color: #f6f7fa;
}
	html[data-bs-theme="dark"] .nav-link {
 color:#fff !important; 
}
	html[data-bs-theme="dark"] .nav-link:hover {
background-color: #1f1f1f;
}	

    html[data-bs-theme="dark"] .hint-bar {
background-color: transparent; color: gray;
}
    html[data-bs-theme="dark"] .aisup {
color: gray !important;
}


 html[data-bs-theme="dark"] .appbutton {
	border: 2px gray solid !important;
	background-color: transparent !important;
	color: #fff !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	border-radius: 25px !important;
	padding-top: 5px !important;
}

 html[data-bs-theme="dark"] .appbutton:hover {
	border: 2px #fff solid !important;
	background-color: transparent !important;
	color: #fff !important;
	border-radius: 25px !important;
}

 html[data-bs-theme="dark"] .appbuttoninactive {
	border: 2px #a8b5d1 solid !important;
	background-color: transparent !important;
	color: #fff !important;
	border-radius: 25px !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	padding-top: 5px !important;
}

 html[data-bs-theme="dark"] .appbuttoninactive:hover {
	border: 2px #a8b5d1 solid !important;
	background-color: transparent !important;
	color: #fff !important;
	border-radius: 25px !important;
	cursor: default !important;
}

 html[data-bs-theme="dark"] .saveurlfield {
	height:50px;
	padding-left:40px;
	color: #fff !important;
	background-color: #363636 !important;
}
 html[data-bs-theme="dark"] .url-text {

	color: #9f9f9f !important;

}
 html[data-bs-theme="dark"] .blackai {

	color: #9f9f9f !important;

}
 html[data-bs-theme="dark"] .dark-mode {
	display: block !important;
}
 html[data-bs-theme="dark"] #titlesdark {
 color: #fff !important;
}
 html[data-bs-theme="dark"] #darklogo {
content: url("https://apiserwer.pl/simple/assets/images/logo-bleku-white.png");
}

 html[data-bs-theme="dark"] #containerdark {
 background-color: #000 !important;
}









    /* Dark Mode end */