/* ========================================== */ /* === CSS Table of Contents ================ */ /* === 2023 © Guardian Sages ================ */ /* ========================================== */ /* ========================================== */ /* === 1. Top Header Section ================ */ /* === 2. Navigation Section ================ */ /* === 3. Website Pages Section ============= */ /* === a. Home Section =================== */ /* === b. About Section ================== */ /* === c. Services Section =============== */ /* === d. Gallery Section ================ */ /* === e. Areas We Service Section ======= */ /* === f. Testimonials Section =========== */ /* === g. Contact Section ================ */ /* === h. Sections On Every Page ========= */ /* === 4. Misc. Section ===================== */ /* === a. Referrals Owl Carousel ========= */ /* === b. Default Classes ================ */ /* === c. Gallery Function Section ======= */ /* === d. Reviews Function Section ======= */ /* === 5. Footer Section ==================== */ /* === 6. Lg. Laptop CSS Section ============ */ /* === 7. Sm. Laptop CSS Section ============ */ /* === 8. Tablet CSS Section ================ */ /* === 9. Mobile CSS Section ================ */ /* === 10. Sm. Mobile CSS Section =========== */ /* ========================================== */ @import url('https://fonts.googleapis.com/css?family=Staatliches'); @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700,900'); @font-face { font-family: 'font'; src:url('../fonts/arvo.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'font2'; src:url('../fonts/poppins.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'font3'; src:url('../fonts/Segoe-UI.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-weight: normal; font-style: normal; font-family: 'feathericons'; src:url('../fonts/feathericons/feathericons.eot?-8is7zf'); src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'), url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'), url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'), url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg'); } body,html{ overflow-x: hidden; } .vertically-centered{ display: flex; flex-direction: column; justify-content: center; } /* ======================================== */ /* === Top Header Section ================= */ /* ======================================== */ .top-header { position: absolute; width: 100%; z-index: 1; padding: 10px 0 10px 0; background: rgb(255,255,255); z-index: 5; -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; } .top-header div[class*='col-']:first-child { display: flex; justify-content: flex-end; align-items: center; } .top-header div[class*='col-']:first-child a { padding: 0; font-size: 15px; -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; } .top-header div[class*='col-']:first-child a:hover { background-color: transparent; } .top-header div[class*='col-']:nth-child(2) { display: flex; justify-content: center; align-items: center; } .top-header div[class*='col-']:nth-child(3) { display: flex; justify-content: center; align-items: center; } .top-header div[class*='col-']:nth-child(3) a { padding: 9px 15px 9px 15px; background: transparent; font-weight: 600; font-family: 'font2'; color: rgb(120,120,120); border-radius: .6rem; border: 1px double rgb(120,120,120); } .top-header div[class*='col-']:nth-child(3) a:hover { background: transparent; } .top-header div[class*='col-']:nth-child(4) { display: flex; justify-content: center; align-items: center; } .top-header div[class*='col-']:nth-child(4) a { padding: 9px 15px 9px 15px; background: transparent; font-weight: 600; font-family: 'font2'; color: rgb(120,120,120); border-radius: .6rem; border: 1px double rgb(120,120,120); } .top-header div[class*='col-']:nth-child(4) a:hover { color: rgb(120,120,120); } .top-header div[class*='col-']:nth-child(5) { display: flex; justify-content: flex-start; align-items: center; } .top-header div[class*='col-']:nth-child(5) a { display: flex; justify-content: center; align-items: center; border: 1px solid rgb(255,255,255); color: rgb(255,255,255); background: #1d3644; border-radius:100px; height: 34px; width: 34px; margin: 0 4px; } .top-header div[class*='col-']:nth-child(5) a:hover { background: #6e7880; text-decoration:none !important; color: rgb(255,255,255); } .top-header .dropdown-menu { background: whitesmoke; border-radius: 0; } .top-header .dropdown-menu a { color: #222; padding: 3px 20px !important; } .top-header .dropdown-toggle { background: #21212100; padding: 6px 25px; outline: none !important; border-color: #f3f3f3b5; } .top-header .dropdown-toggle:hover { background-color: white !important; color: #000 !important; } .btn-secondary:not([disabled]):not(.disabled).active, .btn-secondary:not([disabled]):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { color: #000; background-color: rgb(255, 255, 255); border-color: #666e76; box-shadow:none !important; } .top-header .btn-secondary.focus, .btn-secondary:focus { outline: none !important; box-shadow: none !important; } .top-header .img-container{ position:absolute; top:0%; } /* ======================================== */ /* === Navigvation Section ================ */ /* ======================================== */ .navbar-inverse .navbar-inner { display:none; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 200px; padding: .5rem 0; margin: .125rem 0 0; font-size: 18px; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(255,255,255); background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; } .dropdown-menu.columns-3 { min-width: 600px; } .dropdown-menu li a { padding: 5px 15px; font-weight: 300; } .dropdown-item { display: block; width: 100%; font-weight: 600; font-family: 'font2'; padding: .25rem 1.5rem; clear: both; color: rgb(12,12,12); text-align: inherit; white-space: nowrap; background: 0 0;border: 0; } .dropdown-item.active, .dropdown-item:active { color: rgb(255,255,255); text-decoration: none; background-color: rgb(22,22,22) !important; } .dropdown { float: left; position: relative; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit;font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #043174; } .dropdown-one { cursor: pointer; display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-two { cursor: pointer; display: none; position: absolute; left: 160px; top: 0px; min-width: 160px; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-three { cursor: pointer; display: none; position: absolute; left: 160px; top: 48px; min-width: 160px; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown:hover .dropdown-one, #link1:hover > .dropdown-two { display: block; } .dropdown:hover .dropdown-one, #link2:hover > .dropdown-three { display: block; } .dropdown-one .dItem { color: black; padding: 12px 16px; display: block; text-align: left; } .dropdown-one .dItem:hover, .dropdown-two a:hover { background-color: #ddd; } .my-pad { padding: 0 0 0 15px; } .my-pad h5 { color: rgb(255,255,255); font-size: 18px; text-transform: uppercase; padding-top: 20px; line-height: 5px; font-weight: 600; } .multi-column-dropdown { list-style: none; margin: 0px; padding: 0px; } ul.multi-column-dropdown { padding: 0 0 0; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #333; white-space: normal; } .multi-column-dropdown li a:hover { text-decoration: none; color: #262626; background-color: #999; } .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; font-family: 'font2'; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .tabcontent h3 { padding-top: 40px; padding-bottom: 40px; font-family: 'font'; text-align: center; font-size: 2rem; color: rgb(246,177,24); } .top-header-animate { background: rgb(255,255,255); } .top-header-animate .dropdown-toggle { color:#0a0a0a; font-size: 16px; } .top-header-animate .navbar-brand { font-size: 1.5em; } body { padding: 0; -webkit-transition-property: all; -webkit-transition-duration: .30s; -webkit-transition-timing-function: ease-in-out; transition-property: all; transition-duration: .30s; transition-timing-function: ease-in-out; } .navbar-scroll { padding: 85px 0 10px; position: absolute; background: #f5f5f5; width: 100%; z-index: 4; -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; box-shadow: 1px 1px 10px 3px #1d3644; } .navbar-scroll .container { background: rgb(60,36,17,0); border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } #projects .navbar-scroll { background: #fdfdfd; position:relative !important; } #projects .navbar-scroll li a { color:#333; } #projects .navbar-scroll .navbar-brand { color:#252525; } #projects .navbar-light .lnr { color:#222; } .navbar-light .lnr { color: #fdfdfd; font-size: 1.5em; position: absolute; top: 6px; right: 10px; } .navbar-light .navbar-brand { color: #e8e8e8; font-size: 20px; font-family: 'Montserrat', sans-serif; } .navbar-brand { font-size:2.5em; font-weight:700; text-transform:uppercase; } .navbar-brand:focus, .navbar-brand:hover { color:#f3f3f3 !important; } .navbar-light .navbar-nav .nav-link { margin: 0 28px; padding: 6px 0px; font-weight: 900; font-size: 18px; color: #142630; font-family: 'font2'; } .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { color: rgb(255,255,255); } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgb(196,41,56); } .navbar-light .navbar-nav li a { position: relative; } .navbar-collapse { height: 100%; } .mobile-top-header { display: none !important; } /* ========================================== */ /* === Website Pages Section ================ */ /* ========================================== */ /* ======================================== */ /* === Top Header Section ================= */ /* ======================================== */ .pest-expandable-button { position: fixed; bottom: 20px; right: 20px; width: 225px; background-color: #f9f9f9; color: #000; border-radius: 30px; overflow: hidden; z-index: 999; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .pest-expandable-button.opened { width: 400px; border-radius: 20px; } .ppb-main { display: flex; align-items: center; gap: 10px; padding: 12px 16px; /*cursor: pointer;*/ cursor: auto; } .pest-expandable-button img { /* width: 32px; height: 32px;*/ width: auto; height: 20px; border-radius: 50%; object-fit: cover; } .pest-expandable-button span { font-family: font3; font-size: 15px; font-weight: 500; white-space: nowrap; } .ppb-content { max-height: 0; opacity: 0; padding: 0 16px; transition: all 0.4s ease; pointer-events: none; } .footer-section .ppb-content a.contact{ color:black; font-weight: 700; font-size: 1.3rem; } .footer-section .ppb-content a.contact span{ font-size: 1.6rem; transform: translateY(20%); opacity: 0; transition: all 0.5s; } .footer-section .ppb-content a.contact:hover span{ transform: translateY(0); opacity: 1; } .pest-expandable-button.opened .ppb-content { max-height: 1000px; opacity: 1; padding: 10px 16px 16px; pointer-events: auto; } .ppb-close { font-size: 22px; font-weight: bold; color: #333; text-align: right; cursor: pointer; margin-bottom: 10px; } .ppb-close:hover { color: #c1292e; } /* Default avatar */ .ppb-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; transition: all 0.3s ease; } .ppb-label { font-family: font3; font-size: 15px; font-weight: 500; margin-top: 5px; white-space: nowrap; transition: font-size 0.3s ease; } /* When panel is opened */ .pest-expandable-button.opened .ppb-img { /*content: url('/img/bcg-logo.gif');*/ content: url('/img/logo/logistics-logo-blank.png'); /* width: 100px; height: 100px;*/ width: 45%; height: auto; margin-top: 25px; border-radius: 0; } .pest-expandable-button.opened .ppb-label { font-size: 20px; font-weight: 700; margin-top: 25px; white-space: normal; } .pest-expandable-button.opened .ppb-close { margin-top: -105px; margin-bottom: 100px; } .ppb-content .contact-container{ display:flex; justify-content: space-around; gap: 20px; } /**** Home Section ****/ .bg-primary { background: rgb(83,82,82) !important; } .home-header-section { padding-top: 125px; } .home-header-section .slider-logo span { font-family: 'font'; color: rgb(196,41,56); } .video { overflow: hidden; position: relative; z-index: 2; display: block; } .video .pad { padding: 350px 0px 0px 300px; position: absolute; } .video .pad h5 { font-weight: 500; color: rgb(255,255,255); font-size: 50px; text-shadow: 0px 0px 5px #000; font-family: 'Arial'; text-align: left; } .video .pad p { margin-top: 0% !important; color: rgb(255,255,255); text-shadow: 0px 0px 5px #000; font-size: 25px; font-family: 'Arial'; text-align: left; } .video .pad a { font-size: 16px; color: rgb(255,255,255); font-family: 'Arial'; font-weight: 600; border: 1px solid rgb(12,32,63); padding: 15px 30px; border-radius: 1.6rem; background: rgb(12,32,63); } .video .pad a:hover { color: rgb(255,255,255); border: 1px solid rgb(255,255,255); background: transparent; } .showcase{ position:relative; /*height: 120vh;*/ height: 75vh; display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .home-background-video { margin-bottom: 377px; position:absolute; top:47%; left: 50%; transform: translate(-50%,-50%); width:100%; height: 100%; overflow:hidden; object-fit: cover; /*height: 1350px;*/ /*height: auto;*/ /*position: relative;*/ /*width: 100%;*/ /*height: 100vh;*/ /*overflow: hidden;*/ background: url('/img/homepage/hvac-parallax.jpg') no-repeat center center; /*background-size: cover;*/ } .home-video-overlay { position: absolute; padding: 50px 10px 50px 10px; background: #ffffff00; margin-top: -0; margin-bottom: 0; width: 100%; top: 50%; } .home-video-overlay h1 { font-family: font3; font-size: 4rem; color: #797acc; font-weight: 600; text-align: center; letter-spacing: 2px; text-transform: uppercase; } .home-video-overlay h1 strong { color: #000; } .home-video-overlay h1 span { font-size: 1.45rem; font-family: font2; font-weight:900; color: #000; letter-spacing: 1px; text-transform: capitalize; color:white; } .home-video-overlay h4 { padding: 35px; border-radius: 10px; color: #fff; font-size: 20px; letter-spacing: 2px; background: #797acc; text-align: center; font-family: font3; font-weight: 600; text-transform: uppercase; } .home-video-overlay h4:hover { box-shadow: 0px 0px 0px 15px #797acc; border-radius: 0px; } .showcase-service{ position:relative; /*height: 120vh;*/ height: 88vh; display:flex; /* flex-direction: column; justify-content: center; align-items: center; text-align: center; */ } .service-background-video { position: absolute; inset: 0; /* shorthand for top: 0; right: 0; bottom: 0; left: 0 */ width: 100%; height: 100%; object-fit: cover; z-index: -1; /* Send it behind content */ object-position: center bottom; /* or center center / center bottom */ } .new-home6 { background: rgb(255,255,255); padding: 40px 0 40px 0; } .new-home6 .box { padding: 25px 25px 0 25px; } .new-home6 h1 { font-size: 4.5rem; color: black;; position: relative; font-family: Arial; text-transform: uppercase; font-weight: 700; } .new-home6 h2 { text-align: center; color: #6E7880; font-size:1.7rem; font-family: Arial; text-transform: uppercase; font-weight: 700; margin-top: 0; } .new-home6 h3 { font-family: Arial; text-align: center; color: #6E7880; font-size: 25px; } .new-home6 h4 { font-family: Arial; font-size: 5.5rem; text-align: center; font-weight: 700; color: #142630; } .new-home6 h5 { font-size: 17px; color: rgb(100,100,100); text-align: center; line-height: 27px; padding-bottom: 40px; } .new-home6 p { font-size: 0.8rem; text-align: center; color: rgb(100,100,100); } .new-home6 a { font-weight: 600; color: #142630; font-size:1.2rem; font-family: Arial } .new-home6 a:hover { color: rgb(217,214,199); } h4.gradient{ font-size: 3rem; text-align: center; font-family: Arial; font-size: 7rem; font-weight: 700; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; padding-bottom: 100px; opacity:0; transform: translateX(20%); transition:1.4s; } h4.gradient.show{ transform: translateX(0%); opacity:1; } @keyframes gradientAnimation{ 0%{ background-position: 200% 50%; } 100%{ background-position: 0% 50%; } } .new-home6 .service-box{ padding: 20px; box-shadow: 3px 3px 10px black; height: 500px; display:flex; border-radius: 20px; } .new-home6 .service-bg{ } .admin-bg{ background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/homepage/admin-001.jpg) bottom no-repeat; background-size: cover; flex:1; } .data-bg{ background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/homepage/data-001.png) bottom no-repeat; background-size: cover; background-position: 0% 0%; flex:1; } .after-hours-bg{ background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/homepage/after-hours-001.jpg) bottom no-repeat; background-size: cover; background-position: 50% 50%; flex:1; } .accounting-bg{ background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/homepage/accounting-001.jpg) bottom no-repeat; background-size: cover; background-position: 50% 50%; flex:1; } .internal-bg{ background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/homepage/internal-001.jpg) bottom no-repeat; background-size: cover; background-position: 50% 50%; flex:1; } .new-home6 h2 { font-size: 3.5rem; color: white; position: relative; top: 5%; opacity: 1; visibility: visible; transition: top 0.4s, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } .new-home6 p { visibility: hidden; opacity: 0; color: white; transition: opacity 0.4s ease-in-out; padding: 0 150px; font-size: 2rem; font-weight: 700; text-transform: uppercase; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } .new-home6 .service-box-vid { position: relative; padding: 0; box-shadow: 0px 3px 8px black; height: 500px; display: flex; border-radius: 20px; overflow: hidden; transition: 0.7s; } .new-home6 .service-box-vid.shadow-animate { box-shadow: 3px 10px 15px black; transform: scale(1.06); } /* .new-home6 .service-box-vid:hover { box-shadow: 3px 10px 15px black; transform: scale(1.06); } */ /* Thumbnail behaves like a background layer */ .new-home6 .service-box-vid .video-thumbnail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 0.5s ease-in-out; } /* Video layered above thumbnail but hidden at first */ .new-home6 .service-box-vid .background-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity 0.5s ease-in-out; } /* On hover: fade out thumbnail, fade in video */ .new-home6 .service-box-vid:hover .video-thumbnail { opacity: 0; } .new-home6 .service-box-vid:hover .background-video { opacity: 1; } .new-home6 .service-box-vid .video-overlay { position: relative; z-index: 3; padding: 50px 10px; background: rgba(0, 0, 0, 0.58); margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: white; } /* Text transitions on hover */ .new-home6 .service-box-vid:hover .video-overlay h2 { top: -50%; opacity: 0; visibility: hidden; } .new-home6 .service-box-vid:hover .video-overlay p { opacity: 1; visibility: visible; } .home1 { padding: 0px; background: rgb(245,245,245); } .home1 .container-fluid { padding: 0px 0px 0px 0px; } .home1 .row { --bs-gutter-x:0px; } .home1 .mainer { padding: 50px 25px; } .home1 .pad { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/freight-3.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad:hover { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffffd9, #ffffffd9), url(/img/freight-3.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad:hover h2 { color: #1d3644; text-shadow: none; } .home1 .pad:hover h5 { color: #444; text-shadow: none; } .home1 .pad:hover p { color: #444; } .home1 .pad h2 { font-size: 35px; font-family: Arial; font-weight: 700;text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; } .home1 .pad h5 { color: transparent; } .home1 .pad p { font-size: 17px; font-family: 'font2'; font-weight: 600; color: transparent; } .home1 .pad2 { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/train-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad2:hover { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffffd9, #ffffffd9), url(/img/train-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad2:hover h2 { color: #1d3644; text-shadow: none; } .home1 .pad2:hover h5 { color: #444; text-shadow: none; } .home1 .pad2:hover p { color: #444; } .home1 .pad2 h2 { font-size: 35px; font-family: Arial; font-weight: 700;text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; } .home1 .pad2 h5 { color: transparent; } .home1 .pad2 p { font-size: 17px; font-family: 'font2'; font-weight: 600; color: transparent; } .home1 .pad3 { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/air-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad3:hover { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffffd9, #ffffffd9), url(/img/air-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad3:hover h2 { color: #1d3644; text-shadow: none; } .home1 .pad3:hover h5 { color: #444; text-shadow: none; } .home1 .pad3:hover p { color: #444; } .home1 .pad3 h2 { font-size: 35px; font-family: Arial; font-weight: 700;text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; } .home1 .pad3 h5 { color: transparent; } .home1 .pad3 p { font-size: 17px; font-family: 'font2'; font-weight: 600; color: transparent; } .home1 .pad4 { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/sea-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad4:hover { padding: 75px 25px 75px 25px; background: linear-gradient(to right, #ffffffd9, #ffffffd9), url(/img/sea-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; } .home1 .pad4:hover h2 { color: #1d3644; text-shadow: none; } .home1 .pad4:hover h5 { color: #444; text-shadow: none; } .home1 .pad4:hover p { color: #444; } .home1 .pad4 h2 { font-size: 35px; font-family: Arial; font-weight: 700;text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; } .home1 .pad4 h5 { color: transparent; } .home1 .pad4 p { font-size: 17px; font-family: 'font2'; font-weight: 600; color: transparent; } .home1 h1 { font-family: 'font2'; font-size: 35px; text-align: left; font-weight: 800; color: rgb(196,41,56); } .home1 h3 { font-size: 75px; font-family: Arial; font-weight: 700;text-align: center; line-height: 135px; color: #1d3644; } .home1 span { color: rgb(83,82,82); } .who { padding: 50px; background: #142630; text-align: center; color: #f5f5f5; } .who h2 { font-size: 45px; text-align: center; font-family: Arial; font-weight: 600; } .who p { font-size: 16px; font-family: 'font2'; line-height: 35px; } .who hr { width: 30%; height: 3px; margin-left: 225px; background: #CE5E18; } .who hr.whole { width: 100%; height: 3px; margin-left: 0; background: #CE5E18; } .who .vision-box{ padding: 25px 20px; background: rgba(255,255,255,0.5); border-radius: 25px; margin: 15px 0; } .who .vision-box hr{ width: 100%; height: 3px; margin-left: 225px; background: #CE5E18; } .who .vision-box p span{ font-weight: 700; font-size: 1.25rem; text-decoration: underline; } .who .vision-box *{ color:white;; } .who .vision-box h3 { font-size: 2.25rem; text-align: center; font-family: Arial; font-weight: 600; } .serv6 { padding: 100px 0 100px 0; background: #fff; } .serv6 h2 { font-family: Arial; color: rgb(20, 38, 48); font-size: 45px; font-weight: 700; } .serv6 p { font-size: 16px; font-family: 'font2'; color: rgb(129,141,148); text-align: justify; } .serv6 i { font-size: 20px; color: rgb(255,255,255); } .serv6 hr { width: 55%; background: #CE5E18; } .serv6 button { border-radius: 1.6rem; border: 1px solid rgb(255,255,255); background: rgb(246,177,24); font-size: 14px; } .serv6 button:hover { background: rgb(246,177,24,0.8); } .serv6 img { border-radius: 0.6rem; max-width: 85%; margin-top: 25px; margin-left: -125px; } .serv6 .box{ width: auto; margin-top: 20px; margin-left: auto; margin-right: auto; } .serv6 span{ transition: 200ms; font-weight: 600; font-size: 18px; } .serv6 .bg-dark { background-color: #6e7880 !important; border-radius: 15px; margin:2px 0px 2px 0px; } .serv6 .bg-dark:hover { background-color: #142630 !important; } .serv6 .content{ overflow: hidden; max-height: 0px; transition: 300ms ease-in; } .serv6 .content_2{ overflow: hidden; max-height: 0px; transition: 300ms ease-in; } .serv6 .content_3{ overflow: hidden; max-height: 0px; transition: 300ms ease-in; } .serv6 .content_4{ overflow: hidden; max-height: 0px; transition: 300ms ease-in; } .serv6 .content_5{ overflow: hidden; max-height: 0px; transition: 300ms ease-in; } .serv6 .content_6{ overflow: hidden; max-height: 0px; transition: 300ms ease-in; } .serv6 .header{ cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .serv6 .header_2{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .serv6 .header_3{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .serv6 .header_4{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .serv6 .header_5{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .serv6 .header_6{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .serv6 .content { overflow: hidden; max-height: 0; transition: max-height 300ms ease-in-out; } .serv6 .header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .serv6 .arrow { transition: transform 200ms; font-weight: 600; font-size: 18px; } .serv6 .arrow.rotate { transform: rotate(90deg); } .expertise { background: #f5f5f5; } .expertise .row { --bs-gutter-x: 0; } .expertise h2 { font-size: 50px; font-weight: 600; font-family: Arial; text-align: center; padding: 75px 0px 75px 0px; } h2.gradient{ text-align: center; font-family: Arial; /*font-size: 3rem;*/ font-size: 7rem; font-weight: 700; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; padding-bottom: 100px; opacity:0; transform: translateX(20%); transition:1.4s; } h2.gradient.show{ transform: translateX(0%); opacity:1; } .expertise h3 { font-family: Arial; font-size: 30px; font-weight: 600; position:absolute; transform: translateY(-100%); transition: 0.5s; } .expertise p { font-size: 16px; font-family: font2; line-height: 35px; font-weight: 600; } .expertise .boxer1 { padding: 125px 15px 125px 15px; background: linear-gradient(90deg, rgba(29,54,68,0.67) 0%, rgba(29,54,68,0.67) 100%); background-size: 100%; text-align: center; background-position: center; color: #f5f5f5; text-shadow: 1px 1px 1px #000; position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; } .expertise .boxer1 p{ /*color: transparent;*/ transition: 0.5s; opacity: 0; font-size: 1.3rem; font-weight: 700; } .expertise .boxer1:hover p{ /*color: black;;*/ opacity: 1; } .expertise .boxer2 { padding: 125px 0 125px 0; text-align: center; background-position: bottom; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; color: white; position:relative; transition: 0.5s; /*margin:10px; */ } .expertise .boxer2 h3 { font-family: Arial; font-size: 30px; font-weight: 600; position:absolute; transition: 0.5s; } .expertise .boxer2 p{ /*color: transparent;*/ transition: 0.5s; opacity: 0; font-size: 1.3rem; font-weight: 700; } .expertise .boxer2 .p-container{ position: absolute; transform: translateY(100%); transition: 0.5s ease-in-out; } .expertise .boxer2:hover .p-container{ position: absolute; transform: translateY(0%); } .expertise .boxer2:hover h3{ transform: translateY(-300%); } .expertise .boxer2:hover { /*background: white;*/ /*transform: translateY(-10%); */ height: 105%; box-shadow: 0px 3px 10px black; transform:translateY(-25px); } .expertise .boxer2:hover p{ /*color: black;;*/ opacity: 1; } .expertise .boxer3 { padding: 125px 15px 125px 15px; background: linear-gradient(90deg, rgb(172 176 179 / 90%) 0%, rgb(199 199 200 / 90%) 100%); background-size: 100%; text-align: center; background-position: bottom; /*color: #f5f5f5; text-shadow: 1px 1px 1px #000;*/ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; } .expertise .boxer3 p{ /*color: transparent;*/ transition: 0.5s; opacity: 0; font-size: 1.3rem; font-weight: 700; } .expertise .boxer3:hover p{ /*color: black;;*/ opacity: 1; } .transportation-bg{ background: linear-gradient(rgb(0 0 0 / 51%), rgb(0 0 0 / 42%)), url("/img/homepage/transportation.png"); background-size: cover; } .supply-bg{ background: linear-gradient(rgb(0 0 0 / 51%), rgb(0 0 0 / 42%)), url("/img/homepage/supply.png"); background-size: cover; } .retailer-bg{ background: linear-gradient(rgb(0 0 0 / 51%), rgb(0 0 0 / 42%)), url("/img/homepage/retailer.png"); background-size: cover; } .producer-bg{ background: linear-gradient(rgb(0 0 0 / 51%), rgb(0 0 0 / 42%)), url("/img/homepage/producer.png"); background-size: cover; } .benefits { background: #f5f5f5; padding: 100px 0px 100px 0px; } .benefits .cardy1 { padding: 25px 0px 25px 0px; text-align: center; } .benefits h3 { font-family: Arial; font-size: 45px; text-align: center; font-weight: 600; padding: 50px 0px 50px 0px; } .benefits h4 { font-family: Arial; font-size: 20px; font-weight: 600; color: #000; } .benefits hr { /*width: 15%; margin-left: 175px; background: #1d3644; height: 2px;*/ width: 100%; margin-left: 0; background: #1d3644; height: 2px; } .cardy1.white{ padding: 125px 15px 125px 15px; background: linear-gradient(to right, rgb(255 255 255 / 90%), rgb(255 255 255 / 90%)); background-size: 100%; text-align: center; background-position: bottom; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; } .cardy1.blue{ padding: 125px 15px 125px 15px; background: linear-gradient(90deg, rgba(29,54,68,0.67) 0%, rgba(29,54,68,0.67) 100%); background-size: 100%; text-align: center; background-position: center; color: #f5f5f5; text-shadow: 1px 1px 1px #000; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; } .cardy1.light{ padding: 125px 15px 125px 15px; background: linear-gradient(90deg, rgb(172 176 179 / 90%) 0%, rgb(199 199 200 / 90%) 100%); background-size: 100%; text-align: center; background-position: bottom; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; } .cardy1.dark{ padding: 125px 15px 125px 15px; background: linear-gradient(90deg, rgb(172 176 179 / 90%) 0%, rgb(199 199 200 / 90%) 100%); background-size: 100%; text-align: center; background-position: bottom; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; } .benefit-info { padding: 100px 50px 100px 50px; } .benefit-info .spec-image { /*background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/homepage/blinds-3.png) no-repeat;*/ background-size: cover; height: 100%; background-position: center center; } .benefit-info .spec-content { padding: 50px; background: linear-gradient(90deg, rgba(29,54,68,0.67) 0%, rgba(29,54,68,0.67) 100%); box-shadow: -10px -10px 0px 0px rgb(172 176 179); border: 2px solid #000; display:flex; flex-direction: column; align-items: stretch; } .benefit-info h2 { font-family: Arial; font-size: 2rem;; text-align: center; letter-spacing: 2px; font-weight: 600; } .benefit-info h3 { font-family: Arial; font-size: 1.3rem; text-indent: 0; text-align: center; } .benefit-info h3.title { font-family: Arial; font-size: 3.5rem; text-indent: 0; text-align: center; } h3.gradient{ text-align: center; font-family: Arial; /*font-size: 3.5rem;*/ font-size: 3.5rem; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; /*padding-bottom: 100px;*/ opacity:0; transform: translateX(20%); transition:1.4s; } h3.gradient.show{ transform: translateX(0%); opacity:1; } .benefit-info h4.gradient { font-size: 3rem; text-align: center; font-family: Arial; font-size: 7rem; font-weight: 700; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; padding-bottom: 00px; opacity: 0; transform: translateX(20%); transition: 1.4s; } .benefit-info h4.gradient.show{ transform: translateX(0%); opacity:1; } .benefit-info h5 { font-family: Arial; font-size: 2rem; text-align: center; } .benefit-info p { font-family: Arial; font-weight: 600; font-size: 17px; line-height: 35px; text-align: center; } .benefit-info hr { height: 2px; margin-right: -255px; } .benefit-info .service-option{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; border: 3px solid black; height: 300px; margin: 0 20px ; border-radius: 20px; overflow: hidden; transition: transform 0.5s ease, border-radius 0.5s ease; will-change: transform; } .benefit-info .service-option::after{ content: ''; display: block; position: absolute; /* Important: to ensure it overlays correctly */ top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ); /* prettier light effect */ transform: translateX(-100%) rotate(45deg); pointer-events: none; /* prevent interference with clicks */ transition: transform 2s ease; } .benefit-info .service-option:hover{ border-radius: 0px; transform: scale(1.08); } .benefit-info .service-option:hover::after{ /*transform: translateX(100%) rotate(45deg);*/ animation: shineEffect 1.5s linear 1; } @keyframes shineEffect{ 0%{ } 50%{ transform: translateX(50%) rotate(45deg); } 100%{ transform: translateX(100%) rotate(45deg); } } .benefit-info .service-option .overlay{ position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: rgba(0,0,0,0.4); } .benefit-info .service-option .overlay h2{ color: white; } .service-option.bg-1{ background-image: url('/img/homepage/staffing.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-2{ background-image: url('/img/homepage/profitability.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-3{ background-image: url('/img/homepage/rapid-solutions.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-4{ background-image: url('/img/homepage/turnkey.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-5{ background-image: url('/img/homepage/educated-workforce.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-6{ background-image: url('/img/homepage/onsite-training.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-7{ background-image: url('/img/homepage/english-spanish.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-8{ background-image: url('/img/homepage/candidates.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .service-option.bg-9{ background-image: url('/img/homepage/scalability.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } /* Style for the option container */ .option-container { padding: 10px; margin: 20px 0; border: 2px solid black; border-radius: 8px; background-color: #fff; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; /* Inherits full height of the row column */ display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Hover effect */ .option-container:hover { background-color: lightgray; border-color: black; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transform: scale(1.02); } /* Selected/active option */ .option-container.active-option { background-color: lightgray !important; color: black !important; border-color: black !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transform: scale(1.02); } #spec-image { max-width:75%; transition: opacity 0.5s ease; /* Smooth fade effect over 0.5 seconds */ box-shadow: 1px 1px 10px; } /**** About Section ****/ .about-1 { padding: 150px 50px 100px 50px; background: #f5f5f5; background-size: cover; } .about-1 h1 { font-family: Arial; font-weight: 600; font-size: 35px; color: #1d3644; text-shadow: 2px 2px 50px #444; letter-spacing: 5px; text-indent: 50px; } .about-1 h2 { font-family: 'math'; font-weight: 600; font-size: 25px; color: #1d3644; text-shadow: 2px 2px 50px #444; letter-spacing: 3px; } .about-1 h5 { color: #a7a9ac; font-family: 'font2'; font-weight: 600; letter-spacing: 1.5px; line-height: 40px; font-size: 20px; text-shadow: 2px 2px 35px #444; } .about-1 hr { background: #1d3644; } .about-1 p { font-family: 'font2'; color: #444; font-size: 17px; line-height: 35px; text-shadow: 2px 2px 25px #444; margin-right: 100px; font-weight: 600; } .about-1 .margy1 img { max-width: 10%; } .about-1 .margy1 { margin-top: -130px; left: -53%; position: relative; } .about-1 li { color: #1d3644; line-height: 40px; font-size: 20px; font-family: Arial; } .parallax4 { background: radial-gradient(circle, rgba(255,255,255,0.4990371148459384) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 82%, rgb(255 255 255 / 50%) 100%), url(/img/broker-6.jpg); min-height: auto; background-attachment: fixed; background-position: bottom; overflow: hidden; padding: 150px; color: #fff; box-shadow: 1px 1px 10px 3px #1d3644; background-repeat: no-repeat; background-size: cover; } /**** Services Section ****/ .service-intro { background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/logistical-1.jpg) bottom no-repeat; background-size: 100%; text-align: center; background-position: center; padding: 400px 50px 350px 50px; } .service-intro h1 { font-family: Arial; font-size: 50px; font-weight: 600; color: #fff; text-shadow: 2px 2px 1px #1d3644; } .service-intro p { font-size: 16px; font-family: font2; line-height: 35px; font-weight: 600; } .service-split { background: #f5f5f5; padding: 100px 0px 100px 0px; } .service-split h3 { font-family: Arial; font-weight: 600; font-size: 25px; } .service-split p { font-size: 16px; font-family: font2; line-height: 35px; font-weight: 600; } .service-split i { font-size: 50px; } .service-split .banner1 { padding: 25px; background: #1d3644; color: #f5f5f5; text-shadow: 1px 1px 1px #000; } .service-split .banner1 hr { background: #fff; height: 3px; } .service-split .banner2 { padding: 25px; background: #fff; color: #1d3644; } .service-split .banner2 hr { background: #1d3644; height: 3px; } .service-main { background: #f5f5f5; } .service-main .container-fluid { padding-right: var(--bs-gutter-x, 0rem); padding-left: var(--bs-gutter-x, 0rem); } .service-main .row { --bs-gutter-x: 0; } .service-main h2 { font-family: Arial; font-size: 35px; font-weight: 600; color: #1d3644; } .service-main p { font-size: 16px; font-family: font2; line-height: 35px; font-weight: 600; } .service-main .bawks1 { background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/trucking-1.jpg) bottom no-repeat; background-size: 100%; padding: 25px; height: 500px; } .service-main .bawks1 .rec1 { padding: 25px; background: #fff9; } .service-main .bawks2 { background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/broker-2.jpg) bottom no-repeat; background-size: 100%; padding: 25px; height: 500px; } .service-main .bawks2 .rec1 { padding: 25px; background: #fff9; } .service-main .bawks3 { background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/air-4.jpg) bottom no-repeat; background-size: 100%; padding: 25px; height: 500px; } .service-main .bawks3 .rec1 { padding: 25px; background: #fff9; } .service-main .bawks4 { background: linear-gradient(to right, #ffffff00, #ffffff00), url(/img/shipping-2.jpg) bottom no-repeat; background-size: 100%; padding: 25px; height: 500px; } .service-main .bawks4 .rec1 { padding: 25px; background: #fff9; } .logistics-services { padding: 50px 0; } .logistics-services .container-fluid{ display: flex; justify-content: center; align-items: center; } .logistics-services h1 { font-size: 3.5rem; color: black; position: relative; font-family: Arial; text-transform: uppercase; font-weight: 700; } .flip-card { background-color: transparent; width: 600px; height: 400px; perspective: 2000px; } .flip-card h3{ font-weight: 700; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); backface-visibility: hidden; -moz-backface-visibility: hidden; } .flip-card:focus { outline: 0; } .flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner{ transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; } .flip-card-front { /*background: linear-gradient(to left, #4364f7, #6fb1fc);*/ /*position: relative; */ background: white; color: black; z-index: 2; display: flex; justify-content: center; align-items: center; } .flip-card-front .overlay { /*background: linear-gradient(to left, #4364f7, #6fb1fc);*/ position: absolute; justify-content: center; align-items: center; display: flex; background: transparent; } .flip-card-front .overlay h3{ /*background: linear-gradient(to left, #4364f7, #6fb1fc);*/ bottom: 0; position: absolute; text-align: center; justify-content: center; align-items: center; display: flex; color: white; font-size: 2rem; } .flip-card-back { background: white; color: black; transform: rotateY(180deg); z-index: 1; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 15px; } .flip-card-front.bg-1{ /*background-image: url('/img/services/logistics-coordination.jpg');*/ background-image: url('/img/services/coordination-thumb-serv.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .flip-card-front.bg-2{ /*background-image: url('/img/services/database-management.jpg');*/ background-image: url('/img/services/database-serv.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .flip-card-front.bg-3{ /*background-image: url('/img/services/accounting-administration.jpg');*/ background-image: url('/img/services/accounting-serv.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .flip-card-front.bg-4{ /*background-image: url('/img/services/sales-and-marketing.jpg');*/ background-image: url('/img/services/sales-serv.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .flip-card-front.bg-5{ /*background-image: url('/img/services/it-administration.jpg');*/ background-image: url('/img/services/IT-serv.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .flip-card-front.bg-6{ /*background-image: url('/img/services/afterhours-support.jpg');*/ background-image: url('/img/services/afterhours-serv.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .logistics-services .service-box-vid { position: relative; padding: 0; box-shadow: 0px 3px 8px black; height: 500px; display: flex; border-radius: 20px; overflow: hidden; transition: 0.7s; } .logistics-services .service-box-vid.shadow-animate { box-shadow: 3px 10px 15px black; transform: scale(1.06); } /* .new-home6 .service-box-vid:hover { box-shadow: 3px 10px 15px black; transform: scale(1.06); } */ /* Thumbnail behaves like a background layer */ .logistics-services .service-box-vid .video-thumbnail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 0.5s ease-in-out; } /* Video layered above thumbnail but hidden at first */ .logistics-services .service-box-vid .background-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity 0.5s ease-in-out; } /* On hover: fade out thumbnail, fade in video */ .logistics-services .service-box-vid:hover .video-thumbnail { opacity: 0; } .logistics-services .service-box-vid:hover .background-video { opacity: 1; } .logistics-services .service-box-vid .video-overlay { position: relative; z-index: 3; padding: 50px 10px; background: rgba(0, 0, 0, 0.58); margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: white; } .logistics-services .service-box-vid .video-overlay h2 { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition: transform 0.7s ease, opacity 0.6s ease, visibility 0.6s ease; font-size: 2.5rem; color: white; font-weight: 700; } .logistics-services .service-box-vid .video-overlay p { opacity: 0; visibility: hidden; transform: translateY(20px); /* subtle downward offset */ transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; font-size: 1.5rem; color: white; font-weight: 700; } /* Text transitions on hover */ .logistics-services .service-box-vid:hover .video-overlay h2 { transform: translate(-50%, -250%); /* moves it upward off screen */ opacity: 0; visibility: hidden; } .logistics-services .service-box-vid:hover .video-overlay p { transform: translateY(0); /* slide into place */ opacity: 1; visibility: visible; } .logistics-services .service-box-vid .video-overlay h3 { opacity: 0; visibility: hidden; transform: translateY(20px); /* subtle downward offset */ transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; font-size: 1.5rem; color: white; font-weight: 700; } .logistics-services .service-box-vid:hover .video-overlay h3 { transform: translateY(0); /* slide into place */ opacity: 1; visibility: visible; } .logistics-contact{ position: relative; /*background-image: url('/img/services/contact-logistics-bg.jpg');*/ /*background-image: url('/img/services/contact-logistics-bg-mod.jpg');*/ /*background-image: url('/img/services/contact-logistics-bg-gpt.png');*/ background-image: url('/img/services/contact-logistics-bg-gptV2.png'); background-position: 50% 25%; background-size: cover; background-repeat: no-repeat; height: 115vh; } .logistics-contact .social-container{ padding:/*0 70px 25px*/ 0 30px 25px; } .logistics-contact h1.contact-header{ font-family: Arial; font-size: 3.2rem; text-transform: uppercase; color: white; font-weight: 400; text-align: center; } .logistics-contact h2.contact-header{ font-family: Arial; font-size: 3.2rem; text-transform: uppercase; color: white; font-weight: 400; text-align: center; } .logistics-contact a.social{ width: auto; display: inline-flex; } .logistics-contact .circle-social{ border-radius: 100%; padding: 20px; border: 3px solid white; color: white; font-size: 4rem; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 120px; height:120px; transition:all 0.5s ; margin: 0 -50px; } .logistics-contact .circle-social:hover{ background: white; color: #041330; } .logistics-contact .social-icons-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 30px 0; } .logistics-contact a.social { display: inline-flex; display: none; } .logistics-contact .circle-social { width: 140px; height: 140px; padding: 15px; border-radius: 50%; border: 3px solid white; color: white; font-size: 4rem; background: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin: auto; } .logistics-contact .circle-social:hover { background: white; color: #041330; } .logistics-contact .company-logo{ position:absolute; bottom:1%; left: 1%; } .logistics-contact .learn-how{ position:absolute; bottom:2%; right: 2%; } .logistics-contact .learn-how h2{ color: white; font-weight: 700; font-size: 2.5rem; } .logistics-contact .overlay{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff00; } /*.logistics-contact .overlay h2{*/ /* color: white;*/ /* font-weight: 700;*/ /* text-transform: uppercase; */ /*}*/ .logistics-contact .overlay h2.contact-point{ color: white; font-weight: 700; text-transform: uppercase; opacity: 0; transform: translateX(25%); transition: 2.5s; } .logistics-contact .overlay h2.contact-point.show{ /*color: white;*/ /*font-weight: 700;*/ /*text-transform: uppercase; */ transform: translateX(0%); opacity: 1; } .logistics-contact .overlay h3.contact-point{ color: white; font-weight: 700; text-transform: uppercase; opacity: 0; transform: translateX(25%); transition: 2.5s; } .logistics-contact .overlay h3.contact-point.show{ /*color: white;*/ /*font-weight: 700;*/ /*text-transform: uppercase; */ transform: translateX(0%); opacity: 1; } .logistics-contact h2.slogan-mobile{ /*color: white;*/ /*font-weight: 700;*/ /*text-transform: uppercase; */ display:none; } /**** Gallery Section ****/ .gallery-page { padding: 75px 0 50px 0; background: rgb(249,249,249); } .gallery-page h1 { font-size: 3rem; font-weight: 600; font-family: 'font2'; padding-bottom: 40px; text-align: center; color: rgb(129,141,148); } /**** Areas We Service Section ****/ .area:nth-child(odd) { padding: 75px 0 75px 0; background: rgb(255,255,255); } .area:nth-child(even) { padding: 75px 0 75px 0; background: rgb(245,245,245); } .area h2 { font-size: 2.5rem; font-family: font2; font-weight: 800; color: rgb(196,41,56); } .area h4 { font-size: 1.5rem; font-family: font2; color: rgb(75,75,75); } .area p { font-size: 17px; text-align: justify; color: rgb(12,12,12); } .area iframe { width: 100%; height: 100%; border-radius: 0.8rem; box-shadow: 1px 1px 10px 1px rgb(0,0,0); } /**** Contact Section ****/ .contact-1 { padding: 150px 250px 150px 250px; background: linear-gradient(0deg, #fff9 25%, #fff9 90%), url(/img/air-2.jpg) top right no-repeat; background-size: cover; } .contact-1 .container-fluid { background: #ffffffb5; padding: 50px; border: 15px solid #1d3644; } .contact-1 .bg1 { box-shadow: 1px 1px 10px 1px #1d3644; margin-top: -50px; background: #f5f5f5; } .contact-1 h1 { font-family: Arial; font-size: 45px;color: #1d3644; font-weight: 600; } .contact-1 h2 { font-family: Arial; font-size: 30px;color: #1d3644; } .contact-1 h3 { font-family: Arial; /*font-size: 20px;*/ color: #1d3644; font-weight: 700; } .contact-1 p { font-size: 17px; font-family: 'font2'; line-height: 35px; } .contact-1 li { font-size: 17px; line-height: 40px; font-family: font2; } .contact-1 li strong { font-family: Arial;font-size: 20px; color: #1d3644; } .contact-1 img { max-width: 35%; margin: -50px 10px 0px 10px; } .contact-1 marquee { color: #1d3644; } /**** Testimonials Section ****/ .testimonials { padding: 75px 0 75px 0; background: rgb(255,255,255); } /**** Sections On Every Page ****/ .career-section { background: linear-gradient(90deg, rgba(29,54,68,0.90) 0%, rgba(29,54,68,0.90) 100%); text-align: center; } .career-section .padder { padding: 75px 15px 75px 55px; } .career-section .caller { background: linear-gradient(to right, rgb(255 255 255 / 0%), rgb(255 255 255 / 0%)), url(/img/homepage/career-001.jpg) center no-repeat; background-size: cover; } .career-section h2.top { font-size: 3.5rem; font-family: Arial; font-weight: 800; color: rgb(12,12,12); padding: 25px 0px 50px 0px; color:white; } .career-section h2 { font-size: 2.7rem; font-family: Arial; font-weight: 800; color: rgb(12,12,12); padding: 25px 0px 50px 0px; color:white; } .career-section h3 { font-family: Arial; font-size: 35px; line-height: 50px; color:white; } .career-section h5 { padding: 25px; background: #1d3644; color: #fff; font-family: Arial; font-size: 20px; border-radius: 15px; text-align: center; width: 25%; color:white; } .career-section p { font-size: 16px; font-family: font2; line-height: 35px; font-weight: 600; color:white; } .career-section li p span{ text-decoration: underline; font-size: 1.2rem; } /**** Sections On Every Page ****/ .contact-section { background: #d9d9d9; text-align: center; } .contact-section .padder { padding: 75px 15px 125px 75px; } .contact-section .caller { background: linear-gradient(to right, rgb(255 255 255 / 0%), rgb(255 255 255 / 0%)), url(/img/call-1.jpg) bottom no-repeat; background-size: cover; } .contact-section h2 { font-size: 2.7rem; font-family: Arial; font-weight: 800; color: rgb(12,12,12); padding: 25px 0px 50px 0px; } .contact-section h3 { font-family: Arial; font-size: 35px; line-height: 50px; } .contact-section h5 { padding: 25px; background: #1d3644; color: #fff; font-family: Arial; font-size: 20px; border-radius: 15px; text-align: center; width: 25%; } .contact-section p { font-size: 16px; font-family: font2; line-height: 35px; font-weight: 600; } .modal { display: none; padding-top: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; width: 1500px; } .modal-dialog { max-width: 2000px; top: 0; margin: 1.75rem auto; } .nav-container .service-areas-btn{ color: white; background: #1d36447d; text-decoration: none; font-weight: 900; border: 3px solid #1d36447d; padding: 8px 16px; font-size:16px; } /* ========================================== */ /* === Misc. Section ======================== */ /* ========================================== */ /**** Referrals Owl Carousel ****/ .owl-carousel .owl-stage-outer { padding: 40px 0; } .owl-nav { position: absolute; width: 100%; top: 10%; display: none; } .owl-carousel .item { display: block; height: 100%; } .owl-carousel .owl-item span { font-size: 20px; font-weight: 500; } .owl-nav .owl-prev, .owl-nav .owl-next { position: absolute; } .owl-nav .owl-prev:hover, .owl-nav .owl-next:hover { background: transparent !important; color: #212121 !important; opacity: .5 !important; } .owl-nav .owl-next { left: 100%; } .owl-nav .owl-prev { right: 100%; } .owl-nav .owl-prev span, .owl-nav .owl-next span { font-size: 3em; display: block; } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { outline: none; } /**** Default Classes ****/ body { font-family: 'Montserrat', sans-serif; } body#barbajs { visibility: visible; } a, button, .btn { -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; } a { cursor:pointer; text-decoration: none !important; } a:hover { color: #252525; text-decoration: underline; } .btn { cursor: pointer; border-radius: 0; } .btn.alert-trigger { color: #fdfdfd; background-color:#333; } .btn:hover { opacity: 0.9; } .inner-content-section .btn { background:rgba(135,170,188); border-color: #949494; color: rgba(255,255,255,1); } .inner-content-section .btn:hover { background-color: rgba(135,170,188,0.4); color: #fff; } .btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {outline: none;box-shadow: none;background-color: #444;border-color: #949494;color: #fff;} .btn-primary:hover { border-color: #949494; } .btn.focus, .btn:focus { outline:none; box-shadow: none; } .section-divider { position: relative; padding: 50px 0; } .estimate-section-divider .alert, .estimate-section-divider .alert p { text-align: left; font-size: inherit; } .block-overlay { position: absolute; display: inline-block; background:rgba(0, 0, 0, 0.6); width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .fadeDiv { position: fixed; display: inline-block; z-index: 1050; color: #fff; background: #300e87; padding: 50px; top: 150px; bottom: 150px; left: 300px; right: 300px; transform:scale(0,0); box-shadow: 0px 0px 20px -1px #000; transition: all .20s cubic-bezier(0.65, 0.05, 0.36, 1); } .menu-scaler { position: fixed; display: inline-block; padding: 50px; z-index: 1050; top: 150px; bottom: 150px; left: 300px; right: 300px; transform: scale(1,1); } .fadeDiv .fadeDiv-close { position: absolute; right: 20px; top: 10px; font-weight: 900; font-size: 2em; font-family: 'Lato'; cursor: pointer; } .navbar-collapse ul { width: 100%; justify-content: center; align-items: center; } .overlay { height: 100%; width: 100%; background: #ffffffbf; } #myBtn { display: block; width: 50px; height: 50px; position: fixed; top: 100%; right: 30px; z-index: 99; border: none; outline: none; background-color: #000000; color: #ffffff; cursor: pointer; font-size: 14px; padding-top: 0; border-radius: 0px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } #myBtn i { color: white; } #myBtn:hover { background-color: #424242; color: #fff; } /**** Gallery Function Section ****/ #portfolio input { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; margin: 0; top: 0; left: -60px; z-index: 2; width: 60px; height: 60px; -webkit-appearance: none; background-image: url(/img/icons/close-btn-icon-red.png); background-repeat: no-repeat; background-color: transparent; background-size: contain; color: #ffffff; border: none; cursor: pointer; outline: none !important; -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; } #portfolio input:hover { background-color: #fff; opacity: .; } button.mfp-close, button.mfp-arrow { outline :none !important; } #portfolio { display: flex; padding: 0; overflow: hidden; flex-wrap: wrap; justify-content: center; } #portfolio li { display: flex; justify-content: center; align-items: center; float: left; position: relative; overflow: hidden; margin: 0 10px 20px; } #portfolio li a { transform: scale(1,1); display: block; width: 100%; height: 295px; width: 490px; overflow: hidden; -o-transition:all .30s ease; -moz-transition:all .30s ease; -webkit-transition:all .30s ease; transition:all .30s ease; } #portfolio li a:hover { transform: scale(1.1,1.1) !important; } #portfolio li a img { display: block; position: absolute; top: 0%; bottom: 0%; left: 0%; right: 0%; margin: auto; width: 100%; height: auto; transform: scale(1,1); } #portfolio li:hover .block-overlay { background-color: #000000cc; } #portfolio li:hover input { left: 0; } #portfolio .block-overlay { background: rgb(0,0,0,0.1); z-index: 1; -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; } .mfp-ready .mfp-figure { opacity: 0; margin-left: -100px; } .mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler { opacity: 0; margin-left: -100px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } .mfp-zoom-in.mfp-bg, .mfp-zoom-in .mfp-preloader { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-zoom-in.mfp-image-loaded .mfp-figure, .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler { opacity: 1; margin-left: 0; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { opacity: 0.8; } .mfp-zoom-in.mfp-removing .mfp-figure, .mfp-zoom-in.mfp-removing .mfp-iframe-holder .mfp-iframe-scaler { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); opacity: 0; margin-left: -100px; } .mfp-zoom-in.mfp-removing.mfp-bg, .mfp-zoom-in.mfp-removing .mfp-preloader { opacity: 0; margin-left: -20px; } .mfp-iframe-scaler { overflow: visible; /*so the close button is shown*/ } .mfp-zoom-out-cur { cursor: auto; } .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; } /**** Reviews Function ****/ .carousel-indicators li { position: relative; top: 51px; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; text-indent: -999px; background-color: rgb(191, 190, 190); } .carousel-indicators .active { background-color: #0f8029; } /* ========================================== */ /* === Footer Section ======================= */ /* ========================================== */ .footer-section .vms-link-wrapper img { width: 50%; } .footer-section .vms-link-wrapper a { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer-section { padding: 0 0 10px; background: #fff; font-size: 18px; font-weight: 400; border-top: 2px solid #1d3644; } .footer-section h3 { font-size: 1.3rem; color: rgb(30,30,30); font-weight: bold; } .footer-section p { font-size: 15px; font-family: 'font2'; } .footer-section p a { color: #000; } .footer-section a { font-size: 16px; color: #fff; } .footer-section .service-cities p { margin: 0 0 3px; } .footer-section .h-card { text-align: center; } .service-cities { margin-bottom: 1em; } .service-cities img { padding-bottom: 20px; } .service-cities h5 { line-height: 8px; } .service-cities h4 { font-size: 20px; font-family: 'font2'; font-weight: 600; text-decoration: underline; } .service-cities h3 { font-size: 20px; font-family: 'font2'; font-weight: 600; text-align: center;text-decoration: underline; } .bottom-footer { background: #1d3644; padding: 25px 0px 15px 0px; } .bottom-footer .vms-link-wrapper { position: relative; top: -10px; } .bottom-footer div[class*='col-']:nth-child(2) { display: flex; flex-direction: column; justify-content: center; align-items: center; } .bottom-footer div[class*='col-']:nth-child(3) { display: flex; justify-content: flex-end; font-size: 14px; } .bottom-footer div[class*='col-']:nth-child(3) a { display: flex; justify-content: center; align-items: center; border: 1px solid #fff; border-radius: 100px; height: 28px; width: 28px; margin: 0 4px; } .bottom-footer div[class*='col-']:nth-child(3) a:hover { background: #0a0a0a; text-decoration: none !important; color: #929292; } .trademark-disclaimer { padding: 10px 0; } .trademark-disclaimer p { font-size: 8px; text-align: center; } /* Target the navigation links specifically within the .row div inside the footer */ .footer-section .row a.nav-link { display: inline-block; width: auto; color: white; background: #1d36447d; text-decoration: none; font-weight: 900; border: 3px solid #1d36447d; /* font-size: 16px; */ } .footer-section .row a.nav-link:hover { display: inline-block; width: auto; color: black;; background: white; /* font-size: 16px; */ } .nav-container{ background: transparent; } .nav-container *{ color:white; color: #142630; font-family: 'font2'; } .nav-container a.nav-link{ color:white; color: #142630; font-family: 'font2'; } /* === Lg. Laptop CSS Section ================= */ @media screen and (max-width : 1500px) and (min-width: 992px) { /*** Don't place anything here, unless absolutely necessary ***/ .home-background-video { margin-bottom: 377px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; overflow: hidden; object-fit: inherit; /* height: 1350px; */ /* height: auto; */ /* position: relative; */ /* width: 100%; */ /* height: 100vh; */ /* overflow: hidden; */ background: url('/img/homepage/hvac-parallax.jpg') no-repeat center center; /* background-size: cover; */ } } /* === Lg. Laptop CSS Section ================= */ @media screen and (max-width : 1570px) { /*** Don't place anything here, unless absolutely necessary ***/ .logistics-contact .overlay h2.contact-point { color: white; font-weight: 700; text-transform: uppercase; opacity: 0; transform: translateX(25%); transition: 2.5s; font-size:1.52rem; } .logistics-contact .circle-social { width: 80px; height: 80px; padding: 15px; border-radius: 50%; border: 3px solid white; color: white; font-size: 2rem; background: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin: auto; } .benefit-info .service-option { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 3px solid black; height: 300px; margin: 0 0px; border-radius: 20px; overflow: hidden; transition: transform 0.5s ease, border-radius 0.5s ease; will-change: transform; } .benefit-info .service-option::after { content: ''; display: none; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-100%) rotate(45deg); pointer-events: none; transition: transform 2s ease; } .benefit-info h2 { font-family: Arial; font-size: 1.3rem; text-align: center; letter-spacing: 2px; font-weight: 600; } } /* === Sm. Laptop CSS Section ================= */ @media screen and (max-width: 1200px) { .showcase-service { position: relative; /* height: 120vh; */ height: 68vh; display: flex; } } /* === Tablet CSS Section ===================== */ @media screen and (max-width: 991px) { .pest-expandable-button { position: fixed; bottom: 20px; right: 0px; width: 225px; background-color: #f9f9f9; color: #000; border-radius: 30px; overflow: hidden; z-index: 999; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .pest-expandable-button.opened { width: auto; border-radius: 20px; } /**** Top Header Section ****/ .mobile-top-header { display:block !important; padding: 0 30px 0; background: rgb(135,170,188); z-index: 5; overflow: visible; } .mobile-menu { text-align: center; position: fixed; height: 100%; width: 100%; display: block; padding-top: 6em; top: 100%; border: 0; background: #232323; border-radius: 0; z-index: 1100; overflow: auto; -webkit-transition-property: all; -webkit-transition-duration: .30s; -webkit-transition-timing-function: ease-in-out; transition-property: all; transition-duration: .30s; transition-timing-function: ease-in-out; } .mobile-menu .nav-link { font-size: 2em; color: #c5c5c5 !important; } .mobile-menu-custom-show { top: 0%; } .mobile-menu-top-hero { background-size: cover; padding: 40px 0 0; top:0; left:0; width: 100%; text-align: center; } .mobile-menu-top-hero h2 { padding: 0 25px; } #mobile-menu-header { margin-top: 0; background: #ffffff00; box-shadow: none; } #mobile-menu-header ul { list-style: none; padding: 0 20px; margin-top: 8em; position: relative; width: inherit; } #mobile-menu-header ul li a { color:#ffffff; padding: 20px 20px; } .header-contact_info a { color: rgb(255,255,255); margin: 0; } .top-header a, .top-header i, .top-header p { color: rgb(0,0,0); } .top-header-animate a, .top-header-animate i, .top-header-animate p { color: rgb(0,0,0); } .top-header { background: white; display: none; } .header-contact_info { font-size: 1.5em; } .navbar-scroll { display: none; } .header-contact_info .navbar-brand { font-size: 1.3em; } .top-header div[class*='col-']:first-child { justify-content: flex-start; } .top-header div[class*='col-'] { display: flex; justify-content: left; width: 33.333%; padding: 15px 0; } .top-header div[class*='col-']:nth-child(3) { display: flex; justify-content: flex-end; width: 33.333%; padding: 15px 0; } .top-header div[class*='col-']:nth-child(2) { background: none; margin: 0; display: flex; justify-content: center; align-items: center; } .top-header div[class*='col-']:nth-child(1) a { font-size: 1.5em; } .top-header div[class*='col-']:nth-child(2) p { font-size: inherit; line-height: inherit; } /**** Navigation Section ****/ .dropdown-wrapper { margin: 0; padding: 0; } .navbar-sidebar .dropdown-menu-mobile { position: relative; display: none; top: 0; left: 0; z-index: 1000; float: left; height: 0px; margin: 0; width: 100%; padding: 0; font-size: 18px; color: #e6e6e6 !important; text-align: left; list-style: none; background-color: rgb(200,200,200); border: 0; visibility: hidden; border-radius: 0; transform: scale(1,0); -webkit-transition: all .30s ease; -moz-transition: all .30s ease; -o-transition: all .30s ease; transition: all .30s ease; } .dropdown-menu-animate { display: inline-block !important; transform: scale(1,1) !important; padding: 25px 0 !important; height: auto !important; visibility: visible !important; } .navbar-sidebar .dropdown-menu-mobile a { color: rgb(75,75,75); font-weight:600 !important; font-size: 1.3em; font-family: 'Raleway'; text-align: center; } .navbar-sidebar { padding-top: 115px; height: 100%; width: 200px; background-color: rgb(250,250,250); position: fixed !important; z-index: 4; overflow: auto; } .bar-block .dropdown-hover, .bar-block .dropdown-click { width: 100%; } .bar-block .dropdown-hover .dropdown-content, .bar-block .dropdown-click .dropdown-content { min-width: 100%; } .bar-block .dropdown-hover .button, .bar-block .dropdown-click .button { width: 100%; text-align: left; padding: 8px 16px; } .main, #main { transition: margin-left .4s; } .modal { display: none; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; width: auto; } .modal-dialog { max-width: 1600px; top: 40px; margin: 1.75rem auto; } .bar { width: 100%; overflow: hidden; } .center .bar { display: inline-block; width: auto; } .bar .bar-item { padding: 8px 16px; float: left; width: auto; border: none; display: block; outline: 0; } .bar .dropdown-hover, .bar .dropdown-click { position: static; float: left; } .bar .button { white-space: normal; } .bar-block .bar-item { width: 100%; display: block; padding: 8px 16px; text-align: left; border: none; white-space: normal; float: none; outline: 0; font-family: Arial; text-transform: uppercase; color: black; } .bar-block.center .bar-item { text-align: center; } .block { display: block; width: 100%; } /**** Home Section ****/ .home-header-section { padding-top: 125px; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: .5rem 0; margin: .125rem 0 0; font-size: 1rem; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(87, 86, 87); background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; } .dropdown-item { display: block; width: 100%; padding: .25rem 1.5rem; clear: both; color: rgb(255,255,255); text-align: inherit; white-space: nowrap; background: 0 0; border: 0; } .dropdown-item.active, .dropdown-item:active { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(22,22,22) !important; } .showcase { position: relative; /* height: 120vh; */ height: 46vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .new-home6 { background: rgb(255,255,255); padding: 40px 0 40px 0; } .new-home6 .box { padding: 25px 25px 0 25px; } .new-home6 h1 { font-size: 2.5rem; color: black;; position: relative; font-family: Arial; text-transform: uppercase; font-weight: 700; } .new-home6 h2 { text-align: center; color: #6E7880; font-size:1.7rem; font-family: Arial; text-transform: uppercase; font-weight: 700; margin-top: 0; } .new-home6 h3 { font-family: Arial; text-align: center; color: #6E7880; font-size: 25px; } .new-home6 h4 { font-family: Arial; font-size: 2.5rem; text-align: center; font-weight: 700; color: #142630; } .new-home6 h5 { font-size: 17px; color: rgb(100,100,100); text-align: center; line-height: 27px; padding-bottom: 40px; } .new-home6 p { font-size: 0.8rem; text-align: center; color: rgb(100,100,100); } .new-home6 a { font-weight: 600; color: #142630; font-size:1.2rem; font-family: Arial } .new-home6 a:hover { color: rgb(217,214,199); } h2.gradient { text-align: center; font-family: Arial; /* font-size: 3rem; */ font-size: 2rem; font-weight: 700; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; padding-bottom: 100px; opacity: 0; transform: translateX(20%); transition: 1.4s; } h4.gradient{ text-align: center; font-family: Arial; font-size: 3rem; font-weight: 700; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; padding-bottom: 100px; opacity:0; transform: translateX(20%); transition:1.4s; } h4.gradient.show{ transform: translateX(0%); opacity:1; } @keyframes gradientAnimation{ 0%{ background-position: 200% 50%; } 100%{ background-position: 0% 50%; } } .new-home6 .service-box{ padding: 20px; box-shadow: 3px 3px 10px black; height: 500px; display:flex; border-radius: 20px; } .new-home6 .service-bg{ } .new-home6 h2 { font-size: 2rem; color: white; position: relative; top: 5%; opacity: 1; visibility: visible; transition: top 0.4s, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } .new-home6 p { visibility: hidden; opacity: 0; color: white; transition: opacity 0.4s ease-in-out; padding: 0 15px; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } .new-home6 .service-box-vid { position: relative; padding: 0; box-shadow: 0px 3px 8px black; height: 500px; display: flex; border-radius: 20px; overflow: hidden; transition: 0.7s; } .new-home6 .service-box-vid.shadow-animate { box-shadow: 3px 10px 15px black; transform: scale(1.06); } /* .new-home6 .service-box-vid:hover { box-shadow: 3px 10px 15px black; transform: scale(1.06); } */ /* Thumbnail behaves like a background layer */ .new-home6 .service-box-vid .video-thumbnail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 0.5s ease-in-out; } /* Video layered above thumbnail but hidden at first */ .new-home6 .service-box-vid .background-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity 0.5s ease-in-out; } /* On hover: fade out thumbnail, fade in video */ .new-home6 .service-box-vid:hover .video-thumbnail { opacity: 0; } .new-home6 .service-box-vid:hover .background-video { opacity: 1; } .new-home6 .service-box-vid .video-overlay { position: absolute; z-index: 3; padding: 50px 10px; background: rgba(0, 0, 0, 0.58); margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: white; top: 50%; left: 50%; transform: translate(-50%, -50%); } .new-home6 .service-box-vid .video-overlay h2 { font-size: 2rem; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition: top 1s, opacity 1s ease-in-out, visibility 1s ease-in-out; } /* Text transitions on hover */ .new-home6 .service-box-vid:hover .video-overlay h2 { top: -50%; opacity: 0; visibility: hidden; } .new-home6 .service-box-vid:hover .video-overlay p { opacity: 1; visibility: visible; } .expertise .boxer2 { padding: 125px 0 125px 0; text-align: center; background-position: bottom; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; color: white; position: relative; transition: 0.5s; overflow: hidden; /* margin: 10px; */ } .expertise .boxer2:hover { /* background: white; */ /* transform: translateY(-10%); */ height: 500px; box-shadow: 0px 3px 10px black; transform: translateY(-12px); } .expertise .boxer2:hover h3 { transform: translateY(-250%); } .benefit-info { padding: 100px 10px 100px 10px; } .benefit-info h2 { font-family: Arial; font-size:1.25rem; text-align: center; letter-spacing: 2px; font-weight: 600; } .benefit-info .service-option .overlay { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: rgba(0,0,0,0.4); } .benefit-info .service-option::after { content: ''; display: none; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-100%) rotate(45deg); pointer-events: none; transition: transform 2s ease; } .benefit-info .service-option { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; /*background: white;*/ border: 3px solid black; height: 330px; margin: 20px 0; border-radius: 20px; overflow: hidden; transition: transform 0.5s ease, border-radius 0.5s ease; will-change: transform; } h3.gradient { text-align: center; font-family: Arial; /* font-size: 3.5rem; */ font-size: 2rem; background: linear-gradient( to right, #4F5A63, #2B2B2B, #007DBB, #00AEEF, #007DBB, #2B2B2B, #4F5A63 ); background-clip: text; background-size: 200%; color: transparent; animation: gradientAnimation 6s linear infinite; /* padding-bottom: 100px; */ opacity: 0; transform: translateX(20%); transition: 1.4s; } .showcase-service { position: relative; /* height: 120vh; */ height: 52vh; display: flex; } .logistics-services h1 { font-size: 2.5rem; color: black; position: relative; font-family: Arial; text-transform: uppercase; font-weight: 700; } .logistics-services .service-box-vid .video-overlay h2 { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition: transform 0.7s ease, opacity 0.6s ease, visibility 0.6s ease; font-size: 1.5rem; color: white; font-weight: 700; } .logistics-services .service-box-vid .video-overlay p { opacity: 0; visibility: hidden; transform: translateY(20px); transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; font-size: 1.15rem; color: white; font-weight: 700; } /**** About Section ****/ .logistics-contact { position: relative; /* background-image: url('/img/services/contact-logistics-bg.jpg'); */ /* background-image: url('/img/services/contact-logistics-bg-mod.jpg'); */ /* background-image: url('/img/services/contact-logistics-bg-gpt.png'); */ background-image: url('/img/services/contact-logistics-bg-gptV2.png'); background-position: 50% 25%; background-size: cover; background-repeat: no-repeat; height: 120vh; } .logistics-contact .overlay { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: auto; background: #ffffff00; text-align: center; } .logistics-contact .social-container { padding: 30px 10px 25px; } .logistics-contact .social-icons-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0; } .logistics-contact .circle-social { width: 80px; height: 80px; padding: 15px; border-radius: 50%; border: 3px solid white; color: white; font-size: 2rem; background: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin: auto; } .logistics-contact h2.slogan-mobile{ /*color: white;*/ /*font-weight: 700;*/ /*text-transform: uppercase; */ display:block; color: white; font-weight: 700; font-size: 2.15rem; } .logistics-contact .learn-how { position: absolute; bottom: 2%; right: 2%; display: none; } .logistics-contact a { font-size: 1rem; } .logistics-contact h2.contact-point { font-size: 1.3rem; } .mobile-contact-container{ margin-top: 40px; } /**** Services Section ****/ /**** Gallery Section ****/ .gallery-page { padding: 75px 0 50px 0; background: rgb(249,249,249); } .gallery-page h1 { font-size: 3rem; font-weight: 600; font-family: 'font2'; padding-bottom: 40px; text-align: center; color: rgb(129,141,148); } /**** Areas We Service Section ****/ .area:nth-child(odd) { padding: 75px 0 75px 0; background: rgb(255,255,255); } .area:nth-child(even) { padding: 75px 0 75px 0; background: rgb(245,245,245); } .area h2 { font-size: 2.5rem; font-family: font2; font-weight: 800; color: rgb(196,41,56); } .area h4 { font-size: 1.5rem; font-family: font2; color: rgb(75,75,75); } .area p { font-size: 17px; text-align: justify; color: rgb(12,12,12); } .area iframe { width: 100%; height: 100%; border-radius: 0.8rem; box-shadow: 1px 1px 10px 1px rgb(0,0,0); } /**** Testimonials Section ****/ .testimonials { padding: 30px 0 30px 0; background: rgb(255,255,255); } /**** Contact Section ****/ /**** Sections On Every Page ****/ .contact-section { padding: 50px 0 50px 0; } .contact-section h3 { font-size: 2rem; font-family: font2; font-weight: 800; text-align: center; color: rgb(12,12,12); } /**** Footer Section ****/ .footer-section { padding-top: 30px; text-align: center; } .footer-section img { max-width: 210px; padding-bottom: 25px; } .service-cities h4 { font-size: 24px; font-weight: 600; color: rgb(255,255,255); } .service-cities a { font-size: 18px; line-height: 10px; color: rgb(255,255,255); } /**** Misc. Section ****/ .btn { background: rgb(249,78,1); width: 50%; padding: 10px 0px; color: #ffffff; cursor: pointer; outline: none; border: none; } .alert h1, .alert p { top: 2em; opacity: 0; position:relative; } .alert h1 { margin-top: 0; color: #2b1663; } .custom-show { position: fixed; transform: scale(1,1); border: 0; background: white; border-radius: 0; z-index: 1100; overflow: inherit; -webkit-transition-property: all; -webkit-transition-duration: .30s; -webkit-transition-timing-function: ease-in-out; transition-property: all; transition-duration: .30s; transition-timing-function: ease-in-out; } .alert-dismissible .close { position: absolute; top: 0; right: 0; background: transparent; border: none; padding: 0.75rem 1.25rem; color: rgb(80,80,80); font-family: 'font2'; outline: none; z-index: 3; } .alert-dismissible .close span { font-size: 35px; } .lnr { display: inline-block; fill: currentColor; width: 1em; height: 1em; vertical-align: -0.2em; cursor: pointer; } } @media screen and (max-width: 690px) { .showcase { position: relative; /* height: 120vh; */ height: 22vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .showcase-service { position: relative; /* height: 120vh; */ height: 22vh; display: flex; } } @media screen and (max-width: 576px) { .logistics-contact { position: relative; /* background-image: url('/img/services/contact-logistics-bg.jpg'); */ /* background-image: url('/img/services/contact-logistics-bg-mod.jpg'); */ /* background-image: url('/img/services/contact-logistics-bg-gpt.png'); */ background-image: url('/img/services/contact-logistics-bg-gptV2.png'); background-position: 50% 25%; background-size: cover; background-repeat: no-repeat; /*height: 175vh;*/ height: 100vh; } } /* === Mobile CSS Section ===================== */ @media screen and (max-width: 425px) { } /* === Sm. Mobile CSS Section ================= */ @media screen and (max-width: 375px) { }