/* Hero Section */
 .web-First-page-hero-section {
     background: url('/images/Webgp3/HeroPage/hero.jpg') no-repeat center center;
     background-size: cover;
     height: 100vh;
     position: relative;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     cursor: pointer;
 }

 /* Image display control */
 .desktop-img {
     display: block;
 }

 .mobile-img {
     display: none;
 }


 .web-First-page-hero-text {
     position: relative;
     z-index: 2;
     max-width: 1100px;
     padding: 0 20px;
 }

 .web-First-page-hero-text h1 {
     font-weight: 300;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     letter-spacing: 1px;
 }

 .web-First-page-hero-text h2 {
     font-weight: 400;
     font-size: clamp(2rem, 6vw, 4rem);
     color: #6be4ff;
     line-height: 1.2;
     letter-spacing: 1px;
     margin: 1rem 0;
 }

 .web-First-page-hero-text h3 {
     font-weight: 400;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     position: relative;
     display: inline-block;
 }

 .web-First-page-hero-section:hover h2 {
     color: #8aecff;
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
 }

 .btn-launch {
     background-color: #6be4ff;
     border: none;
     padding: 12px 30px;
     font-weight: 600;
     border-radius: 30px;
     transition: all 0.3s ease;
 }

 .btn-launch:hover {
     background-color: #8aecff;
     transform: scale(1.05);
 }

 .btn-launch a {
     text-decoration: none;
     color: white;
 }

 /* Section Styles */
 .page-section {
     position: relative;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     /* height: 100vh; */
 }

 .section-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     z-index: 0;
 }


 /* Text overlay */
 .web-Second-page-text {
     position: absolute;
     top: 80px;
     left: 40px;
     z-index: 1;
     max-width: 1100px;
     text-align: left;
     padding: 20px;
     color: black;
     /* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); */
 }

 .web-Second-page-text h1 {
     font-weight: 300;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 10px;
 }

 .web-Second-page-text h2 {
     font-weight: 700;
     font-size: clamp(2rem, 6vw, 3.5rem);
     margin-bottom: 20px;
     color: #6be4ff;
 }

 .web-Second-page-text h3 {
     font-weight: 600;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 20px;
     color: black;
 }

 .web-Second-page-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     max-width: 800px;
     margin: auto;
     /* color: black; */
 }


 /* Page 3 Toch screen */


 .page-section-toch {
     position: relative;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     /* height: 75vh; */
     /* height: 100vh; */
 }

 /* Text overlay */
 .web-third-page-text {
     position: absolute;
     top: 80px;
     left: 40px;
     z-index: 1;
     max-width: 666px;
     text-align: left;
     padding: 20px;
     color: black;
     display: none;
     /* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); */
 }

 .web-third-page-text h1 {
     font-weight: 300;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 10px;
 }

 .web-third-page-text h2 {
     font-weight: 700;
     font-size: clamp(2rem, 6vw, 3.5rem);
     margin-bottom: 20px;
     color: black;
 }

 .web-third-page-text h3 {
     font-weight: 600;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 20px;
     color: black;
 }

 .web-third-page-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     max-width: 800px;
     margin: auto;
     /* color: black; */
 }


 /* Page 4 Mobile screen */


 .page-section-mobile {
     position: relative;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Text overlay */
 .web-fourth-page-text {
     position: absolute;
     top: 40px;
     /* left: 40px; */
     z-index: 1;
     max-width: 100%;
     text-align: left;
     padding: 20px;
     color: black;
     /* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); */
 }

 /* .web-fourth-page-text h1 {
     font-weight: 300;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 10px;
 } */

 .web-fourth-page-text h2 {
     /* align-items: center; */
     font-weight: 700;
     font-size: clamp(2rem, 6vw, 3.5rem);
     margin-bottom: 20px;
     color: white;
 }

 /* 
 .web-fourth-page-text h3 {
     font-weight: 600;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 20px;
     color: black;
 } */
 /* 
 .web-fourth-page-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     max-width: 800px;
     margin: auto;
   } */


 /* Page 5 Intruder alert  screen */
 .page-section-intruderAlert {
     position: relative;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Text overlay */
 .web-five-page-text {
     font-family: sans-serif;
     position: absolute;
     top: 190px;
     left: 850px;
     z-index: 1;
     max-width: 100%;
     text-align: left;
     padding: 20px;
     color: black;

     /* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); */
 }

 .web-five-page-text b {
     color: orange;
 }

 /* .web-five-page-text h1 {
     font-weight: 300;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 10px;
 } */

 .web-five-page-text h2 {
     /* align-items: center; */
     font-weight: 700;
     font-size: clamp(2rem, 6vw, 3.5rem);
     margin-bottom: 20px;
     color: white;
 }


 .web-five-page-text h3 {
     font-weight: 530;
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     margin-bottom: 20px;
     color: white;
 }

 /* 
 .web-five-page-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     max-width: 800px;
     margin: auto;
   } */



 /* Page 6 motion Sensor alert  screen */

 /* SECTION: Motion Sensor Background Setup */
 .page-section-Motion-Sensor {
     position: relative;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .section-img {
     width: 100%;
     height: auto;
     display: none;
 }

 .desktop-img {
     display: block;
 }



 /* Motion Sensor Icon + Pulse Ring */
 .web-Six-page-motion-sensor {
     position: absolute;
     top: 10%;
     left: 83%;
     transform: translate(-50%, -50%);
     z-index: 2;
     text-align: center;
 }

 .web-Six-page-motion-icon {
     font-size: 70px;
     color: blue;
     position: relative;
     z-index: 2;
 }

 .web-Six-page-pulse-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 30px;
     height: 30px;
     /* background: rgba(255, 205, 0, 0.3); */
     background: rgb(20 0 248);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     animation: pulsemotion 2s infinite ease-out;
     z-index: 1;
 }

 @keyframes pulsemotion {
     0% {
         width: 30px;
         height: 30px;
         opacity: 0.7;
     }

     70% {
         width: 130px;
         height: 130px;
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 /* Page 7  */



 .page-seven-section-IR-Remots {
     position: relative;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;

     /* height: 75vh; */
     /* height: 100vh; */
 }

 .section-img-IR-Remots {
     width: 100%;
     height: 100vh;
 }



 @media (max-width: 1030px) {
     .web-third-page-text {
         max-width: 466px;
     }
 }


 /* Responsive adjustments */
 @media (max-width: 768px) {
     .desktop-img {
         display: none;
     }

     .mobile-img {
         display: block;
     }

     .web-First-page-hero-text {
         top: 0;
     }

     .web-Second-page-text {
         top: 10px;
         padding: 10px;
         /* left: 10px; */
         align-items: center;
     }

     .web-Second-page-text h1 {
         display: none;
     }

     .web-Second-page-text p {
         display: none;

     }

     /* third page  */
     .web-third-page-text {
         top: 10px;
         padding: 10px;
         left: 10px;
         align-items: center;
         display: block;
     }

     .web-third-page-text h1 {
         display: none;
     }

     .web-third-page-text h2 {
         font-weight: 600;
         font-size: clamp(1.6rem, 5vw, 3.0rem);
         margin-bottom: 10px;
         color: #f5e8d9;
     }

     .web-third-page-text h3 {
         font-weight: 500;
         font-size: clamp(0.8rem, 3vw, 1.5rem);
         margin-bottom: 20px;
         color: #f5e8d9;
     }

     .web-third-page-text p {
         display: none;

     }

     .page-section-toch {
         height: auto;
     }

     /* Fourth mobile page  */

     .web-fourth-page-text {
         top: 10px;
         padding: 10px;
         /* left: 10px; */
         align-items: center;
     }

     /* .web-fourth-page-text h1 {
         display: none;
     } */

     .web-fourth-page-text h2 {
         font-weight: 500;
         font-size: clamp(1.5rem, 5vw, 3.0rem);
         margin-bottom: 10px;
         color: white;
     }

     /* 
     .web-fourth-page-text h3 {
         font-weight: 500;
         font-size: clamp(1.0rem, 2vw, 1.5rem);
         margin-bottom: 20px;
         color: black;
     }

     .web-fourth-page-text p {
         display: none;

     } */

     /* five intruder alert page  */

     .web-five-page-text {
         top: 10px;
         padding: 10px;
         /* left: 10px; */
         align-items: center;
     }

     .web-five-page-text h2 {
         display: none;
     }


     .web-five-page-text h3 {
         display: none;
     }

     /* Six motion Sensor alert page  */
     /* .web-Six-page-text {
         top: 10px;
         padding: 10px;
         left: 10px;
         align-items: center;
         color: black;
     }

     .web-Six-page-text h2 {
         display: none;
     }


     .web-Six-page-text h3 {
         display: none;
     } */


     /* motion sensor */
     .web-Six-page-motion-sensor {
         position: absolute;
         top: 28%;
         left: 85%;
         transform: translate(-50%, -50%);
         z-index: 2;
         text-align: center;
     }

     .web-Six-page-motion-icon {
         font-size: 40px;
         color: blue;
         position: relative;
         z-index: 2;
     }


     .section-img-IR-Remots {
     height: auto;
 }
 }