*{
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
}
.body{border: 0px;padding: 0px;}
/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
    border-radius: 5px;
  }
  /*Adjusting the Image on Logo */
  /* Style the links inside the navigation bar */
    .topnav a {
    font-family: 'Lobster', cursive;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 28px;
  }
  /* Change the color of links on hover */
   .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 420px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  } 
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  } 
    /*Our Vechiles*/
  /* Three columns side by side */
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;background-color: rgba(150, 146, 146, 0.199);
  }
}
/* Add some shadows to create a card effect */
/* Some left and right padding inside the container */
.container {
  padding-left:5px;
  padding-right:5px;
  padding-top:5px;
  padding-bottom: 8px;
  margin-bottom: 0px;
  margin-top:0px;
  margin-left: 0px;
  margin-right: 0px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}
.row{background-color: rgba(150, 146, 146, 0.199);
  padding-left: 6px;padding-right: 6px;
  padding-top:25px;
  padding-bottom: 20px;}
 /*Vechiles Title*/
.vechiles{background-color: rgba(150, 146, 146, 0.199);
font-size: 37px;
font-weight: bolder;
text-align: center;
text-shadow: #f2f2f2 5px;
padding-bottom: 34px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;}
.details{font-weight: bolder;font-size: 17px;}
#details{font-weight: bolder;font-size: 19px;}
/*Our Family*/
/* Three js side by side */
.j {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}
.j {
  padding-left: 10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  margin-top:0px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: rgba(82, 66, 66, 0.295);
}
/* Display the js below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .j {
    width: 100%;
    display: block;
  }
}
/* Add some shadows to create a cardd effect */
/* Some left and right padding inside the dabba */
.dabba {
  padding-left: 1px;
  padding-right:4px;
  padding-top:10px;
  padding-bottom: 12px;
  margin-bottom: 0px;
  margin-top:0px;
  margin-left: 0px;
  margin-right: 0px;
}
/* Clear floats */
.dabba::after, .i::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
}
.i{  padding-left: 6px;
  padding-right: 6px;
  padding-top:25px;
  padding-bottom: 20px;
  background-color: rgba(173, 165, 165, 0.295);}
/*Vechiles Title*/
.gadi{
  font-size: 37px;
  font-weight: bolder;
  text-align: center;
  text-shadow: #f2f2f2 5px;
  padding-bottom: 34px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgba(173, 165, 165, 0.295);
}
  /*Explore Land Rover*/
    /* two columns side by side */
.J {
  float: left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
}
/*Changing Background Color*/
.GADI{background-color: rgba(14, 1, 1, 0.664);
  font-size: 37px;
  font-weight: bolder;
  text-align: center;
  text-shadow: #f2f2f2 5px;
  padding-bottom: 34px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;}
#I{background-color: rgba(14, 1, 1, 0.664);
  padding-left: 4px;
  padding-right: 35px;
padding-top:25px;

padding-bottom: 20px;}  

.Title {
  color: rgb(238, 232, 232);
}
#Details{font-weight: light;font-size: 19px;}

/*Find Dealership*/

.bg-img {
  /* The image used */
  background-image: url("https://www.landrover.in/Images/Dealership_960x320_297-86362_960x320.jpg?v=2 ");

  /* Control the height of the image */
  min-height: 380px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Add styles to the form container */
.CONTAINER {
  position: absolute;
  right: 500px;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  border-radius: 3px;
  background-color: white;
}
/* Set a style for the submit button */
.btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  border-radius: 3px;
}

.btn:hover {
  opacity: 1;
}
/* Footer*/
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.Container{
	max-width: 1170px;
	margin:auto;
}
.Row{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
.footer{
	background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: #ffffff;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #e91e63;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}
/*Footer2*/
:root {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
body {
  height: 100vh;
  overflow: visible;
}
.Footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: rgba(233, 227, 233, 0.856);
  color: rgba(90, 88, 88, 0.822);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}