.html, body{
  height:100%;
  margin: 0;
}
.container{
  width:100%;
  max-width: 1200px;
}
.div-header{
  border-bottom:1px solid #f99341;
 
  padding:20px 0px;
}
.image-container2{
    margin-top: 40px;
}
.div-img img{ 
	display:block;
	margin-left:auto;
	margin-right:auto;	
  object-fit: cover;
  margin: auto;
}
.div-content4 {
  margin-bottom: 30px;
  /* Animation duration */
  --animate-duration: 1s;
  /* Animation delay */
  --animate-delay: 0.5s;
}

.div-content4 h4{
  font-family: "Futura Std Light";
      font-size: 23px;
}
.div-content4 p{
  font-family: "Futura Std Light";
      font-size: 18px;
}

.cntx1{
  padding: 0px;
}

/* forms code n */


        .contact-form {
            background: url(../images/rs-transport-contactban1.jpg) no-repeat;
           /* background-image: url(../images/rs-transport-contactban.jpg); */
           background-size: cover;
           padding-top: 45px;
           padding-bottom: 45px;
        }

        .form-title {
            font-size: 1.8rem;
            margin-bottom: 25px;
            color: #e31e25;
            text-align: center;
        }
      

        .form-group {
            margin-bottom: 25px;
            position: relative;
         
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .form-control {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

        .form-control:focus {
            outline: none;
            border-color: #1a6bb3;
            box-shadow: 0 0 0 3px rgba(26, 107, 179, 0.1);
        }

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

        .submit-btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: linear-gradient(45deg, #ffffff, #ffffff);
            color: #f78e38;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 5px 15px rgb(249 147 65 / 40%);
            position: relative;
            overflow: hidden;
        }

        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .submit-btn:hover::before {
            left: 100%;
        }

        .submit-btn:hover {
                transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(249 147 65 / 40%);
        }

/* forms code e */



/* aricle banner */

/* .form-code {
        margin: 0;
        padding: 0;
          font-family: "Futura Std Light";
        background: url('../images/rs-transport-banner-img.jpg') no-repeat center center/cover;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    } */
.form-code {
    background-image: url(../images/rs-transport-banner-img.jpg);
    border-top: 1px solid #f1a9ac;
}

.form-container {
        /* background: rgba(255, 255, 255, 0.85); */
        padding: 30px;
        border-radius: 10px;
        width: 350px;
        /* box-shadow: 0 4px 15px rgba(0,0,0,0.3); */
    }

    .form-container h2 {
        text-align: center;
        margin-bottom: 20px;
    }

    .form-container input,
    .form-container select,
    .form-container textarea,
    .form-container button {
        width: 100%;
        margin-bottom: 15px;
        padding: 12px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

   .send-btn {
    background: linear-gradient(135deg,  #eeeeee, #f8f0ea);
    color: #f99341;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 12px;
    border-radius: 5px;
    width: 100%;
    transition: all 0.3s ease;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.send-btn:hover {
    background: linear-gradient(135deg,  #f78e38, #e5b084);
     color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.cont-add a:hover {
color : rgb(109 69 38)

}
.cont-add {
    background: #f78e38;
    border-radius: 10px;
    font-family: "Futura Std Light";
    padding-top: 50px; /* space for icons */
    position: relative;
}
/* .cont-add .icon-box {
    width: 60px;
    height: 60px;
    background: #000; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: -30px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
} */

.cont-add .icon-box i {
    color: #fff; /* white icon */
    font-size: 24px;
}
.cont-add h4 {
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    margin-top: 15px;
}
.cont-add a{
    color: rgb(42 43 44);
    text-decoration: none;
}
.cont-add p {
    text-align: center;
    font-size: 16px;
    line-height: 31px;
   
}

.cont-grap {
    text-align: center;
}

.form-code1{
    margin-top: 60px;
    margin-bottom: 60px;
}




.cont-add .icon-box {
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: -30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: -78px;
}

/* NORMAL ICON - HOVER EFFECT */
.cont-add .icon-box:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}

/* ICON STYLE */
.cont-add .icon-box i {
    color: #fff;
    font-size: 24px;
    transition: 0.3s;
}

.cont-add .icon-box:hover i {
    color: #f78e38;
}


/* -------------------------------------- */
/* SPECIAL: PHONE ICON RADIATION + RINGING */
/* -------------------------------------- */

.phone-icon:hover {
    animation: ring 0.6s infinite;   /* shake effect */
}

.phone-icon:hover i {
    animation: pulse 1s infinite ease-in-out; /* glow pulse */
}




/* Ringing (shake) animation */
@keyframes ring {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(6deg); }
    100% { transform: rotate(0deg); }
}

/* Glow pulse (radiation effect) */
@keyframes pulse {
    0% { text-shadow: 0 0 0px #fff; }
    50% { text-shadow: 0 0 12px #00ffea; }
    100% { text-shadow: 0 0 0px #fff; }
}



/* banner */









  
        /* Button 4 - Animated */
         .btn {
            background: #f99341;
            color: white;
            border: none;
            padding: 8px 23px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            position: relative;
            overflow: hidden;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(220, 103, 9, 0.3);
        }
        
        .btn:active {
            transform: translateY(-1px);
        }
        
        .btn i {
            font-size: 20px;
            transition: transform 0.3s ease;
        }
        
        .btn:hover i {
            transform: scale(1.1);
        }
        .btn-animated {
            background: #f99341;
        }
        
        .btn-animated::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .btn-animated:hover::before {
            left: 100%;
        }
        
        .btn-animated:hover {
            background: #b85508;
        }
       
 /* Button 4 - Animated */

 /* social icon s */
.social-icons {
                display: flex;
    justify-content: right;
    gap: 17px;

        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            text-decoration: none;
            transition: all 0.3s ease;
            background: #000000;
            color: white;
            margin-top: 8px;
        }
        
        .social-link i {
            font-size: 20px;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            transform: translateY(-3px);
            background: #333333;
        }
        
        .social-link:hover i {
            transform: scale(1.1);
        }
      
        /* social icon e */


        /* New Two-Image Section with 4:8 Ratio */
        .ratio-image-section {
            max-width: 1200px;
            width: 100%;
            margin-bottom: 60px;
            padding-left: 30px;
            padding-right: 30px;

        }

        .ratio-row {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }
       

        .ratio-image {
            width: 100%;
            height: 100%;
            border: 1px solid #f0f0f0;
        }

        .ratio-image:hover {
            border-color: #dc6709;
        }

        .ratio-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
        }
        .ratio-image:hover img {
            opacity: 0.95;
        }

        /* 2 section */

          /* .menu-div{padding-top: 50px;} */

          .menu-div .navbar-nav .nav-item .nav-link {
          -webkit-transition: color 0.3s;
          -moz-transition: color 0.3s;
          transition: color 0.3s;
          position: relative;
          line-height: 19px;
          color:#000;
          padding:0px 30px;
          font-size: 20px;
        
          font-weight: 500;
          }

          .menu-div .navbar-nav .nav-item .nav-link:before {
          position: absolute;
          top: 0%;
          right: -10px;

          width: 100%;
          height: 100%;
          color: transparent;
          content: '';
          text-shadow: 0 0 transparent;
          font-size: 13pt;
          background: url(../images/menu-icon.png) no-repeat top 10px right ;
          }

          .menu-div .navbar-nav .nav-item:last-child .nav-link:before{background: none;}


          .menu-div .navbar-nav .nav-item .nav-link:hover:before, .menu-div .navbar-nav .nav-item .nav-link:focus:before, .menu-div .navbar-nav .nav-item.active .nav-link:before {
          color: var(--body-color1);
          text-shadow: 10px 0 var(--body-color1), -10px 0 var(--body-color1);
          }

          .menu-div .navbar-nav .nav-item .nav-link:hover, .menu-div .navbar-nav .nav-item .nav-link:focus, .menu-div .navbar-nav .nav-item .nav-link.active {
          color: #dc6709!important;
          }

          @media (max-width:981px) {
          .index-abt h2::before {
          left: 0px;
          right: 59px;
          bottom: 24px !important;
          }
          .navbar-toggler {
          position: fixed;
          top: 15px;
          right: 20px;
          background-color: #000;
          --bs-navbar-toggler-icon-bg: url("../images/rs-menu-icon.png");
          }
          .offcanvas.offcanvas-top {
          height: 100%;
          background: var(--body-color1) !important;
          }
          .menu-div .navbar-nav .nav-item .nav-link{font-size: 14px;}
          .menu-div .navbar-nav .nav-item .nav-link::before{content: none;}
          .menu-div .navbar-nav .nav-item .nav-link:hover, .menu-div .navbar-nav .nav-item .nav-link.active{background: #000;}
          #hm.sticky .navbar{display: block !important; }
          #hm.sticky .navbar-brand{width: 100%;}
          #hm.sticky .navbar-brand img{margin-left: auto; margin-right: auto; width: 20%;}

          }



        
        /* Left Column Styling */
        .left-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }
        
        .title-container {
            margin-bottom: 30px;
        }
        
      .title-container1  h1 {
            color: #dc6709;
            font-size: 35px;
             font-family: "Playfair Display", serif;
             margin-top: 64px;
           
        }

     .title-container1  h2 {
            color: #dc6709;
            font-size: 35px;
            font-family: "Playfair Display", serif;
           
        }
        
        .content {
            color: #1b1b1b;
            line-height: 1.7;
            font-size: 22px;
            text-align: justify;
            padding: 20px 0;
              font-family: "Futura Std Light";
            
        
        }
        
        .content p{
          
            font-size: 20px;
           
            
        
        }
        
        
       
        
        .experience-badge {
            display: inline-block;
            margin-top: 25px;
            padding: 10px 20px;
            background: #fef5ee;
            color: #dc6709;
            border-radius: 50px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .experience-badge:hover {
            background: #dc6709;
            color: white;
            transform: translateY(-5px);
        }
        
        /* Right Column Styling */
        .right-column {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        /* .image-container2 img{
          margin-left: -108px;
           
        }
         */
 .image-container2 img {
    margin-left: -108px;
    animation: moveLR 5s ease-in-out infinite;
}

@keyframes moveLR {
    0% { transform: translateX(0); }
    50% { transform: translateX(15px); }
    100% { transform: translateX(0); }
}

        .image-container img {
            max-width: 100%;
            max-height: 100%;
            transition: transform 0.5s ease;
            border-radius: 10px;
        }
        
        /* .image-container:hover img {
            transform: scale(1.05);
        } */
.image-container.effect-5:hover img {
    transform: scale(1.15);
}

/* Shine animation */
.image-container.effect-5::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-25deg);
    transition: all 0.7s ease;
}

.image-container.effect-5:hover::before {
    left: 150%;
}   
        .transport-badge {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 700;
            color: #dc6709;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        
        .transport-badge:hover {
            background: #dc6709;
            color: white;
            transform: translateY(-5px);
        }
        
        .transport-badge i {
            font-size: 18px;
        }
        
        /* Floating elements for visual interest */
        .floating-element {
            position: absolute;
            width: 80px;
            height: 80px;
            background: rgba(220, 103, 9, 0.1);
            border-radius: 50%;
            z-index: 0;
            animation: float 6s ease-in-out infinite;
        }
        
        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
        }
        
        .floating-element:nth-child(2) {
            bottom: 15%;
            right: 10%;
            width: 40px;
            height: 40px;
            animation-delay: 2s;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
            }
            100% {
                transform: translateY(0) rotate(0deg);
            }
        }



.transport-images {
    position: relative;
    width: 100%;
    height: 380px; /* increased height */
    overflow: visible;
}

/* BACKGROUND IMAGE - BIGGER */
.back-img {
    position: absolute;
    width: 115%;   /* bigger */
    max-width: 550px;
    left: 50%;
    transform: translateX(-50%);
    animation: backMove 7s infinite alternate ease-in-out;
    opacity: 0.9;
}

/* BUS IMAGE - SMALLER */
.front-img {
    position: absolute;
    width: 70%;   /* smaller bus */
    max-width: 350px;
    left: 50%;
    transform: translateX(-50%);
    animation: frontMove 5s infinite alternate ease-in-out;
    z-index: 10;
}

/* BACKGROUND SLOW & LITTLE MOVEMENT */
@keyframes backMove {
    from { transform: translate(-50%, 0px); }
    to   { transform: translate(-50%, -25px); } /* more move */
}

/* BUS IMAGE STRONGER MOVEMENT */
@keyframes frontMove {
    from { transform: translate(-50%, 0px); }
    to   { transform: translate(-50%, -45px); } /* more move */
}

/* new 1 */
 .zoom-section {
            max-width: 1200px;
            width: 100%;
 

        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 15px;
            background: linear-gradient(45deg, #3498db, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .section-title p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .image-container {
            position: relative;
            border-radius: 1px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            height: 400px;
            margin-bottom: 30px;
                 
  /* Animation duration */
  --animate-duration: 1s;
  /* Animation delay */
  --animate-delay: 0.5s;
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            transition: all 0.6s ease;
        }
        
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.8), rgba(155, 89, 182, 0.8));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
            color: white;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.5s ease;
        }
        
        .image-content {
            transform: translateY(30px);
            transition: all 0.5s ease;
        }


         
        /* Responsive Design */
        @media (min-width: 768px) {

            .title-container1 h1{
                font-size: 31px;
            }
            .title-container1 h2 {
                font-size: 31px;
            }
            .content {
                font-size: 18px;
            }
            .div-content4 p {     
            font-size: 17px;
            }
            .image-container2 img{
                width: 120%;
            }
            /*  */

            .buttons-container {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 20px;
            }
            
            .btn {
                padding: 16px 25px;
                font-size: 16px;
            }
        }
         @media (max-width: 980px) {
            .social-icons{    
            display: none;
            }

            link.active {
            color: #936643 !important;
            }
            .align-items-center ul li{
                  font-size: 16px;

            }
         .menu-div .navbar-nav .nav-item .nav-link {
          -webkit-transition: color 0.3s;
          -moz-transition: color 0.3s;
          transition: color 0.3s;
          position: relative;
          line-height: 35px;
          color:#ffffff;
          padding:0px 30px;
          font-size: 20px;
          font-weight: 500;
          border: 1px solid #fef5ee;
          }

          


link.active {
 color: #dc6709;
}
.offcanvas-header .btn-close{
    margin-left: 20px!important;
}

.title-container1 h1{
    font-size: 28px;


            }

            .title-container1 h2 {
    font-size: 28px;


            }

        }

         @media (max-width: 767px) {
            .title-container1 h1{
text-align: center;


            }

            .title-container1 h2 {
   text-align: center;


            }
            

.image-container2 img {
    margin-left: 0px;
    align-items: center;
    width: 100%;

         }
         .image-container img{
            width: auto;
            height: auto;
         }
.image-container
{
    height: auto;
}

.div-content4 h4 {
    font-size: 26px;
  text-align: center;
}

.cont-add .icon-box {
    margin-top: 0px;

}









        }
        
        @media (max-width: 480px) {
            .btn {
                padding: 14px 20px;
                font-size: 15px;
            }
  .title-container1 h1 {
      font-size: 23px;
  }
  .title-container1 h2 {
      font-size: 23px;
  }



        }

        

          
        /* Responsive Design */
        @media (max-width: 480px) {
            .social-link {
                width: 45px;
                height: 45px;
            }
            
            .social-link i {
                font-size: 18px;
            }
            
            .social-icons {
                gap: 12px;
            }
        }


        /* sticky */
#hm1{-webkit-transition: all 2s ease;transition: all 2s ease; }
#hm1 .logo1{display: none;}
/* #hm1 .menu-div{display: none;} */
#hm1 .menu-div5{display: none;}
#hm1.sticky1 .logo{display: none;}
#hm1.sticky1 .logo1{display: block;padding-top: 6px;width:90%;}
#hm1.sticky1 .menu-div .navbar-light .navbar-nav .nav-item .nav-link, .menu-div1 .navbar-light .navbar-nav .nav-item .nav-link{ font-size: 15px;}
#hm1.sticky1 .menu-div5 .navbar-light .navbar-nav .nav-item .nav-link, .menu-div1 .navbar-light .navbar-nav .nav-item .nav-link{ font-size: 14px;}

#hm1.sticky1 .div-header{
padding: 10px 0px;
}
#hm1.sticky1 .menu-div5 {padding-top: 26px; display: block;}
#hm1.sticky1 {position:fixed; 

    top:0; z-index:117; 
    width:100%; display: block; 
    background: #ffffff; 
}  
#hm1.sticky1 .logo-div img{
width: 20%;
}

#hm1.sticky1.hed{
/*  background: rgb(0,21,44);*/
/* background: linear-gradient(135deg, rgba(0,21,44,1) 26%, rgba(255,255,255,1) 26%); */
}
#hm1.sticky1 .menu-div .navbar-light .navbar-nav .nav-link{color:#000;font-weight:400;}
#hm1.sticky1 .menu-div5 .navbar-light .navbar-nav .nav-link{color:#fff;font-weight:400;}

.stck1{display: none;}
#hm.sticky .stck1{display: block;}

/*#hm.sticky .menu-div .navbar-light .navbar-nav .nav-item .nav-link{font-size: 13px;}
#hm.sticky .navbar-nav a{padding: 12px 12px !important;}*/

 #hm{
        -webkit-transition: all 0.4s ease;
                transition: all 0.4s ease;
        
            }
        
        #hm.sticky {
              position:fixed; top:0; z-index:101; width:100%; border-bottom: 1px solid rgb(233, 232, 232); 
              background: #fff; 
              animation: drop-in 1s ease 200ms backwards;
            } 
           
            #hm.sticky .top-div1{padding-top: 4px; padding-bottom: 10px;border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;}
          #hm.sticky .logo-div img{width: 40%; padding-top: 52px;}
            #hm.sticky .menu-div{padding-top:10px;}

  @keyframes drop-in {
      from {
       opacity: 0;
       transform: translateY(-100px);
      }
      to {
       opacity: 1;
       transform: translate(0px);
      }
     }