@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);

body {
  background-color: #43cbfc;
}


/* open dropdown-menu by hover effect  */
.dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 6px;
}

.dropend:hover > .nav-link{
  background-color: rgb(73, 73, 73);
  /* color: blue; */

} 
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.fa-xmark {
  display: none;
}
.navbar {
  transition: background-color 0.9s ease-in-out;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color:  #fffe82;
}

.navbar .container-fluid .navbar-collapse .navbar-nav li a {
  color: rgb(0, 0, 0);
}
.navbar-scroll {
  background-color:  #5cfcff; /* Change the background color when scrolling */
  box-shadow: 0px 2px 6px rgba(10, 0, 0, 0.938);
  padding-bottom: 20px;
}

.navbar-brand {
  font-weight: bold;
  font-size: 20px;
  color: #333;
}

.navbar-toggler {
  border: none;
  background-color: transparent;
}
.dropend ul {
  background-color: #00B4D8;
}
.navbar-toggler-icon {
  width: 25px;
  height: 25px;
  
}

.navbar-nav .nav-link {
  color: #555;
  font-size: 16px;
  font-weight: bold;
  margin-right: 20px;
  transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link-scroll {
  color: #fff; /* Change the link color when scrolling */
}


.navbar-nav .nav-link:hover {
  color: #333;
}

.dropdown-menu {
  background-color: #f8f9fa;
  border: none;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
  color: #555;
  font-size: 14px;
  font-weight: bold;
}

.dropdown-item:hover {
  color: #333;
  background-color: #e9ecef;
}

.category-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 1rem; /* Add margin to the right side of each card */
}

.category-card {
  transition: transform 0.3s;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
  border-radius: 5px;
  background-color: #5cfcff;
}

.category-card:hover {
  border: 1px solid blue;
  border-radius: 6px;
}

.card-title {
  color: black;
}

.category-card:hover {
  transform: scale(1.05);
}

a {
  text-decoration: none;
}

/* Search input */
form .search {
  background-color: #fff;
  border: none;
  border-radius: 20px 0px 0px 20px;
  padding: 8px 15px;
  box-shadow: 0 1px 1px rgba(37, 37, 37, 0.214);
  transition: box-shadow 0.3s ease;
  color: black;
  font-size: 16px;
}

.search:focus {
  outline: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Dropdown select */
.form-select {
  border: none;
  border-radius: 20px;
  padding: 8px 15px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(37, 37, 37, 0.214);
  transition: box-shadow 0.3s ease;
  color: black;
  font-size: 16px;
}

.form-select:focus {
  outline: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Container animation */
.container {
  opacity: 0;
  transform: translateY(-20px);
  animation: fade-in 0.5s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* model style  */
  /* Set the Modal background */
  /* Add zoom animation */
  .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
  }

  @-webkit-keyframes animatezoom {
    from {
      -webkit-transform: scale(0);
    }
    to {
      -webkit-transform: scale(1);
    }
  }

  @keyframes animatezoom {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

  /* Animation for modal appearance */
  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Animation for modal disappearance */
  @keyframes modalFade {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @media screen and (max-width: 300px) {
    span.psw {
      display: block;
      float: none;
    }
    .cancelbtn {
      width: 100%;
    }
  }
/* model style end  */

/* Start of .dropdown-menu style */
/* arrow is the id of every ">" in .dropdown-menu list button  */
#arrow1,
#arrow2,
#arrow3,
#arrow5,
#arrow6,
#arrow7,
#arrow8,
#arrow9,
#arrow10,
#arrow11,
#arrow12,
#arrow13,
#arrow14,
#arrow15 {
  padding-right: 1.75rem;
  color: white;
  /* padding-left: 0.75rem; */
}

.btn-group button {
  background-color: #00B4D8;
  border-radius: 0;
}
.btn-group button a {
  text-decoration: none;
  font-weight: bolder;
  color: #000;
}

.btn-group button:hover {
  background-color: #01d7fc;
  color: black;
  border-radius: 0;
}
#dropdownMainUl {
  /* display: grid; */
  grid-template-columns: 100%;
}

#dropdownMainUl div {
  display: grid;
  grid-template-columns: 90% 10%;
}
#dropdownMainUl {
  border: none;
  box-shadow: none;
  background: transparent;
}


@media (min-width:1025px) {
  .col-lg-2 {
    width: 16%;
}
}
@media (min-width:1200px) {
  .col-lg-2 {
    width: 15%;
}
}
@media (min-width:1400px) {
  .col-lg-2 {
    width: 12%;
}
}

@media only screen and (max-width: 800px) and (min-width: 480px) {
  .col-lg-2 {
    width: 32%;
}
}

/* footer style  */
.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
  margin-top: 60px
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}