@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@500&family=Quicksand&display=swap');


:root {
        --primary-color: #D9E021; /* Lime Zest */
        --secondary-color: #FFDD00; /* Lemon Fizz */
        --accent-color: #FBB117; /* Blazing Yellow */
        --highlight-color: #FFB400; /* Saffron */
        --background-color: #ecc3ad; /* Tender Shoots */
        --text-color: #333333; /* Neutral dark gray for readability */
    }

body {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.25rem;
  color: #111111;
  background-image: linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%);
  background-attachment: fixed;
  background-size: cover;
  padding-top: 60px;
}

section {
  min-height: 750px;
  padding-top: 3%;
  padding-bottom: 2%;
}

a {
  color: unset;
  text-decoration: none;
}


.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.wrapper {
  box-shadow: 0px 0px 25px grey;
  background-color: white;
  color: #111111;
  margin-top: 5px;
  max-width: 98%;
  border-radius: 5px;
}

.navbar-brand {
  font-family: 'Kalam', sans-serif;

}

header {
  font-family: 'Catamaran', sans-serif;
}


footer {
  height: 80px;
  background-color: #FFE80D;
  color: #000000;
  text-align: center;
}

p.copyright-info {
  padding-top: 20px;
}

.content {
  padding: 1em;

}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
  background-color: #111111;
  
}

.nav-item {
  font-size: 1.2em;
  border-color: #069702;
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.nav-item a, .dropdown-toggle a{

  background: -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: bold;
  text-transform: uppercase;

}

.navbar-toggler-icon {
background-color:#ffb72f;
}


.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:focus{

}

.nav-item:hover {
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  color: #FFE80D;
  background:

  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),
  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),
  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),
  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),

  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),
  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),
  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%),
  -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%);

  background-position: 0 100%, 0 0, 0 100%, 100% 0, 
  0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,  
  3px 100%, 100% 3px, 100% 3px,3px 100%;
  animation: animate 2s linear infinite 2s;

  background-color:transparent;
  background-repeat:no-repeat;
  transition: 2s linear;
  
}

@keyframes animate {
  0% {
    background-position: 0 100%, 0 0, 0 100%, 100% 0, 
    0 0, 0 0, 0 100%, 100% 0;
    background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,  
    3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  40% {
    background-position: 0 100%, 100% 0, 100% 100%, 100% 0, 
    0 0, 0 0, 0 100%, 100% 0;
    background-size: 3px 0%, 100% 3px, 0% 3px,3px 100%,  
    3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  60% {
    background-position: 0 100%, 100% 0, 100% 100%, 100% 100%, 
    0 0, 0 0, 0 100%, 100% 0;
    background-size: 3px 0%, 0% 3px, 100% 3px,3px 100%,  
    3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  70% {
    background-position: 0 100%, 100% 0, 0% 100%, 100% 100%, 
    0 0, 0 0, 0 100%, 100% 0;
    background-size: 3px 100%, 0% 3px, 100% 3px,3px 0%,  
    3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  80% {
    background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%, 
    0 0, 0 0, 0 100%, 100% 0;
    background-size: 3px 100%, 0% 3px, 0% 3px,3px 0%,  
    3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  100% {
    background-position: 0% 0%, 0 0, 0 100%, 100% 100%, 
    0 0, 0 0, 0 100%, 100% 0;
    background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,  
    3px 100%, 100% 3px, 100% 3px,3px 100%;  
    
  }
}

.navbar-brand {
  font-size: 40px;
  background: -webkit-linear-gradient(343deg, rgba(239,247,0,1) 0%, rgba(255,183,47,1) 40%, rgba(134,230,0,1) 67%, rgba(255,232,13,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 10px;

}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* remove the gap so it doesn't close */
  transition-duration: 1s;
  font-weight: bold;
  text-transform: uppercase;
}

.dropdown-menu {
  background-color: #111111;
  border: none;
  min-width: inherit;
  margin: 0;
  padding: 2px;
}

.dropdown-menu a{
  text-decoration: none;
}

/*
.blackglass {
  background-color: #000000b3;
}
*/
.greyshadow {
    box-shadow: #9b9b9b 5px 4px 20px 6px;
}
.greyshadow:hover {
    box-shadow: inset #9b9b9b -1px -2px 13px 4px;
}

.header-text {
  position: relative;
  left: 10%;
  top:5%;
}

.regularfont {
  font-family: 'Quicksand', sans-serif;
}

.prettyfont, h1, h2 {
  font-family: 'Catamaran', sans-serif;
}

h1, h2, h3 {
  padding:  2rem 1rem;
}

.cbackground {

  color: white;

}

.ctext {
  color: #e3682d;
}

/******* BACKGROUNDS ********/

.home-header {
  background-image: url('/img/bg_w_computer.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;


}

#info {
  background-image: url('/img/bg_green_network.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#intro {
  background-image: url('/img/bg_white_network.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#indie {
  /*/background-image: url('/img/bg_dark_lemon_network.jpeg');*/
  background-repeat: no-repeat;
  background-size: cover;
}

#services, #references, #allpackstable {
  background-image: url('/img/bg_green_lemons.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
}

#quality {
  background-image: url('/img/bg_light_network.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

#topacks, #whyus {
  background-image: url('/img/bg_light_network.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

#reviews, #faqweb {
 /* background-image: url('/img/bg_dark_lemon_network.jpeg');*/
  background-repeat: no-repeat;
  background-size: cover;

}

#contactweb {
 background-image: url('/img/bg_dark_lemons.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}


.buttonCTA {
  border-width: 3px;
  border-color: #ffb72f;
  background-color: #111111;
  border-style: solid;
  border-radius: 5px;
  font-weight: bold;
  color: #ffb72f;
  padding: 1rem 2rem;
  font-size: 1.3rem;
}

.buttonCTA:hover {
  background-color: #069702;
  border-color: #FFE80D;
  color: #FFE80D;
  transition-duration: 1s;
}

.cardService {
  border-color: #111111;
  background-color: #111111;
}

.cardReview {
  border-color: #ffb72f;
  background-color: #111111;
}

.cardQuality {
 /* border-color: #ffb72f;*/
  background-color: #111111;
}

/* TABLES */

.text-th {
    font-size: .9rem;
}

.price-th {
    font-size: 1.4rem;
}

/****************** ACCORDION *****************/

.accordion {
    --bs-accordion-color: #111111;
    --bs-accordion-bg: #f5fce4;
    --bs-accordion-border-color: #f5fce4;
    --bs-accordion-btn-color: #ffb72f;
    --bs-accordion-btn-bg: #f5fce4;
    --bs-accordion-btn-focus-border-color: #f5fce4;
    --bs-accordion-btn-focus-box-shadow: #FFFEE2;
    --bs-accordion-active-color: #111111;
    --bs-accordion-active-bg: #ecc04f;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-padding-y: 1rem;
}

.accordion-button {
  font-size: 1.7rem;
}

.accordion-header {
    margin-top: 2rem;
    padding: 0;
}