body {
     margin: 0;
     font-family: 'Segoe UI', sans-serif;
     background-color: #ffffff;
     color: #1d3557;
 }

 header {
     background-color: #1d3557;
     color: #fff;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .cta-button {
     background-color: #fcbf49;
     color: #000;
     padding: 10px 20px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
 }

 .banner {
     background-color: #fcbf49;
     text-align: center;
     font-weight: bold;
     padding: 10px;
 }

 section {
     padding: 40px 20px;
     max-width: 1000px;
     margin: auto;
     text-align: center;
 }

 .services {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     gap: 20px;
     margin-top: 20px;

 }

 .service {
     flex: 1 1 200px;
     background-color: #f1f1f1;
     border-radius: 12px;
     padding: 20px;
     text-align: center;
 }

 footer {
     background-color: #1d3557;
     color: #fff;
     text-align: center;
     padding: 20px;
 }

 iframe {
     width: 100%;
     height: 300px;
     border: none;
 }

 .gallery {
     width: auto;
     display: flex;
     overflow-x: scroll;

 }

 .gallery div {
     display: grid;
     grid-template-columns: auto auto;
     grid-gap: 20px;
     padding: 10px;
     flex: none;
 }

 .gallery div img {
     width: 300px;
     filter: grayscale(100%);
     transition: transform 0.5s;
 }

 .gallery::-webkit-scrollbar {
     display: none;


 }

 .gallery-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 5% auto;
 }

 #backBtn,
 #nextBtn {
     width: 50px;
     cursor: pointer;
     margin: auto;

 }

 .gallery div img:hover {
     filter: grayscale(0);
     cursor: pointer;
     transform: scale(1.1)
 }

 .social-section {
     text-align: center;
     padding: 40px 20px;
     background-color: #f5f5f5;
 }

 .social-section h2 {
     font-size: 1.5rem;
     margin-bottom: 20px;
     color: #1d3557;
 }

 .social-links {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .social-links a {
     color: #fff;
     background-color: #1d3557;
     font-size: 22px;
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     text-decoration: none;
     transition: transform 0.2s ease, background 0.3s ease;
 }

 .social-links a:hover {
     background-color: #fcbf49;
     transform: scale(1.1);
 }

 .branches {
     padding: 40px 20px;
     text-align: center;
     background-color: #f9f9f9;
 }

 .branches h2 {
     font-size: 1.5rem;
     margin-bottom: 20px;
     color: #1d3557;
 }

 .branch-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px;
 }

 .branch-link {
     display: inline-block;
     background-color: #1a1a1a;
     color: #fcbf49;
     padding: 10px 15px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
     min-width: 120px;
     text-align: center;
     transition: background-color 0.3s ease;
 }


 .more-branches {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     margin-top: 15px;
 }

 .branch-link:hover {
     background-color: #911923;
 }

 .toggle-btn {
     margin-top: 20px;
     padding: 10px 18px;
     background-color: #1d3557;
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 1rem;
     box-shadow:  0 2px 6px rgba(0,0,0,0.1);
     transition: background-color 0.3s ease;
 }

 .toggle-btn:hover {
     background-color: #5193f0;
 }

 .hidden {
     display: none;
 }

 @media screen and (max-width: 768px) {
     .branch-link {
         width: 100%;
         max-width: 300px;
     }
 }