/* ====================================================================================================================
 * RESPONSIVE - FIXED AND OPTIMIZED
 * ====================================================================================================================*/

/* ===================================
   MOBILE STYLES (up to 767px)
   =================================== */
@media (max-width: 767px) {
  /* Header Styles */
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #17202a !important;
    opacity: 1;
  }
  
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  
  .header-area .container {
    padding: 0px;
  }
  
  .header-area .logo {
    margin-left: 30px;
  }
  
  .header-area .menu-trigger {
    display: block !important;
  }
  
  .header-area .main-nav {
    overflow: hidden;
  }
  
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #17202a !important;
    font-size: 12px;
  }
  
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #17202a !important;
  }
  
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
  
  .header-area .main-nav .logo {
    color: #1e1e1e;
    font-size: 44px;
  }
  
  /* Images */
  .img-fill img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ===================================
   EXTRA SMALL MOBILE (320px - 359px)
   =================================== */
@media (max-width: 359px) {
  #top h3 { font-size: 16px; }
  #top h5 { font-size: 16px; font-weight: bold; }
  #core .section-heading h6 { font-size: 20px; font-weight: bold; }
  #core .section-heading h2 { font-size: 20px; }
  #banner01 h2 { font-size: 14px; }
  #banner01 h6 { font-size: 14px; font-weight: bold; }
  #about h6 { font-size: 23px; font-weight: bold; }
  #about h2 { font-size: 23px; font-weight: bold; }
  #banner02 h2 { font-size: 16px; }
  #banner02 h6 { font-size: 16px; font-weight: bold; }
  #work .section-heading h6 { font-size: 20px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 20px; font-weight: bold; }
  #banner03 h2 { font-size: 14px; }
  #banner03 h6 { font-size: 16px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   SMALL MOBILE (360px - 389px)
   =================================== */
@media (min-width: 360px) and (max-width: 389px) {
  #top h3 { font-size: 19px; }
  #top h5 { font-size: 19px; font-weight: bold; }
  #core .section-heading h6 { font-size: 22px; font-weight: bold; }
  #core .section-heading h2 { font-size: 22px; }
  #banner01 h2 { font-size: 14px; }
  #banner01 h6 { font-size: 14px; font-weight: bold; }
  #about h6 { font-size: 23px; font-weight: bold; }
  #about h2 { font-size: 23px; font-weight: bold; }
  #banner02 h2 { font-size: 16px; }
  #banner02 h6 { font-size: 16px; font-weight: bold; }
  #work .section-heading h6 { font-size: 20px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 20px; font-weight: bold; }
  #banner03 h2 { font-size: 16px; }
  #banner03 h6 { font-size: 16px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   MEDIUM MOBILE (390px - 427px)
   =================================== */
@media (min-width: 390px) and (max-width: 427px) {
  #top h3 { font-size: 19px; }
  #top h5 { font-size: 19px; font-weight: bold; }
  #core .section-heading h6 { font-size: 22px; font-weight: bold; }
  #core .section-heading h2 { font-size: 22px; }
  #banner01 h2 { font-size: 14px; }
  #banner01 h6 { font-size: 14px; font-weight: bold; }
  #about h6 { font-size: 23px; font-weight: bold; }
  #about h2 { font-size: 23px; font-weight: bold; }
  #banner02 h2 { font-size: 16px; }
  #banner02 h6 { font-size: 16px; font-weight: bold; }
  #work .section-heading h6 { font-size: 24px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 22px; font-weight: bold; }
  #banner03 h2 { font-size: 16px; }
  #banner03 h6 { font-size: 16px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   LARGE MOBILE (428px - 767px)
   =================================== */
@media (min-width: 428px) and (max-width: 767px) {
  .right-text-content-c {
    padding: 0px 10px 0px 10px;
  }
  
  #top h3 { font-size: 21px; }
  #top h5 { font-size: 21px; font-weight: bold; }
  #core h6 { font-size: 23px; font-weight: bold; }
  #core .section-heading h2 { font-size: 24px; }
  #banner01 h2 { font-size: 14px; }
  #banner01 h6 { font-size: 14px; font-weight: bold; }
  #about h6 { font-size: 23px; font-weight: bold; }
  #about h2 { font-size: 23px; font-weight: bold; }
  #banner02 h2 { font-size: 16px; }
  #banner02 h6 { font-size: 16px; font-weight: bold; }
  #work .section-heading h6 { font-size: 24px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 23px; font-weight: bold; }
  #banner03 h2 { font-size: 16px; }
  #banner03 h6 { font-size: 16px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   TABLET (768px - 1023px)
   =================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #17202a !important;
    opacity: 1;
  }
  
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  
  .header-area .container {
    padding: 0px;
  }
  
  .header-area .logo {
    margin-left: 30px;
  }
  
  .header-area .menu-trigger {
    display: block !important;
  }
  
  .header-area .main-nav {
    overflow: hidden;
  }
  
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #17202a !important;
    font-size: 12px;
  }
  
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #17202a !important;
  }
  
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
  
  .header-area .main-nav .logo {
    color: #1e1e1e;
    font-size: 44px;
  }
  
  .img-fill img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  #top h3 { font-size: 30px; }
  #top h5 { font-size: 30px; font-weight: bold; }
  #core h6 { font-size: 18px; font-weight: bold; }
  #core .section-heading h2 { font-size: 18px; }
  #banner01 h2 { font-size: 14px; }
  #banner01 h6 { font-size: 14px; font-weight: bold; }
  #about h6 { font-size: 18px; font-weight: bold; }
  #about h2 { font-size: 18px; font-weight: bold; }
  #banner02 h2 { font-size: 16px; }
  #banner02 h6 { font-size: 16px; font-weight: bold; }
  #work .section-heading h6 { font-size: 18px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 18px; font-weight: bold; }
  #banner03 h2 { font-size: 16px; }
  #banner03 h6 { font-size: 16px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   SMALL DESKTOP (1024px - 1439px)
   =================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
  .header-area .main-nav .logo {
    font-size: 44px;
  }
  
  .img-fill img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  #top h3 { font-size: 30px; }
  #top h5 { font-size: 30px; font-weight: bold; }
  #core h6 { font-size: 24px; font-weight: bold; }
  #core .section-heading h2 { font-size: 24px; }
  #banner01 h2 { font-size: 22px; }
  #banner01 h6 { font-size: 22px; font-weight: bold; }
  #about h6 { font-size: 24px; font-weight: bold; }
  #about h2 { font-size: 24px; font-weight: bold; }
  #banner02 h2 { font-size: 22px; }
  #banner02 h6 { font-size: 22px; font-weight: bold; }
  #work .section-heading h6 { font-size: 24px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 24px; font-weight: bold; }
  #banner03 h2 { font-size: 22px; }
  #banner03 h6 { font-size: 22px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   LARGE DESKTOP (1440px and up)
   =================================== */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  .header-area .main-nav .logo {
    font-size: 40px;
  }
  
  .img-fill img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  #top h3 { font-size: 55px; }
  #top h5 { font-size: 55px; font-weight: bold; }
  #core h6 { font-size: 24px; font-weight: bold; }
  #core .section-heading h2 { font-size: 24px; }
  #banner01 h2 { font-size: 22px; }
  #banner01 h6 { font-size: 22px; font-weight: bold; }
  #about h6 { font-size: 24px; font-weight: bold; }
  #about h2 { font-size: 24px; font-weight: bold; }
  #banner02 h2 { font-size: 22px; }
  #banner02 h6 { font-size: 22px; font-weight: bold; }
  #work .section-heading h6 { font-size: 24px; font-weight: bold; word-spacing: 6px; }
  #work .section-heading h2 { font-size: 24px; font-weight: bold; }
  #banner03 h2 { font-size: 30px; }
  #banner03 h6 { font-size: 30px; font-weight: bold; }
  #contact-us h6 { font-size: 24px; font-weight: bold; }
  #contact-us .section-heading h2 { font-size: 26px; }
}

/* ===================================
   EXTRA LARGE DESKTOP (1728px and up)
   =================================== */
@media (min-width: 1728px) {
  .header-area .main-nav .logo {
    font-size: 54px;
  }
}