/* ===============================
   GLOBAL FONTS
================================ */

body{
    font-family:'Poppins',sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.company-name{
    font-family:'Montserrat',sans-serif;
}


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

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

html{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    width:100%;
    overflow-x:hidden;
    font-family:'Poppins',sans-serif;
    background:#fff;
}

img{
    display:block;
    max-width:100%;
}

section{
    width:100%;
}






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

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #ececec;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: auto;
 padding:18px 20px; 

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


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

.logo-area {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-img {
  height: 100px;
  width: auto;
}

.logo-text-area {
  display: flex;
  flex-direction: column;
}

.company-name {
  font-size: 24px;
  font-weight: 800;
  color: #111111;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.tagline {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #C89B3C;
  letter-spacing: 1px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.nav-menu {
  display: flex;
  gap: 25px;
}

.nav-menu a {
  position: relative;
  text-decoration: none;
  color: #111111;
  font-weight: 600;
  transition: .3s;
}

.nav-menu a:hover {
  color: #C89B3C;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0;
  height: 2px;

  background: #C89B3C;
  transition: .3s;
}

.nav-menu a:hover::after {
  width: 100%;
}


/* =====================================================
   DESKTOP BUTTONS
===================================================== */

.desktop-cta {
  display: flex;
  gap: 10px;
}

.quote-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 9px 18px;
  border-radius: 30px;

  background: #C89B3C;
  color: #ffffff;

  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  transition: .3s;
}

.quote-btn:hover {
  background: #111111;
}

.call-btn,
.whatsapp-btn {

  width: 42px;
  height: 42px;

  border-radius: 50%;

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

  text-decoration: none;
  color: white;

  transition: .3s;
}

.call-btn {
  background: #111111;
}

.whatsapp-btn {
  background: #25D366;
}

.call-btn:hover,
.whatsapp-btn:hover {
  transform: translateY(-2px);
}


/* =====================================================
   HAMBURGER
===================================================== */

.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}


/* =====================================================
   MOBILE
===================================================== */
@media (max-width:768px){

.header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
}

/* Logo Area */

.logo-area{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0;
}

/* Logo */

.logo-img{
    width:52px;
    height:52px;
    object-fit:contain;
    flex-shrink:0;
}

/* Text Area */

.logo-text-area{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
}

/* Company Name */

.company-name{
    font-size:18px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Tagline */

.tagline{
    font-size:10px;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    letter-spacing:0;
}

/* Hide Desktop Buttons */

.desktop-cta{
    display:none;
}

/* Hamburger */

.hamburger{
    display:flex;
    justify-content:center;
    align-items:center;
    width:42px;
    height:42px;
    margin-left:10px;
    font-size:28px;
    cursor:pointer;
    flex-shrink:0;
}

/* Mobile Navigation */

.nav-menu{
    position:fixed;
    top:77px;
    left:0;
    width:100%;
    background:#fff;
    display:flex;
    flex-direction:column;
    max-height:0;
    overflow:hidden;
    transition:.35s ease;
    opacity:0;
    z-index:999;
    border-top:1px solid #ececec;
}

.nav-menu.show{
    max-height:500px;
    opacity:1;
}

.nav-menu a{
    width:100%;
    text-align:center;
    padding:16px;
    border-bottom:1px solid #ececec;
}

}
/* =====================================================
   MOBILE ACTION BAR
===================================================== */

.mobile-action-bar{

    display:none;

}

@media(max-width:768px){

.mobile-action-bar{

    display:flex;

    justify-content:space-between;

    gap:10px;

    padding:10px 12px;

    background:#ffffff;

    border-bottom:1px solid #ececec;

}

.mobile-action{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    text-decoration:none;

    padding:10px 0;

    font-size:14px;

    font-weight:600;

    border-radius:6px;

}

.mobile-action.call{

    background:#111111;

    color:#ffffff;

}

.mobile-action.whatsapp{

    background:#25D366;

    color:#ffffff;

}

.mobile-action.quote{

    background:#C89B3C;

    color:#ffffff;

    border-radius:25px;

}

}





/* =====================================================
   iMARK CONSTRUCTIONS
   HOME IMAGE SLIDER
===================================================== */

.home-slider{
    width:100%;
    height:450px;
    overflow:hidden;
    position:relative;
    background:#f8f8f8;
}

.slider-wrapper{
    width:100%;
    height:100%;
    position:relative;
}

/* ================= TRACK ================= */

.slides-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .8s ease-in-out;
}

/* ================= SLIDE ================= */

.slide{
    min-width:100%;
    height:100%;

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

    background:linear-gradient(135deg,#fcfbf8,#f3f1eb);
}

/* Image */

.slide img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:transform 6s ease;

}

/* Small Premium Zoom */

.slide.active img{

    transform:scale(1.03);

}


/* ================= ARROWS ================= */

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:60px;

    border:none;

    background:rgba(17,17,17,.35);

    color:#ffffff;

    font-size:20px;

    cursor:pointer;

    transition:.3s;

    z-index:10;

}

.slider-btn:hover{

    background:#C89B3C;

}

.slider-btn.prev{

    left:0;

    border-radius:0 8px 8px 0;

}

.slider-btn.next{

    right:0;

    border-radius:8px 0 0 8px;

}


/* ================= DOTS ================= */

.slider-dots{

    position:absolute;

    bottom:18px;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    z-index:20;

}

.dot{

    width:11px;

    height:11px;

    background:#d7d7d7;

    border-radius:50%;

    cursor:pointer;

    transition:.35s;

}

.dot:hover{

    background:#C89B3C;

}

.dot.active{

    width:34px;

    border-radius:20px;

    background:#C89B3C;

}


/* ================= TABLET ================= */

@media(max-width:992px){

.home-slider{

    height:380px;

}

}


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

@media(max-width:768px){

.home-slider{

    height:230px;

}

.slider-btn{

    width:38px;

    height:50px;

    font-size:16px;

}

.slider-dots{

    bottom:10px;

}

.dot{

    width:9px;

    height:9px;

}

.dot.active{

    width:24px;

}

}




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

.welcome-section{
    padding:100px 20px;
    background:#ffffff;
}

.welcome-container{
    max-width:1000px;
    margin:auto;
}

.welcome-content{
    text-align:center;
}

.welcome-subtitle{
    display:inline-block;
    

    color:#C89B3C;

    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.welcome-content h2{
   

    font-family:'Montserrat',sans-serif;
    font-size:48px;
    font-weight:800;
    color:#111;
    line-height:1.2;
}

.welcome-content h3{
    margin-bottom:35px;

    font-family:'Montserrat',sans-serif;
    font-size:24px;
    font-weight:600;
    color:#C89B3C;
}

.welcome-content p{
    max-width:900px;
    margin:0 auto 24px;

    font-family:'Poppins',sans-serif;
    font-size:17px;
    line-height:1.9;
    color:#555;

    text-align:justify;
    text-align-last:left;
}

.welcome-btn{
    display:inline-block;
    margin-top:20px;
    padding:15px 35px;

    background:#111;
    color:#fff;
    text-decoration:none;

    border-radius:40px;

    font-family:'Poppins',sans-serif;
    font-weight:600;

    transition:.35s ease;
}

.welcome-btn:hover{
    background:#C89B3C;
    transform:translateY(-3px);
}

/* =====================
      Tablet
===================== */

@media(max-width:992px){

.welcome-content h2{
    font-size:40px;
}

}

/* =====================
      Mobile
===================== */

@media(max-width:768px){

.welcome-section{
    padding:70px 20px;
}

.welcome-content h2{
    font-size:32px;
}

.welcome-content h3{
    font-size:20px;
}

.welcome-content p{
    font-size:16px;
    line-height:1.8;
}

.welcome-btn{
    width:100%;
    text-align:center;
}

}




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

.services-section{
    padding:110px 20px;
    background:#ffffff;
}

.services-container{
    max-width:1320px;
    margin:auto;
}

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

.services-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.service-card{

    background:#ffffff;

    border:1px solid #ECECEC;

    border-radius:18px;

    overflow:hidden;

    transition:all .45s ease;

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

    position:relative;

}

.service-card:hover{

    transform:translateY(-12px);

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

    border-color:#C89B3C;

}

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

.service-image{

    position:relative;

    height:260px;

    overflow:hidden;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

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

    transform:scale(1.10);

}

/* Dark Overlay */

.service-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.45),
    rgba(0,0,0,.05));

    z-index:1;

    transition:.4s;

}

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

    background:linear-gradient(to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.15));

}

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

.service-content{

    padding:28px;

}

.service-content h3{

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

    font-size:23px;

    color:#111;

    margin-bottom:15px;

    transition:.35s;

}

.service-card:hover h3{

    color:#C89B3C;

}

.service-content p{

    font-size:15px;

    line-height:1.8;

    color:#666;

    text-align:justify;

    margin-bottom:22px;

}

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

.service-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#111;

    font-weight:600;

    transition:.35s;

}

.service-content a i{

    transition:.35s;

}

.service-card:hover a{

    color:#C89B3C;

}

.service-card:hover a i{

    transform:translateX(6px);

}

/* =====================================================
                TOP BORDER EFFECT
===================================================== */

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:4px;

    background:#C89B3C;

    transition:.45s;

}

.service-card:hover::after{

    width:100%;

}

/* =====================================================
                TABLET
===================================================== */

@media(max-width:992px){

.services-grid{

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

    gap:28px;

}

.service-image{

    height:230px;

}

}

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

@media(max-width:768px){

.services-section{

    padding:80px 18px;

}

.services-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.service-card{

    border-radius:16px;

}

.service-image{

    height:230px;

}

.service-content{

    padding:24px;

}

.service-content h3{

    font-size:21px;

}

.service-content p{

    font-size:15px;

    line-height:1.7;

}

}














/* =====================================================
            WORK PROCESS
===================================================== */

.work-process{

    padding:110px 20px;

    background:#f8f8f8;

    overflow:hidden;

}

.container{

    max-width:1400px;

    margin:auto;

}


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

.section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.section-heading span{

    color:#C89B3C;

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

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

}

.section-heading h2{

    font-size:48px;

    color:#111;

    margin:18px 0;

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

    font-weight:800;

}

.section-heading p{

    color:#666;

    font-size:17px;

    line-height:1.8;

}


/* ==========================================
            WRAPPER
========================================== */

.process-wrapper{

    position:relative;

    display:flex;

    justify-content:space-between;

    gap:24px;

}


/* ==========================================
        GOLD PROGRESS LINE
========================================== */

.process-line{

    position:absolute;

    top:42px;

    left:6%;

    width:88%;

    height:3px;

    background:#e6e6e6;

    z-index:1;

    overflow:hidden;

}

.line-fill{

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    background:#C89B3C;

    transition:1.5s;

}


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

.process-card{

    position:relative;

    flex:1;

    background:#ffffff;

    padding:35px 22px;

    border-radius:16px;

    text-align:center;

    border:1px solid #ececec;

    transition:.45s;

    z-index:5;

    cursor:pointer;

}

.process-card:hover{

    transform:translateY(-10px);

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

}


/* ==========================================
        NUMBER
========================================== */

.process-number{

    width:75px;

    height:75px;

    margin:auto;

    margin-bottom:18px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    font-weight:700;

    transition:.4s;

    border:5px solid #fff;

    box-shadow:0 0 0 2px #ececec;

}

.process-card:hover .process-number{

    background:#C89B3C;

    transform:scale(1.08);

}


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

.process-icon{

    font-size:36px;

    color:#C89B3C;

    margin-bottom:18px;

    transition:.4s;

}

.process-card:hover .process-icon{

    transform:scale(1.15);

}


/* ==========================================
            TITLE
========================================== */

.process-card h3{

    font-size:24px;

    margin-bottom:16px;

    color:#111;

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

}


/* ==========================================
            TEXT
========================================== */

.process-card p{

    font-size:15px;

    color:#666;

    line-height:1.8;

}


/* ==========================================
        ACTIVE CARD
========================================== */

.process-card.active{

    border:2px solid #C89B3C;

}


/* ==========================================
            TABLET
========================================== */

@media(max-width:1100px){

.process-wrapper{

    gap:16px;

}

.process-card{

    padding:30px 18px;

}

.process-card h3{

    font-size:20px;

}

}


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

@media(max-width:768px){

.process-wrapper{

    display:flex;

    flex-direction:column;

    gap:35px;

    position:relative;

}

/* Vertical Line */

.process-line{

    display:block;

    position:absolute;

    left:36px;

    top:0;

    width:3px;

    height:100%;

    background:#e6e6e6;

}

.line-fill{

    width:100%;

    height:0;

    transition:height .8s ease;

}

/* Card */

.process-card{

    width:100%;

    min-width:100%;

    padding:25px 25px 25px 90px;

    text-align:left;

    position:relative;

}

/* Number */

.process-number{

    position:absolute;

    left:5px;

    top:30px;

    width:60px;

    height:60px;

    font-size:18px;

}

/* Icon */

.process-icon{

    font-size:28px;

}

.process-card h3{

    font-size:22px;

}

.process-card p{

    text-align:left;

}

/* Hide Desktop Line */

.process-wrapper::-webkit-scrollbar{

    display:none;

}

}







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

.footer{
    background:#111111;
    color:#ffffff;
    padding:80px 20px 0;
}

/* Container */

.footer-container{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:50px;

    padding-bottom:50px;

}

/* Logo */

.footer-logo{

    width:85px;

    margin-bottom:18px;

}

/* Company Name */

.footer-column h3{

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

    font-size:28px;

    margin-bottom:10px;

}

/* Heading */

.footer-column h4{

    position:relative;

    display:inline-block;

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

    font-size:22px;

    margin-bottom:25px;

}

.footer-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:55px;

    height:3px;

    background:#C89B3C;

    border-radius:50px;

}

/* Paragraph */

.footer-column p{

    color:#d5d5d5;

    line-height:1.8;

    margin-bottom:15px;

}

.footer-description{

    margin-top:18px;

}

/* Links */

.footer-column ul{

    list-style:none;

    padding:0;

}

.footer-column ul li{

    margin-bottom:15px;

    color:#d5d5d5;

}

.footer-column ul li a{

    color:#d5d5d5;

    text-decoration:none;

    transition:.35s;

}

.footer-column ul li a:hover{

    color:#C89B3C;

    padding-left:8px;

}

/* Contact */

.footer-contact li{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.footer-contact i{

    color:#C89B3C;

    margin-top:5px;

    min-width:18px;

}

/* Social */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#1b1b1b;

    color:#ffffff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#C89B3C;

    transform:translateY(-5px);

}

/* =====================================================
                    GOOGLE MAP
===================================================== */

.footer-map{

    max-width:1300px;

    margin:0 auto;

    padding:0 0 40px;

}

.footer-map iframe{

    width:100%;

    height:220px;

    border:0;

    border-radius:18px;

    overflow:hidden;

}

/* =====================================================
                COPYRIGHT
===================================================== */

.footer-bottom{

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

    padding:22px 20px;

    text-align:center;

}

.footer-bottom p{

    color:#d5d5d5;

    font-size:15px;

}

.footer-bottom span{

    margin:0 10px;

    color:#666;

}

.footer-bottom a{

    color:#C89B3C;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.footer-bottom a:hover{

    color:#ffffff;

}

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

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#C89B3C;

    color:#fff;

    cursor:pointer;

    font-size:20px;

    display:none;

    z-index:999;

    transition:.35s;

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

}

#backToTop:hover{

    background:#ffffff;

    color:#111111;

    transform:translateY(-5px);

}

/* =====================================================
                TABLET
===================================================== */

@media(max-width:992px){

.footer-container{

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

    gap:40px;

}

}

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

@media(max-width:768px){

.footer{

    padding:60px 20px 0;

}

.footer-container{

    grid-template-columns:1fr;

    gap:35px;

}

/* Left Align Everything */

.footer-column{

    text-align:left;

}

/* Heading Underline */

.footer-column h4::after{

    left:0;

    transform:none;

}

/* Company Description */

.footer-column p,
.footer-description{

    text-align:justify;
    text-justify:inter-word;
    line-height:1.8;

}

/* Lists */

.footer-column ul{

    padding-left:0;

}

.footer-column ul li{

    text-align:left;

}

/* Contact */

.footer-contact li{

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    gap:12px;

}

/* Social Icons */

.footer-social{

    justify-content:flex-start;

}

/* Google Map */

.footer-map iframe{

    height:190px;

    border-radius:14px;

}

/* Copyright */

.footer-bottom p{

    text-align:center;

    line-height:1.8;

    font-size:14px;

}

/* Back To Top */

#backToTop{

    width:48px;

    height:48px;

    right:18px;

    bottom:18px;

}

}