/*
Theme Name: Alarm Central V5.2 Premium
Version:5.2
Author: Piya Go @ Samgo Technologies
*/

/* Global */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
    overflow-x:hidden;
}

/* Header */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:75px;

    background:#fff;

    display:flex;
    align-items:center;

    padding:10px 30px;

    z-index:999;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

header img{

height:70px;

width:auto;

transition:.3s ease;

}

/* Hero slider */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:700px;

    overflow:hidden;

    margin-top:75px;
}

.slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    background-size:cover;

    /* Important fix */
    background-position:center center;

    background-repeat:no-repeat;

    opacity:0;

    transition:opacity .8s ease;
}

.slide.active{
    opacity:1;
}

/* Overlay */

.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.20) 65%,
        rgba(0,0,0,0) 100%
    );

    display:flex;

    align-items:center;

    padding-left:7%;
}

.overlay-content{

    width:40%;
    max-width:650px;

}

.overlay h1{

    font-size:72px;
    line-height:1.05;

    margin-bottom:20px;

    color:#fff;
}

.overlay p{

    color:#fff;

    font-size:28px;
    line-height:1.5;
}

/* ===== HEADER + MENU ===== */

header{

position:fixed;

top:0;

left:0;

width:100%;

height:85px;

padding:10px 50px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

z-index:9999;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}


/* Logo */

.logo img{

height:65px;

width:auto;

display:block;

}


/* Navigation */

.main-menu{

display:flex;

align-items:center;

gap:35px;

list-style:none;

margin:0;

padding:0;

}


/* Remove WP defaults */

.main-menu li{

list-style:none;

margin:0;

padding:0;

}


/* Links */

.main-menu a{

text-decoration:none;

font-size:16px;

font-weight:600;

color:#222;

position:relative;

transition:.3s;

}


/* Hover */

.main-menu a:hover{

color:#0c8cf2;

}


/* Animated underline */

.main-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#0c8cf2;

transition:.35s;

}

.main-menu a:hover::after{

width:100%;

}


/* Mobile */

@media(max-width:768px){

header{

padding:10px 20px;

height:75px;

}

.logo img{

height:55px;

}

.main-menu{

gap:15px;

font-size:14px;

flex-wrap:wrap;

}

}

/* Mobile */

/* ===== MOBILE HERO FIX ===== */

@media(max-width:768px){

.hero{

position:relative;

height:48vw;
min-height:260px;
max-height:380px;

margin-top:75px;

overflow:hidden;

background:none;

}


/* Keep slides filling hero */

.slide{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

/* fit image properly without cutting */

background-size:100% auto;

background-position:center top;

background-repeat:no-repeat;

}

/* Remove text overlay */

.overlay,
.overlay-content{

display:none;

}


/* Header */

header{

height:75px;

padding:10px 20px;

}

header img{

height:55px;

}

}
/* SERVICES SECTION */

.services-section{

padding:90px 40px;

background:#fff;

text-align:center;

}

.section-heading span{

font-size:14px;

font-weight:700;

color:#1e73be;

letter-spacing:2px;

}

.section-heading h2{

margin-top:15px;

font-size:42px;

color:#222;

margin-bottom:50px;

}

.services-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

max-width:1300px;

margin:auto;

}

.service-card{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

position:relative;

padding-bottom:25px;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card img{

width:100%;

height:250px;

object-fit:cover;

display:block;

}

.service-icon{

width:65px;

height:65px;

border-radius:50%;

background:#0c8cf2;

color:white;

font-size:30px;

display:flex;

justify-content:center;

align-items:center;

margin:auto;

margin-top:-35px;

position:relative;

z-index:2;

border:5px solid white;

}

.service-card h3{

margin-top:20px;

font-size:28px;

color:#222;

}

.service-card p{

padding:0 30px;

margin:20px 0;

line-height:1.7;

color:#666;

}

.service-card a{

text-decoration:none;

color:#0c8cf2;

font-weight:700;

}

/* Mobile */

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:30px;

}

}


/* ===== WHY CHOOSE US SECTION ===== */

.why-section{

display:flex;
align-items:center;
justify-content:space-between;

padding:100px 60px;

background:#051321;
color:#fff;

gap:70px;

}


/* LEFT SIDE */

.why-left{

flex:1;
max-width:45%;

}

.why-left span{

color:#0c8cf2;

font-size:14px;

font-weight:700;

letter-spacing:2px;

}

.why-left h2{

font-size:58px;

line-height:1.1;

margin:15px 0 35px;

}

.why-left ul{

list-style:none;

padding:0;
margin:0;

}

.why-left li{

margin-bottom:22px;

font-size:18px;

line-height:1.6;

}

.about-btn{

display:inline-block;

margin-top:35px;

padding:15px 35px;

background:#0c8cf2;

border-radius:8px;

text-decoration:none;

color:white;

font-weight:bold;

transition:.3s ease;

}

.about-btn:hover{

background:#0876d6;

}


/* RIGHT SIDE */

.why-right{

flex:1;

}


/* IMAGE GRID */

.image-grid{

display:grid;

grid-template-columns:1.4fr 1fr;

grid-template-rows:135px 250px;

gap:18px;

position:relative;

align-items:stretch;

}


/* FAMILY IMAGE */

.family-img{

grid-column:1;
grid-row:1;

border-radius:15px;

overflow:hidden;

}


/* EXPERIENCE BOX */

.experience-box{

grid-column:2;
grid-row:1;

background:#fff;

color:#222;

border-radius:15px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:20px;

}

.experience-box h3{

font-size:56px;

margin:0;

color:#0c8cf2;

line-height:1;

}

.experience-box p{

margin-top:10px;

font-size:18px;

}


/* TECHNICIAN IMAGE */

.tech-img{

grid-column:1;
grid-row:2;

border-radius:15px;

overflow:hidden;

}


/* HOUSE IMAGE */

.house-img{

grid-column:2;
grid-row:2;

border-radius:15px;

overflow:hidden;

}


/* IMAGE SETTINGS */

.tech-img img,
.house-img img{

width:100%;
height:100%;

display:block;

object-fit:cover;

}


/* FAMILY IMAGE SPECIAL CROP */

.family-img img{

width:100%;
height:100%;

display:block;

object-fit:cover;

/* keeps faces centered */

object-position:center 12%;

}


/* SHIELD ICON */

.shield-icon{

position:absolute;

left:58%;
top:39%;

transform:translate(-50%,-50%);

width:72px;
height:72px;

background:#0c8cf2;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

font-size:34px;

border:6px solid white;

z-index:99;

}


/* MOBILE */

@media(max-width:768px){

.why-section{

flex-direction:column;

padding:50px 25px;

}

.why-left{

max-width:100%;

}

.why-right{

width:100%;

}

.image-grid{

grid-template-columns:1fr;
grid-template-rows:auto;

}

.family-img,
.tech-img,
.house-img,
.experience-box{

grid-column:auto;
grid-row:auto;

height:220px;

}

.shield-icon{

display:none;

}

}


/* ===== CTA SECTION ===== */

.cta-section{

max-width:1400px;

margin:90px auto 70px;

padding:30px;

background:white;

border-radius:15px;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.cta-icon{

width:70px;
height:70px;

background:#eef5ff;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

overflow:hidden;

}

.cta-icon img{

width:95px;

height:95px;

object-fit:contain;

}

.cta-content{

flex:1;

}

.cta-content h3{

margin:0;

font-size:28px;

color:#222;

}

.cta-content p{

margin-top:10px;

color:#777;

line-height:1.6;

}

.cta-button a{

display:inline-block;

padding:15px 30px;

background:#0c8cf2;

border-radius:6px;

text-decoration:none;

font-weight:bold;

color:white;

}


/* ===== TESTIMONIALS ===== */

.testimonial-section{

padding:30px 0 90px;

text-align:center;

}

.testimonial-section span{

color:#0c8cf2;

font-size:14px;

font-weight:700;

letter-spacing:2px;

}

.testimonial-section h2{

margin:15px 0 50px;

font-size:42px;

color:#222;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

max-width:1400px;

margin:auto;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:15px;

text-align:left;

box-shadow:0 10px 25px rgba(0,0,0,.06);

transition:.3s;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.stars{

font-size:22px;

color:#0c8cf2;

margin-bottom:20px;

}

.testimonial-card p{

line-height:1.8;

color:#555;

margin-bottom:25px;

}

.testimonial-card h4{

margin:0;

color:#222;

}

.testimonial-card small{

color:#888;

}


/* MOBILE */

@media(max-width:768px){

.cta-section{

flex-direction:column;

text-align:center;

}

.testimonial-grid{

grid-template-columns:1fr;

}

}

/* ===== BUTTON HOVER EFFECTS ===== */

.about-btn,
.cta-button a{

transition:all .35s ease;

position:relative;

overflow:hidden;

}


/* Hover */

.about-btn:hover,
.cta-button a:hover{

background:#0876d6;

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(12,140,242,.35);

}


/* Click animation */

.about-btn:active,
.cta-button a:active{

transform:translateY(0);

}


/* Optional glowing sweep effect */

.about-btn::before,
.cta-button a::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.3),
transparent
);

transform:skewX(-25deg);

transition:.7s;

}

.about-btn:hover::before,
.cta-button a:hover::before{

left:150%;

}


/* ===== FOOTER ===== */

.footer{

background:#041321;

color:white;

padding-top:60px;

}

.footer-container{

max-width:1400px;

margin:auto;

padding:0 40px 40px;

display:grid;

grid-template-columns:1.3fr 1fr 1fr 1.2fr;

gap:50px;

}

.footer-col h4{

font-size:14px;

margin-bottom:25px;

color:#fff;

letter-spacing:1px;

}

.footer-col ul{

list-style:none;

padding:0;

margin:0;

}

.footer-col ul li{

margin-bottom:12px;

font-size:14px;

line-height:1.6;

color:#d0d0d0;

}

.footer-col a{

text-decoration:none;

color:#d0d0d0;

transition:.3s;

}

.footer-col a:hover{

color:#0c8cf2;

padding-left:5px;

}


/* Logo */

.footer-brand img{

height:150px;

margin-bottom:20px;

}

.footer-brand p{

color:#d0d0d0;

line-height:1.7;

margin-bottom:25px;

max-width:300px;

}


/* Social */

.social-icons{

display:flex;

gap:10px;

}

.social-icons a{

width:35px;
height:35px;

border:1px solid rgba(255,255,255,.25);

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

color:white;

text-decoration:none;

transition:.3s;

}

.social-icons a:hover{

background:#0c8cf2;

border-color:#0c8cf2;

transform:translateY(-3px);

}


/* Bottom */

.footer-bottom{

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

padding:20px;

text-align:center;

font-size:13px;

color:#aaa;

}


/* Mobile */

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

gap:40px;

}

}


/* ===== ABOUT SECTION ===== */

.about-section{

display:flex;

align-items:center;

justify-content:space-between;

padding:100px 60px;

gap:70px;

background:#051321;

color:#fff;

}


/* LEFT */

.about-left{

flex:1;

}

.about-left span{

font-size:14px;

font-weight:700;

letter-spacing:2px;

color:#0c8cf2;

}

.about-left h2{

font-size:58px;

line-height:1.1;

margin:15px 0 30px;

color:white;

}

.about-left p{

line-height:1.8;

font-size:18px;

color:#d5d5d5;

margin-bottom:40px;

}


/* FEATURES */

.about-features{

display:flex;

flex-direction:column;

gap:25px;

}

.feature-item{

display:flex;

align-items:flex-start;

gap:20px;

}

.feature-icon{

width:60px;
height:60px;

background:#0c8cf2;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

font-size:24px;

flex-shrink:0;

box-shadow:0 0 20px rgba(12,140,242,.35);

}

.feature-item h4{

margin:0 0 8px;

font-size:22px;

color:white;

}

.feature-item p{

margin:0;

font-size:15px;

color:#d0d0d0;

}


/* RIGHT IMAGE */

.about-right{

flex:1;

}

.about-right img{

width:100%;

display:block;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.35);

}


/* Hover effect */

.about-right img:hover{

transform:scale(1.02);

transition:.4s ease;

}


/* MOBILE */

@media(max-width:768px){

.about-section{

flex-direction:column;

padding:50px 25px;

}

.about-left,
.about-right{

width:100%;

}

.about-left h2{

font-size:42px;

}

}

/* ===== CONTACT FORM ===== */

.contact-section{

padding:100px 60px;

background:#f7f9fc;

}

.contact-header{

text-align:center;

margin-bottom:50px;

}

.contact-header span{

font-size:14px;
font-weight:700;

letter-spacing:2px;

color:#0c8cf2;

}

.contact-header h2{

font-size:58px;

margin:15px 0;

color:#222;

}

.contact-header p{

max-width:700px;

margin:auto;

line-height:1.8;

color:#666;

}


/* FORM BOX */

.contact-form-container{

max-width:850px;

margin:auto;

padding:45px;

background:white;

border-radius:20px;

border:2px solid rgba(4,19,33,.12);

box-shadow:
0 0 0 4px rgba(4,19,33,.05),
0 20px 40px rgba(4,19,33,.18);

}


/* CF7 styling */

.contact-form-container .wpcf7{

width:100%;

}

.contact-form-container .alarm-contact-form{

display:flex;

flex-direction:column;

gap:20px;

}


/* INPUTS + TEXTAREA + DROPDOWN */

.contact-form-container input,
.contact-form-container textarea,
.contact-form-container select{

width:100%;

padding:16px 18px;

border:none;

border-radius:8px;

background:#f7f9fc;

font-size:16px;

outline:none;

box-sizing:border-box;

font-family:Arial,sans-serif;

color:#555;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

}


/* DROPDOWN CUSTOM ARROW */

.contact-form-container select{

cursor:pointer;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 18px center;

padding-right:50px;

}


/* TEXTAREA */

.contact-form-container textarea{

height:180px;

resize:none;

}


/* FOCUS EFFECT */

.contact-form-container input:focus,
.contact-form-container textarea:focus,
.contact-form-container select:focus{

box-shadow:0 0 0 2px rgba(12,140,242,.25);

background:white;

}


/* PLACEHOLDERS */

.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder{

font-family:Arial,sans-serif;

font-size:16px;

color:#777;

}


/* BUTTON */

.contact-form-container input[type="submit"]{

background:#0c8cf2;

color:white;

font-weight:bold;

cursor:pointer;

position:relative;

overflow:hidden;

transition:all .35s ease;

}


/* Hover */

.contact-form-container input[type="submit"]:hover{

background:#0876d6;

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(12,140,242,.35);

}


/* Click effect */

.contact-form-container input[type="submit"]:active{

transform:translateY(0);

}


/* Animated light sweep */

.contact-form-container input[type="submit"]::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.30),
transparent
);

transform:skewX(-25deg);

transition:.7s;

}

.contact-form-container input[type="submit"]:hover::before{

left:150%;

}


/* MOBILE */

@media(max-width:768px){

.contact-section{

padding:60px 25px;

}

.contact-header h2{

font-size:42px;

}

.contact-form-container{

padding:25px;

}

}

/* ===== SCROLL TO TOP ===== */

html{

scroll-behavior:smooth;

}

#scrollTopBtn{

position:fixed;

bottom:30px;

right:30px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:#0c8cf2;

color:white;

font-size:28px;

font-weight:bold;

cursor:pointer;

z-index:9999;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:all .35s ease;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}


/* Show button */

#scrollTopBtn.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}


/* Hover effect */

#scrollTopBtn:hover{

background:#0876d6;

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(12,140,242,.35);

}


/* Mobile */

@media(max-width:768px){

#scrollTopBtn{

width:65px;
height:65px;

right:20px;

bottom:20px;

font-size:24px;

}

}


/* ===== MENU ===== */

header{

display:flex;

justify-content:space-between;

align-items:center;

}

.main-menu{

display:flex;

list-style:none;

gap:35px;

margin:0;

padding:0;

}

.main-menu li{

display:inline-block;

}

.main-menu a{

text-decoration:none;

color:#222;

font-size:16px;

font-weight:600;

transition:.3s;

position:relative;

}


/* Hover effect */

.main-menu a:hover{

color:#0c8cf2;

}


/* Animated underline */

.main-menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:#0c8cf2;

transition:.35s;

}

.main-menu a:hover::after{

width:100%;

}


/* Mobile */

@media(max-width:768px){

.main-menu{

gap:15px;

font-size:14px;

}

}



/* ===== MOBILE HAMBURGER MENU ===== */

.menu-toggle{

display:none;

font-size:32px;

cursor:pointer;

color:#222;

}


/* Mobile only */

@media(max-width:768px){

.menu-toggle{

display:block;

z-index:9999;

}


.main-menu{

display:none;

position:absolute;

top:75px;

left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

padding:25px 0;

gap:25px;

box-shadow:0 10px 25px rgba(0,0,0,.10);

}


.main-menu.show{

display:flex;

}


.main-menu li{

width:100%;

text-align:center;

}

}