@import url('variables.css');
@import url('fonts.css');
body{font-family: 'Switzer', sans-serif;font-size: var(--fs-xs);color: var(--text);line-height: var(--lh-xs);}
* {outline: none !important;}

.heading{
    font-size: 43px;
    font-weight: 700;
}
.contentpara {
    font-size: 24px;
    font-weight: 600;
    line-height: 37.2px;
}
.bg_main {
    background: linear-gradient(to right, var(--primary), var(--secondary));
}
.bannerwidth{
    max-width: 600px;
   }

   .box {
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .box:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
    /* Smooth expand/collapse for navbar */
    .navbar-collapse {
        transition: all 0.3s ease-in-out;
    }

    /* Smooth hover effect for nav links */
    .navbar-nav .nav-link {
        transition: background-color 0.2s ease, color 0.2s ease;
        border-radius: 0.375rem;
    }

    .navbar-nav .nav-link:hover {
        background-color: #f8f9fa; /* light gray */
        color: #0d6efd; /* Bootstrap primary */
    }

    /* Optional focus ring on toggler */
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }  
    
@media (max-width: 460px) {
    /* Your CSS rules go here */
  
   .bannerwidth{
    max-width: 212px;
   }
  
    /* Add more responsive styles as needed */
  }