﻿
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f6f6f6;color:#333;line-height:1.6}
header{background:linear-gradient(to right,#fff,#ececec,#d7d7d7);position:sticky;top:0;z-index:999;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.container{width:92%;margin:auto}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:5px 0}
.logo img{height:75px}
nav ul{list-style:none;display:flex;gap:18px;align-items:center}
nav ul li{position:relative}
nav ul li a{text-decoration:none;color:#333;font-size:14px;padding:10px;font-weight:bold;display:block}
nav ul li:hover>a{color:#b00000}
.dropdown{display:none;position:absolute;top:40px;background:#fff;min-width:230px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
nav ul li:hover .dropdown{display:block}
.menu-toggle{display:none;font-size:30px;cursor:pointer}
.slider{overflow:hidden;background:#fff}
.slides{display:flex;width:400%;animation:slide 18s infinite}
.slide{width:100%;position:relative}
.slide img{width:100%;height:620px;object-fit:cover}
.caption{position:absolute;top:35%;left:8%;background:rgba(255,255,255,.85);padding:25px;border-radius:15px;animation:fade 3s infinite}
@keyframes fade{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes slide{0%,20%{transform:translateX(0)}25%,45%{transform:translateX(-25%)}50%,70%{transform:translateX(-50%)}75%,100%{transform:translateX(-75%)}}
.section,.hero{padding:1px 0}
.hero{text-align:center}
.hero h1{font-size:42px;margin-bottom:5px}
.btn{display:inline-block;padding:14px 28px;background:#444;color:#fff;border:none;border-radius:30px;text-decoration:none;margin-top:15px;cursor:pointer}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-top:10px}
.card{background:#fff;padding:25px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.card img{width:100%;border-radius:12px;margin-bottom:15px}
form{background:#fff;padding:30px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
form input,form select{width:100%;padding:14px;margin:10px 0;border:1px solid #ccc;border-radius:8px}
.button-group{display:flex;gap:15px}
.reviews-section{padding:10px 0;background:#ececec;text-align:center}
.review-wrap{overflow:hidden}
.reviews-track{display:flex;gap:20px;width:max-content;animation:scroll 35s linear infinite}
.review-card{background:#fff;padding:20px;border-radius:16px;min-width:260px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.review-card img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:15px}
footer{background:#3d3d3d;color:#fff;text-align:center;padding:20px;margin-top:40px}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:768px){
.menu-toggle{display:block}
nav ul{display:none;flex-direction:column;position:absolute;top:95px;right:4%;background:#fff;width:92%;padding:20px;border-radius:12px}
nav ul.active{display:flex}
.dropdown{position:static;box-shadow:none}
.slide img{height:320px}
.hero h1{font-size:28px}
}


@media(max-width:768px){
  .navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
  }

  .logo{
    flex:1;
  }

  .logo img{
    height:70px;
    max-width:100%;
  }

  .menu-toggle{
    display:block;
    font-size:34px;
    margin-left:40px;
    padding-right:10px;
    z-index:2000;
  }

  nav ul{
    top:105px;
  }
}
