*{
    padding:0;
    margin:0;
    box-sizing:border-box;
  }

  h2{
    text-align:center;
    padding:50px 0;
    font-family: 'Abel', sans-serif;
    font-size:45px;
    @media(max-width:680px){
      font-size:30px;
    }
  }
  ul{
    padding:0;
    list-style: none;
    &:after{
      content:"";
      display:block;
      clear:both;
    }
  }
  #container{
    width: 100%;
  }
  #slider-container{
    width:100%;
    position:relative;
    overflow:hidden;
    ul{
      li{
        float:left;
        img{
          width:100%;
          float:left;
        }
      }
    }
    .arrow{
      display:block;
      position:absolute;
      top:50%;
      width:50px;
      height:50px;
      transform:translateY(-50%) scale(1); 
      cursor:pointer;
      &:before,
      &:after{
        content:"";
        display:block;
        width:34px;
        height:1px;
        position:absolute;
        background:white;
        border-top:1px solid grey;
      }
      @media(max-width:680px){
        transform:translateY(-50%) scale(0.5); 
      }
    }
    .arrow.a-left{
      left:15px;
      &:before{
        top:0;
        left:0;
        margin-top:0;
        transform:rotate(-45deg);
        transform-origin: 100% 0;
      }
      &:after{
        bottom:0;
        left:0;
        margin-bottom:0;
        transform:rotate(45deg);
        transform-origin: 100% 0;
      }
    }
    .arrow.a-right{
      right:15px;
       &:before{
        top:0;
        right:0;
        margin-top:0;
        transform:rotate(45deg);
        transform-origin: 0 0;
      }
      &:after{
        bottom:0;
        right:0;
        margin-bottom:0;
        transform:rotate(-45deg);
        transform-origin: 0 0;
      }
    }
    .bullets-container{
      position:absolute;
      bottom:5%;
      left:50%;
      transform: translateX(-50%);
      .bullet{
        width:15px;
        height:15px;
        display:inline-block;
        border-radius:50%;
        border:1px solid grey;
        cursor:pointer;
        margin:0 8px;
        &.active{
          background:grey;
        }
      }
    }
  }





  @media only screen and (max-width: 1920px) and (min-width: 1080px){

    .sections-title {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 10rem; 
      }

      .exhibition{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 15rem; }

      .interior {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 12rem;
      }

      .oohmedia {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 8rem;
      }

      .threed {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 15rem;
      }

      .product-display {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 14rem;
      }

      .branding{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 10rem;
      }

      .top-headers {
        padding-top: 10rem !important;
        padding-bottom: 8rem !important;
      }

      .treed{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 14rem;
      }

      .febrication{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 0rem;
      }


      .febri-img::before, .febrication-img::before {
      position: absolute;
      content: "";
      width: 60%;
      height: 80%;
      top: 13%;
      left: 20%;
      border: 5px solid var(--primary);
      z-index: -1;
    }

    
  }  





  @media only screen and (max-width: 1366px) and (min-width: 768px){

    .navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 30px 0;
    /* color: var(--dark); */
    color: #0055a2 !important;
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
    font-size: 1rem;
    }

    .dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #0055a2;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    font-size: 1rem;
    border: 0;
    }

    .about-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 55%;
    top: 8%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }


    .mission-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 59%;
    top: 8%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }



    .exhibition-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 122%;
    top: 17%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }

    .exhibition {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-top: 9rem;
    }



    .oohmedia-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 87%;
    top: 11%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }

    .interior-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 95%;
    top: 14%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }

    .interior {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-top: 1rem!important;
    }

    .three-img::before, .feature-img::before {
        position: absolute;
        content: "";
        width: 60%;
        height: 97%!important;
        top: 13%!important;
        left: 20%;
        border: 5px solid var(--primary);
        z-index: -1;
    }

    .product-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 102%;
    top: 14%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }


    .treed {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-top: 1rem!important;
    }

    .branding-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 92%;
    top: 12%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }

    .fabrication-img::before, .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 61%!important;
    top: 8%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    }

    .febrication {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-top: -3rem;
    }


        h4, .h4 {
        font-size: 1.5rem;
    }

        h3, .h3 {
        font-size: 1.5rem;
    }

    .sections-title {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 4rem; 
      }

      .exhibition{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 10rem; }

      .interior {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 7rem;
      }

      .oohmedia {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: -3rem;
      }

      .threed {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 15rem;
      }

      .product-display {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: 9rem;
      }

      .branding{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: -1rem;
      }

      .treed{
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: uppercase;
        margin-top: -3rem;
      }


      .top-headers {
      padding-top: 10rem !important;
      padding-bottom: 8rem !important;
  }

  }


  @media only screen and (max-width: 769px) and (min-width: 320px)  { 

    .about-img,
    .feature-img {
    position: relative;
    height: 100%;
    min-height: 350px;
}

.about-img img,
.feature-img img {
    position: absolute;
    width: 60%;
    height: auto;
    object-fit: cover;
}

.about-img img:last-child,
.feature-img img:last-child {
    margin: 20% 0 0 40%;
}

.about-img::before,
.feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 93%;
    top: 10%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    display: none;
}


      .mission-img {
      position: relative;
      height: 100%;
      min-height: 350px;
  }


  .mission-img img {
      position: absolute;
      width: 60%;
      height: auto;
      object-fit: cover;
  }


  .mission-img img:last-child {
      margin: 20% 0 0 40%;
  }

   
  .mission-img::before {
      position: absolute;
      content: "";
      width: 60%;
          height: 90%;
          top: 11%;
          left: 20%;
          border: 5px solid var(--primary);
          z-index: -1;
          display: none;
  }


    .exhibition-img,
    .feature-img {
      position: relative;
      height: 100%;
      min-height: 350px;
  }

    .exhibition-img img,
    .feature-img img {
      position: absolute;
      width: 60%;
      height: auto;
      object-fit: cover;
  }

    .exhibition-img img:last-child,
    .feature-img img:last-child {
      margin: 20% 0 0 40%;
  }

    .exhibition-img::before,
    .feature-img::before {
      position: absolute;
      content: "";
      width: 60%;
      height: 98%;
      top: 12%;
      left: 20%;
      border: 5px solid var(--primary);
      z-index: -1;
      display: none;
  }

      .interior-img,
      .feature-img {
      position: relative;
      height: 100%;
      min-height: 350px;
  }

    .interior-img img,
    .feature-img img {
      position: absolute;
      width: 60%;
      height: auto;
      object-fit: cover;
  }

    .interior-img img:last-child,
    .feature-img img:last-child {
      margin: 20% 0 0 40%;
  }

    .interior-img::before,
    .feature-img::before {
      position: absolute;
      content: "";
      width: 60%;
      height: 92%;
      top: 13%;
      left: 20%;
      border: 5px solid var(--primary);
      z-index: -1;
      display: none;
  }


    .product-img,
    .feature-img {
      position: relative;
      height: 100%;
      min-height: 350px;
}

    .product-img img,
    .feature-img img {
      position: absolute;
      width: 60%;
      height: auto;
      object-fit: cover;
}

    .product-img img:last-child,
    .feature-img img:last-child {
      margin: 20% 0 0 40%;
}

.product-img::before,
.feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 80%;
    top: 12%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    display: none;
}



    .branding-img,
    .feature-img {
      position: relative;
      height: 100%;
      min-height: 350px;
}

    .branding-img img,
    .feature-img img {
      position: absolute;
      width: 60%;
      height: auto;
      object-fit: cover;
}

    .branding-img img:last-child,
    .feature-img img:last-child {
      margin: 20% 0 0 40%;
}

    .branding-img::before,
    .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 94%;
    top: 9%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    display: none;
}

    .oohmedia-img,
    .feature-img {
      position: relative;
      height: 100%;
      min-height: 350px;
}

    .oohmedia-img img,
    .feature-img img {
     position: absolute;
      width: 60%;
      height: auto;
      object-fit: cover;
}

    .oohmedia-img img:last-child,
    .feature-img img:last-child {
      margin: 20% 0 0 40%;
}

    .oohmedia-img::before,
    .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 96%;
    top: 8%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    display: none;
}

    .fabrication-img,
    .feature-img {
    position: relative;
    height: 100%;
    min-height: 350px;
}

    .fabrication-img img,
    .feature-img img {
    position: absolute;
    width: 60%;
    height: auto;
    object-fit: cover;
}

    .fabrication-img img:last-child,
    .feature-img img:last-child {
    margin: 20% 0 0 40%;
}

    .fabrication-img::before,
    .feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 93%;
    top: 10%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
    display: none;
}

    .mob-heading{
      text-align: center!important;
      margin-top: 0px!important;
    }

  }