font-face {
    font-family:Orkney-Medium;
    src: url(fonts/Orkney-Medium.otf);
  }
  
  @font-face {
      font-family:Orkney-Bold;
      src: url(fonts/Orkney-Bold.otf);
  }
  
  @font-face {
    font-family:Orkney-Light;
    src: url(fonts/Orkney-Light.otf);
  }
  
  @font-face {
    font-family:Orkney-Regular;
    src: url(fonts/Orkney-Regular.otf);
  }

  
  body {font-size: 16px; line-height: 1.4; margin: 0; padding: 0;}
  img {max-width: 100%; display: block;}
  .header { background-image: linear-gradient(43deg, #172b3f, #2b4a69, #294163, #172b3f);}
  .nav{ display: flex; align-items: center; justify-content: space-between;}
  .nav-ul {position: relative; color: #fff; letter-spacing: 1px; font-family: 'Orkney-Light', Arial, sans-serif; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; list-style: none; gap: 1rem; font-size: 1.2rem; background-image: linear-gradient(43deg, #172b3f, #2b4a69, #294163, #172b3f);}
  .nav-ul li:nth-of-type(1) {margin-left: 3rem; }
  .nav-ul li:nth-of-type(8) {margin-left: auto;  margin-right:50px; }
    .nav-ul li:nth-of-type(8) {font-family: 'Orkney-Light', Arial, sans-serif;}
    .hamburger {
      background-color: transparent;
      display: none;
      color: #fff;
      border: 0;
      cursor: pointer;
      font-size: 25px;
     
  }
  
  .logo {max-width: 5%;}
  .nav-ul li:nth-of-type(1) {margin-left: 2%; margin-right: auto;}
  
  
  .nav-ul .route a {font-size: 1.2rem; font-family:'Orkney-Light', Arial, sans-serif; }
  
  .hamburger:focus {outline: none;}
  
  .nav-ul li a { display: inline-block;
      color: #fff;
      font-family: 'Cormorant Garamond', serif;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
    font-size: 1.2rem;
  
     
  }
  .nav-ul li a {color: #fff; font-size: 2rem;}
  .fa { margin-right: 10px;}
  
  @media (max-width: 1400px) {
    .nav-ul li:nth-of-type(8) {margin: 0;}
     .nav-ul li a {font-size: 1.4rem;}
   .nav-ul li:nth-of-type(1) {margin: 0;}
   .view1-inner img {margin: auto; max-width: 40%;}

  }

  ul li ul.drop {
    min-width: 3rem; /* Set width of the dropdown */
    background: #95c11f;
    display: none;
    position: relative;
    z-index: 999;
    border-radius: 10px;
}
ul li:hover ul.drop{
    display: block; /* Display the dropdown */
    position: absolute;
}
ul li ul.drop li {
    display: block;
    text-align: center;
   
}

ul li ul.drop li:first-child {
margin-left: 0; display: none;
  
}
.drop {margin-left: 20px;}
 .drop li a {text-shadow: 2px 2px #000; margin-left: -50px;font-size: 1.3rem;}
.fa-caret-down {color: #7ff112;}

  @media (max-width: 1200px) {
    .nav {clear: both; }
      .nav-ul {display: none; flex-direction: column; }
      .nav-ul.show {display: flex; max-width: 50%; margin: 0 auto;}
      .hamburger {display: block; float: right;}
      .btn { width: 100%;} 
      .nav-ul li:nth-of-type(8) {margin: 0;}
  .nav-ul li:nth-of-type(1) {margin: 0;}
 
      
      }

   
 
      @media (max-width: 480px) {
 
       .nav-ul.show {max-width: 80%; padding-left: 0;}
       .nav-ul li:nth-of-type(8) {margin-left: -2.5rem;} /*phone-number*/
       .nav-ul .route a {font-size: 1.7rem;}
       .nav-ul .route {margin-left: -2rem;}
       .nav-ul li:nth-of-type(1) {max-width: 100%; margin-left:-1rem;} 
       .nav-ul li:nth-of-type(8) {margin-left: -2rem;}
        .nav-ul li a {color: #fff; font-size: 2rem;}
        .logo img {max-width: 60%; margin: 0 auto;}
     }


     
    

    

          .footer {
  display: flex;
 
 width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  background: #000;
  color: #fff;
  gap: 1rem;
}

.footer h2 {font-size: 1.3rem;}

.footerinner {max-width: 100%; text-align: center; font-size: 1rem; font-family: 'Orkney-Regular', Arial, sans-serif; margin-bottom: 0;}

.footerinner {
margin: 0 auto;
 
  flex: 1;


 
}

.footerinner a {text-decoration: none; color: #fff;}

.footerinner .fa { color: #95c11f; font-size: 1.5rem;}

@media (max-width: 900px){
  
  .footerinner {flex: 2 46%; }

    
}

@media (max-width: 480px){
   .footer {max-width: 100%; flex-direction: column;}
   .footerinner {max-width: 98%;}

 }


       
        .supports { max-width: 20%; margin: 0 auto;
         flex: 1;
       
       } 

      
       
       .company-infoF ul {list-style: none; color: #fff;}
       .company-infoF a {text-decoration: none; color: #fff;}
       
          ul.sraid li::before {
           font-family: 'FontAwesome', Arial, sans-serif; 
           content: "\f041";
           display: inline-block;
           padding-right: 3px;
           vertical-align: middle;
         font-size: 1.2rem; position: absolute; margin-left: -35px;/* Add content: \2022 is the CSS Code/unicode for a bullet */
         color: #fff; text-shadow: 1px 1px #000;/* Change the color */
         font-weight: bold; /* If you want it to be bold */
         /*display: inline;  Needed to add space between the bullet and the text */
        
        
       }
       
       .sraid li {position: relative; margin-left: 100px; font-size: 1.3rem; margin-bottom: 30px; font-family: 'Orkney-Light', Arial, sans-serif; }
       
        ul.telefon li::before {
           font-family:'FontAwesome', Arial, sans-serif; 
           content: "\f10b";
           display: inline-block;
           padding-right: 3px;
           vertical-align: middle;
         font-size: 1.2rem; position: absolute; margin-left: -35px;/* Add content: \2022 is the CSS Code/unicode for a bullet */
         color: #fff; text-shadow: 1px 1px #000;/* Change the color */
         font-weight: bold; /* If you want it to be bold */
         /*display: inline;  Needed to add space between the bullet and the text */
       
        
        
      }
       
       .telefon li {position: relative; margin-left: 100px;  font-size: 1.3rem; margin-bottom: 30px; font-family: 'Orkney-Light', Arial, sans-serif;}
       
        ul.leitir li::before {
           font-family:'FontAwesome', Arial, sans-serif; 
           content: "\f0e0";
           display: inline-block;
           padding-right: 3px;
           vertical-align: middle;
         font-size: 1.2rem; position: absolute; margin-left: -35px;/* Add content: \2022 is the CSS Code/unicode for a bullet */
         color: #fff; text-shadow: 1px 1px #000;/* Change the color */
         font-weight: bold; /* If you want it to be bold */
         /*display: inline;  Needed to add space between the bullet and the text */
        
        
       }
       
       .leitir li {position: relative; margin-left: 100px; font-size: 1.3rem; margin-bottom: 30px; font-family: 'Orkney-Light', Arial, sans-serif;}


       
       
       @media (max-width: 1400px){
         
         .supports {flex: 2 46%; }
       
           
       }
       
       @media (max-width: 640px){
       footer {flex-direction: column;}
       footer li {margin-left: 0;}
           .supports {max-width: 96%; margin: 0 auto;}
       }


       .container {
        max-width:1170px;
        margin-left:auto;
        margin-right:auto;
        padding:1em;
        color: #fff;
       margin-bottom: 4%;
        
      }
    
     
    
      
      @media only screen and (max-width: 480px) {
      
       .container{
          max-width:1170px;
          margin-left:auto;
          margin-right:auto;
          padding:3rem 1rem;
        }
      }
      .company-info ul{
          list-style: none;
          padding:0;
          font-size: 1.3rem;
          
        } 

        
        
        .brand {
          text-align: center; padding: 2rem; color: #f27052; text-shadow: 1px 1px #000;
        }
        
        .brand span{
          color: #7ff112; text-shadow: 1px 1px #000; font-family: 'Orkney-Light', Arial, sans-serif;
          
        }

        .brand .gorm {color:#70f3f9;}

       
        
        .wrapper {
          box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
         
        }
        
        .wrapper > *{
          padding: 1em;
        }
        
      .company-info {
        background-image: linear-gradient(43deg, #172b3f, #2b4a69, #294163, #172b3f);
          /*background: rgba(72,94,116,0.8); */
          border: 1px solid transparent;
        

        } 

        .company-info ul li {
          margin-top: 50px;
        }
        .company-info h3, .company-info ul li {padding-top: 1rem;}
      
        .company-info h3, .company-info ul{
          /* text-align: center; */
          margin:0 0 1rem 0;
          
        } 
      
       .company-info h3, .company-info ul li a {text-decoration: none; color: #fff;}  
      
        
      
      h3 {color: #7ff112; text-shadow: 1px 1px #666; letter-spacing: 1.5px;}
     
        
       .contact {background-image: url(images/4email.webp);
      background-repeat: no-repeat; background-position: center; background-size: cover;}
        
        /* FORM STYLES */
        .contact form {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap:20px;
        }
        
        .contact form label{
          display:block;
          color: #fff; text-shadow: 1px 1px #000; font-size: 1.5rem;
        }
        
        .contact form p {
          margin:0;
        }
        
        .contact form .full{
          grid-column: 1 / 3;
        }
        
         .contact form input, .contact form textarea{
          width:100%;
          padding:1em;
          border:1px solid #c9e6ff;
        }
        
        .contact form button {
      background: #39a7bf;
      border: 0;
      font-size: 1.5rem; font-weight: 500; text-shadow: 1px 1px #000; letter-spacing: 2px; padding: 1rem 1.5rem;
      color: #fff;
    max-width: 50%;
    margin-left: 25%;
    border: 1px solid transparent;
    border-radius: 25px;
    margin-top: 2rem;
     box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 0 0 rgba(0, 0, 0, 0.5) inset,
        0 1.25rem 0 rgba(255, 255, 255, 0.08) inset,
        0 -1.25rem 1.25rem rgba(0, 0, 0, 0.3) inset,
        0 1.25rem 1.25rem rgba(255, 255, 255, 0.1) inset;
    }
    
    
    .contact form button:hover,.contact form button:focus{
      background:#42c9b5;
      color:#fff;
      outline:0;
      transition: background-color 2s ease-out;
    } 
        
        /* LARGE SCREENS */
         @media (min-width:700px){
          .wrapper{
            display: grid;
            grid-template-columns: 1fr 2fr;
          }
        
          .wrapper > *{
            padding:2em;
          }
        
          .company-info h3, .company-info ul, .brand{
            text-align: left;
          }
         }
      
        
          
          @media screen and (max-width: 480px) {
           .contact form input {
             width: 90%;
             }
             
             .contact form textarea {width: 80%;}
          
          .contact form{
          display: grid;
          grid-template-columns: 1fr;
          display: inline;} 
        }
        
        @media screen and (max-width: 320px) {
        
            .container {width: 100%; padding: 0;}
            .wrapper{box-shadow: none;}
        }

        input.button1 {background: #39a7bf; border: 0; font-size: 1.5rem;font-weight: 500;text-shadow: 1px 1px #000;letter-spacing: 2px;padding: 1rem 1.5rem;color: #fff;max-width: 20%;border: 1px solid transparent;border-radius: 25px;box-shadow:0 1px 0 rgba(255, 255, 255, 0.25),0 1px 0 rgba(255, 255, 255, 0.25) inset,0 0 0 rgba(0, 0, 0, 0.5) inset, 0 1.25rem 0 rgba(255, 255, 255, 0.08) inset,0 -1.25rem 1.25rem rgba(0, 0, 0, 0.3) inset, 0 1.25rem 1.25rem rgba(255, 255, 255, 0.1) inset;}

         @media (max-width: 768px){
input.button1 {max-width: 30%;}

        }

.copyright img {max-width: 10%; margin: 0 auto;}


        @media (max-width: 480px){
input.button1 {max-width: 50%;}
 .copyright img {max-width: 25%;}

        }