@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
body {
  font-family: "Roboto", sans-serif;
  background-color: #fbfbfb;
}
h1, h2, h3,h4,h5,h6 {
  color:#3a3a4e;
  margin-bottom: 20px;
}
h1{
  font-size: 40px;
}
h2{
  font-size: 38px;
}
h3{
  font-size: 36px;
  line-height: .6em;
}
h4{
  font-size: 34px;
}
h5{
  font-size: 30px;
}
h6{
  font-size: 26px;
}
p{
  font-family: system-ui;
  font-size: 1rem;
  line-height: 1.5;
  color: #43434a;
  word-spacing: .2em;
}
a{
  text-decoration: none;
  color: #262627;
}
a:hover{
  color:orangered;
}
.text-center{
  text-align:center;
 }
 .text-right{
  text-align:right;
 }
  /* === Navbar Styles === */
  .navbar {
    background:#2a2a3a;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 100;
  }
  .navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
  .navbar ul,.footer ul {
    list-style: none;
    display: flex;
    align-items: center;
  }
  .navbar ul li {
    position: relative;
  }
  .navbar ul li a{
      color:#ffffff;
  }
  .navbar ul li a,.footer ul li a{
    padding: 50px 8px;
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }
 .navbar .right-menu{
  display: flex;
  align-items: center;
 }
  /* === Dropdown Styles === */
  .dropdown {
    display: none;
    position: absolute;
    left: 0;
    background: #2a2a3a;
    min-width: 180px;
    z-index: 10;
  }
  .navbar .dropdown a {
    padding: 15px;
    display: block;
    color:#aaa;
  }
  .navbar .dropdown a:hover {
    color:#fff;
  }
  .navbar ul li:hover .dropdown {
    display: block;
  }
.navbar .logo img {
  height: 50px;
  width: auto;
  display: block;
}
.search-btn,.mob-nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 15px;
  }
.mob-nav-btn {
      display: none;
    }
  /* === Fullscreen Search Overlay === */
  .search-overlay {
    display: none;
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 21, 25, 0.98);
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .search-overlay.active {
    display: flex;
  }
  .search-overlay input {
    padding: 15px;
    width: 100%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid rgb(198, 198, 206);
    max-width: 700px;
    font-size: 32px;
    font-weight: 700;
    background: transparent;
    color: #eee;
    outline: none;
  }
  .close-search {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 20px;
    right: 30px;
    cursor: pointer;
    transition: .3s ease-in-out;
  }
  .close-search:hover{
    transform: rotate(90deg);
  }
   @media (max-width: 768px) {
      .navbar {
        flex-wrap: wrap;
        justify-content: space-between;
        padding:10px;
      }
      .navbar .left-menu,
      .navbar .right-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        /*background: #fff;*/
      }

      .navbar.active .left-menu,
      .navbar.active .right-menu {
        display: flex;
      }
      .navbar ul {
        flex-direction: column;
        text-align: center;
      }
      .navbar ul li a {
        padding: 12px;
      }
      .mob-nav-btn {
        display: block;
      }
      .navbar .logo {
        order: -1;
        /* flex: 1; */
        display: flex;
        justify-content: center;
      }
      .navbar .logo img {
    height: 35px;
}
    }
/* ----------NAVBAR----------- */

 .sticky-contact-widget {
      position: fixed;
      left: 0;
      top: 45%;
      transform: translateY(-50%);
      z-index: 200;
    }
    .toggle-btn {
      background: #111;
      color: #fff;
      padding: 7px;
      border: none;
      cursor: pointer;
      width: 100%;
      border-top-right-radius: 8px;
      transition: .3s ease;
    }
    .rtcont{
        transform:rotate(270deg);
    }
    .tgarrow.tgrotate{
        transform:rotate(180deg);
    }
    .contact-tray {
      display: flex;
      flex-direction: column;
      transition: .3s ease;
    }
    .contact-tray a {
      display: block;
      padding: 16px;
      text-align: center;
      text-decoration: none;
      color: #fff;
    }
    .contact-tray .ct-1{
       background-color:#707070;
    }
    .contact-tray .ct-2{
       background-color:#26D367;
    }
    .contact-tray .ct-3{
       background-color:#2c8bf7;
       border-bottom-right-radius: 8px;
    }
    .toggleTray {
        transform:translateX(-100%);
        transition: .3s ease;
    }
    @media (max-width: 768px) {
      .sticky-contact-widget {
        left: 0; right: 0; bottom: 0; top: auto;
        transform: none;
      }
      .contact-tray {
        flex-direction: row;
      }
      .contact-tray a {
        flex: 1;
      }
      .togglebtn-slide,.toggleTray {
        transform:translateY(140%);
    }
    .toggle-btn{
        width:auto;
        /*padding:15px;*/
    }
    .tgarrow{
        transform:rotate(270deg);
    }
    .tgarrow{
        font-size:20px;
    }
    .tgarrow.tgrotate{
        transform:rotate(90deg);
    }
    }

  .BannerHome {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
 .BannerHome img,
  .BannerHome video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.BannerHome img {
    z-index: 2;
    transition: opacity 1s ease;
  }
.BannerHome img.fade-out {
    opacity: 0;
    z-index: 0;
  }

.section{
 padding:60px 0;
}
.sec-2{
  background-color: transparent;
  background-image: linear-gradient(180deg, #DCE2E6 0%, #FFFFFF00 100%);
}
.container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin: 10px 70px;
  }
.column {
    flex: 1 1 45%;
    min-width: 45%;
    box-sizing: border-box;
  }
  .column-2 {
    flex: 1 1 45%;
    min-width: 45%;
  }
  .column-2 .Vintro{
  font-size: 80%;
  line-height: 120%;
  padding: 10px;
  text-align: center;
}
 .column .sec-2-img {
    width: 100%;
    display: block;
  }

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .FxImage{
    width: 100%;
    height: 80vh;
    background-color: #DCE2E6;
    background-image: url('Images/DSC06884gi.jpg');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 10px;
  }
 
   .carousel-container {
      position: relative;
      width: 100%;
      max-width: 1200px;
      overflow: hidden;
    }
    .carousel-track {
      display: flex;
      transition: transform 0.6s ease;
    }
    .carousel-slide {
      flex: 0 0 calc(100% / 5); /* 5 visible by default */
      padding: 10px;
    }
    .carousel-slide img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
    .carousel-dots {
      text-align: center;
      margin-top: 10px;
    }
    .dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin: 0 5px;
      background: #bbb;
      border-radius: 50%;
      cursor: pointer;
    }
    .dot.active { background: #000; }

    /* Responsive: 2 items visible on <= 1024px */
    @media (max-width: 1024px) {
      .carousel-slide {
        flex: 0 0 calc(100% / 2);
      }
      .FxImage{
    background-attachment: scroll;
  }
    }

  .blog-card h3 a{
    color:#444;
    text-decoration:none;
    font-size:17px;
    cursor: pointer;
  }
  .blog-card .meta-data{
    color:#767681;
    font-size: 13px;
  }
  .blog-card p{
    color:#767681;
    font-size: 14px;
    line-height: 1.3rem;
    margin:18px 0;
  }
.blog-card a{
    font-weight: 700;
    font-size: 13px;
}

.footer{
    background-color: #f2f5f7;
    padding-top:20px;
}
.footer .social a{
  padding: 0 5px;
}
.footer .copyright{
  padding:25px 0;
  font-size: 15px;
  color: #444;
} 
.pagination{
  display: flex;
  list-style-type: none;
  margin: 20px auto;
}
.pagination li{
    margin: 0 3px;
    font-size: 15px;
    padding: 5px 10px;
    cursor: pointer;
    background: #f3f3f3;
}
.pagination li:hover{
  background-color: #e1e5eb;
}
.insta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #408bd1;
      color: #fff;
      font-size: 13px;
      padding: 10px 18px;
      border-radius: 4px;
      transition: background 0.3s;
    }
    .insta-btn:hover{
      color:#fff;
      background-color: #359dff;
    }
.insta-btn .logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }
.insta-btn .logo svg {
      width: 14px;
      height: 14px;
      fill: #ffffff; /* Instagram pink tone */
    }
    .contact-form {
      background: #fff;
      padding: 25px;
      width: 100%;
    }
    .contact-form label {
     display: block;
     margin: 8px 0 4px;
     color: #555;
     font-size: 14px;
    }
    .contact-form input,
    .contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    margin-bottom: 12px;
    font-size: 14px;
    }
    .contact-form textarea {
      resize: none;
      height: 100px;
    }
    .contact-form button {
      width: 100%;
      padding: 12px;
      background: #000;
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: 0.3s;
    }
    .contact-form button:hover {
      background: orangered;
    }
    .message {
      margin-top: 10px;
      font-size: 14px;
      text-align: center;
    }
    .success { color: green; }
    .error { color: red; }
  /* ========Media========= */
  /* Stack columns on small screens */
  @media (max-width: 768px) {
    h1,h2,h3{
      font-size: 30px;
    }
    .section{
 padding:30px 0;
}
    .container {
    margin: 10px 17px;
  }
  .column {
    min-width: 100%;
  }
  .mob-nav-btn{
  display: block;
}
.BannerHome {
    height: 60vh;
  }
.footer ul{
    flex-direction:column;
}
.footer ul li a{
    padding:10px;
}
.social{
    text-align:center;
}
  }
  
/*---------------- Masonry Grid-------------- */
    .masonry {
      column-count: 4;
      column-gap: 10px;
    }
    .masonry img {
      width: 100%;
      margin-bottom: 8px;
      cursor: pointer;
      transition: transform 0.2s;
    }

    /* Lightbox/Carousel */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.9);
      justify-content: center;
      align-items: center;
      z-index: 100;
    }
    .lightbox img {
      max-width: 90%;
      max-height: 80%;
    }
    /* Navigation */
    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      font-size: 2rem;
      padding: 10px;
      cursor: pointer;
      user-select: none;
      z-index: 1100;
    }
    .prev { left: 90px; }
    .next { right: 90px; }
    .close {
      color: #fff;
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 2rem;
      cursor: pointer;
      z-index: 1100;
    }
    /* Top controls */
    .top-controls {
      position: absolute;
      top: 23px;
      right: 65px;
      display: flex;
      gap: 10px;
      z-index: 1100;
    }
    .top-controls span {
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s;
      background: rgba(255,255,255,0.1);
      padding: 6px 10px;
      border-radius: 5px;
    }
  .top-controls span:hover {
    background: rgba(255,255,255,0.3);
  }
  /* Share Dropdown */
  .share-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    color: #000;
    border-radius: 6px;
    padding: 8px;
    z-index: 1200;
    flex-direction: column;
    min-width: 200px;
  }
  .share-dropdown:before{
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    right: .5em;
    border: .45em solid transparent;
    border-bottom-color: #fff;
    transform: translateY(-100%) scaleX(.7);
  }
  .share-dropdown a {
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 13px;
    transition: background 0.3s;
  }
  .share-wrapper {
    position: relative;
  }
  .share-wrapper svg{
    margin-right:6px;
  }
 @media (max-width: 1024px) {
    .masonry { column-count: 3; }
  }
  @media (max-width: 991px) {
    .masonry { column-count: 2; }
  }
  @media (max-width: 768px){
      .prev { left: 30px; }
    .next { right: 30px; }
    .top-controls span {
      font-size: 1rem;
    }
  }