@charset "UTF-8";

/*
Theme Name: jacksonville
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 7.0
Requires PHP: 5.6
Version: 2.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 */


@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1170px;
  }
}
@media (min-width: 1200px) {
  .h1, h1 {
    font-size: 2.3rem;
  }
    .h2, h2 {
    font-size: 2.3rem;
  }
}
html,
body{
    overflow-x:hidden;
}
a{text-decoration: none;}
img{max-width: 100%;}
.h1, h1 {
    font-weight: 600;
  }
  .bg-gray{background: #F8F8F8;}
  .logo-b-sec {
	background-position: center center !important;
	background-size: cover !important;
}
.bg-dark {
	
	background-color: #000000 !important;
}
 body {font-family: "Poppins", sans-serif;}

 .custom-logo {
	max-width: 230px;
	height: auto;
}
.fixed-top {
	padding: 15px 0;
}
.navbar-brand:focus, .navbar-brand:hover {
	color: #fff;
}
.navbar-brand {
	display: flex;
	color: #ffff;
	gap: 10px;
	align-items: end;
	font-weight: 600;
	line-height: 20px;
	font-size: 1.15rem;
}
.btn-custom {
	background: #3BADE9;
	border-color: #3BADE9;
	border-radius: 6px 6px 6px 6px;
	padding: 10px 20px;
	font-size: 1rem;
	font-weight: 600;
	transition-duration: .3s;
  transition-property: transform;
}
header .btn-custom:hover{transform: scale(.9);}
.btn-custom:hover {
	background: #fff;
	border-color: #3BADE9;
	color: #3BADE9;
	
}
.navbar{
	transition: all 0.3s ease;
}
.navbar.fixed {
	background: #fff;
	transition: all 0.3s ease;
}
.navbar.fixed .logo-text {
		color: #000000;
}
.logo-scroll {
	width: 230px; display: none;
}
.navbar.fixed .logo-scroll{display: block;}
.navbar.fixed .custom-logo-link{display: none;}
.slider-wrapper.hero-wrap {
	position: relative;
}
.owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	padding: 0 50px;
	margin-top: -12px;
}
.banner-txt-b{margin-top-1px;}
.home-slider .owl-nav button i{color: #fff;}
.owl-prev {
	position: absolute;
	left: 30px;
}
.owl-next {
	position: absolute;
	right: 30px;
}
.counter {
	position: absolute;
	bottom: 7%;
	right: 30px;
	color: #fff;
	z-index: 99;
	font-size: 14px;
}
.owl-nav span{color: #fff;}
.owl-nav span {
	color: #fff;
	font-size: 30px;
}
.banner-text span{color: #3BADE9;}



.e-hosted-video video {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
    border-radius: 6px 6px 6px 6px;
}

.video-wrapper{
    --video-aspect-ratio: 1.5;
    aspect-ratio: var(--video-aspect-ratio);
    overflow: hidden;
   
}

.map-row iframe{border-radius:16px; overflow: hidden;}
.logo-b-sec h3.display-3{font-weight: 600 !important;}
.truck-card {
	background: #fff;
	padding: 10px;
	box-shadow: 0px 9px 20px -7px rgba(0, 0, 0, 0.2);
    margin: 30px 0;
}
.service-section img {
	width: 100%;
	height: 428px;
	object-fit: cover;
	object-position: center center;
}
.feature h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 7px;
}
.call-section {
	background-size: cover !important;
	background-position: center center !important;
}
.call-section h3{font-size: 3.2rem;}
.call-section .btn-custom{background: #fff; color: #3BADE9; border-color: #fff;}
.call-section .btn-custom:hover, .about-section .btn-custom:hover{background: #000000; color: #3BADE9; border-color: #000000;}
.benefit-image img {
	height: 300px;
	object-fit: cover;
	width: 100%;
	border-radius: 16px;
	margin-bottom: 10px;
}
.benefit-content h3 {
	font-size: 20px;
	margin-top: 5px;
}
.benefit-content p{color: #C4C4C4;}
.form-control {
	background-color: #EFEFEF;
	border-color: #9A9A9A;
	border-radius: 6px 6px 6px 6px;
	min-height: 47px;
	padding: 6px 16px;
	font-size: 14px;
}
.form-control:focus {
	
	border-color: #9A9A9A;
	
	box-shadow: none;
}
.wpcf7-not-valid-tip {
	font-size: 12px;
}
.wpcf7-form .row{gap: 30px;}
.wpcf7-list-item {
	margin-left: 0;
}
.wpcf7-submit {
	background: #3BADE9;
	border: 1px solid #3BADE9;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	border-radius: 6px 6px 6px 6px;
	padding: 12px 36px 12px 36px;
	transition-duration: .3s;
  transition-property: transform;
}
.wpcf7-spinner {
	position: absolute;
}
.wpcf7-response-output {
	border: none !important;
	text-align: center;
	font-size: 14px;
	margin: 0 !important;

}
.wpcf7-submit:hover{
	background-color: #000000;
  	color: #ffffff;
	border-color: #000000;
	transform: scale(.9);
}
.form-control:focus {
	
	background-color: #EFEFEF;
	border-color: #9A9A9A;
	outline: 0;
	box-shadow: none;
}
textarea.form-control {
	height: 100px;
}
.contact-section .truck-card {
	margin: 0;
	padding: 0;
	max-width: 93%;
	margin: 0 auto;
}
.truck-img {
	position: relative;
}
.truck-img h3 {
	position: absolute;
	bottom: 0;
	padding: 26px;
	font-size: 2.75rem;
	font-weight: 600;
	line-height: 50px;
	color: #FFF;
	max-width: 570px;
}
.truck-img.truck-dark:before {
	content: "";
	display: block;
	overflow: hidden;
	clear: both;
	background: #000000;
	opacity: .6;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
}
.contact-section img {
	height: 370px;
}
.contact-text {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 24px;
}
.contact-text a {
	color: #000;
}
.contact-icon svg {
	width: 28px;
	height: 28px;
	margin-bottom: 10px;
}
.cont-list {
	margin-bottom: 30px;
}
.contact-text a:hover{color:#3BADE9;}

.owl-dots {
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 999;
	
}
.owl-dot {
  margin: 0 3px;
}
.owl-dot span {
	background: #fff;
	width: 8px;
	height: 8px;
	display: block;
	border-radius: 50%;
}
.owl-dot.active span {
	background: #3BADE9;
}
footer{background-color: #DEDEDE;}
.footer-logo {
	max-width: 340px;
}
footer a {
	color: #000;
}

.social-icons{
    display:flex;
    gap:20px;
}

.social-icons a{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    font-size:24px;
    text-decoration:none;
    transition:0.3s;
}

.social-icons a:hover, .footer-info a:hover{
    color:#3BADE9;
}
.footer-section .row {
	max-width: 80%;
	margin: 0 auto;
}

@media (max-width: 1199px) {
	p,body{font-size: 14px;}
	.custom-logo{
		width: 200px;
	}
	.navbar-brand {
		font-size: 1rem;
	}
	h1 {
		font-size: 1.75rem;
	}
	.content-box p {
		font-size: 14px;
	}
	.service-section .truck-card {
		margin: 0;
	}
	.btn-custom {
		padding: 9px 20px;
		font-size: 14px;
	}
	.content-box.ps-4 {
		padding-left: 10px !important;
	}
	.section-padding.py-5.my-4.about-section {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.logo-b-sec h3.display-3 {
		font-size: 40px;
	}
	.certified-logo{
		max-width: 220px;
	}
	.certified-right h2{
		font-size: 32px !important;
	}
	.logo-b-sec {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	.truck-content{
		padding-left: 40px !important;
		padding-right: 30px !important;
	}
	.feature P {
		font-size: 14px;
	}
	.truck-img h3 {
		padding: 26px;
		font-size: 30px;
		line-height: 40px;
	}
	.contact-section .truck-card {
		max-width: 100%;
	}
	.footer-section .row {
		max-width: 100%;
		margin: 0 auto;
	}
	.footer-logo {
		max-width: 280px;
	}
}
@media (max-width: 991px) {
	.about-section {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-bottom: 40px !important;
		padding-top: 40px !important;
	}
	.map-row {
		padding-top: 0 !important;
	}
	.feature h3 {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
	}
	.logo-b-sec h3.display-3 {
		font-size: 36px;
	}
	.benefit-image img {
		height: 240px;
	}
	.contact-text {
		font-size: 1rem;
		line-height: 26px;
	}
	.cont-list {
		margin-bottom: 18px;
	}
	.truck-img h3 {
		padding: 20px;
		font-size: 24px;
		line-height: 34px;
	}
	.footer-logo-s, .footer-right-s{text-align: left !important;}
	.footer-logo {
		max-width: 210px;
	}
}

@media(max-width:767px){
	.custom-logo {
		width: 140px;
	}
	.logo-text {
		width: auto;
		font-size: 12px;
		position: relative;
		top: 4px;
	}
	.navbar-brand {
	flex-wrap: wrap;
	padding: 0;
	gap: 0;
	max-width: 140px;
	margin-right: 0;
}
	.logo-scroll {
		width: 140px;
		
	}
	header .btn-custom {
		padding: 10px 13px;
		font-size: 12px;
		width: 126px;
	}
	.navbar .container {
	flex-wrap: inherit !important;
	padding-left: 30px;
	padding-right: 30px;
}
.hero-wrap .owl-item img {
	height: 100vh;
	object-fit: cover;
	object-position: center center;
}
.fixed-top {
	padding: 20px 0;
}
.banner-text {
	padding-left: 15px !important;
	padding-right: 15px !important;
}
.section-padding.py-5.my-4.about-section {
	padding-left: 15px;
	padding-right: 15px;
}
.content-box.ps-4 {
	padding-left: 0px !important;
	padding-top: 20px;
}
.logo-b-sec h3.display-3 {
	font-size: 24px;
}
.certified-right h2 {
	font-size: 18px !important;
}
.certified-logo {
	max-width: 130px;
}
.service-section {
	padding-left: 15px;
	padding-right: 15px;
}
.truck-content {
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-top: 20px;
}
.logo-b-sec {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	padding-left: 15px;
	padding-right: 15px;
}
.call-section .col-md-6.col-lg-6.text-end {
	text-align: left !important;
	padding-top: 20px;
}
.benefits-section, .service-section1 {
	padding-left: 15px;
	padding-right: 15px;
}
.section-title.mb-5 {
	margin-bottom: 20px !important;
}
.wpcf7-form {
	background: #fff;
	padding: 25px;
}
.wpcf7-form .row .col {
	width: 100% !important;
	display: flex;
	flex-wrap: wrap;
	flex: unset;
}
.wpcf7-form .row {
	gap: 0;
}
.contact-section img {
	height: 160px;
}
.truck-content {
	padding: 20px !important;
}
.service-section.contact-section {
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 30px !important;
}
.owl-dots {
	bottom: 6px;
}
.footer-title.mb-4 {
	margin-top: 30px;
	margin-bottom: 10px !important;
}
.footer-section.py-5 {
	padding-bottom: 30px !important;
}
}