body {
                font-family: 'Roboto', sans-serif;
background-image: linear-gradient(180deg, #f5f5f5, #dcdcdc, #bfbfbf);
     
    }
            /* .logo{
                position: absolute;
                
            } */
            .div1{
                background-image: url("../images/upcoming-trends-in-the-world-of-car-dealerships.jpeg");
                background-size:cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
                /* display: flex; */
                flex-wrap: nowrap;
                width: 100%;
                height: 100%;
                opacity: 0.90;
            }
            .upper{
                background-color: rgb(27, 27, 27);
                /* text-align: center; */
                color: rgb(206, 189, 189);
                /* font-size:70px; */
                border: none;
                margin-top:0%;
                margin-bottom: 0px;
                width: 95.7vw;
                height: 10vh;
                padding: 1%;
            }
            .login_signup{

                border: 3px  black;
                width: 190px;
                height: 80px;
                display: inline;
                position: absolute;
                top: 5%;
                left: 80%;
                padding-top: 0px;
            }
            .button1{
                width: 80px;
                height: 30px;
                background-color: black;
                border-radius: 12%;
                color:  white;
            }
            .button1:focus{
                background-color: gray;
            }
            .button1:hover{
                background-color:gray;
            }

            .button2{
               width: 80px;
                height: 30px;
                background-color: black;
                border-radius: 12%;
                color:  white;
            }
            .button2:focus{
                background-color: gray;
            }
            .button2:hover{
                background-color:gray;
            }

            .button3{
                width: 100px;
                height: 50px;
                background-color: gray;
                border: 3px solid rgb(71, 71, 71);
                color:  white;
                margin-right: 10px;
            }
            .button3:focus{
                background-color: black;
            }
            .button3:hover{
                background-color: black;
            }

            .button4{
                width: 100px;
                height: 50px;
                border: 3px solid white;                
                color:  white;
                padding: 11px;
            }
            .button4:focus{
                background-color: black;
            }
            .button4:hover{
                background-color: black;
            }

            .button5{
                width: 100px;
                height: 50px;
                border: 3px solid black;
                border-radius: 20%;                
                color:  white;
                padding: 11px;
                margin: 20px;
                background-color: black;
 
            }
            .button5:focus{
                background-color:gray;
            }
            .button5:hover{
                background-color:gray;
            }
            
            .button6{
                width: 100px;
                height: 50px;
                background-color: black;
                border: 3px solid black;
                border-radius: 20%;;
                color:  white;
                margin: 20px;
            }
            .button6:focus{
                background-color:gray;
            }
            .button6:hover{
                background-color:gray;
            }

            .a1{
                color: white;
                margin-top: 0%;
                font-size: large;
                text-decoration: none;
                transition: color;
                margin-left: 1%;
                
            }
            .a1:hover{
                color: #0080ff;          /* hover color */
                text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
                
            }
            .title1{
                font-size: 90px;
                padding-top: 150px;
                padding-left: 20px;
                padding-right: 20px;
                text-align: center;
                color:white;
                font-weight: 800;
            }
            .p1{
                font-size: 30px;
                text-align: center;
                padding-left: 50px;
                padding-right: 50px;
                color:white;
                font-weight: 800;
            }
            @media(max-width:800px){
                .div1{
                    flex: 1 1 calc(50%);
                }
            }
            @media(max-width:600px){
                .div1{
                    flex: 1 1 calc(40%);
                }
            }
            @media(max-width:400px){
                .div1{
                    flex: 1 1 calc(20%);
                }
            }
            .href1{
                margin-top: 0%;
                width: 10%;
                text-align: center;
                margin-left: 300px;
                padding: 10px;
                padding-top: 1%;
                margin-bottom: 10%;
    
            }
            .div_browse1{
            margin-left: 500px;
            font-size: large;
            }
            .div_browse2{
            width: 80vw;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 5vw;
            justify-items:center;
            }
            .browse2-item {
                font-size: 20px;
                 background: rgba(219, 221, 224,0.3);
                 color:black;
                 padding: 1rem;
                 text-align: center;
                 border-radius: 4px;
    }
    .grid_of_cars{
        display: grid;
        /* justify-content: center; */
        grid-template-columns: repeat(4,1fr);
        gap: 15px;
    }
    .car1{
        height: 88%;
        /* overflow: scroll; */
        border-radius: 10%;
        border: 2px solid gray;
        border-radius: 10%;
        transition: height 1s;
        background-color: rgb(173, 173, 173);
        padding-bottom: 10px;
    }
    .car2{
        height: 88%;
        /* overflow: scroll; */
        border: 2px solid gray;
        border-radius: 10%;
        transition: height 1s;
        background-color: rgb(173, 173, 173);
        padding-bottom: 10px;

    }
    .car3{
        height: 88%;
        /* overflow: scroll; */
        border: 2px solid gray;
        border-radius: 10%;
        transition: height 1s;
        background-color:rgb(173, 173, 173);
        padding-bottom: 10px;
    }
    .car4{
        height: 88%;
        /* overflow: scroll; */
        border: 2px solid gray;
        border-radius: 10%;
        transition: height 1s;
        background-color:rgb(173, 173, 173);
        padding-bottom: 10px;
    }
    .car1:hover{
        box-shadow: 3px 3px 40px black;
        height: 100%;
    }
    .car2:hover{
        box-shadow: 3px 3px 40px black;
        height: 100%;
    }
    .car3:hover{
        box-shadow: 3px 3px 40px black;
        height: 100%;
    }
    .car4:hover{
        box-shadow: 3px 3px 40px black;
        height: 100%;
    }
    .gird_for_info{
        display: grid;
        border: 0px solid black;
        grid-template-columns: repeat(4,1fr);
        gap: 15px;
    }
    .logo1{
        height:20%;
        width: 30%;
        border-radius:80%;
        margin-left: 94px;
        margin-top: 10px;
    }
    .info1{
        height: 90%;
        /* overflow: scroll; */
        border: 2px solid gray;
        border-radius: 10%;
        transition: height 1s;
        background-color:rgb(173, 173, 173);
        padding-bottom: 10px;
    }
    .info1:hover{
        height: 100%;
         box-shadow: 3px 3px 40px black;

    }
    .info2{
        border: 1px solid;
        box-shadow: 3px 3px 40px gray;
    }
    .info3{
        border: 1px solid;
        box-shadow: 3px 3px 40px gray;
    }
    .info4{
        border: 1px solid;
        box-shadow: 3px 3px 40px gray;
    }
    .view{
        margin-top:3%;
        border: 2px solid  gray;
        padding: 10px;
        margin-left: 45% ;
        background-color:rgb(161, 154, 154);
        color: black;
        width: 12%;
        height: 30%;
        transition: width 2s;
    }
    .view:hover{
        box-shadow: 10px 10px 50px;
        width: 14%;
        height: 32%;
    }
    .search-container {
      position: relative;
      width: 400px;
      display: flex;
      align-items: center;
      background-color: white;
      border: 2px solid #333;
      border-radius: 30px;
      padding: 10px 20px;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
      transition: all 0.3s ease;
    }

    .search-container:hover {
      border-color: white;
      box-shadow: 0 0 25px rgba(0, 191, 255, 0.2);
    }

    /* ===== Input Field ===== */
    .search-input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: gray;
      font-size: 18px;
      padding: 8px;
    }

    /* ===== Search Button ===== */
    .search-btn {
      background-color: gray;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      color: gray;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .search-btn:hover {
      background-color: black;
      transform: scale(1.1);
    }

    /* ===== Responsive Design ===== */
    @media (max-width: 480px) {
      .search-container {
        width: 90%;
        padding: 8px 15px;
      }
      .search-input {
        font-size: 16px;
      }
    }
    .div2{
        border:3px solid #727272;
        width: 50%;
        text-align: center;
        margin-left: 25%;
        margin-top: 10%;
        margin-bottom: 10%;
        background-color: #d6d6d6;
        box-shadow: 5px 5px 100px;
         transition:width 1s;
    }
    .div2:hover{
        box-shadow:inset 5px 5px 100px;
        width: 55%;
        transform: 10px 10px;
    }
    .grid_of_opinions{
        margin-top: 10%;
      display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 3%;
        background-color: #444444;
        background-size: cover;
        margin-left: 0;
        margin-right: 0;
    }
    .op{
        color: white;
        text-align: center;
         height: 90%;
        /* overflow: scroll; */
        border-radius: 10%;
        padding-bottom: 10px;
        font-size: large;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .logo2{
        height:40%;
        width: 30%;
        border-radius:80%;
        margin-left: 95px;
        margin-top: 10px;
        margin-bottom: 10px;
        display: block;
    }
    .div_informations{
        background-color: #323232;
        margin-top: 0px;
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        color: white;
    }
    .grid_info{
        margin-top: 2%;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 3%;
        
    }

    .a_info{
      text-decoration: none;   /* removes underline */
      color: white;          /* custom link color */
      font-weight: 500;
      transition: 0.3s ease;
    }

    .a_info:hover {
      color: #0080ff;          /* hover color */
      text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
    }
    .info{
        margin-left: 20%;
    }
    .last_div{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        background-color: rgb(27, 27, 27);
        margin-top: 0px;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        color: white;

    }
    .last_info{
        margin-left: 25%;
        color: white;
        font-family: 'Segoe UI Light', 'Segoe UI', sans-serif;
        font-size: 80%;
        margin-top: 7%;
        margin-bottom: 7%;
    }
    @media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

/* Large screens (992px–1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .grid_of_cars,
  .gird_for_info,
  .grid_info,
  .grid_of_opinions {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Medium screens (tablets: 768px–991px) */
@media (max-width: 991px) and (min-width: 768px) {
  .grid_of_cars,
  .gird_for_info,
  .grid_info,
  .grid_of_opinions {
    grid-template-columns: repeat(2, 1fr);
  }

  .div2 {
    width: 70%;
    margin-left: 15%;
  }

  .upper {
    width: 100%;
    text-align: center;
  }

  .login_signup {
    left: 60%;
  }

  .view {
    width: 25%;
    margin-left: 38%;
  }
}

/* Small screens (phones: max-width 767px) */
@media (max-width: 767px) {
  .grid_of_cars,
  .gird_for_info,
  .grid_info,
  .grid_of_opinions {
    grid-template-columns: 1fr;
  }

  .upper {
    width: 100%;
    text-align: center;
    height: auto;
  }

  .login_signup {
    position: static;
    margin: 10px auto;
    display: flex;
    justify-content: center;
  }

  .title1 {
    font-size: 55px;
    padding-top: 100px;
  }

  .p1 {
    font-size: 22px;
    padding: 0 20px;
  }

  .div2 {
    width: 90%;
    margin-left: 5%;
  }

  .view {
    width: 40%;
    margin-left: 30%;
  }

  .href1 {
    width: 60%;
    margin-left: 20%;
  }

  .div_browse1,
  .div_browse2 {
    margin-left: 0;
    text-align: center;
    width: 100%;
  }

  .search-container {
    width: 90%;
    margin: 10px auto;
  }

  .logo1,
  .logo2 {
    display: block;
    margin: 10px auto;
  }

  .last_div {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .last_info {
    margin-left: 0;
  }
}

/* Extra small screens (max-width: 480px) */
@media (max-width: 480px) {
  .title1 {
    font-size: 40px;
    padding-top: 80px;
  }

  .p1 {
    font-size: 18px;
  }

  .button1,
  .button2,
  .button3,
  .button4,
  .button5,
  .button6 {
    width: 70px;
    height: 35px;
    font-size: 12px;
  }

  .view {
    width: 60%;
    margin-left: 20%;
  }

  .div2 {
    width: 95%;
    margin-left: 2.5%;
  }
}