@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

*  {
    -webkit-margin-before: 0; /*reset to reduce paragraphs height */
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    
  }
  
  body { background-image:url('images/seaback-FR.jpg'); background-repeat: no-repeat; background-size: cover;}

  
  body {font-size: 16px; line-height: 1.4; margin: 0; padding: 0; box-sizing: border-box; font-family: 'Ubuntu', sans-serif;}
  img {max-width: 100%; display: block;}
  .header {background-color: #54778c;}
  .logo { max-width: 10%; }
  .minor {font-size: 1.5rem; text-align: center;}
  .ainm {letter-spacing: 3px;}
  .ainmsub {font-size: 1.3rem; color: orange; padding-bottom: 1rem;}
  .social {display: flex; align-items: center; justify-content: right; margin-right: 150px;}
  .social .fa {padding: .5rem 0; color: #fff; font-size: 1.5rem;}
 
  .nav{ display: flex; align-items: center; justify-content: space-between;}
  .nav-ul {position: relative; color: #fff; letter-spacing: 1.5px; font-family: 'Ubuntu', sans-serif; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; list-style: none; gap: 1rem; font-size: 1.2rem; text-shadow: 1px 1px #000;}
  .nav-ul li:nth-of-type(7) {margin-left: auto;  margin-right:50px; }
  .nav-ul li:nth-of-type(1) {margin-right: auto; margin-left: 1rem;}
    .nav-ul li:nth-of-type(7) {font-family: 'Cormorant Garamond', serif; }
    .hamburger {
      background-color: transparent;
      display: none;
      color: #fff;
      border: 0;
      cursor: pointer;
      font-size: 25px;
     
  }


  .nav-ul .route a {font-size: 1.2rem; font-family:'Ubuntu', 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;}


  ul li ul.drop {
    min-width: 3rem; /* Set width of the dropdown */
    background: #f27052;
    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: #f27052;}

@media (max-width: 1400px) {
    .nav-ul li:nth-of-type(7) {margin: 0;}
   .nav-ul li:nth-of-type(1) {margin: 0;}
  
 }
 
 
 @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(7) {margin: 0;}
   .nav-ul li:nth-of-type(1) {margin: 0;}
       /*.nav-ul { position: absolute; z-index: 999; text-align: center; max-width: 100% !important;} */
       
       }
 
       .main {display:flex; align-items: center; justify-content: center; max-width: 60%; flex-direction: column; margin: 0 auto; }
       .mainheadline {font-size: 2rem; color: #54778c; padding: 1rem; font-family: 'Montserrat', sans-serif;}
       .mainsub {font-size: 1.5rem; padding: 1rem; font-family: 'Montserrat', sans-serif;}
       .default-icon {max-width: 10%;} 
       
      .voucher-example {max-width: 60%; margin: 0 auto;}
      
 
 
 
   .footer {display: flex; align-items: center; justify-content:space-evenly; font-size: 1.2rem; background: #54778c; color: #fff; text-shadow: 1px 1px #000;}
 .footerinner { min-height: 200px; text-align: center; width: 250px; padding-bottom: 2rem;}
 .footer h2 {padding: 1rem;}
 
 
 .footer a {text-decoration: none; color: #fff; text-shadow: 1px 1px #000;}
 
 @media (max-width: 480px) {
   .footer{flex-direction: column;
   width: 100%;}
   .footerinner {width: 100%; text-align: center;}
   .contactA {font-size: 1.7rem; padding: 0.5rem;}
   .location {font-size: 1.7rem; padding: 0.5rem;}
   .copyright {font-size: 1.7rem; padding: 0.5rem;}
   .safetyhead {font-size: 2.5rem;}
   .obairhead {font-size: 2.5rem;}
   }
 
  @media (max-width: 480px) {
 
     .nav-ul.show {max-width: 80%; padding-left: 0;}
     .nav-ul li:nth-of-type(7) {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) {margin: 0 auto; max-width: 100%; text-align: center; margin-left: -1rem;} 
     .nav-ul li:nth-of-type(7) {margin-left: -2rem;}
 
   }
 
   @media (max-width: 320px) {
    .nav-ul li:nth-of-type(1) {margin: 0 auto; max-width: 100%;}
    }
  
    
   @media (max-width: 480px) {
       
       .logo {max-width: 100%;}
       .logo img {width: 100%;}
       
   }
  
   
  @media (max-width: 480px){
.logo img {
    width: 100%;}
}

  @media (max-width: 480px) {
    .main {max-width: 90%; padding: 1rem;}
   .mainsub {max-width: 100%; padding: 1rem;}
   .default-icon {max-width: 30%;}
   .voucher-example {max-width: 90%;}
   .button1 {width: 40%; margin-left: 30%;}
   }

   .container {
    max-width:1170px;
    margin-left:auto;
    margin-right:auto;
    padding:1em;
    color: #fff;
    min-height: 60vh;
  }

  ul.sraid li::before {
    font-family: FontAwesome;
    content: "\f041";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
  font-size: 1.2em; 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: 70px; text-shadow: 1px 1px #000;}

 ul.telefon li::before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
  font-size: 1.2em; 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: 70px; text-shadow: 1px 1px #000;}

 ul.leitir li::before {
    font-family: FontAwesome;
    content: "\f0e0";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
  font-size: 1.2em; 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: 70px; text-shadow: 1px 1px #000;}

  
  @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:#c9e6ff; text-shadow: 1px 1px #000;
      
    }
    
    .wrapper {
      box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
    }
    
    .wrapper > *{
      padding: 1em;
    }
    
  .company-info {
      background: rgba(72,94,116,0.2);
    } 
    .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: #99cc33; text-shadow: 1px 1px #666; letter-spacing: 1.5px;}
    
    .contact {background: #c9e6ff;}
    
    /* FORM STYLES */
    .contact form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap:20px;
    }
    
    .contact form label{
      display:block;
      color: #666;
    }
    
    .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;}
    }
  
    @media (max-width: 1400px) {
    .button1 {width: 80%; margin-left: 10%;}  
     .nav-ul li:nth-of-type(7) {margin: 0;}
    .nav-ul li:nth-of-type(1) {margin: 0;}
   
  }
  
    @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(6) {margin: 0;}
    .nav-ul li:nth-of-type(1) {margin: 0;}
        /*.nav-ul { position: absolute; z-index: 999; text-align: center; max-width: 100% !important;} */
        
        }
  
  @media (max-width: 480px) {
  
      .nav-ul.show {max-width: 80%; padding-left: 0;}
      .nav-ul li:nth-of-type(6) {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) {margin: 0 auto; max-width: 100%; text-align: center; margin-left: -1rem;} 
      .nav-ul li:nth-of-type(7) {margin-left: -2rem;}
  
    }
  
    @media (max-width: 480px) {
        .subainm {font-size: 2.5rem; text-align: center;}
    }
  
    @media (max-width: 320px) {
    .nav-ul li:nth-of-type(1) {margin: 0 auto; max-width: 100%;}
    }
  
  
    
   @media (max-width: 480px) {
      
      .logo {max-width: 50%;}
     .logo img {width: 50%; margin-left: 25%;}
       
   }
   @media (max-width: 320px) {
  
  .contact form {display: block;}
       .social {margin: 0 auto; margin-left: 25px;}
       .contact form button1 {width: 80%; margin-left: 10%;}
       .contact form input {width: 80%;}
      
   }