html {
    scroll-behavior: smooth;
}

/* Global Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseRing {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18, 58, 96, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(18, 58, 96, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18, 58, 96, 0); }
}

/* ক্লাসে এই অ্যানিমেশন ব্যবহার করুন */
.animate-fade-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

img {
    max-width: 100%; /* ছবি যেন কন্টেইনারের বাইরে না যায় */
    height: auto;
}

/* --- Header Updates --- */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    flex-wrap: wrap; /* ফ্লেক্সবক্স ভাঙতে সাহায্য করবে */
}

/* --- News Section Updates (Fixed Width রিমুভ করা হয়েছে) --- */
.news-heading, 
.sub-heading, 
.pera-news,
.top-location-area,
.top-email-area,
.top-phone-area,
.top-location-text,
.top-email-text,
.top-phone-text {
    
    max-width: 100%;
}

.news-leftside img {
    width: 100%; /* 490px এর বদলে */
    max-width: 650px;
    height: auto;
    transition: transform 0.4s ease;
}

.news-leftside img:hover {
    transform: scale(1.03); /* হোভার করলে ছবি একটু জুম হবে */
}
.about-right img:hover{
transform: scale(1.03)
}
/* --- Card & Technology Hover Effects --- */
.tech-area {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tech-area:hover {
    transform: translateY(-10px) rotate(2deg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* --- Login Panel Responsive Fix --- */
.login-container {
    width: 95%; /* 900px ফিক্সড এর বদলে */
    display: flex;
    flex-wrap: wrap; /* মোবাইল এর জন্য */
}
.left-panel, .right-panel {
    flex: 1 1 400px; /* ফ্লেক্স বেসিস */
    width: 100%;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES
   ========================================= */

/* --- Tablet and Smaller Laptop (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .news-heading { font-size: 30px; }
    .top-bar .container { justify-content: center; }
    .about-right{padding: 8% 0%;}
}
@media screen and (max-width: 992px) {
    .soft-cart{
        width: 50%;
    }
    .top-location-area{
        display: none;
    }
    /* Navbar */
    .navbar-nav .nav-link {
        font-size: 16px;
        text-align: center;
        /* padding: 10px; */
    }
    .navbar-nav .nav-link:hover {
           color: #123a60ea;
          font-weight: 600;
        box-shadow: rgba(1, 92, 153, 0.603) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
        /* border-bottom: 1px solid #123a60ea; */
          transition: all 0.5s ease-in-out; 
    }
    .login-btn{
       margin: 0 auto;
       text-align: center;
       /*margin: 12px 38%;*/
    }
    .d-news-btn {
        bottom: 13.5rem;
    }
}


/* --- Mobile Devices (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    /* Top Bar Stacking */
    .top-bar .container {
        /* flex-direction: column; */
        align-items: center;
        text-align: center;
        /* padding: 10px 0; */
    }
    .top-location-area{
        width:350px ;
    }
    .top-location-area, 
    .top-email-area, 
    .top-phone-area, 
    .top-suport-area {
        width: 100%;
        /* justify-content: center; */
        margin: 5px 0;
        /* flex-direction: column; আইকন এবং টেক্সট উপরে নিচে */
    }
     .top-location-area{
        display: none;
    }
    ol, ul {
  padding-left: 14rem;
}
 .top-email-area{
    margin: 0px 15px;
 }
    .nav{
        flex-wrap: nowrap;
    }
    .top-location-text, 
    .top-email-text, 
    .top-phone-text,
    .top-suport-text {
        margin-left: 0;
        margin-top: 5px;
        margin-left: 5px;
        text-align: center;
        width: auto !important;
    }

    /* Navbar */
    .navbar-nav .nav-link {
        font-size: 16px;
        text-align: center;
        /* padding: 10px; */
    }
.navbar-nav .nav-link:hover {
       color: #123a60ea;
      font-weight: 600;
    box-shadow: rgba(1, 92, 153, 0.603) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    /* border-bottom: 1px solid #123a60ea; */
      transition: all 0.5s ease-in-out;
      
}
    /* News Section */
    .news-heading {
        font-size: 26px;
        line-height: 1.3;
    }
    .sub-heading {
        font-size: 16px;
    }
    .soft-cart{
        width: 50%;
    }
    .tool-cart{
        width: 50%;
    }
    /* Accordion / Portfolio Section */
    .accordion-left, 
    .accordion-right {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
    
    .portfolio-area .d-flex { 
        /* যদি বুটস্ট্র্যাপ d-flex ব্যবহার করেন তবে এটি ফিক্স করতে হবে */
        flex-direction: column;
    }

    /* Contact Section */
    .contact-bg {
        margin-bottom: 30px;
    }
    
    /* Login Page */
    .left-panel {
        padding: 30px 20px;
        min-height: 250px;
    }
    .right-panel {
        padding: 30px 20px;
    }
    /* technology slider */
    .tech-area {
    width: 170px;
}
.login-btn{
    margin: 0 auto;
    text-align: center;
    margin: 12px 38%;
}
.d-news-btn {
    bottom: 10.5rem;
}
}




/* --- Small Mobile Devices (max-width: 480px) --- */
@media screen and (max-width: 736px) {
    .call-btn {
        bottom: 80px;
        right: 15px;
    }

    #button.show {
        right: 16px;
    }

    .tech-area {
        width: 100%; /* মোবাইলে টেকনোলজি বক্স ফুল উইথ */
        margin-bottom: 15px;
    }

    .section-title h1 { /* সব সেকশন টাইটেল */
        font-size: 24px;
    }



    /* Top Bar Stacking */
    .top-bar .container {
        /* flex-direction: column; */
        align-items: center;
        text-align: center;
        /* padding: 10px 0; */
    }

    .top-location-area {
        display: none;
    }

    .top-location-area,
    .top-email-area,
    .top-phone-area,
    .top-suport-area {
        width: 100%;
        /* justify-content: center; */
        margin: 5px 0;
        /* flex-direction: column; আইকন এবং টেক্সট উপরে নিচে */
    }
    /* ol, ul {
  padding-left: 14rem;
} */
    .top-email-area {
        margin: 0px 11px;
    }

    .nav {
        flex-wrap: nowrap;
    }

    .top-location-text,
    .top-email-text,
    .top-phone-text,
    .top-suport-text {
        margin-left: 0;
        margin-top: 5px;
        margin-left: 5px;
        text-align: center;
        width: auto !important;
    }

    .suport {
        padding: 0;
    }
    /* Navbar */
    .navbar-nav .nav-link {
        font-size: 16px;
        text-align: center;
        /* padding: 10px; */
    }

    .navbar-nav .nav-link:hover {
        color: #123a60ea;
        font-weight: 600;
        box-shadow: rgba(1, 92, 153, 0.603) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
        /* border-bottom: 1px solid #123a60ea; */
        transition: all 0.5s ease-in-out;
    }

    .top-phone-area {
        display: none;
    }
    /* News Section */
    .news-box {
        width: 100%;
    }

    .news-company {
        width: 100%;
    }

    .news-heading {
        font-size: 26px;
        line-height: 1.3;
    }

    .sub-heading {
        font-size: 16px;
    }

    .soft-cart {
        width: 100%;
    }
    /* technology slider */
    .tech-box {
        margin: 0 auto;
    }
    /* Accordion / Portfolio Section */
    .accordion-left,
    .accordion-right {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }

    .portfolio-area .d-flex {
        /* যদি বুটস্ট্র্যাপ d-flex ব্যবহার করেন তবে এটি ফিক্স করতে হবে */
        flex-direction: column;
    }

    /* Contact Section */
    .contact-bg {
        margin-bottom: 30px;
    }

    /* Login Page */
    .left-panel {
        padding: 30px 20px;
        min-height: 250px;
    }

    .right-panel {
        padding: 30px 20px;
    }
    /* technology slider */
    .tech-area {
        width: 170px;
    }

    .login-btn {
        margin: 0 auto;
        text-align: center;
        margin: 12px 28.5%;
    }

    .tool-cart {
        width: 100%;
    }

    .d-news-btn {
        bottom: 14.5rem;
        width: 120px;
    }
}

@media screen and (max-width: 480px) {
    .d-news-btn {
        bottom: 7.1rem;
        left: 35%;
    }
}

@media screen and (max-width: 360px) {
    .d-news-btn {
        bottom: 5.5rem;
        left: 35%;
        height: 35px;
        font-size: 17px;
        font-weight: 400;
    }
}

/* --- Small Mobile Devices (max-width: 480px) --- */