@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap');
html {
    background-color: rgb(210, 210, 210);
}

body {
    width: 90%;
    margin: auto;
    text-align: center;
    background-color: white;
    margin-top: 5%;
    border-radius: 15px;
    font-family: 'Arimo', sans-serif;
}

h2 {
  font-size: 2.5rem;
  color:rgb(26, 68, 132);
}

.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: black;
    color: black;
    opacity: 0;
  }
  .skip-to-main-content-link:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    color:white;
  }


a:visited, a {
    color: inherit;
    text-decoration: none;
}

#header-wrapper {
    display: flex;
    width: 90%;
    padding: 3%;
    overflow:scroll; 
}

#logo {
    width: 50%;
}
#logo img {
    width: 300px;
    float: left;
}

#land2 {
    float: right;
    width: 45%;
    padding-top:2%;
}

#land2 a {
  display: block;
}

.phone {
    font-size: 2rem;
}

#land2 p {
    font-size: 1.5rem;
}

.lang {
    background-color: #0000FF;
    font-size: 1rem;
    color: white;
}

button a {
    color: white;
    font-size: 1.5rem;
}

.btn a:hover {
  color: #0000FF;
}

.topnav-mobile {
  display: none;
}

.topnav {
    text-align: center;
    background-color:#0000FF;
    color: white;
    font-weight: bold;
}

  /* Style the links inside the navigation bar */
  .topnav a {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1.35rem;
    padding-left: 5%;
    padding-right: 5%;
  }


  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width: 911px) {
      html,body
        {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow-x: hidden; 
            background-color: white;
            border-radius: 0;
        }
        body {
          width: 100%;
          margin-top: 0;
        }
        .topnav.responsive {
            display: block;
            position: relative;
            width: 100%;
            padding-top: 5%;
            padding-bottom: 1%;
        }

        .topnav-mobile {
          display: block;
        }



        .topnav-desktop {
          display: none;
        }

        /* hide all links. Show the link that contains should open and close the topnav (.icon) */
        .topnav a {display: none;}
        .topnav a.icon {
          float: none;
          display: block;
        }
    
        .topnav.responsive a.icon {
          /* position: absolute; */
          display: block;
          /* right: 0; */
          /* top: 0; */
        }
        .topnav.responsive a {
          float: none;
          display: block;
          background-color: var(--light-color);
          /* text-align: center; */
        }

      /* Change the color of links on hover */
      /* .topnav a:hover {
        background-color: white;
        color: rgb(26, 68, 132);
      } */
    }    

    /* Slideshow container */
.slideshow-container {
    width: 80%;
    position: relative;
    margin: auto;
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
  }

  .mySlides img {
      height:450px;
      object-fit: cover;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* 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);
  }
  

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

  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  /* SERVICES */

  #services h2 {
    margin-bottom: 0;
  }
  .main img {
    vertical-align: middle;
    height: 300px;
    width: 100%;
    object-fit: cover;
    
  }
  
  .btn {
    background-color:#0000FF;
    padding: 0.8rem;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 400;
    display: block;
    width: 100%;
    color: white;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .btn:hover {
    background-color: white;
    color:#0000FF;
    border: 1px solid #0000FF;
  }
  
  .cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;

  }
  
  .cards_item {
    display: flex;
    padding: 1rem;
  }
  
  @media (min-width: 640px) {
    .cards_item {
      width: 33%;
    }
  }
  
  @media (min-width: 56rem) {
    .cards_item {
      width: 25%;
    }
  }
  
  .card {
    background-color: white;
    /* border-radius: 0.25rem; */
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .card_content {
    padding: 1rem;
    background: white;
  }
  
  .card_title {
    color: rgb(26, 68, 132);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin: 0px;
  }
  
  .card_text {
    color: black;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;    
    font-weight: 400;
  }

  #moreservices ul {
    list-style: none;
  }

  #moreservices li {
    text-transform: uppercase;
  }
  .send-msg {
    background-color: #0000FF;
    color: white;
    font-size: 1rem;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
}

#video {
    margin: 5%;
    border: 1px solid white;
    margin-left: 0;
    margin-right: 0;

}

video {
    max-width: 100%;
    background-color: white;
}


#quote h2 {
  font-size: 3rem;
}

.quote-container {
  background-color: white;
  width: 80%;
  margin: auto;
  border: 9px solid #0000FF;
}

input, textarea, select {
  margin:1%;
    align-items: center;
    background-clip: padding-box;
    background-color: white;
    border-radius: 0.25rem;
    box-shadow: rgb(26, 68, 132) 0 3px 3px 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    justify-content: center;
    line-height: 1.25;
    min-height: 3rem;
    padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: 50%;
}

.quote-group {
  padding: 1%;
}

#quote-btn {
  width: 50%;
  margin: auto;
  margin-bottom: 2%;
}

.send-quote {
  width: 50%;
  margin: auto;
  margin-bottom: 1%;
}
    

iframe {
  border: gray 1px solid;
}


footer{
  /* position: absolute; */
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#0000FF;
  height: auto;
  padding-top: 3%;
  color: #fff;
}

.footer-content h3{
  font-size: 2.1rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 3rem;
}

.footer-content p{
  max-width: 500px;
  margin: 10px auto;
  line-height: 28px;
  font-size: 14px;
  color: #cacdd2;
}

.socials{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 3rem 0;
  padding-left: 0;
}

.socials li{
  margin: 0 10px;
}
.socials a{
  text-decoration: none;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
}
.socials a i{
  font-size: 2.5rem;
  width: 20px;
  transition: color .4s ease;
}


.footer-bottom{
  background: #000;
  padding: 20px;
  text-align: center;
}

.footer-bottom p{
  font-size: 14px;
  word-spacing: 2px;
  text-transform: capitalize;
}
.footer-bottom p a{
 font-size: 16px;
 text-decoration: none;
}
.footer-bottom span{
   text-transform: uppercase;
   opacity: .4;
   font-weight: 200;
}

.footer-menu ul{
  display: flex;
  justify-content: center;
  padding:0;
}

.footer-menu ul li{
padding-right: 10px;
display: block;
}

.footer-menu ul li a{
  color: #cfd2d6;
  text-decoration: none;
}

.footer-menu ul li a:hover{
  color: #0000FF;
}

@media (max-width:500px) {
  .footer-menu ul{
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
  }

}


/* Float four columns side by side */
.column-contact {
  float: left;
  width: 50%;
  padding: 0;
}

/* Remove extra left and right margins, due to padding in columns */
.row-contact {
  margin: 0;
  width: 100%;
}

/* Clear floats after the columns */
.row-contact:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card-contact {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  text-align: center;
}

.card-contact i {
  font-size: 3rem;
  color:#0000FF;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column-contact {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}


/* GENERAL RESPONSIVE MEDIA */

@media screen and (max-width:614px) {

  h2 {
    font-weight: 400;
  }

  #header-wrapper {
    display: inline-block;
  }

  #logo img {
    float: none;
    width: 200px;
    height: auto;
  }

  #logo, #land2 {
    width: 100%
  }

  .phone {
    font-size: 1.5rem
  }

  #land2 p {
    font-size: 1rem;
  }
}