*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
    box-sizing: border-box;
    --primary-clr: #70b730;
	--primary-dark-clr: #509710;
	--bg-clr: #f6f6f6;
	--dark-heading-clr: #212121;
	--light-heading-clr: #fefefe;
	--light-text-clr: #a9a9a9;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html, body{
    max-width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: 100%;
    overflow-y: auto;
    
    scrollbar-width: none;
    -ms-overflow-style: none;
}



/* ================ Main Layout Start ================= */
/* ================ Main Slider Start ================= */
main{
    position: relative;
    width: 100%;
    height: auto;
}
.maindiv{
    display: flex;
    float: left;
    width: 59%;
    height: auto;
    flex-flow: row wrap;
    margin: 0.5%;
    position: relative;
    border-radius: 10px;
}
aside{
    position: relative;
    height: auto;
    width: 39%;
    margin: 0.5%;
    float: right;
}
.asidemaindiv{
    border: 1px solid;
    border-radius: 10px;
    margin: 2px;
}
.asidemaindiv p{
    font-size: 18px;
    margin: 5px;
}
.asidemaindiv .fa-caret-right{
    font-size: 18px;
    margin-left: 20px;
    color: #ff10c7;
}
.asidemaindiv .fa-arrow-right-long{
    font-size: 18px;
    margin-left: 20px;
    color: #ff10c7;
    margin-right: 15px;
}
.asidemaindiv p:hover{
    background: darkorange;
}
.asidemaindiv a{
    font-weight: bold;
}
.asidemaindiv a:hover{
    color: #0affba;
}
.asideimage{
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    display: block;
    width: 96%;
    margin: 0 auto 10px auto !important; /* ডানে-বামে অটো মার্জিন দিয়ে মাঝখানে আনা */
}

@media (max-width: 700px) {
    .maindiv{
        width: 100%;
        margin-left: 0;
    }
    aside{
        width: 100%;
        margin-right: 0;
    }
    
}
/* ============== Main Slider Start =============== */
/* ==================== ২. সিএসএস স্টাইল ==================== */
            .slidediv {
                position: relative;
                /* 🛠️ ডানে-বামে অন্যান্য ডিভের মতো সুন্দর ফাঁকা জায়গা বা মার্জিন */
                width: calc(100% - 10px); 
                margin: 5px auto; 
                
                /* 🛠️ অন্য ডিভের সাথে ম্যাচিং করা রাউন্ড বর্ডার রেডিয়াস */
                border-radius: 12px; 
                
                height: auto;
                aspect-ratio: 16 / 9; 
                max-height: 550px;
                overflow: hidden; /* ইমেজের কোনাগুলো যাতে বর্ডারের বাইরে বের না হয়ে রাউন্ড থাকে */
                background-color: #000000; 
                box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* হালকা একটা প্রিমিয়াম শ্যাডো ইফেক্ট */
            }
            
            .slideul {
                list-style: none;
                padding: 0;
                margin: 0;
                width: 100%;
                height: calc(100% - 50px);
                position: relative;
            }
            
            .slide-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                visibility: hidden;
                z-index: 1;
            }
            
            .slide-item.active {
                opacity: 1;
                visibility: visible;
                z-index: 2;
            }
            
            /* ইমেজ পুরো এরিয়া জুড়ে ফিট থাকবে */
            .slide-item img {
                width: 100%;
                height: 100%;
                object-fit: fill; 
                display: block;
            }
            
            /* ভাঙার এফেক্টের কন্টেইনার লেয়ার */
            .shatter-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: calc(100% - 50px);
                z-index: 5;
                pointer-events: none;
            }
            
            .shatter-piece {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                will-change: transform, opacity;
            }
            
            .shatter-piece img {
                width: 100%;
                height: 100%;
                object-fit: fill;
                display: block;
            }
            
            /* নেভিগেশন বাটন */
.buttns {
    position: absolute;
    top: calc(50% - 25px);
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 10;
}
            
.buttns span {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}
            
.buttns span:hover {
    background: #0f633d;
}
            
/* ডট ইন্ডিকেটর এরিয়া */
.dots-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #ffffff !important; 
    border-top: 2px solid #f0f0f0; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
            
.dotsContainer {
    display: flex;
    gap: 8px;
    max-width: 90%;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: none;
}
.dotsContainer::-webkit-scrollbar {
    display: none;
}
            
.dot {
    width: 10px;
    height: 10px;
    background: #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s ease;
    flex-shrink: 0;
}
            
.dot.active {
    background: #0f633d;
    width: 24px;
    border-radius: 20px;
}
            
/* মোবাইল রেস্পন্সিভ ব্রেকপয়েন্ট */
@media (max-width: 768px) {
    .slidediv {
        width: calc(100% - 20px);
        margin: 10px auto;
        border-radius: 10px;
    }
    .dots-wrapper { height: 40px; }
    .slideul { height: calc(100% - 40px); }
    .buttns span { width: 35px; height: 35px; font-size: 16px; }
}
/* ================ Main Slider End ================= */

/* =====================Building Start ===================== */

/* কন্টেইনার এবং গ্রিড সেটআপ */
.building-rental-container {
    width: 100%;
    background: #06506f;
    padding: 10px 5px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 5px 5px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.building-section-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
    color: #f7b900;
}

/* গ্রিডকে জোর করে এক লাইনে রাখা */
/* Available Accommodation Section Fix */
.building-grid {
    display: flex !important;
    flex-wrap: nowrap !important; /* কার্ড নিচে নামবে না */
    gap: 15px !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    margin: 20px 0 !important;
}

.building-card {
    background: #fff !important;
    flex: 1 !important; /* ৩টি কার্ড সমান জায়গা নিবে */
    min-width: 0 !important; /* সঙ্কুচিত হতে পারবে */
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.building-image {
    width: 100% !important;
    height: auto !important; /* উচ্চতা নির্দিষ্ট করা হলো */
    position: relative !important;
}

.building-image .bimg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ছবি কাটবে না, বক্সে ফিট হবে */
}

.building-details {
    padding: 10px !important;
    flex-grow: 1 !important;
}

.building-details h3 {
    font-size: 15px !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.building-features {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    margin: 10px 0 !important;
}

.view-btn {
    display: block !important;
    text-align: center !important;
    background: #28a745 !important;
    color: #fff !important;
    padding: 8px 0 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

/* প্রাইজ ট্যাগ */
.price-tag {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(26, 115, 232, 0.9);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    font-weight: bold;
}

/* মোবাইলের জন্য (যখন সাইডবার নিচে চলে যাবে) */
@media (max-width: 768px) {
    .building-grid {
        flex-wrap: wrap !important;
    }
    .building-card {
        flex: 1 1 100%; /* মোবাইলে একটি কার্ড পুরো জায়গা নিবে */
        margin-bottom: 15px;
    }
    .building-image {
        height: 200px; /* মোবাইলে ইমেজ বড় দেখাবে */
    }
}


/* =====================Building End ===================== */


/* ================== Hilight ======================= */




/* ================== Hilight ======================= */



/* **************** Home Page Main Video **************  */
/* ভিডিওর বাইরের কন্টেইনার */
.mainvideo-container {
    display: flex;
    justify-content: center; /* ভিডিওটিকে আড়াআড়িভাবে একদম মাঝখানে আনবে */
    align-items: center;
    width: 100%;            /* পুরো স্ক্রিনের জায়গা নিবে */
    margin-bottom: 10px;    /* নিচের ৩টি ডিভ থেকে একটু দূরত্ব বজায় রাখার জন্য */
}

/* ভিডিওর নিজস্ব সাইজ */
.mainvideosize {
    width: 90%;            
    max-width: 1200px;
    max-height: 600px;      
    height: auto;           
    display: block;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    margin: 10px;
    border-radius: 20px;
    aspect-ratio: 16 / 9;   /* এই লাইনটি যোগ করুন, এটি ইউটিউব ভিডিওর স্ট্যান্ডার্ড সাইজ ঠিক রাখবে */
}
/* **************** Home Page Main Video **************  */









/*  ===============After Main===============  */

/* Canonical desktop/tablet service-browser sizing; mobile rules above remain unchanged. */
@media screen and (min-width:769px){
    .slidediv{
        width:min(calc(100% - 10px),1440px);
        height:auto;
        aspect-ratio:16/7;
        max-height:500px;
    }
    .slide-item img,
    .shatter-piece img{
        object-fit:cover;
        object-position:center;
    }
    .asidemaindiv .sadia-service-details-action,
    .aftermainelectrical .sadia-service-details-action,
    .aftermainplumbing .sadia-service-details-action,
    .aftermaingeneral .sadia-service-details-action,
    .aftermainac .sadia-service-details-action{
        display:flex;
        justify-content:center;
        align-items:center;
        width:calc(100% - 10px);
        box-sizing:border-box;
    }
    .sadia-service-details-button{
        width:min(100%,280px);
        min-height:44px;
        box-sizing:border-box;
    }
}
.aftermaindiv1, .aftermaindiv2 {
    display: flex;
    justify-content: center; /* এটি ইমেজগুলোকে ডেক্সটপে ডানে-বামে মাঝখানে আনবে */
    align-items: center;     /* এটি উপর-নিচ বরাবর এলাইন করবে */
    flex-wrap: wrap;         /* স্ক্রিন ছোট হলে ইমেজগুলো নিচে নেমে আসবে */
    width: 99.40%;
    border: 1px solid;
    margin: 2px;
    border-radius: 10px;
    /* box-shadow: 5px 5px 15px rgba(0,0,0,0.3); */
}
.aftermainelectrical, .aftermainplumbing, .aftermaingeneral, .aftermainac {
    width: 45%;              /* ৫০% এর কম দিলে মাঝখানে গ্যাপ থাকবে */
    margin: 10px;            /* ইমেজগুলোর চারপাশে হালকা জায়গা রাখার জন্য */
    display: flex;
    flex-direction: column;  /* টেক্সট নিচে রাখার জন্য */
    font-size: 13px;

}

.mainelectricalimage{
    width: 96%;             /* ইমেজটিকে ফুল উইডথ করবে */
    border: 2px solid #333;  /* বর্ডার যোগ করবে */
    border-radius: 10px;     /* কোণাগুলো গোলাকার করবে */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* ছায়া ইফেক্ট */
    margin: 0 auto 20px auto; /* নিচে ২০ পিক্সেল গ্যাপ তৈরি করবে */
}
.aftermainelectrical p:hover, .aftermainplumbing p:hover, .aftermaingeneral p:hover, .aftermainac p:hover {
    background: #ff10c7;
    color: white;
}
.aftermainelectrical p, .aftermainplumbing p, .aftermaingeneral p, .aftermainac p {
    font-size: 18px;
}
.aftermainelectrical a, .aftermainplumbing a, .aftermaingeneral a, .aftermainac a{
    font-weight: bold;
}
.aftermainelectrical a:hover, .aftermainplumbing a:hover, .aftermaingeneral a:hover, .aftermainac a:hover{
    color: yellow;
}


.aftermaindiv1 .fa-solid, .aftermaindiv2 .fa-solid{
    margin-left: 20px;
    color: #480639;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.aftermaindiv1 .fa-solid:hover{
    color: #fff;
}
.aftermaindiv2 .fa-solid:hover{
    color: #fff;
}

/* Shared service-card details action */
.asidemaindiv .sadia-service-details-action,
.aftermainelectrical .sadia-service-details-action,
.aftermainplumbing .sadia-service-details-action,
.aftermaingeneral .sadia-service-details-action,
.aftermainac .sadia-service-details-action{
    margin: 12px 5px 10px;
    background: transparent;
}
.asidemaindiv .sadia-service-details-action:hover,
.aftermainelectrical .sadia-service-details-action:hover,
.aftermainplumbing .sadia-service-details-action:hover,
.aftermaingeneral .sadia-service-details-action:hover,
.aftermainac .sadia-service-details-action:hover{
    background: transparent;
}
.sadia-service-details-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 12px;
    background: #0b8f62;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(11,143,98,.22);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sadia-service-details-button .fa-arrow-right-long,
.aftermaindiv1 .sadia-service-details-button .fa-solid,
.aftermaindiv2 .sadia-service-details-button .fa-solid{
    margin: 0;
    color: currentColor;
    font-size: 15px;
}
.sadia-service-details-button:hover{
    background: #08734f;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11,143,98,.28);
}
.sadia-service-details-button:active{
    transform: scale(.98);
    box-shadow: 0 2px 7px rgba(11,143,98,.22);
}
.sadia-service-details-button:focus-visible{
    outline: 3px solid rgba(11,143,98,.32);
    outline-offset: 3px;
}

/* মোবাইল ডিভাইসের জন্য */
@media screen and (max-width: 768px) {
    .aftermaindiv1, .aftermaindiv2 {
        display: block !important; 
        flex-direction: column !important;
    }
    .mainelectricalimage{
        display: block;          /* ব্লক লেভেল এলিমেন্ট হিসেবে সেট করা */
        margin: 0 auto 20px auto !important; /* ডানে-বামে অটো মার্জিন দিয়ে মাঝখানে আনা */
        width: 96% !important;   /* প্রয়োজন অনুযায়ী সাইজ কমানো যেতে পারে */
    }

    .aftermainelectrical, 
    .aftermainplumbing, 
    .aftermaingeneral, 
    .aftermainac {
        width: 100% !important;
        margin: 15px 0 !important;
        float: none !important;
    }
    .sadia-service-details-button{
        width: 100%;
        box-sizing: border-box;
    }
}
/*  ===============After Main===============  */
















/* ================ Main Layout End ================= */
/* =================== Video Play ======================== */
/* Video Container */

.mainvideo-container {
    position: relative;
    width: 100%;
    margin: 5px 5px;
    border-radius: 10px;
    background-color: #a89fa7;
    overflow: hidden;
    /* box-shadow: 0 4px 10px rgba(0, 204, 255, 0.3); */
}

.mainvideosize {
    padding: 10px;
    width: 100%;
    border-radius: 10px;
}

/* Video Controls */
.controls {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.3s ease;
}

.controls button {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
}

.controls button:hover {
    color: #f39c12;
}

/* Progress Bar */
.progress-container {
    flex-grow: 1;
    height: 5px;
    background: gray;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 3px;
    overflow: hidden;
}

.progress {
    width: 0%;
    height: 100%;
    background: #f39c12;
}

/* Volume & Fullscreen */
.volume {
    width: 80px;
    cursor: pointer;
}

.controls.hide {
    opacity: 0;
    pointer-events: none;
}
/* =================== Video Play ======================== */
/* ========================== Other Services Start =========================== */
.otherdiv{
    width: 100%;
    height: auto;
    margin: 5px 0;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid;
    border-radius: 10px;
    /* box-shadow: 0 0 8px rgba(0,0,0,0.2); */
}
.otherp{
    font-weight: bold;
    font-size: 25px;
    margin-left: 30px;
    margin-bottom: 10px;
    color: #0091ff;
}
.otherul{
    margin: 8px 20px;
    padding-left: 0;
}
.otherul li{
    margin: 6px 0;
    font-size: 18px;
    line-height: 1.35;
}
.otherul li:hover{
    background: #2b93e3;
    border-radius: 8px;
    padding: 0 5px;
}
.otherul li a:hover{
    color: white;
}
.otherul li a{
    color: black;
}
.fa-caret-right{
    margin-right: 10px;
    font-size: 18px;
    color: gold;
}
/* ========================== Other Services End =========================== */









/* ====== main div ======= */
/* =============== hilight Slider ============ */
/* ======================================================================================= */


/* ==============TOP Embad Video Start============= */
    
.videobottom{
    width: 99.50%;
    height: auto;
    border: 1px solid;
    margin: 1px;
    border-radius: 10px;
    /* box-shadow: 0 0 8px rgba(0,0,0,0.2); */
}
.videobottomul{
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
}
.videobottomul li{
    padding: 2px 2px;
}
.videobottomul li iframe{
    height: auto;
    width: 100%;
    border: solid 3px #fff;
}
/* ==============TOP Embad Video End============= */
/* ========================= Footer ======================================= */


/* ============================== Social Start =========================== */
.socialmaindiv{
    width: 99.50%;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin: 0 0;
}
.socialdiv{
    border: 3px solid #ede6d6;
     box-shadow: 0 0 8px rgba(0,0,0,0.2); 
    width: 68%;
}
.socialp{
    font-weight: bold;
    color: blueviolet;
    padding: 5px;
    font-size: 15px;
    text-align: center;
    border: dotted;
}

.sci{
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 5px;
    background: #ccc;
}
.sci li a{
    margin: 12px;
    font-size: 18px;
}

.appdiv{
    border: 3px solid #ede6d6;
    /* box-shadow: 0 0 8px rgba(0,0,0,0.2); */
    width: 31%;
    text-align: center;
}
.appp{
    font-weight: bold;
    color: blueviolet;
    padding: 5px;
    font-size: 15px;
    border: dotted;
}
.applogo{
    width: 60px;
    /* box-shadow: 0 0 8px rgba(0,0,0,0.2); */
    border-radius: 100%;
}
/* ============================== Social End =========================== */

/* =============== CEO ================ */
.ceo{
    height: auto;
    width: 99.50%;
    border: 3px solid #ede6d6;
    /* box-shadow: 0 0 8px rgba(0,0,0,0.2); */
    align-content: center;
}
.ceop{
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    padding: 5px 5px;
    background: #003863;
    border-radius: 30px;
}
.ceop a{
    color: white;
}

.ceop a:hover{
    color: rgb(255, 213, 0);
}
/* =============== CEO ================ */