.box-feature p{color:var(--grayishBlue)}.box-feature{border-radius:5px;padding:30px;margin:20px}@media(max-width:450px){.box-feature{background-color:#0e302c}}@media(max-width:950px) and (min-width:450px){.box-feature{text-align:center;background-color:#0e302c}}.cyan{border-top-width:10px;border-left-width:0;border-right-width:0;border-bottom-width:0;border-style:solid;border-radius:5px;border-image:linear-gradient(to right,#093028 0%,#237a57 100%) 1}.red{border-top-width:10px;border-left-width:0;border-right-width:0;border-bottom-width:0;border-style:solid;border-radius:5px;border-image:linear-gradient(to right,#093028 0%,#237a57 100%) 1}.blue{border-top-width:10px;border-left-width:0;border-right-width:0;border-bottom-width:0;border-style:solid;border-radius:5px;border-image:linear-gradient(to right,#093028 0%,#237a57 100%) 1}.orange{border-top-width:10px;border-left-width:0;border-right-width:0;border-bottom-width:0;border-style:solid;border-radius:5px;border-image:linear-gradient(to right,#093028 0%,#237a57 100%) 1}.box-feature h2{color:#fff;font-weight:600}@media(min-width:950px){.row1-container{display:flex;justify-content:center;align-items:center}.row2-container{display:flex;justify-content:center;align-items:center}.box-down{position:relative;top:150px}.box-feature{width:30%;background-color:#0e302c}.header p{width:30%}}.key-container{}.key-container .key-card{position:relative;height:370px;background-color:#044144;border-radius:15px;box-shadow:0 7px 12px rgb(0 0 0/50%)}@media(max-width:1199px){.key-container .key-card{height:440px}}@media(max-width:991px){.key-container .key-card{height:400px}}@media(max-width:767px){.key-container .key-card{height:300px}}@media(max-width:499px){.key-container .key-card{height:350px}}@media(max-width:395px){.key-container .key-card{height:380px}}@media(max-width:372px){.key-container .key-card{height:420px}}@media(max-width:317px){.key-container .key-card{height:450px}}.key-container .key-card .face{position:absolute;bottom:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.key-container .key-card .face.face1{box-sizing:border-box;padding-bottom:120px;padding-left:20px;padding-right:20px;padding-top:20px}.key-container .key-card .face.face1 h2{margin:0;padding:0}.key-container .key-card .face.face1 .java{background-color:#fff;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.key-container .key-card .face.face1 .python{background-color:#fff;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.key-container .key-card .face.face1 .cSharp{background-color:#fff;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.key-container .key-card .face.face2{transition:.5s}.key-container .key-card .face.face2 h2{margin:0;padding:0;font-size:10em;color:#fff;transition:.5s;text-shadow:0 2px 5px rgba(0,0,0,.2);z-index:10}.key-container .key-card .face.face2{height:80px}.key-container .key-card .face.face2 h2{font-size:2em}.key-container .key-card:nth-child(1) .face.face2{background-image:linear-gradient(to right,#2c3e50 0%,#43c6ac 100%);border-radius:15px}.key-container .key-card:nth-child(1) .face.face2 h3{color:#fff}.key-container .key-card:nth-child(2) .face.face2{background:linear-gradient(to right,#7e2afc 0%,#a250f2 100%);border-radius:15px}.key-container .key-card:nth-child(3) .face.face2{background:linear-gradient(to right,#7e2afc 0%,#a250f2 100%);border-radius:15px}.login-theme-btn{font-size:16px;color:#fff;padding:10px 16px;font-weight:500;border-radius:50px;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;text-transform:uppercase;position:relative;cursor:pointer;text-align:center;overflow:hidden;z-index:1;border:none;background-size:200% 100%;background:#43c6ac;box-shadow:0 3px 24px rgb(0 0 0/10%)}.login-theme-btn{color:#fff!important}@media(max-width:767px){.banner-image{order:-1;margin-bottom:40px}.hero-wrapper{padding-top:220px}.why-tallwin{order:-1;margin-bottom:40px}}@media(max-width:991px){.why-tallwin{order:-1;margin-bottom:40px;display:flex;justify-content:center}}@media(max-width:767px){.hero-wrapper{padding-top:300px}.why-choose-us{order:-1}.hero-wrapper .hero-btn{display:none}}@media(min-width:767px){.hero-btn-register{display:none}}body{overflow:hidden}.vertical-centered-box{position:absolute;width:100%;height:100%;text-align:center}.vertical-centered-box::after{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em}.vertical-centered-box .content{box-sizing:border-box;display:inline-block;vertical-align:middle;text-align:left;font-size:0}.loader-circle{position:absolute;left:50%;top:50%;width:120px;height:120px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);margin-left:-60px;margin-top:-60px}.loader-line-mask{position:absolute;left:50%;top:50%;width:60px;height:120px;margin-left:-60px;margin-top:-60px;overflow:hidden;transform-origin:60px 60px;-webkit-mask-image:-webkit-linear-gradient( top,rgba(0,0,0,1),rgba(0,0,0,0) );animation:rotate 1.2s infinite linear}#particless-background,#particless-foreground{left:-51%;top:-200%;width:202%;height:202%;transform:scale3d(.5,.5,1)}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.logsm{display:none}@media(max-width:992px){.logsm{display:block}.login-form .login-header img{width:40%!important}}@media(max-width:480px){.login-form .login-header img{width:50%!important}}.key-feat{font-size:30px;background:#fff;border-radius:51%;margin-bottom:20px;height:75px;width:75px;text-align:center;line-height:60px;display:flex;justify-content:center;align-items:center}.py-76{padding-top:80px!important}.input-label{float:left}.select-option{background-color:#044144}.choose-img{-webkit-animation:action 1s infinite alternate;animation:action 1s infinite alternate}@-webkit-keyframes action{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}@keyframes action{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}#typewriter h1{overflow:hidden;border-right:.15em solid orange;white-space:nowrap;margin:0 auto;letter-spacing:.15em;animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite}@keyframes typing{from{width:0}to{width:100%}}@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:orange}}@media(min-width:992px){.about-heading{display:none!important}}@media(max-width:991px){.about-head{display:none!important}}

/* Responsive Logo Sizing */
.navbar-logo {
  width: 40%;
  height: auto;
  transition: all 0.3s ease;
}

@media (max-width: 575px) {
  .navbar-logo {
    width: 35% !important;
  }
}

@media (max-width: 400px) {
  .navbar-logo {
    width: 30% !important;
  }
}

/* Authentication Navigation Styles */
.navbar-nav .nav-item .nav-link.btn {
  border-radius: 25px;
  padding: 8px 15px !important;
  transition: all 0.3s ease;
  font-weight: 500;
  margin-left: 5px;
}

.navbar-nav .nav-item .nav-link.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.navbar-nav .nav-item .nav-link.btn-primary {
  background: linear-gradient(135deg, #43c6ac 0%, #191654 100%);
  border: none;
}

.user-profile-dropdown .nav-link {
  transition: all 0.3s ease;
  text-decoration: none !important;
  cursor: pointer;
}

.user-profile-dropdown .nav-link:hover {
  background-color: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px);
}

/* Navbar alignment improvements */
.navbar-nav {
  align-items: center;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

/* Mobile Navigation Improvements */
@media (max-width: 991px) {
  .navbar-collapse {
    background: linear-gradient(135deg, rgba(13, 35, 47, 0.98) 0%, rgba(4, 65, 68, 0.98) 100%);
    margin-top: 5px;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(67, 198, 172, 0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    position: absolute;
    right: 0;
    left: auto;
    max-width: 280px;
    width: 280px;
    z-index: 1040;
  }
  
  /* Adjust mobile menu for button layout */
  @media (max-width: 767px) {
    .navbar-collapse {
      padding: 20px 15px !important;
      min-height: auto !important;
    }
    
    .mobile-user-actions {
      border-top: 1px solid rgba(67, 198, 172, 0.2) !important;
      padding-top: 15px !important;
      margin-top: 15px !important;
    }
    
    /* Force hide user dropdown on mobile */
    .user-profile-dropdown {
      display: none !important;
    }
    
    .user-profile-dropdown .dropdown-menu {
      display: none !important;
      visibility: hidden !important;
    }
  }
  
  .navbar-nav .nav-item {
    margin: 5px 0;
    width: 100%;
  }
  
  .navbar-nav .nav-link {
    padding: 12px 15px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
  }
  
  .navbar-nav .nav-link:hover {
    background-color: rgba(67, 198, 172, 0.2);
    color: #43c6ac !important;
  }
  
  /* Mobile User Actions Styling */
  .mobile-user-actions .nav-link.btn {
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    margin: 5px 0 !important;
  }
  
  .mobile-user-actions .nav-link.btn-primary {
    background: linear-gradient(135deg, #43c6ac 0%, #191654 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(67, 198, 172, 0.3) !important;
  }
  
  .mobile-user-actions .nav-link.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(67, 198, 172, 0.4) !important;
  }
  
  .mobile-user-actions .nav-link.btn-outline-light {
    border: 2px solid rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .mobile-user-actions .nav-link.btn-outline-light:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.8) !important;
    transform: translateY(-2px) !important;
  }
  
  /* Extra small screens (xs, xxs) */
  @media (max-width: 575px) {
    .mobile-user-actions .nav-link.btn {
      font-size: 14px !important;
      padding: 10px 20px !important;
    }
    
    .mobile-user-actions {
      width: 100% !important;
    }
  }
  
  /* Very small screens */
  @media (max-width: 400px) {
    .mobile-user-actions .nav-link.btn {
      font-size: 13px !important;
      padding: 8px 16px !important;
    }
  }
  
  .user-profile-dropdown {
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid rgba(67, 198, 172, 0.2);
    padding-top: 10px;
  }
  
  .user-profile-dropdown .nav-link {
    justify-content: space-between;
    width: 100%;
    background: rgba(67, 198, 172, 0.1) !important;
    border: 1px solid rgba(67, 198, 172, 0.3) !important;
  }
  
  .user-name {
    display: block !important;
    color: #43c6ac !important;
  }
  
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(67, 198, 172, 0.3) !important;
    background: linear-gradient(135deg, rgba(4, 65, 68, 0.95) 0%, rgba(13, 35, 47, 0.95) 100%) !important;
    margin-top: 8px !important;
    width: 100% !important;
    padding: 8px !important;
  }
  
  .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,0.9) !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    margin: 2px 0 !important;
    transition: all 0.3s ease;
  }
  
  .dropdown-menu .dropdown-item:hover {
    background-color: rgba(67, 198, 172, 0.2) !important;
    color: #43c6ac !important;
  }
  
  .dropdown-menu .dropdown-item i {
    color: #43c6ac;
  }
  
  .navbar-toggler {
    border: 1px solid rgba(67, 198, 172, 0.5) !important;
    padding: 8px 12px !important;
    background: rgba(67, 198, 172, 0.1) !important;
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(67, 198, 172, 0.25) !important;
  }
  
  .navbar-toggler:hover {
    background: rgba(67, 198, 172, 0.2) !important;
  }
}

/* Sticky Navigation */
.header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  transition: all 0.3s ease;
  background: transparent;
}

.navbar {
  transition: all 0.3s ease;
}

/* Add padding to body to compensate for fixed header */
body {
  padding-top: 80px;
}

.header.scrolled {
  background: linear-gradient(135deg, rgba(13, 35, 47, 0.95) 0%, rgba(4, 65, 68, 0.95) 100%) !important;
  backdrop-filter: blur(15px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.header.scrolled .navbar-brand img {
  transform: scale(0.9);
}

/* Ensure dropdown works properly */
.dropdown-menu {
  z-index: 1060 !important;
}

/* Fix dropdown positioning on all screens */
.dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Desktop dropdown styling */
@media (min-width: 992px) {
  .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 200px;
    margin-top: 5px !important;
  }
}

/* Ensure dropdown toggle works */
.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.255em !important;
  vertical-align: 0.255em !important;
  content: "" !important;
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
}

/* Navigation container positioning */
@media (max-width: 991px) {
  .navbar {
    position: sticky !important;
  }
  
  .navbar-collapse {
    max-width: 280px;
    margin-left: auto;
    margin-right: 15px;
    top: 100%;
    margin-top: 5px;
  }
  
  .container {
    position: relative;
  }
}

/* Medium screens - slightly wider */
@media (max-width: 767px) and (min-width: 576px) {
  .navbar-collapse {
    max-width: 250px;
  }
}

/* Extra small screens */
@media (max-width: 575px) {
  .navbar-collapse {
    margin-top: 10px;
    padding: 12px;
    max-width: 220px;
    margin-right: 10px;
  }
  
  .navbar-nav .nav-link {
    font-size: 14px;
    padding: 10px 12px !important;
  }
  
  .user-avatar {
    margin-right: 8px !important;
  }
  
  .user-avatar i {
    font-size: 18px !important;
  }
  
  .dropdown-menu .dropdown-item {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}

/* Mobile toggle button styling */
.navbar-toggler {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
}

.navbar-toggler:hover {
  background: rgba(255,255,255,0.2) !important;
}

/* Hide icons on very small screens for cleaner look */
@media (max-width: 480px) {
  .navbar-nav .nav-link i.d-none.d-sm-inline {
    display: none !important;
  }
  
  .user-name {
    font-size: 13px;
  }
}

/* Style the hero dashboard button to match the theme */
.hero-btn-register .get-started-btn,
.hero-btn .theme-btn {
  background: linear-gradient(135deg, #43c6ac 0%, #191654 100%) !important;
  border: none !important;
  color: white !important;
  transition: all 0.3s ease;
}

.hero-btn-register .get-started-btn:hover,
.hero-btn .theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(67, 198, 172, 0.3);
}

/* Ensure proper text color in buttons */
.hero-btn-register .get-started-btn i,
.hero-btn .theme-btn i {
  color: white !important;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.dropdown-menu {
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  background-color: #fff;
  margin-top: 10px;
}

.dropdown-menu .dropdown-item {
  padding: 10px 20px;
  transition: all 0.3s ease;
  color: #333;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #43c6ac;
}

.dropdown-menu .dropdown-item i {
  width: 20px;
  color: #43c6ac;
}

/* Loading state for navigation */
.nav-item .nav-link[style*="color: #ccc"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Custom Dropdown Implementation Styles */
.navbar-collapse {
  transition: all 0.3s ease-in-out !important;
  z-index: 1040 !important;
}

.navbar-collapse.show {
  display: block !important;
}

.dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease-in-out !important;
  z-index: 1050 !important;
}

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

/* Fix Bootstrap dropdown conflicts */
.dropdown-toggle::after {
  display: none !important;
}

/* User Profile Dropdown Button Fixes */
.user-profile-dropdown button.nav-link {
  background: none !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
}

.user-profile-dropdown button.nav-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(67, 198, 172, 0.3) !important;
}

/* Desktop dropdown positioning - only for medium screens and up */
@media (min-width: 768px) {
  .user-profile-dropdown {
    display: block !important;
  }
  
  .user-profile-dropdown .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
    margin-top: 8px !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    background-color: #fff !important;
    z-index: 1050 !important;
    display: none !important;
  }
  
  .user-profile-dropdown .dropdown-menu.show {
    display: block !important;
    animation: fadeInDown 0.3s ease-out;
  }
  
  .user-profile-dropdown .dropdown-item {
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    color: #333 !important;
  }
  
  .user-profile-dropdown .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #43c6ac !important;
  }
}

/* Ensure mobile navigation stays visible when open */
@media (max-width: 991px) {
  .navbar-collapse.show {
    max-height: 500px;
    overflow-y: auto;
  }
  
  .navbar-nav .nav-item.logsm {
    margin: 5px 0;
  }
  
  /* Override any dropdown styles on mobile */
  .dropdown-menu {
    display: none !important;
  }
  
  .dropdown-toggle::after {
    display: none !important;
  }
  
  .user-profile-dropdown .nav-link {
    padding: 10px 15px !important;
  }
  
  /* Ensure mobile shows only buttons, no dropdown */
  .d-block.d-md-none {
    width: 100% !important;
    display: block !important;
  }
  
  .d-block.d-md-none .mobile-user-actions {
    list-style: none !important;
    padding: 0 !important;
    margin: 5px 0 !important;
  }
  
  .user-profile-dropdown .dropdown-menu.show {
    display: block !important;
    animation: slideDown 0.3s ease-out;
  }
  
  .user-profile-dropdown .dropdown-item {
    color: #333 !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    margin: 2px 8px !important;
  }
  
  .user-profile-dropdown .dropdown-item:hover {
    background-color: rgba(67, 198, 172, 0.1) !important;
    color: #43c6ac !important;
  }
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 300px;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}