/*CSS Variables*/
:root{
    --primary: #dddd; 
    --dark: #333;
    --light: #fff;
    --shadow:0 1px 5px rgb(104,104,104, 0.8); 
}

body{
    font:15px 1.5;
    padding: 0;
    margin: 0;
    background: url(background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body a{
    text-decoration: none;
}
/* global */

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}
.light{
    padding: 25px;
    background:linear-gradient(#51a5d223,#438de710 50%,#15415923);
    color: #0c0c0c;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: var(--shadow);
}

.dark{
    padding: 25px;
    background:#0282c2;
    background:linear-gradient(#51a5d2,#438de7 50%,#154159);
    color: #ffffff;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: var(--shadow);
}

.btn{
    height: 30px;
    background: #c39d36;
    background:linear-gradient(#fbe761,#e7d743 50%,#c39d36);
    border:0;
    padding-left:40px;
    padding-right: 40px;
    color: #000000;
    box-shadow: var(--shadow);
    text-decoration: none;
    width: 100%;
}
.button_1{
    height: 30px;
    background: #c39d36;
    background:linear-gradient(#fbe761,#e7d743 50%,#c39d36);
    border:0;
    padding-left:40px;
    padding-right: 40px;
    color: #000000;
    box-shadow: var(--shadow);
    text-decoration: none;
    width: 100%;
}
.box button_1{
    height: 30px;
    background: #c39d36;
    background:linear-gradient(hsl(52, 95%, 68%),#e7d743 50%,#c39d36);
    border:0;
    padding-left:40px;
    padding-right: 40px;
    color: #000000;
    box-shadow: var(--shadow);
    text-decoration: none;
    width: 100%;
}
.button_1 a {
    text-decoration: none;
}
ul{
    margin:0;
    padding: 0;
}
h3{
    color:  #246bc3;
       font-weight: bold;
}
h2{
    color:  #ffdd00;
}
.main h2{
    color:  #000000;
}

/* header */
.topnav {
    overflow: hidden;
    background:#0282c2;
    background:linear-gradient(#0282c2 50%,#66ccff);
    padding: 5px 20px;
   border-bottom:#ffdd00 10px solid;
  }
  
  .topnav a.logo {
  float: left;
  margin-top: 0px;
  }
  .header-right {
     float: right;
     display: inline;
    padding: 0 20px 0 10px;
     margin-top: 30px;
  }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-size: 25px; 
    line-height: 25px;
    border-radius: 4px;
   text-transform: uppercase;
  }
  
  .active {
  background: #c39d36;
  background: linear-gradient(#c39d36 50%,#fdee68);
  color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
/* showcase */
#showcase{
    width: 100%;
    min-height: 400x;
    text-decoration: none;
    padding: 0;
    margin: 0px;
    box-shadow: var(--shadow);
}
* {box-sizing: border-box}
#showcase {font-family: Verdana, sans-serif; margin:0}
#showcase .mySlides {display: none}
#showcase img {vertical-align: middle}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
 
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size:22px;
  text-decoration: none;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.text a{
    text-decoration: none;
   color: #f2f2f2; 
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

footer{
    padding: 20px;
    margin-top:20px;
    color:#000000;
    background: #c39d36;
    background: linear-gradient(#c39d36 50%,#fdee68);
    text-align: center;
    border-top:#33a0e3 10px solid;
    box-shadow: var(--shadow);   
}


/* On smaller screens, decrease text size */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
/* Services */
.text {font-size: 15px}
       .btn.active {
        background-color: rgb(70, 125, 243);
        color: white;
      }
      .img {
        width: 100%;
    }
/* gallery */
.gallery{
    margin: 10px 50px;
}
.showcase text{
    font-size: 9px;
}
.gallery img{
    width: 230px;
    padding: 5px;
    filter: grayscale(50%);
    transition: 1s;
}
.gallery img:hover{
    filter: grayscale(0%);
    transform: scale(1.1);
}
/* boxes */
.boxes{

    display: grid;
    grid-gap: 20px;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); 
}
.box{
    text-align: center;
    padding: 1,5rem 2rem;
    padding-bottom: 3rem;
    }
.box img{
    max-width: 100%;
    box-shadow: var(--shadow);
}
.button_1{
    width: 100%;
}
.button_1:hover {
    background-color: rgb(186, 183, 183);
  }
  .button_1 a {
    text-decoration: none;
    
  }
/* sidebar */
aside#sidebar1{
    float: right;
    width: 225px;
    margin-bottom: 200px;
    box-shadow: var(--shadow);
        
}
aside#sidebar{
    float: right;
    width: 30%;
    margin-top: 70px;
    box-shadow: var(--shadow);
        
}
/* main-col */
article#main-col{
    float: left;
    width: 30%;
    text-align: left;
    padding: 20px;    
}
#main-col .img{
    float:left;
}

/* Services */
#pack {
    float: none;
}
footer img{
    float: left;
    margin-left: 50px;  
        
}
/* Media queries */
@media(max-width: 768px){
    #boxes .box,
    article#main-col,
    aside#sidebar{
        float:none;
        text-align:center;
        width: 100%;
        
    }
    .pack {
    float: none;
     }
    #showcaes h1{
        margin-top: 40px;
        font-size: 11px,
    }
    button_1{
        display:block;
        width: 100%;
    }
    .button_1:hover {
    background-color: rgb(186, 183, 183);
  }
  .button_1 a {
    text-decoration: none;
  }
    footer img{
    float: none;
    max-width: 40px;
    max-width: 40px;
    margin: 10px;
    }
    /* Services */
    .column{
        float:none;
        text-align:center;
        width: 100%;
    }
.img {
    width: 100%;
}

}

@media screen and (max-width: 650px) {
  .header a {
    float: none;
    display: block;
    text-align: left;

  }
  .header-right {
    float: none;
  }
}