/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

    /* colors!
      // a quick cheatsheet if you're using colors below
      lightblue: #6F8C95
      tan: #8F8951
    */

     @font-face {
      font-family: "DIN Next LT Pro";
      src: url("./assets/fonts/din-next-lt-arabic-light.woff2") format("woff2");
      font-weight: 300;
    }

    @font-face {
      font-family: "DIN Next LT Pro";
      src: url("./assets/fonts/din-next-lt-arabic-regular.woff2") format("woff2");
      font-weight: 400;
    }

    @font-face {
      font-family: "DIN Next LT Pro";
      src: url("./assets/fonts/din-next-lt-arabic-medium.woff2") format("woff2");
      font-weight: 600;
    }

    body {
      background-color: #233F66;
      min-height: 100vh;
      height: 100%;
    }
    
    html, h1, h2, h3, p, li {
      color: #1e1e1e;
      font-family: "DIN Next LT Pro", sans-serif;
    }


    h2 {
        margin: 20px 0;
        font-size: 28px;
        font-weight: bold;
    }

    h3 {
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 10px 0;
    }
    
    a {
        text-decoration: underline;
        font-weight: 300;
        text-underline-offset: 3px;
    }

    .uk-close {
        color: #233F66;
    }

    .uk-close:hover {
        color: #1e1e1e;
    }

    .uk-close svg {
        width: 20px;
        height: 20px;
    }
    
    .uk-modal-body {
        border-radius: 5px;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100vh;
    }

    #main {
      max-width: 100%;
      position: relative;
    }
  
    .page-container::before {
      content: "";
      background-image: url("./../svg/bg.svg");      
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top right;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
      z-index: 0;
    }
    
    .container-content {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: left;
    }
    
    h1 {
      font-size: 80px;
      font-weight: 700;
      line-height: 1;
      font-family: "DIN Next LT Pro", sans-serif;
    }

    .text-meta {
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 7px;
      font-size: 28px;
      line-height: 2;
      font-family: "DIN Next LT Pro", sans-serif;
    }

    .container-image {
      margin-bottom: 40px;
      position: relative;
    }

    .container-image img {
      object-fit: contain;
      object-position: top left;
      width: 380px;
      max-width: 60vw;
      max-height: 50vh;
    }

    .container-button {
      margin-top: 80px;
    }

    .link-contact {
      display: flex;
      align-items: center;
      border: 1px solid #CBCBCB;
      border-radius: 5px;
      overflow: hidden;
      background: #1f3c67;
      font-weight: 600;
      font-size: 18px;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      width: fit-content;
      text-decoration: none;
      padding: 0;
      box-sizing: border-box;

    }

    .link-contact .button-text {
      padding: 0px 20px;
    }

     .link-contact:hover {
        text-decoration: none;
    }

    .link-contact .color-bars {
      display: flex;
      height: 100%;
    }

    .link-contact .bar {
      height: 100%;
      display: inline;
    }

    .link-contact .blue { 
      background: #0095d9; 
      width: 30px;
    }
    .link-contact .green { 
      background: #8cc63f; 
      width: 10px;
    }
    .link-contact .yellow { 
      background: #ffe14d; 
      width: 16px;
    }
    .link-contact .pink { 
      background: #e58ca8; 
      width: 26px;
    }

    .bg-image {
      position: absolute;
      top: 0;
      right: -50%;
      z-index: -1;
      transform: rotate(-15deg);
    }

    footer {
        position: relative;
        margin-top: auto;
    }

    .container-footer {
        padding: 20px 10px;
    }
    @media screen and (max-width: 1299px){
       .page-container::before {
        background-image: url("../svg/bg_tablet.svg");
      }      
    }

    @media screen and (max-width: 639px){
       .page-container::before {
        background-image: url("../svg/bg_mobile.svg");
      } 

      .container-content {
        padding: 0 20px;
      } 

      h1 {
        font-size: 64px;

      }

      .text-meta {
        font-size: 20px;
      }
    }

    @media screen and (max-width: 479px){
        .container-content {
            padding: 0 15px;
        } 

      
        .uk-close svg {
            width: 16px;
            height: 16px;
        }

      h1 {
        font-size: 48px;
      }

      h2 {
        font-size: 24px;
      }

      .text-meta {
        font-size: 16px;
      }
    }