/* General Styles */
body {
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #fff;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: black!important;
    max-height:-webkit-fill-available;
}

body.slide-background {
  animation: slide-background 0.5s linear;
}
@keyframes slide-background {
  0% {
    background-size: 0 100vh;
  }
  100% {
    background-size: 100vw 100vh;
  }
}

.bgHome {
    background-image: url('../img/home.jpg')!important;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.bgPage {
  background-image: url('../img/pages.jpg')!important;
  background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 1020px) {
  .bgHome {
      background-image: url('../img/home-mob.png')!important;
  }
  .bgPage {
      background-image: url('../img/pages-mob.png')!important;
  }
}

body h1,h2,h3,h4,h5 {
    font-family: 'HeadingFont', sans-serif;
}

/* Navbar Styles */
/* Navbar Styles */
nav {
  font-family: 'HeadingFont', sans-serif;
  position: sticky!important; /* Absolute position relative to section */
  width: 100%;
  height: 10%;
  display: flex!important;
  justify-content: space-around!important;
  z-index: 6;
  background: rgba(255, 255, 255, 0)!important;
  animation: slideInFromTop 0.5s ease-out forwards;
  margin: 0;
  padding: 0!important;
  bottom:0;
}

nav .pc {
top:0;
}

.navbar.mob{
  height: 5%; 
  background-color: white!important;
  border-radius: 50px 50px 0px 0px;
  justify-content: center !important;
  top: 100%;
  z-index: 7;
}

#navbarmob .nav-links{
margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  width: 100vw;
  justify-content: space-around;
}
#navbarmob a{
color: black !important;
margin: 0;
}

.pc .nav-item > a.active {
  font-weight: bold; 
  text-shadow: 1px 1px 8px white;
}


#navbarmob .nav-links i {
  font-size: 20px;
}

/* Define the keyframes for the animation */
@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
  from {
      transform: translateY(0);
      opacity: 1;
  }
  to {
      transform: translateY(-100%);
      opacity: 0;
  }
}

.nav-links {
  display: flex; /* Flex for horizontal alignment */
  align-items: center; /* Vertically center the links */
  gap: 10px; /* Add gap between the links */
  padding: 1rem;
  list-style: none;
  flex-grow: 0!important;
  cursor: pointer;
  user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; 
}

.nav-item > a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;

  margin: 40px; /* Add margin to each link to create spacing */
}

/* Animation for NavBar LINKS*/
.pc .nav-item > a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  top: 20px;
  background: #fff;
  left: 0;
  bottom: 0;
  transition: width 0.3s ease-in-out;
}

.pc .nav-item > a:hover::before {
  width: 100%;
}

#userFullName {
    cursor: pointer;
    color: white;
}

/* Hide dropdown by default */
.nav-item .dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  padding: 10px;
  list-style: none;
  margin: 0;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* Style the dropdown items */
.nav-item .dropdown-menu li {
  margin: 5px 0;
}

/* Style dropdown links */
.nav-item .dropdown-menu li a {
  color: black;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
}

.nav-item.dropdown {
    
}

/* Container and Page Styles */
.container {
  position: relative; /* Create a stacking context */
  width: 100vw; /* Adjust based on number of pages */
  max-width:none!important;
  height: 90%;
  position: relative;
  overflow-y:hidden;
}

.contactContainer {
  padding: 10px;
  display:flex;
  justify-content: center;
}

.contactForm {
  text-align: left;
  border: 1px solid white;
  padding: 10px 80px;
  border-radius: 1rem;
}

.contactInfo {
  border: 1px solid white;
  padding: 10px 80px;
  border-radius: 1rem;
}

.contactForm .inputBox {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.contactForm label {
  margin-bottom: 10px;
  font-weight: 600;
}

.inputBox input {
  border: none;
  padding: 10px 10px;
  border-radius: 0px 10px 10px 10px;
  outline: 0;
}

/* BUTTON ANIMATION*/
.contactForm .submitBtn {
  text-decoration: none;
  background-color: white;
  color: black;
  padding: 10px 30px;
  border-radius: 20px;
  margin-top: 20px;
  width: 50%;
  margin-left: 25%;
  outline: none;
  border: none;
  transition: 0.5s ease;
}

.contactForm h3 {
  width: 400px;
}

.submitBtn:hover {
  background-color: rgb(0, 0, 0);
  color: white;
  width: 60%;
  margin-left: 20%;
}
.submitBtn:active {
  background-color: rgb(100, 100, 100);
}

.contactInfo {
  margin-left: 10%;
}
/* PRICING */
.page .btnContactSales {
  outline: 0;
  border-radius: 20px;
  border: 0;
  padding: 10px 30px;
  margin-top: 15px;
  transition: 0.5s ease;
}

.page .btnContactSales:hover {
  background-color: black;
  color: white;
  padding: 10px 50px;
  transition: 0.5s ease;
  
}

.box .socialIcons {
  background: white;
  color: black;
  border-radius: 50%;
  transition: 0.2s ease;
}
.socialIcons:hover {
  background: rgba(255, 255, 255, 0.7);
}
/* PRICING ENDS*/

/* SHOWCASE ENDS */
.page {
    flex: 0 0 100vw;
    height: 90%;
    align-content: center;
    z-index: 5;
    position: fixed; /* fix the element on its position */
    left: 0; /* align it to the left side */
    width: 100%; /* initial width */
    background-size: 100vw 86vh;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-out;
    transform: translateX(-100%);
}

.page.smooth {
  transition: transform 1s ease-in-out;
}

.pageactive {
  transform: translateX(0) !important;
}


   
/* PAGES IMAGES */
#home {
  z-index: 5;
  color: white;

}

#showcase {
  z-index: 4;
  color: white;
}




#about {
  z-index: 3;
  color: white;
}
#price {
  z-index: 2;
  color: white;
}

#contact {
  z-index: 1;
  color: white;
}

.hero-content,
.page-content {
padding: 2rem;
text-align: center;
}

.hero-content h1,
.page-content h2 {
margin: 0 0 1rem 0;
font-size: 2vw;
}


.page-bg {
  height: 86vh;
  overflow: hidden;
  align-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-size: 100vw 100vh;
  background-position: center;
  background-repeat: no-repeat;

}

.hero-content p, .page-content p {
  margin:0;
}

/* Scrollbar Styles */
.scrollbar-track {
  background: rgba(222, 222, 222, 0.75);
  border-radius: 4px;
}

.scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.scrollbar-track-x {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
}

.scrollbar-track-y {
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
}

@font-face {
  font-family: 'HeadingFont';
  src: url('../fonts/font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.typing-effect {
  display: inline;
  border-right: 0.15em solid #ffffff; /* Cursor effect */
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
  padding-right: 0.5em; /* Add space between text and cursor */
}

/* Keyframes for typing effect */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: rgb(255, 255, 255); }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 100;
}

.loader {
          animation: fade 1s linear infinite;
      }

      @keyframes fade {
          0% { opacity: 1; }
          100% { opacity: 0; }
      }
      
.hide {
  transition: transform 1s ease-in-out;
  transform: translateX(-100%) !important;
}
.ide {
background: transparent;
width: 40vw;
height: 45vh;
margin: 1rem auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
font-family: sans-serif;
z-index:1;
position:relative;
}

.ide-header {
background-color: rgba(58, 58, 58, 0.55);
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.circles {
text-align:left;
margin-top: 10px;
margin-left: 10px;
}

.circle {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}

.circle.red {
background-color: #ff3b47;
transition: 0.25s ease;
}

.circle.red:hover {
transform: scale(1.1);
box-shadow: 0 0 5px rgba(255, 59, 71, 1);
}

.circle.yellow {
background-color: #f7dc6f;
transition: 0.25s ease;
}

.circle.yellow:hover {
transform: scale(1.1);
box-shadow: 0 0 5px rgba(247, 220, 111, 1);
}

.circle.green {
background-color: #34c759;
transition: 0.25s ease;
}

.circle.green:hover {
transform: scale(1.1);
box-shadow: 0 0 5px rgba(52, 199, 89, 1);
}

.ide-body {
position:relative;
flex: 1;
padding: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: rgba(31, 31, 31, 0.55);
overflow:hidden;
}

.ide-body .user-input {
  outline: none;
  border:0;
  color:white;
  position:absolute;
  bottom:1vh;
  padding: 10px 20px;
  border-radius: 11.125rem;
  background: #333; 
  width:85%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
}

.chat-container {
overflow-y: scroll;
overflow-x: contain;
scroll-behavior:smooth;
-webkit-scroll-behavior: smooth;
-ms-scroll-behavior:smooth;
height: 20vh;
white-space: pre-wrap;
}
/* Custom scrollbar for #chat-container */
.chat-container::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

.chat-container::-webkit-scrollbar-thumb {
  background: #868686; /* Gradient color for the thumb */
  border-radius: 10px; /* Rounded corners */
  box-shadow: inset 0 0 1px 1px #5C6670; /* Inner shadow */
}

.chat-container::-webkit-scrollbar-track {
  background: #eee; /* Background color for the track */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0, 0, 0, 0.3); /* Outer and inner shadows */
}

#mob-chat {
z-index: 1;
position: relative;
margin: auto;
margin-bottom: 80vh;
color: rgb(0, 0, 0);
border-radius: 30px;
outline: 0;
border:0;
background: rgb(255, 255, 255);
font-size: 25px;
}

.conversation p.me,p.bot {
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  margin: 1rem;
  background: #00000047;
  border-radius: 1.125rem 1.125rem 1.125rem 0;
  min-height: 2.25rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 66%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

.conversation p.me {
  margin: 1rem 1rem 1rem auto;
  border-radius: 1.125rem 1.125rem 0 1.125rem;
  background: #333;
  color: white;
}

@media (max-width: 1020px) {
.ide.pc {
  display: none;
}
}

.ide.modal{
    height: 60%!important;
}

#user-input-mobile {
    height:10%;
}
#chat-container-mobile {
    height:90%;
}

.modal-fullscreen {
padding: 0;
}

.modal-fullscreen.modal-content {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
}

.modal-fullscreen.modal-body {
overflow-y: auto;
padding: 0;
}

.modal-body.ide {
height: 100%;
display: flex;
flex-direction: column;
}

.modal-body.ide-header {
flex-shrink: 0;
}

.modal-body.ide-body {
overflow-y: auto;
height: 85%;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.particles-js-canvas-el {
  position: absolute;
  top:0;
  z-index: 0;
}

#pcCarousel {
margin-top: 100px;
position: relative;
}

.hi-slide {
    width:100%!important;
    height:auto!important;
    padding: inherit;
}

.hi-slide .slideCont li {
  border: 0;
  background: none;
}

.card i {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
font-size:1.5rem;
}

.carousel-inner{
overflow: unset!important;
}

.hi-slide .card {
background-color: rgb(255, 255, 255, 0.5);
color: rgb(0, 0, 0);
position: relative; /* Default position */
height: 100%;
border: none;
}

#pcCarousel li:hover {
transform: scale(1.3); /* Scale up the card on hover */
opacity:1;
filter: blur(0px);
box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.58);
}

#pcCarousel li.first:hover {
transform: scale(1.3) translateX(100%); /* Move left card to the center */
}

#pcCarousel li.last:hover {
transform: scale(1.3) translateX(-100%); /* Move right card to the center */
}


    .hi-prev, .hi-next {
        width: auto!important;
        z-index:30;
    }

    .hi-prev span, .hi-next span {
        pointer-events: auto; /* Enable pointer events on the span */
    }
.hi-prev {
    left:0!important;
}
.hi-next {
    right:0!important;
}

.hi-slide li {
  border-radius: 50%;  
  transition: transform 0.5s ease, z-index 0.1s ease;
}

.hi-slide ul {
    margin:0 auto!important;
}
/* MOBILE CAROUSEL*/

/* Only show the slideshow on mobile devices */
.slideshow-container {
  display: none; /* Hide by default */
  position: absolute;
  height: 95%;
  width: 100%;
  top: 1vh;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 6;
  border-radius: 30px;
}

.slideshow-container .slideshow-td { 
  bottom: 1vh;
    left: 2.5vw;
    position: absolute;
    text-align: left;
    color:white;
} 

.td-cover {
    height: 97%;
    position: relative;
    top: 0vh;
}
/* Slideshow styles */
.slide {
  height: 100%;
  background-color: black;
    flex-direction: column;
}


@media screen and (max-height: 650px){
    .controls {
      transform: translate(0%, -30%);
  }
  .controls button {
      height: 7vh!important;
  }
  .controls i {
      font-size:30px!important;
  }
}

.controls {
  position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    outline: 1px solid rgba(0, 0, 0, 0);
    filter: blur(5);
}

.controls button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 10px 0;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.controls i.toggle {
  color: rgb(255, 71, 71);
  font-weight: bold;
}

.controls button i {
  font-size: 25px;
}

.Spopup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  justify-content: center; /* Center the content vertically */
  align-items: center; /* Center the content horizontally */
  z-index: 1000; /* On top of other content */
}

.profile-popup {
    display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  justify-content: center; /* Center the content vertically */
  align-items: center; /* Center the content horizontally */
  z-index: 1000; /* On top of other content */
}

.mob.profile-popup{
    top: 0;
    right: 0;
}

.popup-content {
  background-color: white; /* Popup background color */
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  text-align: left; /* Center text */
  width: 300px; /* Width of the popup */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Shadow for depth */
  color: black;
}

.close-btn {
  color: black; /* Close button color */
  float: right; /* Position to the right */
  font-size: 28px; /* Close button size */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor */
}
#comment-input {
    outline: none;
    border: 0;
    color: white;
    padding: 10px 20px;
    border-radius: 11.125rem;
    background: #333;
    width: 100%;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
  }
  .user-message {
    margin: 8px 0; /* Space between messages */
    padding: 8px; /* Padding around the message */
    border-radius: 8px; /* Rounded corners */
    background-color: #e1f5fe; /* Light blue background for user messages */
    align-self: flex-end; /* Align user messages to the right */
    color: #0d47a1; /* Dark blue text for user messages */
    font-weight: bold; /* Bold for user messages */
    word-wrap: break-word; /* Break long words if necessary */
    overflow-wrap: break-word; /* Break lines to avoid overflow */
    white-space: pre-wrap; /* Preserve whitespace and wrap text */
}

.chat-message {
    margin: 8px 0; /* Space between messages */
    padding: 8px; /* Padding around the message */
    border-radius: 8px; /* Rounded corners */
    background-color: #f7f7f7; /* Light gray background for general messages */
    align-self: flex-start; /* Align chat messages to the left */
    color: #262626; /* Dark gray text for chat messages */
    font-size: 14px; /* Font size for messages */
    word-wrap: break-word; /* Break long words if necessary */
    overflow-wrap: break-word; /* Break lines to avoid overflow */
    white-space: pre-wrap; /* Preserve whitespace and wrap text */
}

.chat-message p {
    margin: 0; /* Remove default margin */
    line-height: 1.5; /* Line height for better readability */
}

.user-message p {
    margin: 0; /* Remove default margin */
}

.slide .background-video {
  position: absolute;
  width: 100%;
  height: 98%; /* Use auto to maintain aspect ratio */
  min-height: 98%; /* Fill the height of the container */
  min-width: 100%; /* Fill the width of the container */
  z-index: 0; /* Behind the text */
  object-fit: fill;
}


.carousel-control-prev, .carousel-control-next {
  pointer-events: none; /* Disable pointer events on the icon */
  width: auto !important;
}

.carousel-control-prev span, .carousel-control-next span {
  pointer-events: auto; /* Enable pointer events on the span */
}



.ftchk{
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 10;
    display:flex;
    flex-direction:column;
    opacity: 0;
    transform: translateX(-15vw);
}

  .checkbox-wrapper-8 .tgl {
    display: none;
  }
  .checkbox-wrapper-8 .tgl,
  .checkbox-wrapper-8 .tgl:after,
  .checkbox-wrapper-8 .tgl:before,
  .checkbox-wrapper-8 .tgl *,
  .checkbox-wrapper-8 .tgl *:after,
  .checkbox-wrapper-8 .tgl *:before,
  .checkbox-wrapper-8 .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper-8 .tgl::-moz-selection,
  .checkbox-wrapper-8 .tgl:after::-moz-selection,
  .checkbox-wrapper-8 .tgl:before::-moz-selection,
  .checkbox-wrapper-8 .tgl *::-moz-selection,
  .checkbox-wrapper-8 .tgl *:after::-moz-selection,
  .checkbox-wrapper-8 .tgl *:before::-moz-selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-8 .tgl::selection,
  .checkbox-wrapper-8 .tgl:after::selection,
  .checkbox-wrapper-8 .tgl:before::selection,
  .checkbox-wrapper-8 .tgl *::selection,
  .checkbox-wrapper-8 .tgl *:after::selection,
  .checkbox-wrapper-8 .tgl *:before::selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
    display: none;
  }
  .checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
    left: 50%;
  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
    overflow: hidden;
    transform: skew(-10deg);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: all 0.2s ease;
    font-family: sans-serif;
    background: #888;
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
    transform: skew(10deg);
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
    background: #888;
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
    left: -10%;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
    background: #00d6e6;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
    left: -100%;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
    left: 10%;
  }

#toggle-icon {
    cursor: pointer;
}
/* Default unchecked state */
#toggle-checkbox + #toggle-icon {
    color: grey;
    font-size: 24px;
    transition: color 0.3s ease, transform 0.3s ease, font-size 0.3s ease; /* Add transitions for color, transform, and font-size */
}

/* Checked state */
#toggle-checkbox:checked + #toggle-icon {
    color: white;
    transform: rotate(90deg);
    font-size: 28px;
}



/* Remove unnecessary selectors and properties */
.btnLogin {
  position: relative;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: white;
}

.btnLogin::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%; /* Initial width */
  height: 2px;
  background: white;
  opacity: 0.85;
  transition: width 0.3s ease; /* Add a transition for the width */
}

.btnLogin:hover::before {
  width: 100%; /* Change width on hover */
}

/* Wrapper styles */
.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  box-shadow: -1px 0 10px rgba(0, 0, 0, 0.2);
  border-left: 2px solid rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Icon close styles */
.wrapper .iconclose {
  position: absolute;
  top: 0;
  right: 0;
  background: rgb(255, 255, 255);
  border-bottom-left-radius: 30px;
  cursor: pointer;
}

.iconclose i {
  font-size: 25px;
  padding: 10px;
  color: rgb(0, 0, 0);
  font-weight: 800;
}

/* Logreg box styles */
.logreg-box {
  width: 100%;
}

.logreg-box .logreg-title {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.logreg-title h2 {
  font-size: 40px;
}

.logreg-title p {
  font-size: 14px;
  font-weight: 500;
}

/* Input box styles */
.logreg-box .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  background: transparent;
  margin: 50px 0px;
  border-bottom: 2px solid white;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: white;
  font-weight: 500;
  padding-right: 30px;
}

.input-box input:-internal-autofill-selected{
    background: #00000000!important;
    color: white!important;
}

.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

.input-box label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: white;
  font-weight: 500;
  pointer-events: none;
  transition: 0.5s;
}

/* Move the label up when input is focused or has a value */
.input-box input:focus ~ label,
.input-box input:not(:placeholder-shown) ~ label {
    top: -5px;
}

/* Apply the style when input is not empty and invalid */
.input-box input:not(:placeholder-shown):invalid ~ label {
    color: rgb(255, 50, 50)!important;
}

.input-box .icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: white;
}

/* Remember forgot styles */
.logreg-box .remember-forgot {
  font-size: 14.5px;
  color: white;
  font-weight: 500;
  margin: -15px 0 15px;
  display: flex;
  justify-content: space-between;
}

.remember-forgot label input {
  accent-color: white;
  margin-right: 5px;
}

.remember-forgot a {
  color: white;
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

/* Button styles */
.logreg-box .btn {
  width: 100%;
  height: 45px;
  background: white;
  border: none;
  outline: none;
  border-radius: 40px;
  cursor: pointer;
  font-size: 16px;
  color: #222;
  font-weight: 600;
  transition: 0.5s;
}

.logreg-box .btn:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}
/* Logreg link styles */
.logreg-box .logreg-link {
  font-size: 14.5px;
  color: white;
  text-align: center;
  font-weight: 500;
  margin: 25px 0 15px;
}

.logreg-link p a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.logreg-link p a:hover {
  text-decoration: underline;
}

/* Other log options styles */
.otherlog-options {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.otherlog-options a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: transparent;
  border: 2px solid white;
  margin: 10px 0;
  color: white;
  text-decoration: none;
  border-radius: 40px;
  transition: 0.5s;
}

.otherlog-options a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.otherlog-options a i {
  font-size: 22px;
  margin: 0 8px 1.5px 0;
}

.otherlog-options a span {
  font-size: 16px;
  font-weight: 500;
}

/* Form styles */
.form-login, .form-register {
  display: none;
}

/* Initially show the login form */
.form-login {
  display: block;
}


.popup {
    width: 1200px;
    height: 600px;
    display: flex;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity:0;
    transition: linear 0.2s opacity;
    border: 2px solid white
}

.left {
  flex: 1;
  background-color: #363636;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.left h1 {
  font-size: 48px;
  color: white;
  margin-bottom: 20px;
}

.left p {
  font-size: 20px;
  color: #777;
  margin-bottom: 40px;
}

.icons {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.icons a {
  display: block;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
}

.icons a i {
  max-width: 100%;
  max-height: 100%;
}

.right {
  flex: 2;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.right img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}



/* Add this CSS to your existing stylesheet */

.fade-in {
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1020px) {
    .page{
        height: 85%;
    }
  .hero-content,
  .page-content {
    padding:0;
  }
  .hero-content h1,
  .page-content h1 {
    font-size: 8vw;
  }

  .hero-content h2,
  .page-content h2 {
    font-size: 5vw;
  }

  .hero-content p,
  .page-content p {
    font-size: 4vw;
  }

  .pc {
    display: none;
  }

  .titles {
    position: absolute;
    bottom: 1vh;
    left: 2vw;
    text-align: left;
    margin-bottom: 20px;
    margin-left: 20px;
  }

  .wrapper {
    width: 100vw;
  }

  .logreg-box .input-box {
    height: 5vh;
  }
  .container{
    height: 85%;
  }
  #pcCarousel {
      display:none;
  }
  .hi-slide ul {
      width:100%!important;
  }
  /* Showcase Title Hide */
  #showcase .titles {
    visibility: hidden;
    display: none;
  }
/* Style the slideshow container */
 .wrapper{
     flex-direction: row!important;
 }

}

@media (min-width: 1020px){
  #navbarmob{
    display: none!important;
  }
  /* Remove unnecessary selectors and properties */
.mob {
  display: none!important;
}
}