.elementor-51316 .elementor-element.elementor-element-427c578{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51316 .elementor-element.elementor-element-427c578:not(.elementor-motion-effects-element-type-background), .elementor-51316 .elementor-element.elementor-element-427c578 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://myboyztransportation.com/wp-content/uploads/2026/02/chromashift-edit-1769720616878.png");background-position:bottom center;background-size:cover;}.elementor-51316 .elementor-element.elementor-element-c3cc536{--display:flex;}.elementor-51316 .elementor-element.elementor-element-c3cc536.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-51316 .elementor-element.elementor-element-db76bea{--display:flex;}.elementor-51316 .elementor-element.elementor-element-4caaf70{width:var( --container-widget-width, 86% );max-width:86%;--container-widget-width:86%;--container-widget-flex-grow:0;}.elementor-51316 .elementor-element.elementor-element-4caaf70 > .elementor-widget-container{margin:250px 0px 0px 0px;}.elementor-51316 .elementor-element.elementor-element-4caaf70.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-51316 .elementor-element.elementor-element-0988eb0{--display:flex;}.elementor-51316 .elementor-element.elementor-element-37674e0{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51316 .elementor-element.elementor-element-222e692{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-51316 .elementor-element.elementor-element-c3cc536{--width:62%;}.elementor-51316 .elementor-element.elementor-element-db76bea{--width:100%;}.elementor-51316 .elementor-element.elementor-element-37674e0{--width:100%;}}@media(max-width:1024px){.elementor-51316 .elementor-element.elementor-element-427c578:not(.elementor-motion-effects-element-type-background), .elementor-51316 .elementor-element.elementor-element-427c578 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}}@media(max-width:767px){.elementor-51316 .elementor-element.elementor-element-427c578:not(.elementor-motion-effects-element-type-background), .elementor-51316 .elementor-element.elementor-element-427c578 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-51316 .elementor-element.elementor-element-4caaf70{--container-widget-width:607px;--container-widget-flex-grow:0;width:var( --container-widget-width, 607px );max-width:607px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Boyz Transportation | Premium Logistics</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'brand-blue': '#0085ca',
                        'brand-dark': '#0f172a',
                        'accent-blue': '#3b82f6',
                    },
                    fontFamily: {
                        'heading': ['Oswald', 'sans-serif'],
                        'body': ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style>
        .glass-panel-blue { background: rgba(0, 133, 202, 0.25); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.15); }
        .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); }
        .btn-premium { background: linear-gradient(90deg, #0085ca 0%, #3b82f6 100%); transition: all 0.3s ease; color: white; padding: 1rem 2rem; border-radius: 0.25rem; display: inline-flex; align-items: center; justify-content: center; }
        .btn-premium:hover { box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.5); transform: translateY(-2px); }
        .btn-premium-outline { border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease; color: white; padding: 1rem 2rem; border-radius: 0.25rem; display: inline-flex; align-items: center; justify-content: center; }
        .btn-premium-outline:hover { background-color: white; color: black; }
        .hero-section { background-size: cover; background-position: center; }
        .clip-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
        .skew-fix { transform: skewX(-12deg); }
        .glass-input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; }
    </style>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            AOS.init({ duration: 800, once: true, offset: 100, easing: 'ease-out-cubic' });
        });
    </script>
</head>
<body class="bg-black text-gray-200 font-body antialiased selection:bg-brand-blue selection:text-white">
<main>/* End custom CSS */