/* 
   Qubbe Kasap & Izgara - Main Styles 
   Colors: #FFD200 (Yellow), #111111 (Black), White
*/

:root {
   --primary-color: #FFD200;
   --dark-bg: #111111;
   --darker-bg: #0a0a0a;
   --light-text: #ffffff;
   --gray-text: #cccccc;
   --font-heading: 'Oswald', sans-serif;
   --font-body: 'Roboto', sans-serif;
   --transition: all 0.3s ease;
}

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

body {
   font-family: var(--font-body);
   background-color: var(--dark-bg);
   color: var(--light-text);
   line-height: 1.6;
   overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   text-transform: uppercase;
   letter-spacing: 1px;
}

a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition);
}

ul {
   list-style: none;
}

img,
video {
   max-width: 100%;
   display: block;
}

/* UTILITIES */
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.section {
   padding: 80px 0;
}

.section-title {
   font-size: 2.5rem;
   margin-bottom: 40px;
   color: var(--primary-color);
   position: relative;
   padding-bottom: 15px;
   display: flex;
   align-items: center;
   gap: 15px;
   /* Ensure underline stays centered relative to the flex container or handle differently if needed */
}

/* Specific centering when .text-center is applied */
.section-title.text-center {
   justify-content: center;
}


.section-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   /* Default to center for flex container usually */
   transform: translateX(-50%);
   width: 60px;
   height: 4px;
   background-color: var(--primary-color);
}

/* Adjust if title is NOT centered (like Hakkımızda was, but check index.php)
   Most titles use .text-center. Hakkımızda uses .section-title but might not have text-center class.
   However, we want the underline to behave.
   If flex is used, text-align:center on helper class won't work on flex items directly.
   We use justify-content: center above.
*/

.section-title.text-left {
   justify-content: flex-start;
}

.section-title.text-left::after {
   left: 0;
   transform: none;
}

.title-logo {
   height: 50px;
   /* Adjust size as needed */
   width: auto;
   object-fit: contain;
}

.highlight {
   color: var(--primary-color);
}

/* BUTTONS */
.btn {
   display: inline-block;
   padding: 12px 30px;
   font-family: var(--font-heading);
   font-size: 1.1rem;
   font-weight: 500;
   text-transform: uppercase;
   cursor: pointer;
   border: 2px solid transparent;
   transition: var(--transition);
}

.btn-primary {
   background-color: var(--primary-color);
   color: var(--dark-bg);
}

.btn-primary:hover {
   background-color: transparent;
   color: var(--primary-color);
   border-color: var(--primary-color);
}

.btn-outline {
   background-color: transparent;
   color: var(--light-text);
   border-color: var(--light-text);
}

.btn-outline:hover {
   background-color: var(--light-text);
   color: var(--dark-bg);
}

.btn-whatsapp {
   background-color: #25D366;
   color: white;
   padding: 10px 20px;
   border-radius: 5px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-weight: bold;
   margin: 20px 0;
}

.btn-whatsapp:hover {
   background-color: #20BA5C;
}

.btn-block {
   width: 100%;
}

/* 1 — NAVBAR */
.navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   padding: 10px 0;
   transition: var(--transition);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8));
   height: auto;
}

.navbar.scrolled {
   background: var(--dark-bg);
   padding: 10px 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   border-bottom: 1px solid var(--primary-color);
}

.nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 60px;
}

.logo,
.logo a {
   display: flex;
   align-items: center;
   height: 100%;
   text-decoration: none;
}

.nav-logo-img {
   height: 50px;
   width: auto;
   max-width: 150px;
   object-fit: contain;
}

.nav-links {
   display: flex;
   gap: 25px;
}

.nav-links li a {
   font-family: var(--font-heading);
   font-size: 1rem;
   font-weight: 400;
   position: relative;
   white-space: nowrap;
}

.nav-links li a::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -5px;
   left: 0;
   background-color: var(--primary-color);
   transition: var(--transition);
}

.nav-links li a:hover::after {
   width: 100%;
}

/* Header Extras (Social + Flags) */
.header-extras {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-left: 15px;
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   padding-left: 20px;
}

.social-header {
   display: flex;
   gap: 12px;
}

.social-header a {
   color: #bbb;
   font-size: 1.1rem;
   transition: var(--transition);
}

.social-header a:hover {
   color: var(--primary-color);
   transform: translateY(-2px);
}

.lang-flags {
   display: flex;
   gap: 10px;
   align-items: center;
}

.lang-flags a {
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.5;
   transition: all 0.3s ease;
   filter: grayscale(100%);
}

.lang-flags a.active,
.lang-flags a:hover {
   opacity: 1;
   filter: grayscale(0%);
   transform: scale(1.1);
}

.lang-flags img {
   width: 24px;
   height: auto;
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
   .header-extras {
      flex-direction: column;
      align-items: center;
      border: none;
      margin: 20px 0;
      padding: 0;
      gap: 15px;
   }
}

.nav-links li a:hover {
   color: var(--primary-color);
}

.mobile-menu-btn {
   display: none;
   font-size: 1.5rem;
   color: var(--primary-color);
   cursor: pointer;
}

/* 2 — HERO SECTION */
.hero {
   position: relative;
   height: 100vh;
   min-height: 600px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   overflow: hidden;
   background: linear-gradient(135deg, #1a0b00 0%, #4a0000 50%, #1a0b00 100%);
   background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)), url('../images/hero-bg.png');
   background-size: cover;
   background-position: center;
}

.hero-content {
   position: relative;
   z-index: 5;
   padding-top: 80px;
   max-width: 900px;
   margin: 0 auto;
   color: #ffffff;
}

.hero-slogan {
   font-size: 4rem;
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 40px;
   text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
   color: #fff;
   opacity: 0;
   animation: fadeInUp 1s ease 0.5s forwards;
}

.hero-buttons {
   display: flex;
   gap: 25px;
   justify-content: center;
   opacity: 0;
   animation: fadeInUp 1s ease 1s forwards;
}

.knife-animation {
   position: absolute;
   bottom: -20px;
   right: 5%;
   width: 350px;
   max-width: 30vw;
   z-index: 4;
   filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.8));
   opacity: 0;
   animation: knifeEntrance 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s forwards;
   pointer-events: none;
}

.knife-img {
   width: 100%;
   height: auto;
   display: block;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(40px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes knifeEntrance {
   from {
      opacity: 0;
      transform: translateX(100px) rotate(20deg);
   }

   to {
      opacity: 1;
      transform: translateX(0) rotate(0deg);
   }
}

/* 3 — ABOUT SECTION */
.about-section {
   background-color: var(--dark-bg);
}

.about-content {
   display: block;
   width: 100%;
}

.about-text p {
   font-size: 1.1rem;
   color: var(--gray-text);
   margin-bottom: 15px;
}

.about-subtitle {
   font-size: 1.3rem;
   color: var(--primary-color);
   margin-bottom: 15px;
   font-weight: 700;
   letter-spacing: 1px;
}

.about-list {
   list-style-type: disc;
   padding-left: 20px;
   margin-bottom: 20px;
}

.about-list li {
   font-size: 1rem;
   color: #bbb;
   margin-bottom: 10px;
}

.about-features {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 30px;
}

.feature-item {
   text-align: center;
   background: #1a1a1a;
   padding: 20px;
   border: 1px solid #333;
   transition: var(--transition);
}

.feature-item:hover {
   border-color: var(--primary-color);
   transform: translateY(-5px);
}

.feature-icon {
   width: 60px;
   height: 60px;
   background: var(--primary-color);
   border-radius: 50%;
   margin: 0 auto 15px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.feature-icon img {
   max-width: 30px;
}

.feature-item h3 {
   font-size: 1.2rem;
   color: var(--dark-bg);
}

/* 4 — MENU SECTION */
.menu-section {
   background-color: var(--darker-bg);
}

.menu-grid {
   column-count: 2;
   column-gap: 30px;
}

.menu-category {
   background: #151515;
   padding: 25px;
   border-left: 4px solid var(--primary-color);
   break-inside: avoid;
   /* Prevents box from splitting across columns */
   /* Spacing between bottom of one box and top of next */
   display: inline-block;
   /* Helps render properly in columns */
   width: 100%;
   /* Ensures full width within the column */
}

@media (max-width: 768px) {
   .menu-grid {
      column-count: 1;
   }
}

.category-title {
   color: var(--primary-color);
   font-size: 1.8rem;
   margin-bottom: 20px;
   border-bottom: 1px solid #333;
   padding-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 15px;
}

.category-title img {
   height: 40px;
   /* Adjust size as needed */
   width: auto;
}

.menu-list li {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   border-bottom: 1px dashed #333;
   padding-bottom: 10px;
}

.item-details {
   flex: 1;
}

.item-name {
   display: block;
   font-size: 1.2rem;
   font-weight: 500;
   color: #fff;
}

.item-weight {
   font-size: 0.9rem;
   color: var(--primary-color);
   margin-right: 10px;
}

.item-eng {
   font-size: 0.9rem;
   color: #777;
   font-style: italic;
}

.item-price {
   width: 80px;
   height: 30px;
   background: #222;
   border: 1px solid #444;
   border-radius: 4px;
}

/* 5 — BUTCHER SECTION */
.butcher-section {
   background-color: #000;
   border-top: 2px solid var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
}

.butcher-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   align-items: start;
}

.butcher-column {
   background: #111;
   border: 1px solid #333;
   padding: 20px;
}

.butcher-cat-title {
   background: var(--primary-color);
   color: #000;
   padding: 10px;
   text-align: center;
   margin-bottom: 20px;
   font-size: 1.4rem;
   font-weight: 700;
}

.butcher-list li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
   padding-bottom: 5px;
   border-bottom: 1px solid #222;
}

.butcher-list .p-name {
   color: #ddd;
   font-size: 1rem;
}

.butcher-list .p-price-box {
   width: 60px;
   height: 25px;
   background: #222;
   border: 1px solid #444;
}

/* 6 — GALLERY SECTION */
.gallery-section {
   background-color: var(--dark-bg);
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}

.gallery-item {
   aspect-ratio: 1/1;
   overflow: hidden;
   background: #222;
   border: 1px solid #333;
   position: relative;
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
   opacity: 0.8;
}

.gallery-item:hover img {
   transform: scale(1.1);
   opacity: 1;
}

/* 7 — SHOP PHOTOS */
.shop-section {
   background-color: var(--darker-bg);
}

.shop-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

.shop-photo {
   height: 400px;
   background: #222;
   border: 2px solid var(--primary-color);
}

.shop-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* 8 — VIDEO SECTION */
.video-section {
   background-color: var(--dark-bg);
}

.video-grid {
   display: flex;
   /* Use flexbox for better control over mixed aspect ratios */
   justify-content: center;
   align-items: center;
   gap: 40px;
   flex-wrap: wrap;
}

.video-wrapper {
   background: #000;
   border: 1px solid #333;
   /* Fixed height ensures both videos are visually balanced */
   height: 400px;
}

.vertical-video {
   /* Auto width based on height & aspect ratio */
   aspect-ratio: 9/16;
   width: auto;
}

.horizontal-video {
   /* Auto width based on height & aspect ratio */
   aspect-ratio: 16/9;
   width: auto;
}

video {
   width: 100%;
   height: 100%;
   object-fit: contain;
   /* Ensure full video is visible within the wrapper */
}

/* 8.5 — ONLINE ORDER & PAYMENT */
.order-payment-section {
   background-color: var(--dark-bg);
   border-top: 1px solid #333;
   border-bottom: 1px solid #333;
}

.order-payment-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
}

.op-column h2 {
   margin-bottom: 30px;
}

.brand-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 20px;
}

.brand-item {
   background: #1a1a1a;
   border: 1px solid #333;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: var(--transition);
   text-align: center;
   border-radius: 8px;
   text-decoration: none;
}

.brand-item:hover {
   border-color: var(--primary-color);
   transform: translateY(-5px);
}

.brand-item img {
   max-width: 80px;
   height: 50px;
   object-fit: contain;
   background: #fff;
   padding: 5px;
   border-radius: 4px;
}

.brand-item span {
   font-size: 0.9rem;
   color: #ccc;
   font-weight: 500;
}

/* 9 — CONTACT SECTION */
.contact-section {
   background-color: #1a1a1a;
   position: relative;
}

.contact-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 50px;
}

.contact-info {
   flex: 1;
}

.info-item {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   font-size: 1.2rem;
}

.info-item i {
   color: var(--primary-color);
   margin-right: 15px;
   font-size: 1.5rem;
}

.map-placeholder {
   width: 100%;
   height: 300px;
   margin-top: 20px;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #333;
}

.map-placeholder iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

.contact-form-wrapper {
   flex: 1;
   background: #222;
   padding: 30px;
   border-radius: 5px;
   border-top: 3px solid var(--primary-color);
}

.contact-form-wrapper h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
}

.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   color: #aaa;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 12px;
   background: #333;
   border: 1px solid #444;
   color: #fff;
   border-radius: 4px;
   font-family: var(--font-body);
}

.form-group input:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--primary-color);
}

/* 10 — FOOTER */
.footer {
   background-color: #000;
   padding: 40px 0;
   border-top: 1px solid var(--primary-color);
   text-align: center;
}

.footer-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
}

.footer p {
   color: #888;
}

.social-links {
   display: flex;
   gap: 15px;
}

.social-icon {
   width: 40px;
   height: 40px;
   background: #222;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: var(--transition);
   text-decoration: none;
}

.about-grid-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: start;
}

/* RESPONSIVE MEDIA QUERIES */

/* Tablet and below */
@media (max-width: 1024px) {

   .butcher-grid,
   .gallery-grid,
   .about-grid-layout,
   .order-payment-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Mobile */
@media (max-width: 768px) {
   .nav-links {
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      height: 100vh;
      background: #000;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: 0.5s ease;
   }

   .nav-links.active {
      right: 0;
   }

   .mobile-menu-btn {
      display: block;
      position: relative;
      z-index: 1100;
   }

   /* Mobile Video Fixes */
   .video-wrapper {
      width: 100% !important;
      height: auto !important;
      margin-bottom: 20px;
   }

   .vertical-video {
      aspect-ratio: 9/16;
      max-height: 500px;
      margin: 0 auto;
   }

   .horizontal-video {
      aspect-ratio: 16/9;
   }

   .butcher-grid,
   .about-grid-layout,
   .order-payment-grid {
      grid-template-columns: 1fr !important;
   }

   .knife-animation {
      right: 0;
      bottom: 0;
      width: 200px;
   }
}

/* 8.8 — REVIEWS SECTION */
.reviews-section {
   background-color: var(--dark-bg);
}

.reviews-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
   margin-bottom: 20px;
}

@media (max-width: 768px) {
   .reviews-grid {
      grid-template-columns: 1fr;
   }
}

.review-column {
   background: #1a1a1a;
   border-radius: 10px;
   padding: 30px;
   border: 1px solid #333;
   position: relative;
   overflow: hidden;
   min-height: 350px;
   display: flex;
   flex-direction: column;
}

.google-column {
   border-top: 4px solid #4285F4;
}

.tripadvisor-column {
   border-top: 4px solid #00AF87;
}

.platform-header {
   text-align: center;
   margin-bottom: 20px;
   border-bottom: 1px solid #333;
   padding-bottom: 15px;
}

.platform-icon {
   font-size: 2rem;
   margin-bottom: 5px;
}

.google-icon {
   color: #4285F4;
}

.trip-icon {
   color: #00AF87;
}

.platform-stars {
   color: #FFD700;
   /* Gold */
   font-size: 0.9rem;
   margin-top: 5px;
}

.tripadvisor-column .platform-stars {
   color: #00AF87;
   /* TA Green circles */
}

/* Slider */
.review-slider {
   position: relative;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.review-slide {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   opacity: 0;
   transition: opacity 1s ease-in-out;
   pointer-events: none;
   text-align: center;
}

.review-slide.active {
   opacity: 1;
   pointer-events: auto;
}

.review-user {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
   gap: 10px;
}

.user-initial {
   width: 40px;
   height: 40px;
   background: #333;
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
}

.user-name {
   font-weight: 600;
   color: #ddd;
}

.review-stars {
   color: #FFD700;
   margin-bottom: 10px;
}

.tripadvisor-column .review-stars {
   color: #00AF87;
}

.review-text {
   font-size: 1.1rem;
   color: #bbb;
   font-style: italic;
   margin-bottom: 10px;
   line-height: 1.5;
}

.review-date {
   font-size: 0.8rem;
   vertical-align: middle;
   margin-right: 15px;
   display: inline-block;
}

/* Butcher Section - Mental Menu Board Style */

/* Widen the container specifically for this section to fit 2-column lists */
.butcher-section .container {
   max-width: 98% !important;
   padding: 0 10px;
}

.butcher-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr) !important;
   /* Force 4 Columns Side-by-Side */
   gap: 15px;
   align-items: start;
}

/* Responsive Breakpoints */
@media (max-width: 1300px) {
   .butcher-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      /* Tablet/Laptop: 2x2 */
   }
}

@media (max-width: 768px) {
   .butcher-grid {
      grid-template-columns: 1fr !important;
      /* Mobile: 1 col */
   }
}

.butcher-section .menu-category {
   background: #111;
   border: 1px solid #333;
   border-radius: 8px;
   padding: 10px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   height: 100%;
}

.butcher-section .category-title {
   background-color: #FFD700;
   color: #000;
   padding: 6px;
   text-align: center;
   font-family: 'Oswald', sans-serif;
   font-size: 1.3rem;
   font-weight: 700;
   text-transform: uppercase;
   border-radius: 4px;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   line-height: 1.1;
}

.butcher-section .category-title img {
   height: 22px;
   width: auto;
}

/* INTERNAL 2-COLUMN LIST */
.butcher-section .butcher-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   /* Split list into 2 columns */
   column-gap: 15px;
   /* Compact internal gap */
   row-gap: 2px;
   padding: 0;
   height: 100%;
   /* Fill remaining space */
   align-content: space-between;
   /* Spread items evenly vertically */
}

/* Ensure columns stretch */
.butcher-col {
   height: 100%;
}

.butcher-col-stacked {
   /* Stacked column automatically fills height via flex children if needed, 
       but here we just want it to act as a wrapper. */
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* If there is extra space, put it between the two boxes */
}

/* Ensure categories fill the col wrappers */
.butcher-section .menu-category {
   background: #111;
   border: 1px solid #333;
   border-radius: 8px;
   padding: 10px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   height: 100%;
   /* Force full height */
}

.butcher-section .butcher-list li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #222;
   padding: 3px 0;
}

/* Fix border for grid items: remove border from last 2 items (roughly bottom row) */
.butcher-section .butcher-list li:nth-last-child(-n+2) {
   border-bottom: none;
}

.butcher-section .item-name {
   color: #fff;
   font-family: 'Oswald', sans-serif;
   font-size: 1.0rem;
   /* Compact fit size */
   font-weight: 500;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   line-height: 1.1;
}

.butcher-section .item-price {
   background-color: #fff;
   color: #000;
   font-family: 'Oswald', sans-serif;
   font-weight: 700;
   font-size: 1.0rem;
   padding: 1px 5px;
   border-radius: 3px;
   min-width: 45px;
   text-align: center;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}