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

  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{
    text-align: center;
    
  }
  
  .social-icon {
    margin: 20px 10px;
  }
  
  

   /*Newly added*/


.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
  }
}