:root {
 --primary: #0b1f3a;
 --secondary: #f58220;
 --light: #f6f8fb;
 --dark: #111827;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 1.6;
}
a {
	text-decoration: none;
}
/* TOP BAR */
        .topbar {
	background: var(--primary);
	color: #fff;
	padding: 8px 0;
	font-size: 14px;
}
.topbar a {
	color: #fff;
}
/* HEADER */
.main-header {
	background: #fff;
	padding: 14px 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
	position: relative;
	z-index: 1000;
}
.logo {
	display: flex;
	align-items: center;
	gap: 10px;
}
.logo img{ max-height:80px}
.f-logo img{ max-height:150px}
.logo-icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 25px;
}
.logo-text {
	font-size: 22px;
	font-weight: 800;
	color: var(--primary);
	line-height: 1.1;
}
.logo-text span {
	color: var(--secondary);
}
.navbar-nav .nav-link {
	color: var(--primary);
	font-weight: 600;
	padding: 10px 15px !important;
}
.navbar-nav .nav-link:hover {
	color: var(--secondary);
}
.phone-box {
	display: flex;
	align-items: center;
	gap: 10px;
}
.phone-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--secondary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.phone-box small {
	color: #777;
	display: block;
}
.phone-box a {
	color: var(--primary);
	font-size: 18px;
	font-weight: 700;
}
/* HERO */
.hero {	min-height: 570px; display: flex; align-items: center; position: relative; background: linear-gradient(rgba(7, 25, 48, .62), rgba(7, 25, 48, .72)),  url("../img/phoeniss-best-car-carrier-transportation-service-gurgaon.webp") center/cover no-repeat;}
.hero-content {
	max-width: 720px;
	color: #fff;
}
.hero-content .small-title {
	color: var(--secondary);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.hero h1 {
	font-size: 52px;
	line-height: 1.12;
	font-weight: 800;
	margin: 15px 0;
}
.hero h1 span {
	color: var(--secondary);
}
.hero p {
	font-size: 18px;
	max-width: 650px;
	margin-bottom: 30px;
}
.btn-primary-custom {
	background: var(--secondary);
	border: 2px solid var(--secondary);
	color: #fff;
	padding: 13px 27px;
	border-radius: 5px;
	font-weight: 700;
	display: inline-block;
	margin-right: 8px;
}
.btn-primary-custom:hover {
	background: #fff;
	color: var(--secondary);
}
.btn-outline-custom {
	border: 2px solid #fff;
	color: #fff;
	padding: 13px 27px;
	border-radius: 5px;
	font-weight: 700;
	display: inline-block;
}
.btn-outline-custom:hover {
	background: #fff;
	color: var(--primary);
}
/* QUOTE BOX */
.quote-box {background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); margin-top: -65px; position: relative; z-index: 10;}
.quote-box h3 {
	color: var(--primary);
	font-size: 24px;
	margin-bottom: 20px;
}
.form-control,  .form-select {
	height: 50px;
	border: 1px solid #ddd;
}
.quote-btn {
	width: 100%;
	height: 50px;
	border: 0;
	background: var(--secondary);
	color: #fff;
	font-weight: 700;
	border-radius: 5px;
}
/* SECTION */
        .section {
	padding: 80px 0;
}
.section-title {
	text-align: center;
	margin-bottom: 45px;
}
.section-title .subtitle {
	color: var(--secondary);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
}
.section-title h2 {
	color: var(--primary);
	font-size: 38px;
	font-weight: 800;
	margin-top: 8px;
}
.section-title p {
	color: #777;
	max-width: 700px;
	margin: 12px auto 0;
}
/* SERVICES */
        .service-card {
	background: #fff;
	border-radius: 8px;
	padding: 30px 25px;
	height: 100%;
	box-shadow: 0 5px 25px rgba(0, 0, 0, .07);
	border-bottom: 4px solid transparent;
 transition: .3s;
}
.service-card:hover {
	transform: translateY(-8px);
	border-bottom-color: var(--secondary);
}
.service-icon {
	width: 65px;
	height: 65px;
	border-radius: 8px;
	background: rgba(245, 130, 32, .12);
	color: var(--secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin-bottom: 20px;
}
.service-card h3 {
	color: var(--primary);
	font-size: 21px;
	font-weight: 700;
}
.service-card p {
	color: #777;
	margin-bottom: 0;
}
/* ABOUT */
.about-section {background: var(--light);}
.about-img {min-height: 450px; border-radius: 8px; background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)),  url("../img/car-relocation-logistics.webp") center/cover no-repeat;
}
.about-content {
	padding-left: 35px;
}
.about-content h2 {
	color: var(--primary);
	font-size: 38px;
	font-weight: 800;
}
.check-list {
	list-style: none;
	padding: 0;
	margin-top: 25px;
}
.check-list li {
	margin-bottom: 15px;
	font-weight: 600;
}
.check-list i {
	color: var(--secondary);
	margin-right: 10px;
}
/* COUNTERS */
.counter-section {background: linear-gradient(rgba(7, 25, 48, .62), rgba(7, 25, 48, .72)), url(../img/car-relocation-by-trucks.webp) center no-repeat fixed; color: #fff; padding: 55px 0;}
.counter-box {
	text-align: center;
}
.counter-box i {
	color: var(--secondary);
	font-size: 35px;
}
.counter-box h3 {
	font-size: 35px;
	margin: 5px 0;
	font-weight: 800;
}
/* PROCESS */
        .process-card {
	text-align: center;
	position: relative;
	padding: 15px;
}
.process-number {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--secondary);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	font-weight: 800;
}
.process-card h4 {
	color: var(--primary);
	font-weight: 700;
}
/* CTA */
        .cta-section {
	background:
 linear-gradient(rgba(11, 31, 58, .92), rgba(11, 31, 58, .92)),  url("images/cta-bg.jpg") center/cover;
	color: #fff;
	padding: 70px 0;
	text-align: center;
}
.cta-section h2 {
	font-size: 40px;
	font-weight: 800;
}
/* FOOTER */
        footer {
	background: #071525;
	color: #bfc7d1;
	padding-top: 60px;
}
footer h4 {
	color: #fff;
	margin-bottom: 20px;
}
footer a {
	color: #bfc7d1;
	display: block;
	margin-bottom: 9px;
}
footer a:hover {
	color: var(--secondary);
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 18px 0;
	margin-top: 45px;
	text-align: center;
}
/* FLOATING BUTTON */
        .floating-call {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	z-index: 9999;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
}

@media(max-width: 991px) {
.phone-box { display: none;}
.hero {background: linear-gradient(rgba(7, 25, 48, .62), rgba(7, 25, 48, .72)),  url("../img/gurgaon-car-carrier-services.webp") center/cover no-repeat;}

.hero h1 { font-size: 40px;}
.about-content { padding-left: 0; margin-top: 30px;}
}

@media(max-width: 767px) {
.hero {min-height: 550px; background: linear-gradient(rgba(7, 25, 48, .62), rgba(7, 25, 48, .72)),  url("../img/car-relocation-near-gurgaon.webp") center/cover no-repeat;}
 .hero h1 {
 font-size: 34px;
}
 .hero p {
 font-size: 16px;
}
 .section {
 padding: 55px 0;
}
 .section-title h2 {
 font-size: 30px;
}
.quote-box {margin-top: 30px;}
}