/*=========================================================
  SINHOI 2026
  LAYOUT.CSS
  PART 1
==========================================================*/


/*=========================================================
  CONTAINERS
==========================================================*/

.container{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:32px;
}

.container-sm{
    max-width:960px;
}

.container-md{
    max-width:1100px;
}

.container-lg{
    max-width:1320px;
}

.container-fluid{
    width:100%;
    padding-inline:40px;
}


/* Elementor */

.elementor-section.elementor-section-boxed>.elementor-container{
    max-width:var(--container);
}

.elementor-container{
    width:100%;
}


/*=========================================================
  WRAPPERS
==========================================================*/

.wrapper{

    position:relative;

    width:100%;

}

.content-wrap{

    max-width:760px;

}

.content-wide{

    max-width:920px;

}

.content-full{

    width:100%;

}


/*=========================================================
  SECTIONS
==========================================================*/

.section{

    position:relative;

    padding:120px 0;

}

.section-sm{

    padding:80px 0;

}

.section-md{

    padding:100px 0;

}

.section-lg{

    padding:160px 0;

}

.section-xl{

    padding:220px 0;

}

.section-dark{

    background:var(--dark);

    color:var(--text-light);

}

.section-paper{

    background:var(--paper);

}

.section-light{

    background:var(--light);

}

.section-primary{

    background:var(--primary);

    color:#fff;

}

.section-border{

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}


/*=========================================================
  GRID SYSTEM
==========================================================*/

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-5{

    grid-template-columns:repeat(5,minmax(0,1fr));

}

.grid-auto{

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

}

.grid-center{

    align-items:center;

}

.grid-start{

    align-items:start;

}

.grid-end{

    align-items:end;

}


/*=========================================================
  FLEX SYSTEM
==========================================================*/

.flex{

    display:flex;

}

.flex-inline{

    display:inline-flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-around{

    display:flex;

    justify-content:space-around;

    align-items:center;

}

.flex-even{

    display:flex;

    justify-content:space-evenly;

    align-items:center;

}

.flex-start{

    justify-content:flex-start;

}

.flex-end{

    justify-content:flex-end;

}

.align-start{

    align-items:flex-start;

}

.align-center{

    align-items:center;

}

.align-end{

    align-items:flex-end;

}

.flex-column{

    flex-direction:column;

}

.flex-row{

    flex-direction:row;

}

.flex-wrap{

    flex-wrap:wrap;

}

.no-wrap{

    flex-wrap:nowrap;

}


/*=========================================================
  GAP UTILITIES
==========================================================*/

.gap-xs{

    gap:8px;

}

.gap-sm{

    gap:16px;

}

.gap-md{

    gap:24px;

}

.gap-lg{

    gap:40px;

}

.gap-xl{

    gap:64px;

}

.gap-xxl{

    gap:96px;

}


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

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:var(--dark);

    color:#fff;

}

.hero>.container{

    position:relative;

    z-index:2;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:center;

}

.hero-content{

    max-width:720px;

}

.hero-actions{

    display:flex;

    gap:20px;

    margin-top:48px;

    flex-wrap:wrap;

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}

.hero-background{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.hero-background::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-250px;

    right:-180px;

    background:radial-gradient(circle,
        rgba(47,107,83,.35),
        transparent 70%);

}

.hero-background::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-180px;

    bottom:-200px;

    background:radial-gradient(circle,
        rgba(189,158,100,.15),
        transparent 70%);

}


/*=========================================================
  SPLIT LAYOUT
==========================================================*/

.split{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.split.reverse{

    direction:rtl;

}

.split.reverse>*{

    direction:ltr;

}


/*=========================================================
  CONTENT WIDTHS
==========================================================*/

.max-480{

    max-width:480px;

}

.max-600{

    max-width:600px;

}

.max-720{

    max-width:720px;

}

.max-840{

    max-width:840px;

}

.max-960{

    max-width:960px;

}

.max-1100{

    max-width:1100px;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}


/*=========================================================
  Z-INDEX HELPERS
==========================================================*/

.z-1{z-index:1;}
.z-2{z-index:2;}
.z-5{z-index:5;}
.z-10{z-index:10;}
.z-20{z-index:20;}
.z-50{z-index:50;}


/*=========================================================
  OVERFLOW
==========================================================*/

.overflow-hidden{

    overflow:hidden;

}

.overflow-visible{

    overflow:visible;

}

/*=========================================================
  CARDS
==========================================================*/

.card{

    position:relative;

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:48px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.card-dark{

    background:var(--dark);

    color:var(--text-light);

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

}

.card-dark h1,
.card-dark h2,
.card-dark h3,
.card-dark h4{

    color:#fff;

}

.card-dark p{

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

}


/*=========================================================
  GLASS CARD
==========================================================*/

.glass{

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

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

    border-radius:var(--radius-lg);

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

}

.glass-dark{

    background:rgba(16,18,13,.72);

}


/*=========================================================
  SERVICE GRID
==========================================================*/

.service-grid{

    display:grid;

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

    gap:36px;

}

.service-card{

    position:relative;

    background:#fff;

    border-radius:var(--radius-lg);

    padding:56px 40px;

    border:1px solid var(--border);

    transition:var(--transition);

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(47,107,83,.04),
        transparent
    );

    opacity:0;

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:var(--shadow-lg);

}

.service-card:hover::before{

    opacity:1;

}

.service-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:32px;

    background:rgba(47,107,83,.08);

    color:var(--primary);

    font-size:28px;

}

.service-title{

    margin-bottom:18px;

}

.service-description{

    color:var(--text-muted);

}


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

.feature-grid{

    display:grid;

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

    gap:48px;

}

.feature{

    display:flex;

    gap:28px;

    align-items:flex-start;

}

.feature-icon{

    flex-shrink:0;

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    font-size:28px;

}

.feature-content{

    flex:1;

}

.feature-content h3{

    margin-bottom:12px;

}

.feature-content p{

    margin:0;

}


/*=========================================================
 ICON BOX
==========================================================*/

.icon-box{

    display:flex;

    align-items:flex-start;

    gap:24px;

}

.icon-box-icon{

    width:64px;

    height:64px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(47,107,83,.08);

    color:var(--primary);

    font-size:24px;

}

.icon-box-content{

    flex:1;

}


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

.image-frame{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}

.image-frame img{

    width:100%;

    transition:1.2s ease;

}

.image-frame:hover img{

    transform:scale(1.08);

}

.image-frame::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.18)
    );

}


/*=========================================================
 STATISTICS
==========================================================*/

.stats{

    display:grid;

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

    gap:40px;

}

.stat{

    text-align:center;

}

.stat-number{

    font-size:clamp(3rem,5vw,4.5rem);

    font-weight:800;

    line-height:1;

    color:var(--primary);

    margin-bottom:14px;

}

.stat-label{

    color:var(--text-muted);

    font-size:.95rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/*=========================================================
 CONTENT PANEL
==========================================================*/

.panel{

    background:var(--paper);

    border-radius:var(--radius-lg);

    padding:72px;

}

.panel-dark{

    background:var(--dark);

    color:#fff;

}


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

.cta{

    position:relative;

    overflow:hidden;

    padding:120px 80px;

    border-radius:var(--radius-lg);

    background:linear-gradient(
        135deg,
        var(--primary),
        #204636
    );

    color:#fff;

}

.cta::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-180px;

    top:-250px;

    border-radius:50%;

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

}

.cta-grid{

    display:grid;

    grid-template-columns:2fr auto;

    gap:48px;

    align-items:center;

    position:relative;

    z-index:2;

}

.cta h2{

    color:#fff;

    margin-bottom:16px;

}

.cta p{

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

}


/*=========================================================
 BADGES
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(47,107,83,.08);

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;

}


/*=========================================================
 LOGO GRID
==========================================================*/

.logo-grid{

    display:grid;

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

    gap:48px;

    align-items:center;

}

.logo-grid img{

    opacity:.55;

    transition:var(--transition);

    filter:grayscale(100%);

}

.logo-grid img:hover{

    opacity:1;

    filter:none;

}


/*=========================================================
 ELEVATION
==========================================================*/

.lift{

    transition:var(--transition);

}

.lift:hover{

    transform:translateY(-8px);

}

.rotate:hover{

    transform:rotate(2deg);

}

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:1s ease;

}

.zoom:hover img{

    transform:scale(1.08);

}

/*=========================================================
  MASONRY GRID
==========================================================*/

.masonry{
    column-count:3;
    column-gap:32px;
}

.masonry-item{
    display:inline-block;
    width:100%;
    margin-bottom:32px;
    break-inside:avoid;
}


/*=========================================================
  STICKY LAYOUTS
==========================================================*/

.sticky{
    position:sticky;
    top:120px;
}

.sticky-top{
    position:sticky;
    top:40px;
}

.sticky-sidebar{
    position:sticky;
    top:140px;
    align-self:start;
}


/*=========================================================
  PROCESS STEPS
==========================================================*/

.process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    position:relative;
}

.process::before{
    content:"";
    position:absolute;
    top:40px;
    left:8%;
    width:84%;
    height:2px;
    background:var(--border);
}

.process-step{
    position:relative;
    z-index:2;
    text-align:center;
}

.process-number{
    width:80px;
    height:80px;
    margin:0 auto 24px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:700;
}


/*=========================================================
  TIMELINE
==========================================================*/

.timeline{
    position:relative;
    padding-left:60px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:18px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--border);
}

.timeline-item{
    position:relative;
    margin-bottom:60px;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:-51px;
    top:6px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--primary);
}


/*=========================================================
  TEAM GRID
==========================================================*/

.team-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
}

.team-card{
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.team-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.team-image{
    overflow:hidden;
}

.team-image img{
    transition:1s ease;
}

.team-card:hover img{
    transform:scale(1.08);
}

.team-content{
    padding:32px;
}


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

.testimonial{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:48px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.testimonial-stars{
    display:flex;
    gap:6px;
    color:var(--secondary);
    margin-bottom:24px;
}

.testimonial-author{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:32px;
}

.testimonial-author img{
    width:60px;
    height:60px;
    border-radius:50%;
}


/*=========================================================
  BLOG GRID
==========================================================*/

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.post-card{
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.post-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.post-image{
    overflow:hidden;
}

.post-image img{
    transition:1s ease;
}

.post-card:hover img{
    transform:scale(1.08);
}

.post-content{
    padding:36px;
}


/*=========================================================
  PRICING
==========================================================*/

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:36px;
}

.pricing-card{
    position:relative;
    padding:60px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:#fff;
    text-align:center;
}

.pricing-featured{
    border-color:var(--primary);
    transform:scale(1.03);
    box-shadow:var(--shadow-lg);
}


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

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.portfolio-item{
    overflow:hidden;
    position:relative;
    border-radius:var(--radius-lg);
}

.portfolio-item img{
    transition:1.2s ease;
}

.portfolio-item:hover img{
    transform:scale(1.08);
}


/*=========================================================
  FLOATING OBJECTS
==========================================================*/

.float{
    animation:float 8s ease-in-out infinite;
}

.float-slow{
    animation:float 12s ease-in-out infinite;
}

.float-fast{
    animation:float 5s ease-in-out infinite;
}


/*=========================================================
  BACKGROUND SHAPES
==========================================================*/

.shape{
    position:absolute;
    pointer-events:none;
    z-index:0;
}

.shape-circle{
    border-radius:50%;
}

.shape-primary{
    background:rgba(47,107,83,.08);
}

.shape-gold{
    background:rgba(189,158,100,.08);
}


/*=========================================================
  DIVIDERS
==========================================================*/

.divider{
    width:100%;
    height:1px;
    background:var(--border);
}

.divider-dark{
    background:rgba(255,255,255,.08);
}

.divider-primary{
    background:var(--primary);
}


/*=========================================================
  POSITION HELPERS
==========================================================*/

.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}

.top-0{top:0;}
.right-0{right:0;}
.bottom-0{bottom:0;}
.left-0{left:0;}


/*=========================================================
  DISPLAY HELPERS
==========================================================*/

.d-none{display:none;}
.d-block{display:block;}
.d-inline{display:inline;}
.d-inline-block{display:inline-block;}
.d-flex{display:flex;}
.d-grid{display:grid;}


/*=========================================================
  ORDER
==========================================================*/

.order-1{order:1;}
.order-2{order:2;}
.order-3{order:3;}


/*=========================================================
  WIDTH HELPERS
==========================================================*/

.w-25{width:25%;}
.w-33{width:33.333%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

.h-auto{height:auto;}
.min-vh-100{min-height:100vh;}


/*=========================================================
  OBJECT FIT
==========================================================*/

.cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.contain img{
    object-fit:contain;
}


/*=========================================================
  CURSOR
==========================================================*/

.pointer{
    cursor:pointer;
}


/*=========================================================
  OPACITY
==========================================================*/

.opacity-0{opacity:0;}
.opacity-25{opacity:.25;}
.opacity-50{opacity:.5;}
.opacity-75{opacity:.75;}
.opacity-100{opacity:1;}


/*=========================================================
  VISIBILITY
==========================================================*/

.visible{
    visibility:visible;
}

.invisible{
    visibility:hidden;
}


/*=========================================================
  TRANSFORM HELPERS
==========================================================*/

.rotate-3{
    transform:rotate(3deg);
}

.rotate--3{
    transform:rotate(-3deg);
}

.scale-up{
    transform:scale(1.05);
}


/*=========================================================
  DECORATIVE BLOBS
==========================================================*/

.blob{
    position:absolute;
    filter:blur(90px);
    opacity:.18;
    pointer-events:none;
}

.blob-primary{
    background:var(--primary);
}

.blob-gold{
    background:var(--secondary);
}


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

.overlap-top{
    margin-top:-120px;
    position:relative;
    z-index:10;
}

.overlap-bottom{
    margin-bottom:-120px;
}


/*=========================================================
  CLEARFIX
==========================================================*/

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}