/* =====================================
   NESTNETWORKS PREMIUM REAL ESTATE WEBSITE
   MAIN STYLESHEET
===================================== */



* {

  margin:0;
  padding:0;
  box-sizing:border-box;
  
  }
  
  
  
  html {
  
  scroll-behavior:smooth;
  
  }
  
  
  
  body {
  
  
  font-family:'Inter',sans-serif;
  
  background:#ffffff;
  
  color:#161616;
  
  overflow-x:hidden;
  
  
  }
  
  
  
  :root {
  
  
  --primary:#8B0000;
  
  --secondary:#B22222;
  
  --dark:#4b0000;
  
  --text:#222;
  
  --grey:#666;
  
  --light:#fafafa;
  
  
  }
  
  
  
  
  
  /* =====================================
  NAVBAR
  ===================================== */
  
  
  
/* =====================================
   PREMIUM NAVBAR
===================================== */


header {


   position:fixed;
   
   top:0;
   
   left:0;
   
   width:100%;
   
   z-index:9999;
   
   
   transition:.5s;
   
   
   }
   
   
   
   header.scrolled {
   
   
   background:white;
   
   
   box-shadow:
   
   0 15px 40px rgba(0,0,0,.08);
   
   
   }
   
   
   
   
   .navbar {
   
   
   height:90px;
   
   
   padding:0 8%;
   
   
   display:flex;
   
   align-items:center;
   
   justify-content:space-between;
   
   
   background:
   
   rgba(255,255,255,.45);
   
   
   
   backdrop-filter:
   
   blur(20px);
   
   
   
   }
   
   
   
   
   /* LOGO */
   
   
   .logo a {
   
   
   text-decoration:none;
   
   
   font-size:32px;
   
   
   font-weight:800;
   
   
   letter-spacing:-1px;
   
   
   
   background:
   
   linear-gradient(
   
   120deg,
   
   #5a0000,
   
   #b22222,
   
   #8b0000
   
   );
   
   
   
   -webkit-background-clip:text;
   
   
   color:transparent;
   
   
   
   display:flex;
   
   flex-direction:column;
   
   
   
   }
   
   
   
   .logo span {
   
   
   font-weight:300;
   
   
   }
   
   
   
   .logo small {
   
   
   font-size:10px;
   
   
   letter-spacing:4px;
   
   
   margin-top:5px;
   
   
   font-weight:600;
   
   
   color:#555;
   
   
   -webkit-text-fill-color:#555;
   
   
   }
   
   
   
   
   
   
   /* NAV LINKS */
   
   
   .navbar ul {
   
   
   display:flex;
   
   
   gap:45px;
   
   
   list-style:none;
   
   
   }
   
   
   
   .navbar ul li a {
   
   
   text-decoration:none;
   
   
   font-size:16px;
   
   
   font-weight:500;
   
   
   color:#222;
   
   
   
   position:relative;
   
   
   }
   
   
   
   
   .navbar ul li a::after {
   
   
   content:"";
   
   
   position:absolute;
   
   
   bottom:-10px;
   
   
   left:0;
   
   
   width:0;
   
   
   height:2px;
   
   
   background:#8B0000;
   
   
   transition:.4s;
   
   
   }
   
   
   
   
   .navbar ul li a:hover::after {
   
   
   width:100%;
   
   
   }
  
  
  
  
  
  .navbar {
  
  
  height:85px;
  
  display:flex;
  
  justify-content:space-between;
  
  align-items:center;
  
  
  padding:0 8%;
  
  
  background:rgba(255,255,255,.72);
  
  backdrop-filter:blur(18px);
  
  
  border-bottom:1px solid rgba(0,0,0,.06);
  
  
  }
  
  
  
  
  .logo a {
  
  
  font-size:30px;
  
  font-weight:700;
  
  letter-spacing:-1.5px;
  
  text-decoration:none;
  
  
  background:linear-gradient(
  90deg,
  #5c0000,
  #b22222
  );
  
  
  -webkit-background-clip:text;
  
  color:transparent;
  
  
  }
  
  
  
  .logo span {
  
  
  font-weight:300;
  
  
  }
  
  
  
  
  .navbar ul {
  
  
  display:flex;
  
  gap:45px;
  
  list-style:none;
  
  
  }
  
  
  
  
  .navbar ul li a {
  
  
  text-decoration:none;
  
  color:#222;
  
  font-weight:500;
  
  font-size:15px;
  
  position:relative;
  
  
  }
  
  
  
  .navbar ul li a::after {
  
  
  content:"";
  
  position:absolute;
  
  bottom:-8px;
  
  left:0;
  
  width:0%;
  
  height:2px;
  
  background:var(--primary);
  
  transition:.4s;
  
  
  }
  
  
  
  .navbar ul li a:hover::after {
  
  
  width:100%;
  
  
  }
  
  
  
  
  
  
  
  
  /* =====================================
  GENERAL SECTIONS
  ===================================== */
  
  
  section {
  
  
  padding:120px 10%;
  
  
  }
  
  
  
  
  .section-title {
  
  
  text-align:center;
  
  margin-bottom:70px;
  
  
  }
  
  
  
  .section-title h2 {
  
  
  font-size:55px;
  
  letter-spacing:-2px;
  
  font-weight:700;
  
  
  }
  
  
  
  .section-title p {
  
  
  font-size:18px;
  
  color:var(--grey);
  
  margin-top:15px;
  
  
  }
  
  
  
  
  
  /* =====================================
  ABOUT / HERO
  ===================================== */
  
  
  .hero {

   min-height:100vh;
   
   background:
   
   linear-gradient(
   rgba(90,0,0,.5),
   rgba(0,0,0,.5)
   ),
   
   url("./assets/luxury-realestate.jpg");
   
   background-size:cover;
   
   background-position:center;
   
   display:flex;
   
   align-items:center;
   
   }
  
  
  
  .hero-content {
  
  
  max-width:1100px;
  
  text-align:center;
  
  animation:fadeUp 1.2s ease;
  
  
  }
  
  
  
  
  .hero h1 {
  
  
  font-size:clamp(42px,5vw,75px);
  
  letter-spacing:-3px;
  
  margin-bottom:30px;
  
  
  }
  
  
  
  .hero h1 span {
  
  
  color:var(--primary);
  
  
  }
  
  
  
  
  .hero-text {
  
  
  font-size:22px;
  
  line-height:1.8;
  
  
  }
  
  
  
  .hero p {
  
  
  max-width:900px;
  
  margin:20px auto;
  
  line-height:1.8;
  
  color: rgb(19, 19, 19);;
  
  
  }
  
  
  
  
  
  
  /* TRUST BOXES */
  
  
  .trust-grid {
  
  
  display:flex;
  
  justify-content:center;
  
  gap:35px;
  
  margin:50px 0;
  
  
  }
  
  
  
  .trust-grid div {
  
  
  background:white;
  
  padding:30px 40px;
  
  border-radius:25px;
  
  
  box-shadow:
  
  0 20px 60px rgba(0,0,0,.08);
  
  
  transition:.4s;
  
  
  }
  
  
  
  
  .trust-grid div:hover {
  
  
  transform:translateY(-10px);
  
  
  }
  
  
  
  
  .trust-grid h3 {
  
  
  font-size:38px;
  
  color:var(--primary);
  
  
  }
  
  
  
  .trust-grid p {
  
  
  margin:0;
  
  
  }
  
  
  
  
  
  /* =====================================
  BUTTONS
  ===================================== */
  
  
  .primary-btn {
  
  
  display:inline-block;
  
  padding:17px 50px;
  
  border-radius:50px;
  
  background:var(--primary);
  
  color:white;
  
  text-decoration:none;
  
  font-weight:600;
  
  transition:.4s;
  
  
  }
  
  
  
  .primary-btn:hover {
  
  
  background:var(--dark);
  
  transform:translateY(-5px);
  
  
  box-shadow:
  
  0 20px 40px rgba(139,0,0,.3);
  
  
  }
  
  
  
  
  
  
  
  
  
  /* =====================================
  SERVICES
  ===================================== */
  
  
  #services {
  
  
  background:#fafafa;
  
  
  }
  
  
  
  
  .services-container {
  
  
  display:grid;
  
  grid-template-columns:repeat(2,1fr);
  
  gap:40px;
  
  
  }
  
  
  
  
  .service-card {
  
  
  background:white;
  
  padding:45px;
  
  border-radius:30px;
  
  
  box-shadow:
  
  0 25px 60px rgba(0,0,0,.08);
  
  
  transition:.45s;
  
  cursor:pointer;
  
  
  }
  
  
  
  .service-card h3 {
  
  
  font-size:30px;
  
  color:var(--primary);
  
  margin-bottom:20px;
  
  
  }
  
  
  
  .service-card p {
  
  
  line-height:1.8;
  
  color:#555;
  
  margin-bottom:15px;
  
  
  }
  
  
  
  
  .service-card:hover {
  
  
  transform:
  
  translateY(-18px)
  
  scale(1.04);
  
  
  box-shadow:
  
  0 40px 80px rgba(139,0,0,.18);
  
  
  }
  
  
  
  
  
  
  
  
  
  /* =====================================
  FORM
  ===================================== */
  form label{

   display:block;

   font-size:16px;

   font-weight:600;

   color:#4b0000;

   margin-top:15px;

   margin-bottom:10px;

}
  
  #contact {
  
  
  background:white;
  
  
  }
  
  
  
  form {
  
  
  max-width:950px;
  
  margin:auto;
  
  
  display:flex;
  
  flex-direction:column;
  
  gap:20px;
  
  
  }
  
  
  
  .form-heading {
  
  
  margin-top:30px;
  
  font-size:25px;
  
  color:var(--primary);
  
  
  }
  
  
  
  
  
  input,
  textarea,
  select {
  
  
  width:100%;
  
  padding:18px 20px;
  
  
  border-radius:16px;
  
  
  border:1px solid #ddd;
  
  
  font-family:inherit;
  
  font-size:15px;
  
  
  transition:.3s;
  
  
  }
  
  
  
  
  textarea {
  
  
  min-height:150px;
  
  resize:vertical;
  
  
  }
  
  
  
  input:focus,
  textarea:focus,
  select:focus {
  
  
  outline:none;
  
  border-color:var(--primary);
  
  
  box-shadow:
  
  0 0 0 5px rgba(139,0,0,.08);
  
  
  }
  
  
  
  
  
  
  /* PRICE */
  
  
  .price-box {
  
  
  display:flex;
  
  gap:15px;
  
  
  }
  
  
  
  .price-box input {
  
  
  flex:3;
  
  
  }
  
  
  
  .price-box select {
  
  
  flex:1;
  
  
  }
  
  
  
  .price-warning {
  
  
  font-size:13px;
  
  color:#777;
  
  
  }
  
  
  
  
  
  /* UPLOAD */
  
  
  .upload-description {
  
  
  font-size:14px;
  
  color:#666;
  
  
  }
  
  
  
  
  
  input[type=file] {
  
  
  background:#fafafa;
  
  padding:20px;
  
  
  }
  
  
  
  
  
  
  
  button {
  
  
  padding:18px;
  
  
  border:none;
  
  border-radius:50px;
  
  
  background:var(--primary);
  
  color:white;
  
  
  font-size:17px;
  
  font-weight:600;
  
  
  cursor:pointer;
  
  
  transition:.4s;
  
  
  }
  
  
  
  
  button:hover {
  
  
  background:var(--dark);
  
  transform:translateY(-5px);
  
  
  }
  
  
  
  
  
  
  
  
  
  
  /* =====================================
  CONTACT INFO
  ===================================== */
  
  
  .contact-info {
  
  
  margin-top:80px;
  
  background:#fafafa;
  
  
  padding:50px;
  
  border-radius:30px;
  
  
  text-align:center;
  
  
  }
  
  
  
  
  .contact-info h2 {
  
  
  color:var(--primary);
  
  margin-bottom:25px;
  
  
  }
  
  
  
  
  .contact-info p {
  
  
  margin:15px;
  
  color:#555;
  
  
  }
  
  
  
  
  
  
  
  
  /* =====================================
  SUCCESS SCREEN
  ===================================== */
  
  
  #success {
  
  
  display:none;
  
  
  position:fixed;
  
  
  inset:0;
  
  
  background:white;
  
  
  z-index:5000;
  
  
  align-items:center;
  
  justify-content:center;
  
  
  text-align:center;
  
  
  padding:40px;
  
  
  }
  
  
  
  #success h2 {
  
  
  font-size:50px;
  
  color:var(--primary);
  
  
  }
  
  
  
  #success p {
  
  
  font-size:20px;
  
  max-width:600px;
  
  line-height:1.7;
  
  
  }
  
  
  
  
  
  
  
  
  
  
  /* =====================================
  ANIMATION
  ===================================== */
  
  
  @keyframes fadeUp {
  
  
  from {
  
  
  opacity:0;
  
  transform:translateY(50px);
  
  
  }
  
  
  
  to {
  
  
  opacity:1;
  
  transform:none;
  
  
  }
  
  
  }
  
  
  
  
  
  
  
  
  
  /* =====================================
  MOBILE
  ===================================== */
  
  
  @media(max-width:900px){
  
  
  
  .navbar {
  
  
  padding:0 25px;
  
  
  }
  
  
  
  .navbar ul {
  
  
  gap:15px;
  
  
  }
  
  
  
  .services-container {
  
  
  grid-template-columns:1fr;
  
  
  }
  
  
  
  .trust-grid {
  
  
  flex-direction:column;
  
  
  }
  
  
  
  .section-title h2 {
  
  
  font-size:40px;
  
  
  }
  
  
  
  .price-box {
  
  
  flex-direction:column;
  
  
  }
  
  
  }
  
  
  
  @media(max-width:600px){
  
  
  .logo a {
  
  
  font-size:22px;
  
  
  }
  
  
  .navbar ul li a {
  
  
  font-size:13px;
  
  
  }
  
  
  
  .hero h1 {
  
  
  font-size:42px;
  
  
  }
  
  
  
  section {
  
  
  padding:90px 25px;
  
  
  }
  
  
  }

  /* =====================================
   APPLE STYLE SCROLL ANIMATIONS
===================================== */



html {

   scroll-behavior:smooth;
   
   }
   
   
   
   /* Initial hidden state */
   
   .reveal {
   
   
   opacity:0;
   
   
   transform:
   
   translateY(60px);
   
   
   transition:
   
   all 1s cubic-bezier(.22,1,.36,1);
   
   
   }
   
   
   
   
   /* Active state after scrolling */
   
   
   .reveal.active {
   
   
   opacity:1;
   
   
   transform:
   
   translateY(0);
   
   
   }
   
   
   
   
   
   
   /* stagger effect for cards */
   
   
   .service-card:nth-child(1){
   
   transition-delay:.1s;
   
   }
   
   
   .service-card:nth-child(2){
   
   transition-delay:.25s;
   
   }
   
   
   .service-card:nth-child(3){
   
   transition-delay:.4s;
   
   }
   
   
   .service-card:nth-child(4){
   
   transition-delay:.55s;
   
   }

   /* =====================================
   SERVICE CARD PREMIUM HOVER
===================================== */


.service-card {


   transition:
   
   transform .5s ease,
   
   box-shadow .5s ease;
   
   
   }
   
   
   
   .service-card:hover {
   
   
   transform:
   
   translateY(-15px)
   
   scale(1.05);
   
   
   
   box-shadow:
   
   0 30px 60px rgba(0,0,0,.15);
   
   
   
   z-index:5;
   
   
   }
   button,
a {


transition:

all .35s ease;


}

.footer-bottom{

   margin-top:40px;

   padding-top:25px;
   padding-bottom:85px;

   border-top:1px solid rgba(255,255,255,0.12);

   text-align:center;

   font-size:0.95rem;

   color:#b5b5b5;

   letter-spacing:0.5px;

}