/*==================================================
        Ram Cargo Packers And Movers Noida
        style.css (Part 1)
==================================================*/

:root {
  --primary: #e31e24;
  --secondary: #e31e24;
  --dark: #1d3557;
  --light: #f8f9fa;
  --white: #ffffff;
  --text: #555555;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  transition: 0.3s;
}

section {
  padding: 80px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
  font-weight: 700;
}

p {
  color: #666;
  font-size: 15px;
}

.bg-primary {
  background: var(--primary) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.btn {
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  transition: 0.35s;
}

.btn-warning {
  background: var(--secondary);
  border: none;
  color: #fff;
}

.btn-warning:hover {
  background: #e86f00;
  color: #fff;
  transform: translateY(-3px);
}

.btn-success:hover {
  transform: translateY(-3px);
}

/*============================
        TOP BAR
============================*/

.top-bar {
  font-size: 14px;
}

.top-bar a {
  color: #fff;
}

.top-bar i {
  margin-right: 5px;
}

/*============================
        NAVBAR
============================*/

.navbar {
  transition: 0.4s;
  padding: 15px 0;
  background: #fff;
}

.navbar-brand {
  font-size: 30px;
  font-weight: 800;
  color: var(--primary) !important;
}

.navbar-nav .nav-link {
  color: #222;
  margin-left: 18px;
  font-weight: 500;
  position: relative;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: 0.3s;
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}

.navbar-nav .nav-link:hover {
  color: var(--primary);
}

.sticky-top {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/*============================
        HERO SECTION
============================*/

.hero {
  min-height: 700px;

  display: flex;

  align-items: center;

  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("../banner.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;
}

.hero h1 {
  color: #fff;

  font-size: 58px;

  font-weight: 800;

  line-height: 1.2;
}

.hero p {
  color: #f2f2f2;

  font-size: 18px;
}

.hero .badge {
  font-size: 15px;

  padding: 10px 18px;

  border-radius: 30px;
}

/*============================
        HERO BUTTONS
============================*/

.hero .btn {
  margin-top: 15px;
}

.hero .btn i {
  margin-right: 8px;
}

/*============================
        QUOTE FORM
============================*/

.quote-box {
  background: #fff;

  border-radius: 15px;

  padding: 35px;

  box-shadow: var(--shadow);
}

.quote-box h3 {
  text-align: center;

  margin-bottom: 25px;
}

.quote-box .form-control {
  height: 55px;

  border-radius: 10px;

  border: 1px solid #ddd;

  margin-bottom: 18px;
}

.quote-box .form-control:focus {
  box-shadow: none;

  border-color: var(--primary);
}

.quote-box button {
  height: 55px;

  border-radius: 10px;

  font-size: 17px;
}

/*============================
        ABOUT
============================*/

#about img {
  border-radius: 15px;

  box-shadow: var(--shadow);
}

#about h6 {
  color: var(--secondary);

  letter-spacing: 2px;
}

#about h2 {
  font-size: 40px;

  margin-bottom: 20px;
}

#about p {
  margin-bottom: 15px;
}

#about h3 {
  font-size: 36px;

  color: var(--primary);
}

/*============================
        SERVICES
============================*/

#services {
  background: #f7f9fc;
}

#services .card {
  border: none;

  border-radius: 15px;

  overflow: hidden;

  transition: 0.35s;

  box-shadow: var(--shadow);
}

#services .card:hover {
  transform: translateY(-12px);
}

#services .card-body {
  padding: 35px;
}

#services i {
  color: var(--primary);

  margin-bottom: 20px;
}

#services h4 {
  margin-bottom: 15px;
}

#services p {
  margin-bottom: 0;
}

/*============================
        SECTION TITLE
============================*/

.section-title {
  margin-bottom: 50px;
}

.section-title h6 {
  color: var(--secondary);

  text-transform: uppercase;

  letter-spacing: 2px;
}

.section-title h2 {
  font-size: 42px;
}

/*============================
        CARD HOVER
============================*/

.card {
  transition: 0.35s;
}

.card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/*============================
        ICON BOX
============================*/

.icon-box {
  width: 80px;

  height: 80px;

  background: #eef5ff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: auto;
}

.icon-box i {
  font-size: 35px;

  color: var(--primary);
}

/*============================
        GENERAL SPACING
============================*/

.mb-30 {
  margin-bottom: 30px;
}

.mt-30 {
  margin-top: 30px;
}

.py-80 {
  padding: 80px 0;
}

/*============================
        ANIMATION
============================*/

.fade-up {
  animation: fadeUp 0.8s ease;
}

@keyframes fadeUp {
  from {
    transform: translateY(40px);

    opacity: 0;
  }

  to {
    transform: translateY(0);

    opacity: 1;
  }
}

/*============================
        SCROLLBAR
============================*/

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary);

  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: #eee;
}

/*=========================================
        WHY CHOOSE US
=========================================*/

.choose-box {
  background: #fff;
  padding: 35px 25px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
  height: 100%;
}

.choose-box:hover {
  transform: translateY(-10px);
}

.choose-box i {
  color: var(--primary);
  margin-bottom: 20px;
}

.choose-box h5 {
  margin-bottom: 15px;
  font-weight: 700;
}

.choose-box p {
  margin-bottom: 0;
}

/*=========================================
            COUNTER
=========================================*/

.counter-section {
  background: linear-gradient(135deg, #e31e24, #084298);
}

.counter-section h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 800;
}

.counter-section p {
  color: #fff;
  font-size: 17px;
  margin-bottom: 0;
}

/*=========================================
            PROCESS
=========================================*/

.process-box {
  position: relative;
  padding: 35px 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  height: 100%;
}

.process-box:hover {
  transform: translateY(-8px);
}

.process-box i {
  color: var(--secondary);
  margin-bottom: 20px;
}

.process-number {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*=========================================
        TESTIMONIAL
=========================================*/
.google-review{

    background:#fff;

    border-radius:15px;

    padding:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    height:100%;

}

.review-top{

    display:flex;

    align-items:center;

    margin-bottom:15px;

}

.review-top img{

    width:55px;

    height:55px;

    border-radius:50%;

    margin-right:15px;

}

.review-top h5{

    margin:0;

    font-size:18px;

}

.review-top small{

    color:#777;

}

.google-logo{

    margin-left:auto;

    width:24px!important;

    height:24px!important;

    border-radius:0!important;

}

.stars{

    color:#FBBC04;

    font-size:20px;

    margin-bottom:15px;

}

.google-review p{

    color:#555;

    line-height:28px;

}

.reviewSwiper{

    padding-bottom:50px;

}

.swiper-pagination-bullet-active{

    background:#e31e24;

}
/*=========================================
            FAQ
=========================================*/

.accordion-item {
  border: none;
  margin-bottom: 15px;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.accordion-button {
  font-weight: 600;
  padding: 18px;
}

.accordion-button:not(.collapsed) {
  background: #e31e24;
  color: #fff;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-body {
  font-size: 15px;
  color: #666;
}

/*=========================
        CONTACT
==========================*/

.contact-section{

    background:#f8fafc;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.info-box{

    background:#fff;

    border-radius:15px;

    padding:22px;

    display:flex;

    gap:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.info-box:hover{

    transform:translateY(-6px);

}

.info-box .icon{

    width:65px;

    height:65px;

    background:#e31e24;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

}

.info-box h5{

    margin-bottom:8px;

    font-weight:700;

}

.info-box p{

    margin:0;

    color:#666;

}

.info-box a{

    color:#333;

    text-decoration:none;

}

.contact-form-box{

    background:#fff;

    padding:35px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.contact-form-box .form-control{

    height:55px;

    border-radius:10px;

}

.contact-form-box textarea{

    height:140px !important;

    resize:none;

}

.map-box{

    overflow:hidden;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.map-box iframe{

    width:100%;

    height:420px;

    border:0;

}

@media(max-width:768px){

.contact-form-box{

padding:25px;

}

.info-box{

flex-direction:column;

text-align:center;

}

.info-box .icon{

margin:auto;

}

}
/*=========================================
        GOOGLE MAP
=========================================*/

.map iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 15px;
}

/*=============================
        FOOTER
==============================*/

.footer{

    background:#0f172a;

    color:#cbd5e1;

    padding:70px 0 0;

}

.footer-logo{

    color:#fff;

    font-size:30px;

    font-weight:700;

    margin-bottom:20px;

}

.footer p{

    color:#cbd5e1;

    line-height:28px;

}

.footer h4{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;

    position:relative;

}

.footer h4::after{

    content:"";

    width:60px;

    height:3px;

    background:#e31e24;

    position:absolute;

    left:0;

    bottom:-10px;

}

.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer ul li{

    margin-bottom:14px;

}

.footer ul li a{

    color:#cbd5e1;

    transition:.3s;

    text-decoration:none;

}

.footer ul li a:hover{

    color:#e31e24;

    padding-left:8px;

}

.footer-contact p{

    display:flex;

    align-items:flex-start;

    margin-bottom:18px;

}

.footer-contact i{

    color:#e31e24;

    width:30px;

    margin-top:5px;

}

.footer-contact a{

    color:#cbd5e1;

    text-decoration:none;

}

.footer-contact a:hover{

    color:#fff;

}

.footer-social{

    margin-top:25px;

}

.footer-social a{

    width:45px;

    height:45px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#1e293b;

    color:#fff;

    margin-right:10px;

    transition:.3s;

}

.footer-social a:hover{

    background:#e31e24;

    transform:translateY(-5px);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    margin-top:50px;

    padding:20px 0;

    color:#94a3b8;

    font-size:15px;

}

.footer-bottom a{

    color:#e31e24;

    text-decoration:none;

    font-weight:600;

}

.footer-bottom a:hover{

    color:#fff;

}

/*==========================
    Responsive
===========================*/

@media(max-width:991px){

.footer{

text-align:center;

}

.footer h4::after{

left:50%;

transform:translateX(-50%);

}

.footer-contact p{

justify-content:center;

text-align:left;

}

.footer-social{

justify-content:center;

display:flex;

}

}

@media(max-width:576px){

.footer{

padding-top:50px;

}

.footer-logo{

font-size:24px;

}

.footer h4{

font-size:20px;

}

.footer-bottom{

font-size:14px;

}

}
/*=========================================
    COPYRIGHT
=========================================*/

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
}

/*=========================================
    FLOATING BUTTONS
=========================================*/

.call-btn,
.whatsapp-btn {
  position: fixed;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  right: 20px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  font-size: 26px;

  z-index: 999;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.call-btn {
  bottom: 95px;

  background: #e31e24;
}

.whatsapp-btn {
  bottom: 20px;

  background: #25d366;
}

.call-btn:hover,
.whatsapp-btn:hover {
  color: #fff;

  transform: scale(1.08);
}

@media(max-width:991px){

/* Hide Desktop Floating Buttons */

.call-btn,
.whatsapp-btn{

display:none !important;

}

/* Move Back To Top Above Bottom Menu */

#backToTop{
display: none;
}

/* Prevent Footer Hidden */


body{

padding-bottom:80px;

}

}
/*=========================================
        BACK TO TOP BUTTON
=========================================*/

#backToTop {
  position: fixed;
  left: 20px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

#backToTop:hover {
  transform: translateY(-5px);
}

/*=========================================
        IMAGE HOVER EFFECT
=========================================*/

.img-hover {
  overflow: hidden;
  border-radius: 15px;
}

.img-hover img {
  transition: 0.5s;
}

.img-hover:hover img {
  transform: scale(1.08);
}

/*=========================================
        SECTION TITLE
=========================================*/

.section-title {
  margin-bottom: 60px;
}

.section-title h6 {
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

.section-title h2 {
  font-size: 42px;
  font-weight: 800;
}

.section-title p {
  max-width: 700px;
  margin: auto;
}

/*=========================================
        SHADOW UTILITIES
=========================================*/

.shadow-lg-custom {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.radius-15 {
  border-radius: 15px;
}

.radius-20 {
  border-radius: 20px;
}

/*=========================================
        ANIMATION
=========================================*/

.fadeInUp {
  animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;

    transform: translateY(50px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

.zoomIn {
  animation: zoomIn 0.6s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);

    opacity: 0;
  }

  to {
    transform: scale(1);

    opacity: 1;
  }
}

/*=========================================
        HOVER EFFECTS
=========================================*/

.card,
.choose-box,
.process-box,
.testimonial-card {
  transition: 0.35s;
}

.card:hover,
.choose-box:hover,
.process-box:hover,
.testimonial-card:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/*=========================================
        FORM
=========================================*/

.form-control {
  border: 1px solid #ddd;

  padding: 12px 18px;
}

.form-control:focus {
  border-color: var(--primary);

  box-shadow: none;
}

textarea.form-control {
  min-height: 150px;
}

/*=========================================
        BUTTON EFFECT
=========================================*/

.btn {
  transition: 0.35s;
}

.btn:hover {
  transform: translateY(-3px);
}

/*=========================================
        MOBILE RESPONSIVE
=========================================*/

@media (max-width: 1200px) {
  .hero h1 {
    font-size: 48px;
  }

  .section-title h2 {
    font-size: 38px;
  }
}

@media (max-width: 992px) {
  .top-bar {
    display: none;
  }

  .navbar {
    padding: 12px 0;
  }

  .hero {
    padding: 80px 0;

    min-height: auto;

    text-align: center;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero p {
    font-size: 16px;
  }

  .quote-box {
    margin-top: 40px;
  }

  #about {
    text-align: center;
  }

  #about img {
    margin-bottom: 30px;
  }

  .section-title h2 {
    font-size: 34px;
  }

  .counter-section h2 {
    font-size: 38px;

    margin-top: 20px;
  }

  footer {
    text-align: center;
  }

  .footer-social {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  section {
    padding: 60px 0;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero p {
    font-size: 15px;
  }

  .btn {
    padding: 10px 22px;
  }

  .quote-box {
    padding: 25px;
  }

  .section-title h2 {
    font-size: 30px;
  }

  .counter-section h2 {
    font-size: 32px;
  }

  .process-box {
    margin-bottom: 25px;
  }

  .call-btn,
  .whatsapp-btn {
    width: 55px;

    height: 55px;

    font-size: 22px;
  }
}

@media (max-width: 576px) {
  .hero {
    padding: 60px 0;
  }

  .hero h1 {
    font-size: 28px;

    line-height: 1.4;
  }

  .hero .btn {
    display: block;

    width: 100%;

    margin-bottom: 15px;
  }

  .navbar-brand {
    font-size: 24px;
  }

  .section-title h2 {
    font-size: 26px;
  }

  .counter-section h2 {
    font-size: 28px;
  }

  .quote-box {
    padding: 20px;
  }

  footer {
    padding: 50px 0 20px;
  }

  .call-btn {
    bottom: 90px;
  }

  .whatsapp-btn {
    bottom: 20px;
  }
}

/*=========================================
        EXTRA UTILITIES
=========================================*/

.text-justify {
  text-align: justify;
}

.rounded-15 {
  border-radius: 15px;
}

.rounded-20 {
  border-radius: 20px;
}

.bg-light-blue {
  background: #f4f8ff;
}

.text-orange {
  color: var(--secondary);
}

.border-none {
  border: none;
}

.object-cover {
  object-fit: cover;
}

.w-90 {
  width: 90%;
}

.transition {
  transition: 0.35s;
}

/*=========================================
        END OF CSS
=========================================*/
/*==================================
        MOBILE WEB APP MENU
===================================*/

.mobile-bottom-bar{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:70px;

    background:#ffffff;

    box-shadow:0 -5px 20px rgba(0,0,0,.12);

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:9999;

    border-top:1px solid #eee;

}

.mobile-bottom-bar a{

    flex:1;

    text-align:center;

    color:#444;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    transition:.3s;

}

.mobile-bottom-bar i{

    display:block;

    font-size:22px;

    margin-bottom:5px;

}

.mobile-bottom-bar a:hover{

    color:#e31e24;

}

.mobile-bottom-bar .whatsapp-btn-mobile{

    position:relative;

    top:-20px;

    width:65px;

    height:65px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.mobile-bottom-bar .whatsapp-btn-mobile i{

    font-size:28px;

    margin-bottom:2px;

}

.mobile-bottom-bar .whatsapp-btn-mobile span{

    font-size:11px;

}

.mobile-bottom-bar .whatsapp-btn-mobile:hover{

    color:#fff;

    transform:scale(1.08);

}

/* Hide on Desktop */

@media(min-width:992px){

.mobile-bottom-bar{

display:none;

}

}

/* Mobile spacing */

@media(max-width:991px){

body{

padding-bottom:80px;

}

}

/* ------------- */
.process-section{

    background:#fff;

}

.sub-title{

    color:#e31e24;

    font-weight:700;

    letter-spacing:2px;

}

.process-card{

    text-align:center;

    position:relative;

    transition:.3s;

}

.process-card:hover{

    transform:translateY(-10px);

}

.process-img{

    width:180px;

    height:180px;

    border-radius:50%;

    overflow:hidden;

    margin:auto;

    border:8px solid #f5f5f5;

    position:relative;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.process-img img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.process-img span{

    position:absolute;

    left:-12px;

    top:70px;

    width:48px;

    height:48px;

    background:#ff3d3d;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    border:4px solid #ffbcbc;

    z-index:2;

}

.process-card h4{

    margin-top:25px;

    font-size:22px;

    font-weight:700;

}

.process-card p{

    color:#666;

    margin-top:12px;

}

.counter-area{

    background:#e31e24;

    color:#fff;

    padding:60px 0;

}

.counter-area h2{

    font-size:55px;

    font-weight:800;

    color:#fff;

}

.counter-area p{

    color:#fff;

    font-size:20px;

    font-weight:600;

}

@media(max-width:768px){

.process-img{

width:150px;

height:150px;

}

.counter-area h2{

font-size:38px;

}

.counter-area p{

font-size:16px;

}

}

/* ------branches------- */
/*=============================
        BRANCHES
==============================*/

.branches-section{

    background:#f8fafc;

}

.branch-card{

    background:#fff;

    border-radius:15px;

    padding:30px;

    display:flex;

    gap:20px;

    align-items:flex-start;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.branch-card:hover{

    transform:translateY(-8px);

}

.branch-icon{

    min-width:75px;

    width:75px;

    height:75px;

    background:#e31e24;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.branch-content h4{

    margin-bottom:15px;

    font-weight:700;

}

.branch-content p{

    margin-bottom:12px;

    color:#555;

}

.branch-content i{

    color:#e31e24;

    width:22px;

}

.branch-content a{

    text-decoration:none;

    color:#333;

}

.branch-btn{

    margin-top:20px;

}

.branch-btn .btn{

    margin-right:10px;

    margin-bottom:10px;

    border-radius:30px;

    padding:10px 22px;

}

@media(max-width:768px){

.branch-card{

flex-direction:column;

text-align:center;

}

.branch-icon{

margin:auto;

}

.branch-btn{

display:flex;

justify-content:center;

flex-wrap:wrap;

}

}