/* ==========================================================================
   TAB (≤ 1280x)
   ========================================================================== */
@media only screen and (max-width: 1280px) {

}

/* ==========================================================================
   TAB (≤ 1024x)
   ========================================================================== */
@media only screen and (max-width: 1024px) {

}

/* ==========================================================================
   MOBILE (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .dsm_fixed_header_shrink_active .main-menu .menu-schedule {
    background-color: #1758FC !important;
  }
  body.dsm_fixed_header_shrink_active .main-menu .menu-schedule a {
    color: #ffff !important;
  }
  .et_pb_menu__logo-wrap {
    margin-left: 0% !important;
  }
  .header-menu .et_pb_menu__logo {
    padding-left: 0px !important;
  }
  .et_pb_menu .et_pb_menu__wrap {
    display: flex !important;
  }
  .menu-schedule {
    padding: 0px 6px !important;
  }
  .homepage-banner h1 {
    font-size: 45px !important;
  }
  .homepage-banner h5 {
    width: 90% !important;
    font-size: 20px !important;
  }
  .homepage-banner img {
    width: 80% !important;
  }
  .digitalise-ship .ship-scroll-row {
    display: block !important;
    width: 100% !important;
    padding: 100px 30px 0 30px !important;
  }
  .digitalise-ship .stats-wrap {
    flex-wrap: wrap;
  }
  .digitalise-ship h2 {
    font-size: 30px !important;
    text-align: center !important;
  }
  .digitalise-ship p {
    font-size: 16px !important;
  }
  .digitalise-ship .stat {
    padding: 20px 0 !important;
    text-align: center !important;
    flex: 0 0 calc(50% - 10px);
  }
  .digitalise-ship .label {
    margin-top: 20px;
  }
  .footer-section .footer-intro-form h1 {
    width: 100% !important;
    font-size: 30px !important;
  }
  .footer-section h5 {
    width: 100% !important;
  }
  .oceanai-footer-right {
    gap: 10px !important;
    flex-direction: column;
    align-items: center;
  }
  .footer-intro-form {
    max-width: 80% !important;
  }
  .contact-float-trigger,
  .ai-chat-trigger {
    right: 20px !important;
  }
  .contact-float-trigger {
    bottom: 28px !important;
  }
  .ai-chat-trigger {
    bottom: 96px !important;
  }
  .contact-float-trigger img,
  .ai-chat-trigger img {
    width: 60px !important;
  }
  .what-we-do-content p {
    width: 80% !important;
  }
  .tabs {
    flex-wrap: wrap !important;
    padding: 0 !important;
    gap: 10px !important;
  }
  .tab-content-container {
    width: 90% !important;
  }
  .tabs .tab {
    flex: 0 0 calc(20% - 10px) !important;
  }
  .tab-content-inner {
    flex-direction: column !important;
  }
  .tab-left,
  .tab-right {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .tab-left .icon-bottom-right {
    bottom: unset !important;
    right: unset !important;
    width: 100% !important;
  }
  .tab-content h2 {
    font-size: 40px !important;
  }
  .tab-content h3 {
    font-size: 18px !important;
  }
  .product-icon {
    height: 60px !important;
    padding-bottom: 10px !important;
  }
  .bg-color {
    height: 100% !important;
  }
  .tab-wrapper {
    height: max-content !important;
    height: unset !important;
  }
  .product-images img {
    height: auto !important;
    width: auto !important;
    z-index: 9999;
  }
  .timeline-years {
    width: 35% !important;
    padding: 0 !important;
  }
  .timeline-year.active {
    font-size: 40px !important;
    margin: 20px 0 !important;
  }
  .timeline-year {
    font-size: 35px !important;
    margin: 8px 0 !important;
  }
  .hero-wrapper {
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 40% !important;
  }
  .hero-content {
    width: 100% !important;
  }
  .hero-section {
    height: max-content;
/*     padding: 40% 8% !important; */
	padding: 40% 5% !important;
  }
  .hero-visual {
    width: 100% !important;
  }
  .hero-title {
    font-size: 40px !important;
  }
  .hero-description p {
    width: 100% !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  .content-section {
/*     height: 50vh !important; */
	height: 70vh !important;
    padding: 0px 8% !important;
  }
  .content-wrapper h2 {
    font-size: 32px !important;
  }
  .content-wrapper p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .feature-slider .slide-card {
/*     width: 90vw !important; */
	width: 95vw !important;
  }
  .menu-event-count .notification-count {
    top: unset !important;
    right: unset !important;
    padding: 0px 9px !important;
    margin-left: 5px !important;
  }
  .contact-modal-open-img {
    width: 70px !important;
  }
  .ai-chat-trigger img {
    width: 60px !important;
  }
  .contact-modal {
    top: 20% !important;
  }
  .contact-modal-inner {
    width: 90vw !important;
    flex-direction: column;
    max-height: 90vh;
    overflow: scroll !important;
  }
  .contact-modal-left,
  .contact-modal-right {
    width: 100% !important;
    padding: 32px 24px;
  }
  .contact-modal-left p {
    max-width: 100%;
  }
  .contact-modal-left h2 {
    font-size: 30px !important;
  }
  .contact-modal-left p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .contact-modal-left, .contact-modal-right {
    padding: 40px 48px !important;
  }
  .contact-modal-right .form-intro-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .contact-page-intro-section h3 {
    font-size: 30px !important;
    margin-top: 50px !important;
  }
  .contact-page-intro-section h2, .form-left-intro h2 {
    font-size: 40px !important;
  }
  .contact-page-intro-section .et_pb_row {
    flex-direction: column !important;
  }
  .contact-page-intro-section p, .form-left-intro p {
    font-size: 20px !important;
  }
  .form-left-intro .et_pb_text_inner {
    width: 100% !important;
  }
  .form-upper-text {
    font-size: 20px !important;
    width: 100% !important;
  }
  .submit-row {
    text-align: center !important;
  }
  .submit-row button {
    width: 50% !important;
  }
  .footer-section::before {
    top: 0vh !important;
  }
}

/* ==========================================================================
   150% 
   ========================================================================== */
@media (min-resolution: 1.5dppx) {
  .homepage-banner img {
    width: 75% !important;
  }
  .homepage-banner h1 {
    font-size: 60px !important;
  }
  .ship-scroll-row .et_pb_text_1 h2 {
    font-size: 40px !important;
  }
  .digitalise-ship p {
    font-size: 18px !important;
  }
  .digitalise-ship .value {
    font-size: 34px !important;
  }
  .what-we-do-content p {
    width: 100% !important;
  }
  .what-we-do-content h3 {
    font-size: 30px !important;
  }
  .hero-title {
    font-size: 50px !important;
  }
  .hero-description p {
    width: 100% !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }
  .hero-visual {
    width: 50% !important;
  }
  .content-wrapper h2 {
    font-size: 50px !important;
    margin-bottom: 0 !important;
  }
  .content-wrapper p {
    font-size: 16px !important;
  }
  .feature-slider h3 {
    font-size: 38px !important;
  }
  .feature-slider p {
    font-size: 16px !important;
    max-width: 90% !important;
  }
  .footer-section h1 {
    width: 100% !important;
    font-size: 60px !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
  }
  .footer-intro-form h5 span {
    font-size: 18px !important;
  }
  .footer-section h5 {
    width: 70% !important;
  }
  .feature-slider .slide-card {
    width: 60vw !important;
  }
  .tl-slide {
    gap: 10px 0 !important;
  }
  .tl-feature img {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0 !important;
    margin-top: 10px !important;
  }
  .tl-feature h4 {
    font-size: 18px !important;
    margin: 0 !important;
  }
  .ai-chat-trigger img {
    width: 65px !important;
  }
  .contact-float-trigger img {
    width: 80px !important;
  }
  .contact-page-intro-section h2 {
    font-size: 55px !important;
  }
  .form-left-intro h2 {
    font-size: 40px !important;
  }
  .contact-page-intro-section h3 {
    font-size: 40px !important;
  }
  .contact-page-intro-section p, .form-left-intro p, .form-upper-text {
    font-size: 17px !important;
  }
  .single-post-container {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .footer-section::before {
    top: 0 !important;
  }
  .tl-title {
    top: 0 !important;
  }
  .year-slider-section .et_pb_row {
    width: 90% !important;
  }
  .tab-content h2 {
    font-size: 36px !important;
  }
  .tab-content-container {
    margin-top: 0 !important;
  }
  .tabs {
    padding: 0 0 30px !important;
  }
  .tl-year.active {
    font-size: 100px !important;
  }
  .tl-slide {
    padding: 60px 0px 40px !important;
  }
  .product-images img { 
    height: 60vh !important;    
  }	
}