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

body {font-size: 16px; line-height: 1.4; margin: 0; padding: 0; box-sizing: border-box;}
  img {max-width: 100%; display: block;}
  .header {background-color: #000000;}
  .nav{ display: flex; align-items: center; justify-content: space-between; background: #000;}
  .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(1) {margin-left: auto; }
  .nav-ul li:nth-of-type(6) {margin-left: auto;  margin-right:50px; }
    .nav-ul li:nth-of-type(6) {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;}

  @media (max-width: 1400px) {
    .nav-ul li:nth-of-type(6) {margin: 0;}
   .nav-ul li:nth-of-type(1) {margin: 0;}
  .view1-inner img {width: 60%;}
  .cards {display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -moz-flex;
   display: -webkit-flex;
   display: flex;
   flex-direction:row;
   flex-wrap:wrap;}
  
 .buffer { max-width: 450px; height: 650px; } 
 } 
 
 @media (max-width: 1200px) {
 .buffer { width: 350px; height: auto;} 
 } 
 
  @media (max-width: 1024px) {
  .cards {flex-direction: column; max-width: 100%; gap: 1rem;}
  }
 
 
 
 
 @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) {max-width: 100%; margin-left: -2rem;} 
        .nav-ul li:nth-of-type(6) {margin-left: -2rem;}
    
      }

      .fourball {display:flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 0 2%; }
      .ball {flex: 4 16%; padding: 2%; text-align: center; color: #a6a6a6; font-size: 1.5rem; font-family: "Rajdhani-Medium", sans-serif;}
      .ball a {text-decoration: none; color: #a6a6a6;}
      .ball:nth-of-type(1) {border: none;}
      .ball a:hover {border: 1px solid #a6a6a6; border-radius: 20px; padding: 25px;}
     
      @media (max-width: 768px) {
     
          .fourball {width: 96%; flex-direction: column;} 

      }
     
      @media (max-width: 480px) {
     
         .fourball {width: 96%; flex-direction: column;}
         .ball {font-weight: 700;}
      }

      .container1 {
        max-width:1170px;
        margin-left:auto;
        margin-right:auto;
        padding:1em;
        color: #fff;
        
      }
      
      @media only screen and (max-width: 480px) {
      
      .container1 { padding: 0;}
      }
      
       
      
      .brand{
        text-align: center;
      }
      
      .brand span{
        color:#fff;
      }
      
      .wrapper1{
        box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
        margin-bottom: 5%;
      }
      
      .wrapper1 > *{
        padding: 1em;
      }
      
      .company-info{
        
        background-size: cover;
      }
      
      .company-info h3, .company-info ul{
        text-align: center;
        margin:0 0 1rem 0;
      }
      
      .contact{
     background:#e9f3f4;
        
      }
      
      /* FORM STYLES */
      .contact form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:20px;
      }
      
      .contact form label{
        display:block; 
        padding-left: 10px;
        font-size: 1.5rem;
      }
      
      .contact form p{
        margin:0;
      }
      
      .contact form .full{
        grid-column: 1 / 3;
      }
      
      .contact form button, .contact form input, .contact form textarea{
        width: 100%;
        padding:1rem;
        border:1px solid #c9e6ff;
        margin: .5rem 0 1.5rem 0;
        font-size: 1.3rem;
      }
      
      
      
      .contact form button {
        background:#42c9b5;
        border:0;
        text-transform: uppercase;
        font-size: 1rem; font-weight: 700; text-shadow: 1px 1px #000;
        color: #fff;
      
      }
      
      .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){
        .wrapper1{
          display: grid;
          grid-template-columns: 1fr 2fr;
        }
      
        .wrapper1 > *{
          padding:2em;
        }
      
        .company-info h3, .company-info ul, .brand{
          text-align: left;
        }
      }
      
      @media only screen and (min-width: 481px){
          .contact form input {max-width: 400px;}
      
      }
        
        @media screen and (max-width: 480px) {
         .contact form input {
           width: 80%;}
          
           }
      
      
           @media screen and (max-width: 480px) {
      .coltop.spanA_1_of_5 a {font-weight: 700 !important;}
      .navbar-header {width: 100%;}
      .navbar-collapse.in  {overflow-x: hidden;}
      .contact form label {font-size: 1.3rem;}
      .container1 {padding: 0 15px 0 15px;}
      
           }
      
      
           
        .contact form{
        display: grid;
        grid-template-columns: 1fr;
        display: inline;} 
      
      p.full {color: #009900;}
     label {color: #009900; font-size: 1rem;}
      
      select {padding: 10px;}
      
      .asterisk {color: red; font-size: 3rem; margin-left: 5px; vertical-align: bottom;}
      
      p.sender {line-height: 1.6; font-size: 1.3rem; font-family: 'Rajhdani-Medium;'}
      
      .company-info img {margin-top: 10%;}
      .hasDatepicker input {font-size: 2rem;}
      .fridays {color: red;}
    
  .footer {display: flex; align-items: center; justify-content: space-evenly; font-size: 1.2rem; background: #4c4c4c; color: #fff; text-shadow: 1px 1px #000; margin-bottom: -300px;  font-family:'Rajdhani-Medium',sans-serif;}
           .footerinner {text-align: center; width: 250px; padding-bottom: 2rem; height: 300px;}
           .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; height: auto;}
             .contact1 {font-size: 1.3rem; padding: 0.5rem; font-weight: bold;}
             .location1 {font-size: 1.3rem; padding: 0.5rem; font-weight: bold;}
             .copyright1 {font-size: 1.3rem; padding: 0.5rem; font-weight: bold;}
             }