@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;700&display=swap');

html {
    scroll-behavior: smooth;
}


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

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

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


header h1 {
   margin-bottom: 10px;
}

nav ul {
   list-style: none;
}

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

nav ul li a {
   color: black;
   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: #006400;
   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: #5ab353;
}

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

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

.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(1.15);
   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: rgb(177, 214, 170);
   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: rgb(177, 214, 170);
   color: wheat;
   padding: 10px 20px;
   border-radius: 4px;
   border: none;
   outline: none;
   cursor: pointer;
   transition: 700ms all;
}

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

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

.promotion {
   background-color: rgb(177, 214, 170);
   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: rgb(177, 214, 170)
}


.col-sm-3 {
   /* min-width: 300px; */
}

.row1 {
   /* justify-content:center; */
   width: 20%;
}

.col-sm-4 img {
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   margin: 5px;
   transition: 700ms;
}

.col-sm-4 img:hover{
   transform: scale(1.02);
}

.col-sm-6 {
   text-align: center;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   background-color: wheat;
}

.col-sm-6 form {
   border-radius: 50px;
   margin-top: 20px;
   text-align: center;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   background-color: white;
}

.col-sm-6 form img {
   transition: 700ms;
}

.col-sm-6 form img:hover {
   transform: scale(1.13);
}

.menu-item {
   min-width: 250px;
}
.img-item img {
   border-radius: 50px;
   transition: 1700ms;
}

.menu-item video {
   width: 100% !important;
}

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

.kart video {
   margin-left: 20%;
   box-shadow: 0 5px 8px rgba(20, 20, 20, 0.5);
   width: 60%; 
   height: auto;
}

.movies {
   width: calc(98%);
   background-color: wheat;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   padding: 10px;
   margin: 20px;
   position: relative;
}
.movies row {
   width: calc(30%);
}

.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: #5ab353;
   opacity: 0.7;
}

header nav ul {
   background-color: #5ab353;
   height: 45px;
   padding: 10px;
}

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

.menu-item {
   width: calc(23%);
   height: auto;
   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;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   transition: 700ms all;
}

.menu-item img:hover {
   border-radius: 15px;
   transform: scale(1.02);
}

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

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

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

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

.footer {
   background-color: rgb(177, 214, 170);
   color: wheat;
   text-align: center;
   padding: 20px 0px;
   width: 100%;
}

.footer img {
   width: 20px;
   transition: 700ms all;
}

.footer img:hover {
   border-radius: 30px;
   transform: scale(1.15);
}

.card {
   background-color: rgb(179, 245, 193) !important;
   width: 90%;
   /* margin-left: 5%; */
   margin-top: 10px;
   margin-bottom: 10px;
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
}



.card-body {
   border-radius: 50px;
   /* min-height: 450px; */
   display: -webkit-box;
   -webkit-line-clamp: 13;
   -webkit-box-orient: vertical;
  /* overflow:scroll; */
  /* text-overflow: ellipsis; */
  /* min-height: 310px; */
   box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
   margin: 10px 0;
   background-color: white;
   width: 80%;
   margin-left: 5%;
   text-align: center;
   overflow:hidden;
}


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

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

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

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

@media (max-width: 800px) {
   .menu-item  {
     width: calc(98%) !important;
      height: auto;
   }
}

@media (max-width: 1100px) and (min-width: 801px){
   .menu-item  {
     width: calc(48%) !important;
      height: auto;
   }
}
#backtotop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99999;
}

#backtotop i {
    color: #FC997C;
    font-size: 45px;
    transition: color .6s;;
}

#backtotop i:hover {
    color:rgb(177, 214, 170);
}

.main-nav {
    display: inline-block;
    width: calc(100% - 10rem);
    text-align: right;
    font-family: 'Roboto', sans-serif;
}

.kayan-yazi-container {
    color: #181704;
     background-color:rgb(177, 214, 170);
}

.kayan-yazi-container h1 {
   font-size:20px !important;
}

.kayan-yazi {
    font-size: 36px;
    text-align: center;
    position: relative; /* Pozisyonu belirle */
    animation: kayanYazi 20s linear infinite; /* Animasyonu tanımla */
}

@keyframes kayanYazi {
    0% {
        left: 100%; /* Başlangıç pozisyonu, sağdan başlasın */
    }
    100% {
        left: -100%; /* Bitiş pozisyonu, soldan kaybolsun */
    }
}

.container-fluid a {
    font-size:25px;
    color: #006400 !important;
    
}