/* styles.css */
body {
    position: relative;   
}

   .navbar-toggler {
          border-color: #2090bd;    
      }  

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(32, 144, 189)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    #top-nav .navbar-brand img {
      width: 80px; height: 80px; margin-top: -15px; margin-bottom: 0; margin-right: 8px; filter: saturate(130%); z-index: 1;
  }

  @media only screen and (max-width: 1000px){
      #top-nav .navbar-brand img {
        width: 50px;
        height: 50px;
        margin-top: -5px;
    }
    #top-nav .navbar-brand h2 {
        font-size: 25px;
    }
    #home {
        padding-bottom: 10px;
    }
    #home p {
        font-size: 11px;
    }
    .location {
        display: none;
    }
}

#shop {
      padding-left: 20px; padding-right: 20px;
      background: #2090bd;
      color: #fff;
    }

    #shop:hover {
      background: none;
      border: 1px solid #2090bd;
      color: #4b0082;
    }

#top-nav ul {
  padding-top: 35px;   
}

#top-nav ul li {
  padding: 7px 8px;
}

#top-nav ul li:hover a {
  border-bottom: 2px solid #2090bd;
}

#top-nav .navbar-nav a {
  color: #fff;
  font: 16px Roboto, Arial, sans-serif;
  text-transform: uppercase;
}

.navbar li .active {
  border-bottom: 2px solid #2090bd;
}

#top-nav .navbar-nav .active {
  font-weight: bolder;
}

.navbar #contact-btn:hover {
  background: transparent;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{   }
  .navbar .nav-item:hover .dropdown-menu{ display: block; }
  .navbar .nav-item .dropdown-menu{ margin-top:0; }
}

.navbar .nav-item .dropdown-menu {
  border-radius: 0;
  min-width: 200px;
}

.navbar .nav-item .dropdown-menu a:hover {
  background: rgba(0, 65, 107, 0.2);
}

.carousel .col-sm-8 {
    padding-left: 2%; 
    padding-top: 70px;
}

@media only screen and (max-width: 1000px){
  .carousel .col-sm-8 {
    padding-top: 0;
    padding-left: 0;
    text-align: center;
}
}

.carousel .btn {
    background: #2090bd;
    color: #fff;
    font-weight: bold;
    padding: 10px 40px;
    margin-top: 30px;
} 

.carousel .btn:hover {
    background: #fff;
    transition: ease-in .2s;
    color: #ff9966;
}

.calculator {
    margin-top: -200px;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 1000px){
  .calculator {
    margin-top: -50px;
}
}

.steps .card {
    position: relative;
    border: 1px solid rgba(150, 150, 150, 0.1);
    box-shadow: 0 0 20px #666;
    height: 100%; 
    padding: 20px;
    padding-top: 60px;
}

.steps .col-sm-4 {
    margin-bottom: 70px;
}

.steps .iconify {
    position: absolute;
    top: -45px;
    left: 38%;
    color: #4b0082;
    background: #f6f6f6;
    border: 1px dashed #2090bd;
    border-radius: 50%;
    padding: 10px;
    width: 90px;
    height: 90px;
}

.steps h5 {
    color: #2090bd;
    text-align: center;
}

.why-choose-us .col-sm-4 {
    padding: 0;
    margin: 0;
}

.why-choose-us .card {
 border: 1px solid rgba(150, 150, 150, 0.1);
 border-radius: 0;
 height: 100%;
 padding: 20px;
}

.why-choose-us .iconify {
    font-size: 80px;
    color: #ff9966;
    margin-bottom: 20px;
}

.why-choose-us .btn {
    background: linear-gradient(to right, #ff9966, #ff6666);
    color: #fff;
    font-weight: bold;
    padding: 10px 40px;
}

.why-choose-us .card .btn:hover {
    background: #2090bd;
}

.calculator .card {
    padding: 20px;
    padding-bottom: 40px; 
    border: 1px solid rgba(100,100,100, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    margin: 10px 10%;
}

@media only screen and (max-width: 1000px){
  .calculator .card {
    margin: 10px 20px;
    padding: 10px;
    }
}

.calculator .card span {
    color: #2090bd;
}

.calculator .card-title {
    margin-bottom: 20px;
}

.calculator .card .btn {
    background: linear-gradient(to right, #ff9966, #ff6666);
    color: #fff;
    font-weight: bold;
    padding: 10px 40px;
    width: 100%;
}

.calculator .card .btn:hover {
    background: #2090bd;
}

.custom-range {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #ddd;
    /* border-radius: 5px; */
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.custom-range:hover {
    opacity: 1;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 23px;
    background: linear-gradient(to right, #ff9966, #ff6666);
    border-radius: 5px;
    cursor: pointer;
}

.custom-range::-moz-range-thumb {
    width: 28px;
    height: 23px;
    background: linear-gradient(to right, #ff9966, #ff6666);
    border-radius: 50%;
    cursor: pointer;
}

.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
}

.custom-range::-moz-range-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
}

.position-relative {
    position: relative;
}

.tooltip-range {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #ff9966, #ff6666);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
}

.tooltip-range::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #ff6666 transparent transparent transparent;
}

.progress-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.progress-step {
    width: 48%;
    height: 8px;
    background: #ccc;
    position: relative;
}

.progress-step.completed {
    background: #4caf50;
}

.contact {
    min-height: 400px; 
    background: linear-gradient(#b54dff, #4b0082); 
    background-size: 100%; 
    color: #fff;
  }

  .contact .btn {
    background: #2090bd;
    border: 1px solid #fff;
    color: #fff;
    font-weight: bold;
    width: 52%;
    opacity: 1;
  }

  .contact .btn[disabled] {
    cursor: no-drop;
  }

  .contact .btn:hover {    
    background: #99e699;
    transition: ease-in .2s;
  }

  @media only screen and (max-width: 1000px){
    .contact .btn {
      width: 100%;
    }
  }

  .footer a {
    color: #fff;
  }

.waves {
    width: 100%;
    overflow: hidden;
    display: block;
}

.wave {
    animation: wave 3s ease-in-out infinite;
    transform-origin: center bottom;
}

.wave1 {
    animation-duration: 4s;
}

.wave2 {
    animation-duration: 5s;
    animation-delay: -2s;
}

.wave3 {
    animation-duration: 6s;
    animation-delay: -3s;
}

@keyframes wave {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.05);
    }
}