.mobile { display: none; } .desktop { display: block; } .fleet-body { margin: 0 auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0 22px 24px; max-width: var(--dep-why-max-width); } .fleet-list-hero-section { position: relative; background: #ffffff; border: 1px solid #eef2f6; border-radius: 24px; display: flex; align-items: center; padding: 50px 45px; overflow: hidden; margin-bottom: 45px; box-shadow: 0 10px 30px rgba(0, 0, 80, 0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .fleet-list-hero-section:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(0, 0, 80, 0.06); border-color: #d8e2ed; } @media (min-width: 969px) { .fleet-list-hero-section:nth-child(even) .fleet-list-content-wrapper { flex-direction: row-reverse; } } .fleet-list-content-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 50px; } .fleet-list-text-content { flex: 1 1 50%; max-width: 550px; z-index: 2; } .fleet-list-title { font-size: 34px; font-weight: 700; color: #1a1d23; margin-bottom: 15px; margin-top: 0; line-height: 1.2; } .more-top { margin-top: 60px; } .fleet-list-description { font-size: 15.5px; line-height: 1.65; color: #555; margin-bottom: 25px; font-weight: 400; } .fleet-list-info-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; } .fleet-list-badge { display: flex; align-items: center; gap: 8px; background: #f4f7fa; color: #2b354e; padding: 8px 16px; border-radius: 30px; font-size: 14px; font-weight: 600; border: 1px solid #e2eaf1; } .fleet-list-badge i { color: #000080; font-size: 14px; } .fleet-list-car-container { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; position: relative; max-width: 580px; } .fleet-list-car-image { width: 100%; height: auto; display: block; object-fit: contain; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .fleet-list-hero-section:hover .fleet-list-car-image { transform: scale(1.04); } .fleet-book-btn-wrapper { margin-top: 25px; } .fleet-book-btn { display: inline-flex; align-items: center; gap: 10px; background: #000080; color: #ffffff; padding: 12px 28px; border-radius: 30px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 128, 0.15); } .fleet-book-btn:hover { background: #c89b3c; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200, 155, 60, 0.25); } .fleet-book-btn i { transition: transform 0.3s ease; } .fleet-book-btn:hover i { transform: translateX(4px); } @media (max-width: 968px) { .fleet-list-hero-section { padding: 30px 20px; height: auto; min-height: auto; border-radius: 16px; margin-bottom: 30px; } .fleet-list-content-wrapper { flex-direction: column !important; text-align: center; gap: 30px; } .fleet-list-text-content { max-width: 100%; margin-bottom: 0; } .fleet-list-title { font-size: 28px; } .fleet-list-description { margin: 0 auto 20px; } .fleet-list-info-badges { justify-content: center; } .fleet-list-car-container { position: relative; width: 100%; max-width: 460px; margin: 0 auto; } } @media (max-width: 768px) { .no-mt-slow { margin-bottom: 5px !important; } .mobile { display: block; } .desktop { display: none; } } @media (max-width: 880px) { .fleet-body { padding: 1px 0; width: 94%; } .mobi-edge { border-radius: 18px; position: relative; z-index: 99; background: white; margin: -15px auto 25px 0px; padding: 0px; width: 100%; } .more-top { margin-top: 0; } .fleet-m-top { margin-bottom: 25px !important; } } @media (max-width: 600px) { .fleet-list-title { font-size: 24px; } .fleet-list-description { font-size: 14.5px; } } @media (max-width: 400px) { .hero-content-trf { max-width: 320px; } } .fleet-page-intro-section { padding: 20px 22px 40px; max-width: var(--dep-why-max-width); margin: 0 auto; box-sizing: border-box; } .fleet-page-intro-container { width: 100%; margin: 0 auto; padding: 20px 25px; background: #ffffff; border-left: 4px solid #c89b3c; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); position: relative; transition: all 0.3s ease; box-sizing: border-box; } .fleet-page-intro-container:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .fleet-page-intro-p { font-size: 16.5px; line-height: 1.8; color: #555; margin-bottom: 12px; } .fleet-page-intro-p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .fleet-page-intro-section { padding: 20px 15px 30px; } .fleet-page-intro-container { padding: 20px 20px; } .fleet-page-intro-p { font-size: 15px; line-height: 1.7; margin-bottom: 10px; } } .fleet-intro-section { padding: 50px 22px; max-width: var(--dep-why-max-width); margin: 0 auto; } .fleet-intro-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .fleet-intro-text h2 { font-size: 32px; font-weight: 700; color: #1a1d23; margin-bottom: 20px; } .fleet-intro-text p { font-size: 16px; line-height: 1.6; color: #555; } .fleet-highlights-box { background: #f9fbfd; padding: 30px; border-radius: 16px; border: 1px solid #e2edf8; box-shadow: 0 10px 30px rgba(0, 0, 80, 0.03); } .fleet-highlights-box h3 { font-size: 20px; font-weight: 700; color: #000080; margin-bottom: 20px; } .highlights-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .highlights-grid li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #444; } .highlights-grid li i { color: #2ecc71; font-size: 16px; } .fleet-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 25px; border-top: 1px solid #eee; padding-top: 20px; } .fleet-details-col h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #1a1d23; margin-bottom: 12px; letter-spacing: 0.5px; } .fleet-details-col ul { list-style: none; padding: 0; margin: 0; } .fleet-details-col li { font-size: 13.5px; color: #555; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; line-height: 1.4; text-align: left; } .fleet-details-col li i { font-size: 10px; color: #000080; } .fleet-list-badge.price-badge { background: #000080; color: #ffffff; } .fleet-table-section { padding: 60px 22px; max-width: var(--dep-why-max-width); margin: 0 auto; background: #ffffff; } .fleet-table-container h2 { font-size: 32px; font-weight: 700; color: #1a1d23; margin-bottom: 30px; text-align: center; } .table-responsive { overflow-x: auto; border-radius: 16px; box-shadow: 0 15px 40px rgba(0, 0, 80, 0.04); border: 1px solid #eef2f6; background: #ffffff; } .fleet-comparison-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; } .fleet-comparison-table th { background: #000080; color: #ffffff; padding: 18px 24px; font-weight: 600; letter-spacing: 0.5px; border: none; } .fleet-comparison-table td { padding: 16px 24px; border-bottom: 1px solid #eef2f6; color: #444; transition: background 0.2s ease; } .fleet-comparison-table tr:hover td { background: #f4f7fa; } .fleet-comparison-table tr:last-child td { border-bottom: none; } .fleet-comparison-table td:first-child { font-weight: 600; color: #1a1d23; } .fleet-comparison-table td:nth-child(2) { font-weight: 600; color: #000080; } .fleet-comparison-table tr:nth-child(even) { background: #fcfdfe; } .fleet-why-section { padding: 60px 22px; max-width: var(--dep-why-max-width); margin: 0 auto; } .fleet-why-container h2 { font-size: 32px; font-weight: 700; color: #1a1d23; margin-bottom: 16px; text-align: center; } .fleet-why-container > p { font-size: 16px; line-height: 1.6; color: #555; text-align: center; max-width: 800px; margin: 0 auto 40px auto; } .fleet-apart-section { margin-top: 40px; } .fleet-apart-section h3 { font-size: 24px; font-weight: 700; color: #000080; margin-bottom: 35px; text-align: center; } .apart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } .apart-card { background: #ffffff; border: 1px solid #eef2f6; border-radius: 16px; padding: 30px 20px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 80, 0.02); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } .apart-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 80, 0.06); border-color: #d8e2ed; } .apart-icon-box { width: 60px; height: 60px; border-radius: 50%; background: #f4f7fa; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all 0.3s ease; } .apart-card:hover .apart-icon-box { background: #000080; } .apart-icon-box i { color: #000080; font-size: 22px; transition: all 0.3s ease; } .apart-card:hover .apart-icon-box i { color: #ffffff; } .apart-card h4 { font-size: 15px; font-weight: 600; color: #1a1d23; margin: 0; line-height: 1.4; } .fleet-cta-section { padding: 30px 22px; background: linear-gradient(135deg, #000080 0%, #1a1d23 100%); color: #ffffff; text-align: center; border-radius: 18px; margin: 20px 22px; } .fleet-cta-container { max-width: 800px; margin: 0 auto; } .fleet-cta-container h2 { font-size: 26px; font-weight: 700; margin-bottom: 10px; color: #ffffff; } .fleet-cta-container > p { font-size: 15px; line-height: 1.5; opacity: 0.9; margin-bottom: 10px; } .fleet-cta-container .slogan { font-size: 16px; font-weight: 600; font-style: italic; margin-bottom: 20px; color: #ffd700; } .fleet-cta-container .cta-box { background: rgba(255, 255, 255, 0.08); padding: 20px 25px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); } .fleet-cta-container .cta-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #ffffff; } .fleet-cta-container .cta-box p { font-size: 14.5px; opacity: 0.95; margin-bottom: 15px; } .fleet-cta-container .cta-box .cta-button-no-single { background: #ffffff; color: #000080; font-weight: 700; padding: 10px 26px; border-radius: 30px; text-decoration: none; font-size: 16px; display: inline-block; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: none; cursor: pointer; } .fleet-cta-container .cta-box .cta-button-no-single:hover { background: #ffd700; color: #1a1d23; transform: translateY(-2px); } @media (max-width: 968px) { .fleet-intro-container { grid-template-columns: 1fr; gap: 30px; } .apart-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 600px) { .fleet-intro-text h2, .fleet-table-container h2, .fleet-why-container h2, .fleet-cta-container h2 { font-size: 26px; } .fleet-cta-section { padding: 50px 15px; margin: 30px 10px; } .fleet-cta-container .cta-box { padding: 25px 15px; } .fleet-details-grid { grid-template-columns: 1fr; gap: 15px; } .apart-grid { grid-template-columns: 1fr; gap: 15px; } }