body {
    margin: 0;
    background: linear-gradient(to right, #11998e, #38ef7d);
    line-height: 1.15;
  }

  ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 28px 16px;
    text-decoration: none;
  }
  
  ul.topnav li a:hover:not(.active) {
    background-color: #111;
    height: 80px;
  }
  
  ul.topnav li a.active {background-color: #4CAF50;
    height: 80px;
  }
  
  ul.topnav li.right {float: right;}
  
  table{
    border-collapse: collapse;
    width: 100%;
  }
  
  table td, th {
    border: 1px solid rgba(54, 151, 41, 0.979);
    padding: 8px;
  }
  
  tr:nth-child(even){background-color: rgba(255, 243, 132, 0.425);}
  
  th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
  }
  
  .button {
    background-color: #00fd0d67;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
  }
  
  
  
  .dropbtn {
    background-color: #b9ffbc;
    color: rgb(0, 0, 0);
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: left;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #b9ffbc;
    min-width: 500px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  
  .dropdown:hover .dropdown-content {
    display: block;
    
  }
  
  .dropdown:hover .dropbtn {
    background-color: rgb(255, 243, 132);
  }
  
  
  
  h2{
    padding: 5px;
    color: white;
    font-size: 30px;
    border: none;
    text-align: center;
    margin: 4px 2px;
  }

    
  .tm-exp1{
  height: 500px;
    width: 2000px;

padding: 10px;
margin: 20px 0 0 0;

}


h1{
    text-align: center;
}

.carimage1{
    height: 400px;
    width: 600px;
    float: left;
    margin: 40px;
}

.p1{
    font-size: 30px;
    font-family: sans-serif;
}

.tm-exp2{
    height: 500px;
    width: 2000px;
    padding: 10px;
    
    }

    .carimage2{
        height: 400px;
        width: 600px;
        float: left;
        margin: 40px;

    
    }

    
.p2{
    font-size: 30px;
    font-family: sans-serif;
}

.tm-exp3{
    height: 500px;
    width: 2000px;
    padding: 10px;
    
    }

    .carimage3{
        height: 400px;
    width: 600px;
        float: left;
        margin: 40px;

    
    }

    
.p3{
    font-size: 30px;
    font-family: sans-serif;
}

#ih{
    
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
  
}

 /*Footer*/
 #footer{
    text-align: center;
    
  }
  
  .social-icon {
    margin: 20px 10px;
  }
  
  

  


.page {
  padding-left: 5%;
  padding-right: 1%;
  overflow: hidden;
  text-align: justify;
  text-justify: inter-word;
}

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1em;
  grid-auto-flow: dense;
}

.article {
  padding: 1em;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.1),
    0 20px 20px rgba(0, 0, 0, 0.05);
}

.article:nth-child(1) {
  grid-column: 2 / 5;
  background: rgba(200,200,255,0.3);
}

.article:nth-child(5) {
  grid-column: 6 / -1;
  background: rgba(200,200,255,0.3);
}

.article:nth-child(8) {
  grid-column: 2 / 6;
  background: rgba(255,200,255,0.3);
}

.article:nth-child(9) {
  grid-column: 1 / 4;
  background: rgba(255,200,255,0.3);
}
.article:nth-child(10) {
  grid-column: 4 / 5;
}

.article:nth-child(11) {
  grid-column: 5 / 6;
}

.article:nth-child(12) {
  grid-column: 6 / 8;
  background: rgba(255,200,255,0.3);
}

.article:nth-child(1):after {
  content: "The front-engined Ferrari Roma gets a 3.9-litre V8 producing 620bhp and although the official announcement of its launch just took place, customers in India have been taking delivery of their respective Romas for a while now.";
  color: #808;
}

.article:nth-child(2):after {
  content: "The Volvo XC40 SUV, Volvo XC60 SUV, Volvo XC90 SUV, Volvo S60 sedan and Volvo S90 sedan were among the models sold by Volvo Car India in the first half of 2021. Volvo Car India today reported a growth of 52.02 per cent in retail sales to 713 units in the January-June period of 2021.";
  color: #808;
  font-size: 80%;
}

.article:nth-child(3):after {
  content: "The three-pointed star’s smallest SUV just got bigger and bolder in its new generation and we’ve gotten behind the steering wheel to see how different it is from its earlier version. New styling, bigger exterior dimensions, more interior space. Diesel engine gets a slight bump in power output.";
  color: #808;
  font-size: 80%;
}

.article:nth-child(4):after {
  content: "Skoda Kushaq is the maiden vehicle to be introduced by Volkswagen Group's India 2.0 project, which being spearheaded by Skoda Auto. The Skoda Kushaq was launched in India on June 28. The new Kushaq is priced between Rs 10.50 lakh and Rs 17.60 lakh (ex-showroom, India).";
  color: #808;
  font-size: 80%;
}

.article:nth-child(6):after {
  content: "The easing of Covid-19 restrictions and pent-up demand resulted in the vehicle retail sales rising in June 2021. The overall vehicle retail sales in India increased 22.62 per cent to 12,17,151 units in June 2021 on the back of pent-up demand and easing of Covid-19 restrictions.";
  color: #808;
  font-size: 80%;
}

.article:nth-child(7):after {
  content: "Looking to make headway in the ultra premium end of the SUV space, Citroën have now deployed a new initiative that will allow customers to buy their vehicle directly from the company online.   Digital assistant at hand to handle customer queries.";
  color: #808;
  font-size: 80%;
}

.article:nth-child(8):after {
  content: "That not so distant future is here right now when the electric vehicle takeover is closer than ever and our options have just gone up with a new Audi SUV, the e-tron. Audi’s first all-electric production SUV. 408bhp, 664Nm, 0-100kmph in 5.7 seconds, over 400km of real world range. 0-80% charge in 4.5 hours with 22kW supplied wall charger.";
  color: #808;
}

.article:nth-child(10):after {
  content: "Audi India’s second launch of 2021. Prices start from INR 79.06 lakhs (ex-showroom). Powered by a 3.0-liter, TFSI petrol engine that delivers 354 hp and a whopping 500 Nm of torque; 0 to 100 km/h in a quick 4.8 seconds.";
  color: #808;
  font-size: 80%;
}

.article:nth-child(11):after {
  content: "Audi India’s second launch of 2021. Prices start from INR 79.06 lakhs (ex-showroom). Powered by a 3.0-liter, TFSI petrol engine that delivers 354 hp and a whopping 500 Nm of torque; 0 to 100 km/h in a quick 4.8 seconds.";
  color: #808;
  font-size: 80%;
}

.article:after {
  font-family: sans-serif;
  
}

h5{
  text-align: center;
  color: whitesmoke;
}

h6{
  text-align: left;
  text-decoration: underline;
}


/*login box*/


.login-box {
  position: relative;
  top: 50%;
  left: 50%;
  width: 300px;
  height: auto;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

#searchText {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  background-color: white;
  padding: 12px 20px 12px 0px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

#button{
  padding: 10px;
  background: linear-gradient(to left, lightcoral,lightblue) ;
  border-radius: 10px;
  width: 24%;
}

#searchText:focus {
  width: 75%;
}


.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}


/* animate the car to move slightly forwards and backwards */
g#car {
  transform: translateX(-3px);
  animation: translate 2s ease-in-out infinite;
}
/* animate the shadow to skew  toward the left */
path#shadow {
  animation: skew 2s ease-in-out infinite;
}
/* animate the wheels to spin  clockwise*/
g.wheels use {
  animation: rotate 2s linear infinite;
}
/* animate the dashes of air to briefly show them and then hide them from view */
path.air {
  /* starting from the values described by the --stroke-dash property
  ! the property is updated for each path in the script
  */
  stroke-dasharray: var(--stroke-dash);
  stroke-dashoffset: var(--stroke-dash);
  /* ! the delay of the animation is also set up in the script  */
  animation: offset 2s linear infinite;
  /* opacity to hide the obnoxious dots otherwise shown on firefox and edge */
  opacity: 0;
}

/* keyframe animations
! be sure to have the animations overlap as to show a realistic behavior
- as the car moves right the wheels spin faster, the shadow skews left, the dashes of air appear in sequence
- as the car moves left the wheels spin slower while the shadow returns to its resting place
*/
@keyframes translate {
  50% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(-3px);
  }
}
@keyframes skew {
  50% {
    transform: skewX(-20deg);
  }
}
@keyframes rotate {
  50% {
    transform: rotate(4turn);
  }
  100% {
    transform: rotate(6turn);
  }
}

/* beside animating the stroke-dashoffset property rapidly change the opacity to show the dashes and hide them when they are removed by changing the offset property
otherwise the dashes would still be partially visible on firefox and edge (at least)
*/
@keyframes offset {
  1% {
    opacity: 1;
  }
  15% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  25% {
    opacity: 0;
    /* ! on chrome and firefox the calc() function allows to compute the negative value, but Edge seems to prefer having another variable instead */
    /* stroke-dashoffset: calc(var(--stroke-dash) * -1px); */
    stroke-dashoffset: var(--stroke-dash-negative);
  }
  100% {
    stroke-dashoffset: var(--stroke-dash-negative);
  }
}