@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

*{
    font-family: "Crimson Text", serif;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    text-align: justify;
    list-style-type: none;
    
}
body {
    position: relative;
    
    background: #3d4b34 url(/src/images/Background_Img.webp);
    border: 1px solid #e1d1b2;
    margin: 25px;
    
}

body::before,
body::after,
body.top-left,
body.top-right,
body.bottom-left,
body.bottom-right {
    content: "";
    position: absolute;
    width: 50px; 
    height: 50px; 
    background-image: url(/src/images/border-corner.png);
    background-repeat: no-repeat;
}

body::before {
    top: 0;
    left: 0;
}

body::after {
    top: 0;
    right: 0;
    transform: rotate(90deg); 
}

body.bottom-left {
    bottom: 0;
    left: 0;
    transform: rotate(-90deg); 
}

body.bottom-right {
    bottom: 0;
    right: 0;
    transform: rotate(180deg); 
}
.navbar {
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin: 20px 10px;
}

.navbar__canvas ul li a{
    color: #e1d1b2;
    text-decoration: underline;
    font-size: 32px;
    font-weight: 600;
}
  

  .reservation-button.outlined-link {
      --main-color: #dcc69c;
  }
  
  .reservation-button.outlined-link {
      --main-color-rgb: 220, 198, 156;
  }
  
  .reservation-button.outlined-link {
      --second-color: #e1d1b2;
  }
  
  .reservation-button.outlined-link {
      --third-color: #aaa181;
  }
  
  .reservation-button.outlined-link {
      --fourth-color: #3d4b34;
  }
  
/* 
  @media all {
      body {
          background: url(https://optimalrealty.in/src/images/Background_Img.webp) 0 0;
          overflow-x: hidden;
          -webkit-font-smoothing: antialiased;
      }
  }
   */
 
  @media all {
      html {
          vertical-align: baseline;
          margin: 0;
          padding: 0;
          background: 0 0;
          border: 0;
          outline: 0;
      }
  }
  

  @media all {
      a {
          vertical-align: baseline;
          margin: 0;
          padding: 0;
          background: 0 0;
          border: 0;
          outline: 0;
          color: var(--second-color);
          text-decoration: none;
          transition: color .2s ease-out;
          cursor: pointer;
      }
  
      .widget a {
          color: var(--main-color);
      }
  
      a:hover {
          color: var(--third-color);
      }
  
      .widget a:hover {
          color: var(--second-color);
      }
  }
  

  @media all {
      .reservation-button.outlined-link {
          font-family: "Crimson Pro", serif;
          font-weight: 600;
          color: var(--main-color);
          font-size: 19px;
          line-height: 1.2em;
          position: relative;
          display: inline-flex;
          vertical-align: middle;
          width: auto;
          margin: 0;
          text-decoration: none;
          border-radius: 0;
          outline: 0;
          transition: color .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
          padding: 16px 56px 16px 56px;
      }
  
      .reservation-button.outlined-link {
          color: var(--main-color);
          background-color: transparent;
          border: 1px solid var(--main-color);
      }
  }
  

  @media all {
      ::selection {
          color: #fff;
          background: var(--main-color);
      }
  }
  
 
  @media all {
      .button-inner-border {
          position: absolute;
          left: 3px;
          right: 3px;
          top: 3px;
          bottom: 3px;
          border: 1px solid rgba(var(--main-color-rgb), .5);
      }
  
      .button-inner-border .button-border-top {
          position: absolute;
          background-color: currentColor;
          transition: transform .5s cubic-bezier(.71, .29, .18, .97);
          transform: scaleX(1) scaleY(1);
          will-change: transform;
      }
  
      .button-inner-border .button-border-top {
          top: -1px;
          right: 0;
          height: 1px;
          width: calc(100% + 1px);
          transform-origin: right;
          transform: scaleX(0);
      }
  
      .reservation-button.outlined-link:hover .button-inner-border .button-border-top {
          transform: scaleX(1);
      }
  
      .button-inner-border .button-border-right {
          position: absolute;
          background-color: currentColor;
          transition: transform .5s cubic-bezier(.71, .29, .18, .97);
          transform: scaleX(1) scaleY(1);
          will-change: transform;
      }
  
      .button-inner-border .button-border-right {
          top: 0;
          right: -1px;
          width: 1px;
          height: calc(100% + 1px);
          transform-origin: top;
          transform: scaleY(0);
      }
  
      .reservation-button.outlined-link:hover .button-inner-border .button-border-right {
          transform: scaleY(1);
      }
  
      .button-inner-border .button-border-bottom {
          position: absolute;
          background-color: currentColor;
          transition: transform .5s cubic-bezier(.71, .29, .18, .97);
          transform: scaleX(1) scaleY(1);
          will-change: transform;
      }
  
      .button-inner-border .button-border-bottom {
          bottom: -1px;
          right: 0;
          height: 1px;
          width: calc(100% + 1px);
          transform-origin: left;
          transform: scaleX(0);
      }
  
      .reservation-button.outlined-link:hover .button-inner-border .button-border-bottom {
          transform: scaleX(1);
      }
  
      .button-inner-border .button-border-left {
          position: absolute;
          background-color: currentColor;
          transition: transform .5s cubic-bezier(.71, .29, .18, .97);
          transform: scaleX(1) scaleY(1);
          will-change: transform;
      }
  
      .button-inner-border .button-border-left {
          bottom: 0;
          left: -1px;
          width: 1px;
          height: calc(100% + 1px);
          transform-origin: bottom;
          transform: scaleY(0);
      }
  
      .reservation-button.outlined-link:hover .button-inner-border .button-border-left {
          transform: scaleY(1);
      }
  }
  



/* ------------------------------------------------------------------------------  */
  
  .navbar__logo {
    height: 180px;
 
    position: absolute;
    left: 45%;
  }
  
  .navbar__logo img {
    height: 100%;
  }
  .navbar__hamburger{
    border: none;
    margin-right: 20px;

  }


input[type="checkbox"]:focus {
    outline: none;
}

  .hamburger {
    height: 50px;
    width: 50px;
    transform: 0.2s;
    position: relative;
    background-color: #3d4b34;
    border: none;
  }
  .hamburger .checkbox {
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  .line {
    transition: 0.5s;
    stroke-width: 6px;
    stroke: #e1d1b2;
  }
  .lineTop {
    stroke-dasharray: 40 40;
    stroke-dashoffset: 25;
  }
  .lineBottom {
    stroke-dasharray: 40 40;
    stroke-dashoffset: 60;
  }
  .lineMid {
    stroke-dasharray: 40 40;
  }
  .hamburger .checkbox:checked + svg .line {
    stroke: #e1d1b2;
  }
  .hamburger .checkbox:checked + svg .lineTop {
    stroke-dashoffset: 0;
    transform-origin: left;
    transform: rotateZ(45deg) translate(-7px, -5px);
  }
  .hamburger .checkbox:checked + svg .lineMid {
    stroke-dashoffset: 40;
  }
  .hamburger .checkbox:checked + svg .lineBottom {
    stroke-dashoffset: 0;
    transform-origin: left;
    transform: rotateZ(-45deg) translate(-5px, 5px);
  }
  
  .navbar__canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: all 0.3s ease-in-out;
  }
  
  .navbar__canvas.hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  .navbar__canvas ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

  }
  
  .navbar__canvas li {
    margin: 15px 0;
  }
  
  .navbar__canvas a {
    color: #fff;
    text-decoration: none;
    font-size: 28px;
  }



  @media (max-width: 800px) {
    .contact-btn {
        display: none;
    }

    .navbar__logo{
        position: absolute;
        left: 24%;
        top: 1%;
    }
}



/* Main section  */


.hero-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    color: #e1d1b2;
    size: 50px;
}

.hero {
    text-align: justify;
    width: 550px;
    height: auto;
    margin-top: 30px;
    padding: 10px;
}

.hero h1{
    text-align: center;
}

.hero h3{
    text-align: justify;
}


.properties-btn {
    display: flex;
    justify-content: center;
    gap: 40px;
}

@media (max-width: 572px) {
    .properties-btn {
        flex-direction: column;
        align-items: center; 
        gap: 20px; 
    }
}


/* Digit Roller  */

.number-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 50px;
    text-align: center;
    color: #e1d1b2;
}

.number-wrapper {
    margin-top: 10px;
}

.number-column {
    font-size: 70px;
    opacity: 0.5;
}

.number-wrapper p {
    font-size: 25px;
    margin: 0;
    text-align: center;
}

        @media screen and (max-width: 600px) {
            .number-container {
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .number-wrapper {
                margin: 15px 0;
            }

        }

        @media screen and (min-width: 601px) {
            .number-container {
                justify-content: space-around;
            }
        }


        /* Hero IMG  */

        .image-container {
            margin: 5px 20px 20px 20px;
            max-width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        #hero-image {
            width: 100%;
            opacity: 0;
            animation: fadeZoom 20s infinite alternate;
        }
        
        @keyframes fadeZoom {
            0% {
                opacity: 1;
                transform: scale(0.9);
            }
            25% {
                opacity: 1;
                transform: scale(1.1);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
            75% {
                opacity: 1;
                transform: scale(1.1);
            }
            100% {
                opacity: 1;
                transform: scale(0.9);
            }
        }
        

        .bg-design {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            overflow: hidden;
            opacity: 0.6;
        }
        
        @media (max-width: 768px) {
            .bg-design {
                width: 80%;
            }
        }
        


        /* /////////////////////////////////////// Hero - 2 Image section  */
        .container {
            display: flex;
            flex-wrap: wrap;
          }
          
          .content, .image {
            flex: 1;
            padding: 20px;
          }
          
          .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #e1d1b2;
          }
         
          @media (max-width: 850px) {
            .content {
              flex: none;
              width: 100%;
            }
          
            .image {
              flex: none;
              width: calc(100% - 24px); 
              margin: 0 auto; 
              text-align: center; 
            }
          
            .image img {
              max-width: 100%; 
              height: auto;
            }
          }
          
          /* Hero section part-2  */

          #hero-2 {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            background-image: url(/src/images/design_bg.png);
            background-repeat: no-repeat;
            background-position:left;

          }
       .title-description-new {
            flex-basis: 50%;
            padding: 20px;
            margin-left: -150px;
          }
        
       .image-new {
            flex-basis: 50%;
            padding: 20px;
          }
        
          #img-2 {
            max-width: 100%;
            height: auto;
            margin-left: 250px;
          }

          @media (max-width: 1520px) {
            .title-description-new {
                margin-left: -50px;
              }
            }
          @media (max-width: 1339px) {
            #img-2 {
              margin-left: 20px;
            }
            .title-description-new{
              margin-left: 0px;
            }
          }

 @media (max-width: 618px) {
            #img-2 {
              margin-left: 0px;
            }
          }

          @media (min-width: 768px) {
         .image-new {
              order: 1;
            }
         .title-description-new {
              order: 2;
            }
          }
        
        
          @media (max-width: 767px) {
          .title-description-new,.image-new {
              flex-basis: 100%;
            }
            #img-2 {
              max-width: 100%;
              height: auto;
            }

          }

          #ERS, #STE, #2-btn {
            transform: translateX(-200px);
          }
        
          @media (max-width: 1479px) {
            #ERS, #STE , #2-btn {
              transform: translateX(-100px);
            }
          }
        
          @media (max-width: 1106px) {
            #ERS, #STE, #2-btn {
              transform: translateX(-1px);
            }
          }

          /* ------------------------- Crousal Css ----------------  */
     /* Global Styles */


/* Carousel Styles */

.parent-div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;

}

.carousel-container {
  position: relative;
  margin: 1em auto;
  max-width: 80%;
}

.carousel-container,.carousel-caption {
  box-shadow: 0 0 5px rgba(204, 204, 204, 0.5);
}

.carousel-container img {
  border-radius: 0.5em;
  max-width: 100%; 
  height: auto; 
}


.hidden {
  display: none;
}

.visible {
  display: block;
}

.arrow {
  display: inline;
}

.prev,.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 1em;
  color: #e1d1b2;
  font-weight: bold;
  font-size: 1.2em;
  transition: 0.3s ease;
  border-radius: 0.5em;
  user-select: none;
  background-color: rgba(204, 204, 204, 0.3);
}

.next {
  right: 0;
}

.prev:hover,.next:hover {
  box-shadow: 0 0 5px #3d4b34;
  border: 1px solid #3d4b34;
}

.slide-numbers {
  text-align: center;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #e1d1b2;
  border-radius: 50%;
  display: inline-block;
}

.dot:hover,.active {
  background-color: rgb(204, 204, 204);
  height: 12px;
  width: 12px;
}

.dot:hover {
  box-shadow: 0 0 5px #fff;
}

.carousel-caption {
  text-align: center;
  font-family: 'Nanum Gothic', serif;
  background-color: rgba(204, 204, 204, 0.8);
  max-width: 600px;
  margin: 0.5em auto;
  padding: 1em 0;
  border-radius: 0.5em;
}

/* Media Queries */

@media (max-width: 768px) {
 .carousel-container {
    max-width: 90%; 
  }
 .carousel-caption {
    max-width: 400px; 
  }
}

@media (max-width: 480px) {
 .carousel-container {
    max-width: 95%; 
  }
 .carousel-caption {
    max-width: 300px; 
  }
}


/* <!-- //////////////// FOUR SERVICE SECTION **************  --> */


/* Parent Container Styles */

.parent-4-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2em;
}

/* Container Styles */

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

/* Column Styles */

.column {
  flex: 1 0 45%;
  margin-bottom: 2em;
  text-align: center;
}

.logo-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1em;
}

.title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  text-align: center;
  color: #e1d1b2;
}

.description {
  font-size: 18px;
  line-height: 1.5;
  max-width: 330px;
  text-align: center;
  margin-left: 110px;
  color: #e1d1b2;
}

/* Media Queries */

@media (max-width: 768px) {
  .column {
    flex: 1 0 100%;
  }
}

@media (max-width: 1082px) {
  .description {
    margin-left: 70px;
  }
}

@media (max-width: 964px) {
  .description {
    margin-left: 0px;
  }
}

/* ////////////// Video section Css ////////////  */

/* Parent Container Styles */

.parent-video-section {
  width: 100%;
  margin: 0 auto;
  /* padding: 2em; */
}

.video-container {
  margin: 0 25px;
}

/* Video Styles */

.full-width-video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .full-width-video {
    width: 100%;
  }
}

/* /////////////// Property Listing//////////  */

.container-45 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;

}

.property-card {
  display: flex;
  max-width: 800px;
  background-color: #3d4b349a;
  color: #fff;
  border: 2px solid #e1d1b2;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px #3d4b34;
}

.property-card img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

.property-details {
  padding: 20px;
  color: #e1d1b2;
  text-align: left;

}

.property-details h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.property-details p {
  margin-bottom: 20px;
  font-size: 18px;
}

.know-more {
  background-color: hwb(40 70% 12% / 0.767);
  color: #3d4b34;
  font-weight: 800;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.know-more:hover {
  background-color: #e1d1b2;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.nav-buttons button {
  font-size: 24px;
  color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.nav-buttons button:hover {
  color: #ccc;
}

@media screen and (max-width: 809px) {
  .property-card {
    flex-direction: column;
    align-items: center;
  }
  
  .property-card img {
    width: 100%;
  }
}

/* /////////////// Footer Css//////////////  */


.footer {
  display: flex;
  justify-content: space-evenly;
  margin: 50px;
}

.left-section {
  font-size: 18px;
}

.center-section {
  font-size: 25px;
  text-align: center;
}

.center-section ul {
  padding: 0;
  list-style: none;
}

.center-section li {
  font-size: 22px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-section input[type="email"] {
  margin-bottom: 10px;
}

.right-section p {
  margin-bottom: 10px;
}

.right-section ul {
  padding: 0;
  list-style: none;
}

.center-section ul li {
  position: relative; 
}

.center-section ul li:before {
  content: "◈ ";
  position: absolute;
  left: -20px;
  opacity: 0; 
  transition: opacity 0.3s ease; 
}

.center-section ul li:hover:before {
  opacity: 1; 
}
@media screen and (max-width: 1064px) {
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .left-section, .center-section, .right-section {
    width: 100%;
    margin-bottom: 20px;
  }
}


/* /// Logo Crousal  */

.carousel-container2 {
  width: 80%; 
  height: 60px;
  max-width: 800px; 
  margin: 10px auto; 
  overflow: hidden;
  border-radius: 15px;
  background-color: #e1d1b2; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
}

.carousel2 {
  display: flex;
  justify-content: center; 
  align-items: center; 
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.logo {
  width: 200px; 
  height: auto; 
  padding: 10px;

}
/* ////  Back to TOP  */

.arrow-box {
  position: fixed;
  bottom: 20px; 
  right: 40px; 
  width: 70px;
  height: 70px;
  border: 1px solid #e1d1b2;
  background-color: transparent;
  cursor: pointer; 
}