/* Mobile (0px to 430px) */
@media (max-width: 767px) { 

  #main-menu .logo img {
    height: 40px !important;
  }

  #topbar ul {
    gap: 5px;
  }

  .topbar-menu .e-login a {
    font-size: 12px;
  }

  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #main-menu .container {
    height: 80px !important;
  }

  #services-section ul {
    flex-direction: column;
    margin: 20px;
  }

  #map-section .container {
    flex-direction: column;
  }

  #career-section  {
    padding-bottom: 20px;
  }

  #career-section ul {
    flex-direction: column;
    gap: 10px;
  }

  #career-section li {
    width: 100% !important;    
    font-size: 16px !important;
  }

  #career-section img {
    display: none;
  }

  #career-section .container {
    min-height: auto !important;
    padding-top: 50px !important;
    background-position: top !important; 
    background-size: cover;
  }

  #career-section .text-2xl {
    font-size: 16px;
  }

  #footer {
    text-align: center;
    position: relative;
    margin-top: -30px;
  }

  #footer .container {
    flex-direction: column;
  }

  #footer .social-links {
    margin-top: 20px;
    border-top: 1px solid #aaaaaa;
    padding-top:35px;
  }

  #footer .social-links ul {
    justify-content: center;
  }

  #footer .quicklinks {
    text-align: center;
    border-top: 1px solid #aaaaaa;
    padding-top: 20px;
  }

  #footer .contact-info {
    text-align: left;
    border-top: 1px solid #aaaaaa;
    padding-top: 20px;
  }

  #footer .contact-info .text-xl {
    font-size: 16px !important;
  }

  #footer .contact-info h4 {
    text-align: center;
  }

  #footer .contact-info .text-lg {
    font-size: 14px !important;
  }

  #menu-footer-menu {
    justify-content: center !important;
    align-items: center !important;
  }

  #menu-footer-menu li {
    text-align: center;
  }

  #menu-bottom-bar-menu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
    gap: 10px;
  }

  #career-section .apply-now {
    margin-bottom: 25px !important;
  }

  .topbar-menu a {
    color: #454545;
    font-size: 14px !important;
  }

  .topbar-menu .e-login {
    margin-left: 5px;
  }

  #hero-section .hero-content {
    width: 100%;
    padding-left: 0px;
  }

  #services-section li a {
    width: 80vw;
    border-bottom: 1px solid #545454;
  }

  #services-section li:last-child a {
    border-bottom: none;
  }

  #services-section li a {
    font-size: 18px;
  }

  #services-section h2 {
    margin-bottom: 0px;
    font-size: 30px;
  }

  #services-section {
    padding: 40px 0px;
  }

  #accreditations-section h2 {
    font-size: 30px;
  }

  #clients-section h2 {
    font-size: 30px;
  }

  #news-section h3 {
    font-size: 22px;
  }

  #news-section h2 {
    font-size: 30px;
  }

  #hero-section .slides .slide {
    background-position: top center;
    background-size: 148%;
  }

  #hero-section h1 span {
    font-size: 27px;
  }

  #hero-section h1 {
    font-size: 18px;      
    line-height: 20px;
  }

  #hero-section .hero-content {
    padding-top: 65%;
  }

  #hero-section .cta-button {
    display: block;    
    margin: 20px auto;
    text-align: center;
  }   
  .admin-bar #mobile-menu  {      
      top: 46px !important;      
      height: calc(100vh - 46px) !important;
   }

   #map-section h2 {
      font-size: 27px;
   }

   #map-section .details {
    font-size: 14px;
   }

   #map-section .details {
    padding: 0px;
  }

  #map-section .explore-btn {
    font-size: 15px;
  }

  #page-content .page-title .container
  {
      min-height: 150px;
      font-size: 32px;
  }

  #page-content .page-title {
    background-size: 100% !important;
    background-position: 150px 50% !important;
  }

  #core-values .card {
    width: 100%;
    font-size: 16px;
  }

  #core-values {
      padding: 40px 0px 0px;
  }

  .page-body {
      padding: 0px;
  }

  .page-body h2 {
      font-size: 30px;
  }

  #core-values .icon h3 {
      font-size: 18px;
  }

  .wp-block-getwid-accordion .wp-block-getwid-accordion__header {
    font-size: 16px;
  }

  .wp-block-getwid-accordion p {
    font-size: 14px;
  }

  #news-items article {
    flex-direction: column;
  }

  #news-items article .image {
    width: 100%;
  }

  #news-items article .excerpt {
    width: 100%;
    padding: 30px 20px 75px;
  }

  #news-items article h2
  {
      font-size: 22px;
  }

  #news-items {
      gap: 40px;
  }

  .simple-job-openings-list {
    padding: 0px;
    flex-direction: column;
  }

  #application-form .form-section {
    padding: 20px;
  }

  #application-form h3 {
    font-size: 20px;
  }

  #application-form .remove-btn {
    width: 30px !important;
  }
}

@media (min-width:768px) {
  #application-form h3 {
    font-size: 32px;
  }

  #application-form .form-section {
    padding: 30px;
  }

  .simple-job-openings-list {
    padding: 40px;
    flex-direction: row;
  }

  #featured-story .excerpt {
    width: 30%;
  }

  #news-items {
    gap: 75px;
  }

  #news-items article .image {
    width: 50%;
  }

  #news-items article .excerpt {
    width: 50%;
    padding: 30px 20px;
  }

  .admin-bar #main-menu {    
    top: 32px;    
  }

  #core-values .card {
    width: calc(30% - 40px);
    font-size: 18px;
  }

  #core-values { 
    padding: 50px 0px;
  }

  .page-body {
    padding: 50px;
  }

  .page-body h2 {
    font-size: 48px;
  }

  #core-values .icon h3 {
    font-size: 22px;
  }

  .wp-block-getwid-accordion .wp-block-getwid-accordion__header {
    font-size: 26px;
  }

  #news-items article {
    width: calc(50% - 50px);
  }

  #news-items article { 
    flex-direction: row;
    height: 450px;
  }

  .simple-job-openings-list .simple-job-item {
      width: calc(50% - 30px);        
  }

  #map-section .map, #map-section .details
  {
      width: calc(50% - 20px);
  }

  #map-section .details {
    padding-left: 30px;
  }

  #map-section h2 {
    font-size: 30px;
  }
}

/* Tablet (768px to 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {    
  .container {
      padding-left: 25px !important;
      padding-right: 25px !important;
  }

  #hero-section .hero-content {    
    width: 40%;    
  }

  #services-section li {
    width: 34%;
  }

  #services-section li a {
    width: 100%;
    border-right: 1px solid #545454;
  }

  #services-section li img {
    max-width: 64px;
    max-height: 64px;
  }

  #services-section li a {
    font-size: 14px;
  }

  #news-items article {
    flex-direction: row;
  }

  #services-section li a {
    padding: 20px;
  }

  #services-section {
    padding: 50px 0px;
  }

  #services-section h2 {
    margin-bottom: 20px;
  }

  #career-section .left, #career-section .right {
    z-index: 1;
  }

  #career-section ul {
    position: relative;
    z-index: 2;
  }

  #career-section h3 {
    position: relative;
    z-index: 2;
  }

   #featured-news .news-item {
      height: 530px;
  }

}

@media (max-width:1279px) {

   #services-section li a {
      padding: 40px;
   }

  #main-navigation-container {
    display: none;
  }
  
  #mobile-menu  {
      position: fixed;
      top: 0;
      right: -100%;
      width: 300px;
      height: 100vh;
      background-color:#ffffff;
      /*background: radial-gradient(at center top, rgb(0, 181, 226) 51%, rgb(0, 138, 172) 100%);*/
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: right 0.5s ease;
      z-index: 1000;
      box-shadow: 3px 0px 15px 0px rgba(0,0,0,0.56);
      -webkit-box-shadow: 3px 0px 15px 0px rgba(0,0,0,0.56);
      -moz-box-shadow: 3px 0px 15px 0px rgba(0,0,0,0.56);
      padding: 50px 20px 20px;
      text-align: center; 
      border-radius: 30px 0px 0px 30px;
  }

  .admin-bar #mobile-menu {
    top: 32px;
    height: calc(100vh - 32px);
  }

  #mobile-menu .logo {
    padding: 20px;
  }  

  #mobile-menu a:hover {
    color: #da291c;
  }

  #mobile-menu .close-btn { 
    position: absolute;
    background: #da291c;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    right: 20px;
    top: 20px;
  }

  #mobile-menu .close-btn:hover {
      background: #c0392b;
  }

  #burger {
    display: flex;
  }

  .close-icon {
      display: block;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  #mobile-menu.active  {
      right: 0;
  }

  #mobile-menu  ul {
    flex-direction: column;
    gap: 15px;
  }

  .bottom-navigation {
     display: none;    
   }

  #page-content .page-title .container
  {
      min-height: 150px;
      font-size: 36px;
  }

  #page-content .page-title {    
    background-size: contain !important;
    background-position: 100% 50% !important;
  }
}

/* Laptop (1280px and up) */
@media (min-width: 1280px) {  

   #services-section li a {
    width: 400px;
   }

  #mobile-menu {
    display: none;
  }

  .container {
      padding-left: 25px !important;
      padding-right: 25px !important;
  }

  #hero-section .hero-content {    
    width: 40%;    
    padding-left: 100px;  
  }

  #services-section li a {
    width: 400px;
    border-right: 1px solid #545454;
  }

  #services-section li a {
    font-size: 22px;
  }

  #services-section {
    padding: 70px 0px 100px;
  }  

  #hero-section .slides .slide {    
    background-position: 50% 50%;
    background-size: cover;
  }

  #hero-section h1 span {  
    font-size:48px;
  }

  #hero-section h1 {
    font-size: 30px;  
    line-height: 34px;
  }

  #hero-section .container {
    min-height: calc(100vh - 150px);
  }

  #hero-section .hero-content {
    padding-bottom: 100px;
  }
  
  #hero-section .cta-button {
      display: inline-block;    
  }

  #burger {
    display: none;
  }

  #map-section h2 {
    font-size: 48px;
  }

  #map-section .details {  
    font-size: 25px;
  }

  #map-section .details {
    padding: 0px 40px;
  }

  #map-section .explore-btn {
    font-size: 24px;
  }
  
  #page-content .page-title .container {
      min-height: 200px;    
  }

  #page-content .page-title h1 {
    margin-left: 100px;    
    font-size: 48px;
  }

  #page-content .page-title {
    background-size: contain !important;
    background-position: 100% 50% !important;
  }

  #map-section {
    min-height: 1000px;
  }

  #services-section li a {
      padding-top: 35px;
  }

  #featured-news .news-item {
      height: 560px;
  }

}