/*=========================================================
  ช่างไฟฟ้าหลังคาครบวงจร.com
  style.css
=========================================================*/

/*=========================================================
  RESET
=========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Prompt',sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.8;

    color:#2b2b2b;

    background:#ffffff;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    transition:.30s;

}

ul{

    list-style:none;

    margin:0;

    padding:0;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

}

/*=========================================================
  COLOR
=========================================================*/

:root{

    --primary:#0B2A55;

    --primary-dark:#071C38;

    --secondary:#FFC107;

    --line:#06C755;

    --white:#ffffff;

    --black:#222222;

    --text:#555555;

    --light:#F6F8FB;

    --border:#E8ECF2;

    --shadow:0 15px 40px rgba(0,0,0,.08);

}

/*=========================================================
  CONTAINER
=========================================================*/

.container{

    width:min(1320px,92%);

    margin:auto;

}

/*=========================================================
  TYPOGRAPHY
=========================================================*/

h1{

    font-size:68px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:30px;

}

h1 span{

    display:block;

    color:var(--secondary);

}

h2{

    font-size:44px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

h3{

    font-size:24px;

    font-weight:600;

}

p{

    color:var(--text);

}

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

section{

    position:relative;

    padding:110px 0;

}

.section-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-subtitle{

    display:inline-block;

    color:var(--secondary);

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.section-title{

    margin-bottom:20px;

}

.section-description{

    font-size:18px;

}

/*=========================================================
  HEADER
=========================================================*/

.header{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    z-index:999;

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:92px;

}

.logo img{

    height:70px;

}

.menu ul{

    display:flex;

    align-items:center;

    gap:38px;

}

.menu a{

    color:#ffffff;

    font-size:16px;

    font-weight:500;

}

.menu a:hover,

.menu a.active{

    color:var(--secondary);

}

.header-button{

    display:flex;

    gap:15px;

}

.mobile-toggle{

    display:none;

}

/*=========================================================
  BUTTON
=========================================================*/

.btn-phone,

.btn-line,

.btn-primary,

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 28px;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

}

.btn-phone,

.btn-primary{

    background:var(--secondary);

    color:#222;

}

.btn-phone:hover,

.btn-primary:hover{

    background:#ffcf33;

}

.btn-line,

.btn-secondary{

    background:var(--line);

    color:#fff;

}

.btn-line:hover,

.btn-secondary:hover{

    background:#04af4b;

}

/*=========================================================
  HERO
=========================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-home{

    background-image:url("../img/hero-home.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}

.hero-electrician{

    background-image:url("../img/hero-electrician.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}

.hero-roof{

    background-image:url("../img/hero-roof.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,18,45,.90) 0%,
            rgba(8,18,45,.75) 35%,
            rgba(8,18,45,.25) 65%,
            rgba(8,18,45,0) 100%
        );

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.05) 30%,
        rgba(0,0,0,.25) 100%
    );

    pointer-events:none;

}

.hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    max-width:700px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    color:#fff;

    margin-bottom:25px;

}

.hero h1{

    color:#fff;

}

.hero p{

    color:#F3F5F7;

    font-size:20px;

    max-width:640px;

    margin-bottom:40px;

}

.hero-button{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*=========================================================
  HERO HIGHLIGHT
=========================================================*/

.hero-highlight{

    display:grid;

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

    gap:18px;

    margin-top:70px;

}

.highlight-item{

    background:rgba(255,255,255,.10);

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

    border-radius:18px;

    padding:25px;

    backdrop-filter:blur(10px);

}

.highlight-number{

    font-size:34px;

    font-weight:700;

    color:var(--secondary);

    margin-bottom:10px;

}

.highlight-text{

    color:#fff;

    font-size:15px;

}

/*=========================================================
  FEATURE
=========================================================*/

.feature{

    margin-top:-90px;

    padding:0 0 110px;

    position:relative;

    z-index:20;

}

.feature-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#ffffff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

}

.feature-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#F8F9FC;

    display:flex;

    justify-content:center;

    align-items:center;

}

.feature-icon img{

    width:46px;

}

.feature-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.feature-card p{

    margin:0;

}

/*=========================================================
  SERVICES
=========================================================*/

.services{

    background:#ffffff;

}

.service-grid{

    display:grid;

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

    gap:45px;

}

.service-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

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

}

.service-image{

    position:relative;

    overflow:hidden;

}

.service-image img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

.service-content{

    padding:38px;

}

.service-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:40px;

    padding:0 18px;

    border-radius:30px;

    background:#FFF3CC;

    color:#A06A00;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.service-tag.roof{

    background:#DDEEFF;

    color:#0B2A55;

}

.service-content h3{

    color:var(--primary);

    margin-bottom:18px;

}

.service-content p{

    margin-bottom:24px;

}

.service-list{

    margin-bottom:30px;

}

.service-list li{

    position:relative;

    padding-left:30px;

    margin-bottom:12px;

    color:#444;

}

.service-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#28a745;

    font-weight:bold;

}

.service-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 28px;

    border-radius:8px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.service-button:hover{

    background:#10386D;

    color:#fff;

}

/*=========================================================
  PORTFOLIO
=========================================================*/

.portfolio{

    background:var(--light);

}

.portfolio-grid{

    display:grid;

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

    gap:28px;

}

.portfolio-item{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:var(--shadow);

}

.portfolio-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.6s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.35),

        transparent

    );

    opacity:0;

    transition:.35s;

}

.portfolio-item:hover::after{

    opacity:1;

}

.section-action{

    margin-top:60px;

    text-align:center;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:54px;

    padding:0 35px;

    border:2px solid var(--primary);

    border-radius:8px;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*=========================================================
  COMMON IMAGE STYLE
=========================================================*/

.service-image,

.portfolio-item{

    isolation:isolate;

}

.service-image img,

.portfolio-item img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/*=========================================================
  COMMON HOVER
=========================================================*/

.feature-card,

.service-card,

.portfolio-item{

    will-change:transform;

}

/*=========================================================
  WHY
=========================================================*/

.why{

    background:linear-gradient(135deg,#071C38,#0B2A55);

    color:#ffffff;

}

.why .section-title{

    color:#ffffff;

}

.why .section-description{

    color:rgba(255,255,255,.85);

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:rgba(255,255,255,.08);

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

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    backdrop-filter:blur(12px);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.14);

}

.why-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.why-icon img{

    width:56px;

    height:56px;

    object-fit:contain;

    display:block;

}

.why-card h3{

    color:#ffffff;

    margin-bottom:18px;

}

.why-card p{

    color:rgba(255,255,255,.85);

    margin:0;

}

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

.cta{

    background:#ffffff;

}

.cta-content{

    background:linear-gradient(135deg,#0B2A55,#153C73);

    border-radius:28px;

    padding:90px 70px;

    text-align:center;

    color:#ffffff;

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

}

.cta-content span{

    display:inline-block;

    color:#FFC107;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:20px;

    text-transform:uppercase;

}

.cta-content h2{

    color:#ffffff;

    font-size:48px;

    margin-bottom:25px;

}

.cta-content p{

    color:rgba(255,255,255,.85);

    font-size:18px;

    max-width:760px;

    margin:0 auto 40px;

}

.cta-button{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

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

.footer{

    background:#071C38;

    color:#ffffff;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    margin-bottom:50px;

}

.footer-logo{

    width:220px;

    margin-bottom:25px;

}

.footer h4{

    color:#ffffff;

    margin-bottom:20px;

}

.footer p{

    color:rgba(255,255,255,.75);

}

.footer ul li{

    margin-bottom:14px;

}

.footer a{

    color:rgba(255,255,255,.75);

}

.footer a:hover{

    color:#FFC107;

}

.footer-bottom{

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

    padding-top:25px;

    text-align:center;

}

.footer-bottom p{

    margin:0;

}

/*=========================================================
  FLOATING BUTTON
=========================================================*/

.floating-button{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:9999;

}

.floating-phone,

.floating-line,

.floating-top{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#ffffff;

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

    transition:.3s;

}

.floating-phone{

    background:#FFC107;

    color:#222;

}

.floating-line{

    background:#06C755;

}

.floating-top{

    background:#0B2A55;

}

.floating-phone:hover,

.floating-line:hover,

.floating-top:hover{

    transform:translateY(-5px);

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#ffffff;

    padding:110px 35px 40px;

    transition:.35s;

    z-index:9998;

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

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    display:block;

    padding:14px 0;

    color:#222;

    border-bottom:1px solid #ececec;

}

.mobile-button{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

/*=========================================================
  ANIMATION
=========================================================*/

.feature-card,

.service-card,

.portfolio-item,

.why-card{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s ease forwards;

}

.feature-card:nth-child(2),

.service-card:nth-child(2),

.portfolio-item:nth-child(2),

.why-card:nth-child(2){

    animation-delay:.15s;

}

.feature-card:nth-child(3),

.portfolio-item:nth-child(3),

.why-card:nth-child(3){

    animation-delay:.30s;

}

.feature-card:nth-child(4),

.portfolio-item:nth-child(4),

.why-card:nth-child(4){

    animation-delay:.45s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
  RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.hero-highlight{

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

}

.feature-grid,

.why-grid{

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

}

}

@media(max-width:992px){

.menu,

.header-button{

display:none;

}

.mobile-toggle{

display:block;

font-size:32px;

color:#ffffff;

}

.service-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

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

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:0 auto 25px;

}

.cta-content{

padding:60px 35px;

}

}

@media(max-width:768px){

section{

padding:80px 0;

}

h1{

font-size:42px;

}

h2{

font-size:34px;

}

.hero{

min-height:auto;

padding:180px 0 100px;

}

.hero-button{

flex-direction:column;

}

.hero-button a{

width:100%;

}

.hero-highlight{

grid-template-columns:1fr;

}

.feature-grid,

.portfolio-grid,

.why-grid{

grid-template-columns:1fr;

}

.feature{

margin-top:-40px;

}

}

@media(max-width:576px){

.container{

width:92%;

}

.cta-content{

padding:45px 25px;

}

.cta-content h2{

font-size:34px;

}

.floating-button{

right:15px;

bottom:15px;

}

.floating-phone,

.floating-line,

.floating-top{

width:56px;

height:56px;

font-size:20px;

}

}

/*=========================================================
  PATCH 1
  รองรับ script.js
=========================================================*/

/*==============================
SCROLL PROGRESS
==============================*/

#scrollProgress{

    position:fixed;

    left:0;

    top:0;

    width:0;

    height:4px;

    background:#FFC107;

    z-index:99999;

    transition:width .15s linear;

}



/*==============================
HEADER SHADOW
==============================*/

.header{

    transition:

        background .30s,

        box-shadow .30s,

        height .30s;

}

.header.sticky{

    position:fixed;

    background:rgba(7,28,56,.96);

    backdrop-filter:blur(12px);

    animation:headerDown .35s ease;

}

.header.header-shadow{

    box-shadow:

        0 12px 35px rgba(0,0,0,.18);

}

@keyframes headerDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}



/*==============================
SCROLL REVEAL
==============================*/

.feature-card,

.service-card,

.portfolio-item,

.why-card{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.feature-card.show,

.service-card.show,

.portfolio-item.show,

.why-card.show{

    opacity:1;

    transform:translateY(0);

}



/*==============================
RIPPLE
==============================*/

.btn-primary,

.btn-secondary,

.btn-phone,

.btn-line,

.btn-outline,

.service-button{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:scale(0);

    animation:ripple .65s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}



/*==============================
LOADED
==============================*/

body{

    opacity:0;

    transition:opacity .35s ease;

}

body.loaded{

    opacity:1;

}



/*==============================
LIGHTBOX
==============================*/

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.90);

    z-index:999999;

    cursor:zoom-out;

    animation:fadeIn .25s ease;

}

.lightbox img{

    max-width:92%;

    max-height:90%;

    border-radius:14px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.45);

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==============================
BACK TO TOP
==============================*/

.floating-top{

    opacity:0;

    visibility:hidden;

    transition:.30s;

}

.floating-top.show{

    opacity:1;

    visibility:visible;

}



/*==============================
BODY WHEN MENU OPEN
==============================*/

body.menu-open{

    overflow:hidden;

}



/*==============================
IMAGE
==============================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}



/*==============================
BUTTON ACTIVE
==============================*/

.btn-primary:active,

.btn-secondary:active,

.btn-phone:active,

.btn-line:active,

.btn-outline:active,

.service-button:active{

    transform:scale(.98);

}



/*==============================
PORTFOLIO
==============================*/

.portfolio-item{

    cursor:pointer;

}



/*==============================
SMOOTH TRANSITION
==============================*/

a,

button,

img,

.feature-card,

.service-card,

.portfolio-item,

.why-card{

    transition:

        .30s ease;

}