* {
   margin: 1;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f9f9f9;
   color: #333;
}

header {
   background-color: #e3651d;
   color: wheat;
   padding: 15px 10px 40px 10px;
   text-align: center;
   /* position: sticky; */
   top: 0px;
   z-index: 1;
}

header h1 {
   margin-bottom: 10px;
}

nav ul {
   list-style: none;
}

nav ul li {
   display: inline-block;
   margin-right: 20px;
}

nav ul li a {
   color: wheat;
   text-decoration: none;
}

nav ul li a:hover {
   text-decoration: underline;
   /* color: lightgrey;
   font-weight: bold; */
}

.search-container {
   max-width: 800px;
   margin: 30px auto 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

.search-container input[type="text"] {
   padding: 20px;
   width: 70%;
   border-radius: 30px 0 0 30px;
   border: none;
   outline: none;
   font-size: 18px;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
}

.search-container button {
   padding: 20px 30px;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   background-color: #ff5733;
   border: none;
   outline: none;
   border-radius: 0 30px 30px 0;
   font-size: 18px;
   color: wheat;
   cursor: pointer;
   transition: 500ms all;
}

.search-container button:hover {
   background-color: orangered;
}

.hero {
   background-image: url("images/002\ -\ Kopya.jpg");
   background-size: cover;
   background-position: center;
   color: wheat;
   text-align: center;
   padding: 100px 0px;
   margin: 10px 0px;
}

.hero-1 {
   background-image: url("images/logo4.jpg");
   background-size: cover;
   background-position: center;
   color:wheat;
   text-align: center;
   padding: 200px 0px;
   margin: 10PX 0PX;
   transition: 700ms all;
}

.hero-1:hover {
   transform: scale(0.97);
   border-radius: 30px;
}

.logo {
   padding: 10px;
}

.logo img {
   position:absolute;
   left:18px;
   transition: 700ms all;
   border-radius: 30px;
}
.logo img:hover {
   transform: rotate(360deg);
   /* transform: scale(0.8); */
   border-radius: 40px;
}



.hero h1 {
   font-size: 40px;
   margin-bottom: 20px;
}

.hero p {
   font-size: 20px;
   margin-bottom: 30px;
}

.button {
   display: inline-block;
   background-color: #ff5733;
   color: wheat;
   padding: 15px 30px;
   text-decoration: none;
   border-radius: 4px;
   transition: 500ms all;
}

.order-button {
   display: block;
   margin: 0 auto;
   margin-top: 10px !important;
   background-color: #ff5733;
   color: wheat;
   padding: 10px 20px;
   border-radius: 4px;
   border: none;
   outline: none;
   cursor: pointer;
   transition: 700ms all;
}

.button:hover,
.order-button:hover {
   background-color: orangered;
   border-radius: 30px;
}

.promotion,
.new-products,
.featured,
.menu {
   max-width: max-content;
   max-height: max-content;
   margin: 20px auto;
   position: relative;
}

.promotion {
   background-color: #ff5733;
   padding: 10px;
}

.promotion h3 {
   color: wheat;
   font-weight: bold;
   font-size: 30px;
}

.promotion dd {
   font-size: 20px;
   color: wheat;
}

.promotion h2,
.new-products h2,
.python-egitimi h2,
.featured h2,
.menu h2 {
   max-width: 1700px;
   max-height: 700px;
   margin: auto auto;
   position: relative;
   font-weight: bold;
   font-size: 50px;
   color: #ff5733
}

.img-item img {
   border-radius: 50px;
   transition: 1700ms;
}

.img-item:hover img {
   /* transform: rotate(360deg); */
   border-radius: 60px;
   transform: scale(1.07);
}

.python-items {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.python {
   width: calc(100%);
   background-color: wheat;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   padding: 30px;
   margin: 20px;
   position: relative;
   transition: 700ms all;
}

.python:hover {
   transform: scale(1.03);

   .tag {
      font-size: 30px;
   }
}

.python h3 {
   text-indent: 50px;
}

.python img {
   width: 100%;
   border-radius: 15px;
   margin-bottom: 10px;
}

.python h3,
.python p {
   margin-bottom: 13px;
}

.python span {
   display: block;
   font-weight: bold;
   color: green;
}

del {
   color: red;
   opacity: 0.7;
}

header nav ul{
   background-color: brown;
   height: 35px;
   padding: 10px;
}

.menu-items {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.menu-item {
   width: calc(31%);
   background-color: wheat;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   padding: 20px;
   margin: 20px 5px;
   transition: 700ms all;
   position: relative;
   /* overflow:hidden; */
}

.menu-item:hover {
   transform: scale(1.05);

   .tag {
      font-size: 15px;
   }
}

.menu-item img {
   width: 100%;
   border-radius: 5px;
   margin-bottom: 10px;
}

.menu-item h3,
.menu-item p {
   margin-bottom: 13px;
}

.menu-item span {
   display: block;
   font-weight: bold;
   color: green;
}

.tag {
   background-color: #ff5733;
   color: wheat !important;
   padding: 5px 10px;
   border-radius: 5px;
   position: absolute;
   font-size: 12px;
   top: -10px;
   right: -5px;
   transition: 700ms all;
}

.footer {
   background-color: #ff5733;
   color: wheat;
   text-align: center;
   padding: 20px 0px;
   width: 100%;
}

.footer img {
   width: 20px;
}

.footer img:hover {
   border-radius: 30px;
}

@media only screen and (max-width:480px) {
   .menu {
      text-align: center;
   }

   .promotion,
   .featured {
      text-align: center;
   }

   .menu-item {
      width: 90%;
      margin: 15px auto;
   }
}