.dime_icon-h{
    height: 100%;
    width: 150px;
}
footer.box-layout {
    max-width: 100% !important;
    margin: auto;
    border-radius: 0 0 0 0 !important;
}
.image-label{
    text-align: center;
}
.banner-text{
    font-size: 55px !important;
    width: 100% !important;
}
.banner_text2{
    font-size: 35px !important; 
    color: #d1caca !important;
}
.about-style-two-thumb{
    bottom: -180px;
}
iframe{
    width: 100%;
    height: 350px;
    object-fit: fill;
}
.youtube-video-wrapper{
margin-top: 30px;
max-width: 75%;
}
.logo_footer{
    height: 100px !important;
}
.contact-form-card .form-group textarea {
    height: 85px !important;
}
.icon_footer{
    height: 37px !important;
}
.super-resolution_img{
    width: 100%;
    height:180px !important;
}
.build_icon{
    width: 90px;
}
.form-check-new{
    display: flex;
    width:100%;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

}
.build_ai-logo{
    width: 60px;
}
.dime_ai-logo{
    width: auto;
    height: 70px;
}

    /* सुनिश्चित करें कि पैरेंट सेक्शन को position: relative मिला हो */
    .language-support-area {
        position: relative;
        overflow: hidden; /* वीडियो को सेक्शन के बाहर फैलने से रोकता है */
    }
    
    /* वीडियो कंटेनर */
    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* इसे टेक्स्ट के नीचे रखें */
        /* एक ब्लैक ओवरले जोड़ें ताकि टेक्स्ट आसानी से पढ़ा जा सके */
        background-color: rgba(0, 0, 0, 0.5); 
    }
    
    /* वीडियो एलिमेंट */
    .video-background video {
        min-width: 100%; 
        min-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        /* वीडियो को सेंटर करें और ओवरले के पीछे रखें */
        transform: translate(-50%, -50%);
        z-index: 0; /* इसे video-background div के नीचे रखें */
    }
    
    /* कंटेंट को वीडियो के ऊपर लाने के लिए */
    /* यह सुनिश्चित करता है कि कंटेनर के अंदर का टेक्स्ट (container div) वीडियो के ऊपर दिखेगा */
    .language-support-area .container {
        position: relative;
        z-index: 10;
    }

/* Styling the appearance of the custom checkbox when checked */
.form-check-new input[type="checkbox"]:checked {
    /* Set the background color when checked (You might need a vendor prefix or specific library selector here) */
    /* This rule often depends on how the checkbox is visually hidden and replaced */
    accent-color: #7476ff; 
}

/* If you are using a custom styled checkbox (like the one with .form-check-label) 
   and not just relying on the browser default, you'll need more complex CSS. 
   Assuming you are customizing the browser default via accent-color: */

.form-check-new input[type="checkbox"]:checked {
    /* Sets the background color of the checked state */
    accent-color: #7476ff;
}
.check_boxclass{
    width: 20px;
}
/* Sets the color of the checkmark. For standard input types, this is usually 
   handled by the browser based on the contrast with accent-color, 
   but this forces a white color if possible: */
.form-check-new input[type="checkbox"]:checked:before {
    color: white; /* For custom checkmark icons */
}

/* A more robust solution for custom checkmarks (if you are manually styling) */
/* If you are using Bootstrap's default .form-check structure (from your original code) */
.form-check .form-check-input:checked {
    background-color: #7476ff;
    border-color: #7476ff; /* Ensures border matches background */
}

.form-check .form-check-input:checked[type=checkbox] {
    /* Forcing the checkmark color to white (common method for Bootstrap) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
label {
    display: inline-block;
    font-weight: normal;
    margin-bottom: 0 !important;
    max-width: 100%;
}
.tech_btn_div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.brand-style-two-item .info_demo {
    padding: 20px;
    padding-bottom: 15px;
    align-items: center;
    height:auto;
}
.prd_crd_para{
    padding-top: 15px;
}
.btn-div-prdct{
    display: flex;
    justify-content: center;
    padding-top: 15px;
}
.btn-div{
    display: flex;
    justify-content: flex-start;
    gap: 40px;
}
.techcard_btn{
    margin-top: 25px;
    font-weight: 400;
    display: inline-block;
    color: var(--white);
    background: var(--bg-gradient);
    padding: 4px 15px;
    border-radius: 6px;
    padding-bottom: 3px; 
    font-size: large; 
}

/*know more btn animation start*/
.techcard_btn {
  position: relative;
  display: inline-block;          /* IMPORTANT for <a> */
  
  text-decoration: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* animated background */
.techcard_btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #9150ff, #50b0ff);
  z-index: -1;
  transition: bottom 0.4s ease-in-out;
}

/* keep text above animation */
.techcard_btn {
  isolation: isolate;   /* KEY FIX */
}

/* hover effect */
.techcard_btn:hover::before {
  bottom: 0;
}

.techcard_btn:hover {
  color: #fff;
 
}


/*know more btn animation end*/


.project-style-two-item .thumb-img {
    /* Height utni hi rakho jitni aapke card ki image section ki default height thi */
    height: 250px; /* Example value, aap isko adjust kar sakte hain */
    width: 100%;
    
    /* ***** MAIN FIX YAHAN HAI ***** */
    background-size: contain; /* Image ko poora dikhayega, bina kaate */
    background-repeat: no-repeat; /* Image ko dohrana nahi hai */
    background-position: center; /* Image ko beech mein rakho */
    /* ***************************** */
}
.solutiontext{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 400;
    line-height: 38px;
}
.project-style-two-item img {
    width: 100% !important;
    height: 100%;
}
.process-style-one-item h2 {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px var(--white-common);
    font-weight: 900;
     writing-mode:unset !important;
    font-size: 60px;
    line-height: 0.7;
 transform:none !important;
    min-height:auto !important;
    margin-bottom: 35px !important;
}

.blog-area .thumb img {
    border-radius: 10px 10px 0 0;
    height: 350px !important;
}

.testimonial-style-one-area{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    object-fit: cover !important;
    overflow: hidden;
}
.title{
    font-size: 50px;
    font-weight: 300;
}
h1 ,h2, h3 , h4 {
    font-weight: 300 !important;
}
.banner-text{
    font-weight: 500 !important;
}
.title_colout{
    font-size: 38px;
    font-weight: 300;
    width: 100%;
    text-align: left;
}
.about-style-three-thumb-2{
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.project-style-two-item {
    position: sticky;
    top: 150px;
    max-height: 100%;
}
.about-style-three-thumb img {
    border-radius: 15px;
     box-shadow:none !important;
     background: transparent !important; 
    padding: 5px;
}
.icon_team{
    background-color:#0d6efd 
}
.text-large{
    font-size: 3vw;
    text-align: left;
}
.project-style-two-item .info {

 overflow:visible !important;
 max-width: 100% !important;

}
.image-div-prd{
    overflow: hidden;
    object-fit: cover;
display: flex;
justify-content: space-between;
}
.box-btns{
display: flex;
justify-content: flex-start;
gap: 25px;
}
.blog-content{
    margin-left: 0 !important;
    width: 100% !important;
}

.partner-card-hover-effect{
    width: 100%;
    height: 220px; 
    background-color: #ffffff; 
    padding: 1rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease-in-out; 
    cursor: pointer;
}

.partners_img{
    object-fit: contain; 
    width: 80%; 
    height: 80%; 
    transition: transform 0.5s ease-in-out;
}
.social-overlay ul li a i {
    display: inline-block;
    height: 45px;
    width: 45px;
    line-height: 45px;
    background: var(--color-primary);
    color: var(--white);
    border-radius: 50%;
    opacity: 1 !important;
    visibility: visible !important;
     transform: none !important;
    transition:none !important;
}
.prd_img-size{
    width:600px;
    height: 350px;
}
.main_img-prd-div{
    display: flex;
    justify-content:center
}
.logo-img-div {
    margin-top: 20%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
.linked-icon-div{
    padding: 5px;
    position: relative;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.linked-con{
    display: block !important;
    visibility: visible !important;
    transition: none !important;
}

.blog-area.full-blog .item .info{
    box-shadow: none !important;
}
@media (max-width: 1400px) {
    .banner-style-two-area {
        height: 100%;
    }
}

@media (min-width: 1600px) {
    .banner-style-two-area {
        height: 100%;
    }


}

.blog-area.full-blog .thumb {
    background:#ffff;
    margin: 0;
    overflow: hidden;
    border-radius: none !important;
}

.blog_card_img_flex{
    
    justify-content: center;
    align-items: center;
    padding-left: 8%;
}

/* Sidebar Image Card container ke liye */
.services-sidebar .sidebar-image-card {
    background-color: transparent; /* Agar original card ka background light tha */
    border-radius: 25px; /* Original card ka border-radius match karein */
    overflow: hidden; /* Important: Border-radius apply karne ke liye */
    padding: 0; /* Agar original card mein koi padding tha jise aap maintain nahi karna chahte */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Agar original card par shadow thi */
    /* Height ko auto rakhein taaki image fit ho sake */
    height: auto; 
    margin-bottom: 30px; /* Agar cards ke beech mein space tha, toh yeh usko maintain karega */
}

/* Images ko card ke andar fit karne ke liye */
.services-sidebar .sidebar-image-card img {
    width: 100%;        /* Image poori width legi */
    height: 390px;       /* Image apne parent div ki poori height legi */
    object-fit: fill;  /* Yeh image ko card ke andar fill kar dega, bina white space ke.
                           Agar image ka aspect ratio alag hai toh thoda cut sakta hai,
                           lekin visually card bhara hua dikhega.
                           Agar "bina cutting" zaroori hai, toh 'contain' use karein,
                           lekin phir white space aa sakta hai.
                        */
    display: block; /* Extra space remove karne ke liye */
    border-radius: inherit; /* Parent container ka border-radius inherit karega */
}

/* Agar aapke theme mein .mt-30 class nahi hai ya alag spacing chaiye */
.services-sidebar .sidebar-image-card + .sidebar-image-card {
    margin-top: 30px; /* Do image cards ke beech mein spacing */
}


.slider_img-enhance{
    max-width: 100%;
    border-radius: 25px !important;
    height: 470px;
}

/* Video container ke liye - ensure ki woh apne child video ko allow kare height adjust karne mein */
.about-style-two-thumb {
    position: relative; /* Agar video ki height surrounding content par depend karni hai */
    height: 100%; /* Agar parent container ki height available hai */
}

/* Video tag ke liye styling */
.dime-video-style {
    width: 80%; /* Width ko kam karein, jaise 80% (आप इसे अपनी पसंद के अनुसार एडजस्ट कर सकते हैं) */

    min-height: 505px; /* Minimum height dein, ise adjust karein jab tak woh neeche wale section ko touch na kare */
    height: auto; /* Height ko auto rakhein taaki aspect ratio maintain rahe */
    object-fit: cover;
    display: block; /* Extra space remove karne ke liye */
    margin: 0 auto; /* Center align karne ke liye agar width 100% nahi hai */
    
    /* Border-radius add karein */
    border-radius: 15px; /* Border-radius ki value ko adjust karein */
    overflow: hidden; /* Border-radius sahi se apply ho iske liye */
    
    /* Box-shadow agar aapko video par bhi shadow chaiye */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

/* Responsive adjustments (optional) */
@media (max-width: 991px) {
    .dime-video-style {
        width: 100%; /* Smaller screens par poori width le */
        min-height: 300px; /* Mobile par height adjust karein */
        border-radius: 10px;
    }
}
.banner-style-two-area {
    height: 100%;
}


/* Before/After Slider CSS */

#comparison {
    width: 100%;
    overflow: hidden; 
    position: relative;
    padding-bottom: 56.25%; /* Adjust to your image aspect ratio */
    max-height: 500px;
}
figure { 
    position: absolute;
    background-size: cover;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0; 
    object-fit: cover;
}
.divisor { 
    background-size: cover;
    position: absolute;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    /* Added Black Line Properties */
    border-right: 3px solid black;
}
/* Black line extensions above and below the handle */
.divisor::before,
.divisor::after {
    content: '';
    position: absolute;
    right: -2px; 
    width: 3px;
    height: calc(50% - 25px); 
    background: black;
    z-index: 3;
}
.divisor::before {
    top: 0;
    box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}
.divisor::after {
    bottom: 0;
    box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}
/* Handle (Black circle with white arrows) */
.handle {
    position: absolute;
    height: 60px; 
    width: 60px; 
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 4; /* Ensure handle is on top of the vertical line */
    background: black;
    border-radius: 50%;
    color: white;
    cursor: grab;
}
.handle::before,
.handle::after {
    content: '';
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
}
.handle::before {
    border-right: 18px solid white;
    left: 35%;
    margin-left: -17px;
}
.handle::after {
    border-left: 18px solid white;
    right: 35%;
    margin-right: -17px;
}
/* Range Input (Invisible slider) */
input[type=range]{
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    top: 50%; 
    left: -20px;
    transform: translateY(-50%);
    background-color: transparent;
    width: calc(100% + 50px); 
    z-index: 5; /* Ensure slider is on top of handle */
    cursor: grab;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
}
input[type=range]::-moz-range-track {
    -moz-appearance: none;
    height: 15px;
    width: 100%;
    background-color: transparent; 
    position: relative;
    outline: none; 
}
.infinite-gallery-carousel{
    padding: 0px 10px 0px 10px !important;
    bottom: 0 !important;
}
.infinite-gallery-item img{
    width: 320px !important;
    height: 250px !important;
    aspect-ratio:  4 / 3 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    
}
.sub-title{
    text-align: left !important;
}

/* GPU Acceleration का उपयोग करें */
/* यह आमतौर पर Swiper द्वारा खुद ही किया जाता है, लेकिन अगर समस्या है, तो आप इसे force कर सकते हैं */
.swiper-wrapper {
    /* transition: transform 0.5s ease-out;  Swiper इसे खुद मैनेज करता है, इसे override न करें */
    transform: translate3d(0, 0, 0); /* GPU acceleration को force करता है */
}
/*.swiper-slide{*/
/*    width: 320px !important;*/
/*}*/

.blog-area.full-blog .itemnew {
    border-radius: 8px;
    box-shadow: inherit;
    margin-bottom: 30px;
    overflow: inherit;
    height: 640px;
}

/* --- TABLET AND SMALL LAPTOP DEVICES (MAX WIDTH: 991PX) --- */
@media (max-width: 991px) {
    /* General Typography & Spacing */

    .solutiontext {
        font-size: 20px;
        line-height: 30px;
    }
    iframe{
        width: 100%;
        height: 350px;
    }
    /* Layout Adjustments */
    .btn-div {
        gap: 20px; /* Reduce spacing between buttons */
    }
    .about-style-two-thumb{
    
}
    .tech_btn_div {
        justify-content: center; /* Center buttons on tablets */
        gap: 15px;
    }

    /* Footer, Icons, and Logos */
    .dime_icon-h {
        width: 100px; /* Reduce icon width */
    }
    .logo_footer {
        height: 80px !important; /* Reduce footer logo size */
    }
    .icon_footer {
        height: 30px !important;
    }

    /* Card & Image Overrides */
    .super-resolution_img {
        height: 150px !important; /* Reduce image height in cards */
    }
    .blog-area .thumb img {
        height: 300px !important; /* Reduce blog image height */
    }
    .project-style-two-item .thumb-img {
        height: 200px; /* Reduce project card image section height */
    }
    .blog-area.full-blog .itemnew {

        margin-bottom: 25px;
    }
    .prd_img-size {
        width: 100%; /* Image width full on tablet */
        height: 300px;
    }
    .main_img-prd-div {
        justify-content: center; /* Center the main product image */
    }
    
    /* Process Steps (Vertical Text) */
    .process-style-one-item h2 {
        font-size: 50px; /* Reduce step number size */
    }

    /* Before/After Slider */
    #comparison {
        max-height: 400px; /* Limit slider height */
    }
    .handle {
        height: 45px; 
        width: 45px; 
    }
    .handle::before, .handle::after {
        border-width: 4px inset transparent; /* Adjust arrow size */
    }
    .handle::before {
        border-right: 12px solid white;
        margin-left: -13px;
    }
    .handle::after {
        border-left: 12px solid white;
        margin-right: -13px;
    }
    .brand-style-two-item{
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) {
    /* --- TABLET AND SMALL LAPTOP DEVICES --- */
    
    /* Carousel Container */
    .infinite-gallery-carousel {
        /* Adjust padding for tablet-sized screens */
        padding: 0 15px !important; 
    }
    
    /* Individual Slide and Image Dimensions (Reduce size) */
    .swiper-slide {
        /* Reduce slide width to fit more on screen or improve spacing */
        /*width: 300px !important; */
    }
    .infinite-gallery-item img {
        /* Match image width to slide width */
        width: 300px !important;
        /* Slightly reduce image height for compactness */
        height: 230px !important;
    }
}

@media (max-width: 575px) {
    /* --- MOBILE DEVICES (PHONES) --- */
    
    /* Carousel Container */
    .infinite-gallery-carousel {
        /* Full width and minimal side padding for phones */
        padding: 0 5px 0 5px !important; 
    }

    /* Set the slide to take up the full available width */
    .swiper-slide {
        /* This is the key change: setting width to 100% */
        /*width: 100% !important; */
    }
    
    /* Individual Image Dimensions */
    .infinite-gallery-item img {
        /* Image should also take the full width of the 100% slide */
        width: 100% !important;
        /* Keep a fixed height (adjust this value as needed) */
        height: 200px !important; 
        object-fit: cover; /* Ensures the image fills the area */
    }
    
    /* Section Heading Adjustment */
    .services-style-two-area .site-heading h2.title {
        font-size: 28px !important; 
    }
}
.banner-style-two-area {
    height: 100%;
}
@media (max-width: 575px) {
    /* General Padding & Margins */
    .about-style-two-thumb{
    margin-bottom: 0;
}
.banner-style-two-area {
    height: 100%;
}
.about-style-two-thumb{
    margin-bottom: 0;
}
    .youtube-video-wrapper {
        margin-top: 20px;
        max-width: 100%; /* Full width on small phones */
    }
    .testimonial-style-one-area {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    iframe{
        width: 100%;
        height: 350px;
    }
    .brand-style-two-item{
        margin-bottom: 20px;
    }
    /* Forms */
    .contact-form-card .form-group textarea {
        height: 70px !important; /* Smaller textarea */
    }
    .form-check-new {
        flex-direction: row; /* Stack checkbox label and input vertically if needed */
        align-items: center; /* Align stacked items to the start */
        gap: 10px; /* Reduce gap */
    }

    /* Buttons & Links */
    .btn-div {
       display: flex;
        gap: 20px;
    }
    .box-btns {
        flex-direction: column;
        gap: 15px;
    }
    .tech_btn_div {
        justify-content: center;
        gap: 10px;
    }
    
    /* Images & Cards */
    .blog-area .thumb img {
        height: 250px !important; /* Smallest blog image height */
    }
    .prd_img-size {
        height: 200px; /* Smallest product image height */
    }
    
    /* Image Gallery/Carousel */
    .infinite-gallery-carousel {
        padding: 0px 5px 0px 5px !important;
    }
    .infinite-gallery-item img {
        width: 280px !important; /* Smaller carousel image width */
        height: 200px !important; /* Smaller carousel image height */
    }
    .swiper-slide {
        /*width: 280px !important;*/
    }
    
    /* Before/After Slider */
    #comparison {
        max-height: 300px;
        padding-bottom: 75%; /* Increase aspect ratio for portrait images or just ensure visibility */
    }
    .handle {
        height: 40px; 
        width: 40px; 
    }
    
    /* Sidebar Images */
    .services-sidebar .sidebar-image-card img {
        height: 300px; /* Reduce sidebar image height on mobile */
        object-fit: cover;
    }

    /* Video Player */
    .dime-video-style {
        width: 100%; 
        min-height: 300px; 
    }
}

@media (max-width: 380px) {
    .banner-style-two-area {
        height: 100%;
    }
}



.brand-style-two-item img {
    height: 85px;
}

@media (min-width: 1350px){
    .banner-style-two-area {
        height: 100vh;
    }
}
@media (max-width: 991px){
.about-style-two-thumb {
   
}
}
@media (max-width: 575px) {
    iframe {
        width: 100%;
        height: 300px;
        object-fit: fill;
    }
    .testmall_btns {
        display: flex;
        flex-wrap: wrap;
       gap: 0 !important;
    }

}

/* Base Styles for the newsletter section (already present/implied in HTML) */
.newsletter-area {
    /* ... other styles (padding, background, etc.) */
    display: flex;
    align-items: center; /* Vertically center content */
}

/* Default desktop layout (10:2 columns) is fine without specific media query */
.newsletter-area .col-10 {
    width: 83.3333%; /* Bootstrap col-10 equivalent */
}
.newsletter-area .col-2 {
    width: 16.6667%; /* Bootstrap col-2 equivalent */
}


/* --- MOBILE RESPONSIVENESS (Screens up to 767px wide) --- */
@media (max-width: 767px) {
    
    /* 1. कॉलम लेआउट एडजस्टमेंट: 
       टेक्स्ट और बटन दोनों को पूरी चौड़ाई (100%) दें ताकि वे ऊपर-नीचे आ सकें। */
    .newsletter-area .col { /* Ensure all generic cols wrap */
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .newsletter-area .col-10,
    .newsletter-area .col-2 {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 20px; /* दोनों तत्वों के बीच स्पेस दें */
        padding-left: 15px; /* कंटेनर के अंदर पैडिंग सुनिश्चित करें */
        padding-right: 15px;
    }
  
    /* 2. टेक्स्ट अलाइनमेंट: 
       हेडिंग और पैराग्राफ को केंद्र में लाएं। */
    .newsletter-area .newsletter-style-three {
        text-align: center !important; 
    }
    .about-style-two-thumb{
        bottom: 0;
    }
    .breadcrumb-area{
        height: 100%;
        padding-top: 50% !important;
  }
    /* 3. बटन अलाइनमेंट:
       बटन को उसके कॉलम के अंदर केंद्र (Center) में लाएं। */
    .newsletter-area .col-2 {
        /* हटा दें: display:flex; justify-content: center; align-items: center; 
           और flex-direction: column जोड़ें ताकि बटन ठीक से दिखे */
        display: flex;
        justify-content: center; /* बटन को हॉरिजॉन्टली सेंटर करें */
        align-items: center;
    }

    /* हेडिंग फ़ॉन्ट साइज़ को मोबाइल पर छोटा करें ताकि यह रैप न हो */
    .newsletter-area .title {
        font-size: 28px; 
    }
    .newsletter-area p {
        font-size: 16px !important;
    }
}
.feature-style-one-items{
    display: flex;
    gap: 30px;
}
@media (max-width: 992px) {
    .banner-text{
        font-size:38px !important;
        width: 100% !important;
    }
    .banner_text2{
        font-size: 22px !important; 
        color: #d1caca !important;
    }
   h1, h2 ,.text-transform-up {
        font-size: 35px;
      
    }
    .text-large{
        font-size: 28px;
        line-height: 40px;
    }
    p{
        font-size: 17px;
    }
    h3{
        font-size: 25px;
        width: 100%;
        align-items:flex-start ;
    }
    .title_colout{
        font-size: 30px;
        width: 100% !important;
        align-items:flex-start;
    }
    .site-heading{
        font-size: 22px !important;
    }
    .title  {
        font-size: 30px !important;
   
    }
    h4{
        font-size: 22px;
       
    }
.split-text-right{
    width: 100% !important;
}
.blog-area.full-blog .itemnew {
    height: 100%;
 }
.newsletter-style-three{
    text-align: center;
}
    .build_icon{
        width: 50px;
    }
    .feature-style-one-items{
        display: block;
    }
    .feature-style-one{
       margin-bottom: 15px;
    }
    .breadcrumb-area{
          height: 100%;
          padding-top: 35%;
    }
    .project-style-two-item{
        width: 100% !important;
         height: 620px !important;
         max-height: auto !important;
        min-height: auto !important;
    }
    .project-style-two-item .info{
width: 100% !important;
height: 100%;
    }
    .project-style-two-item .Info{
        width: 100% !important;
    }
    .image-div-prd{
        display: flex;
        flex-wrap: wrap;
    }
    .language-support-info{
        margin-top: 25px;
    }
    .testmall_btns{
  display: flex;
  flex-wrap: wrap;
gap: 40px;

    }
    .new_solution_blogcard{

        height: 735px !important;
    }
   
    .partner-card-hover-effect{
        width: 100%;
        height: 190px; 
        background-color: #ffffff; 
        padding: 1rem; 
        border-radius: 0.5rem; 
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        transition: all 0.3s ease-in-out; 
        cursor: pointer;
    }
    .navbar-brand{
        padding-left: 0 !important;
    }
    
    .partners_img{
        object-fit: contain; 
        width: 55%; 
        height: 55%; 
        transition: transform 0.5s ease-in-out;
    }
    .btn{
        width: 100%;
    }
    
}

.breadcrumb-area{
    position: relative;
     overflow: hidden;
      height: 600px;
}
.project-style-two-item{
    width: 100% !important;
     height: 280px;
     max-height: auto !important;
    min-height: auto !important;
}
.project-style-two-item .info{
    background-image: url(assets/img/shape/10.png);
     padding:50px 20px 50px 30px;
      width:100%;
       max-width:auto !important;
}

.project-style-two-item .Info{
    background-image: url(assets/img/shape/10.png);
     padding:50px 20px 50px 30px;
      width:320px;
       max-width:auto !important;
}

.testmall_btns{
    display:flex;
     justify-content:flex-start; 
     gap:60px; 
}
.new_solution_blogcard_div{
    width: 100%; 
    max-width: 600px; 
    padding-top: 50px; 
    padding-bottom: 50px;  
}
.new_solution_blogcard{
    padding: 30px; 
    background: #FFFFFF; 
    border-radius: 18px; 
    box-shadow: 0 20px 50px rgba(0, 45, 98, 0.15); 
    border-top: 6px solid #4C6EF5; 
    height: 665px;
}


/*
1. For screens 1000px wide and below (Mobile/Tablet View):
   - Only show the Logo and the Hamburger Menu button.
   - Center the logo if possible by adjusting flex properties.
*/
@media (max-width: 1200px) {
    .attr-right {
        display: none !important;
    }
    .project-style-two-item .Info {
        background-image: url(assets/img/shape/10.png);
        padding: 50px 20px 50px 30px;
        width: 100%;
        max-width: auto !important;
    }
    .btn{
        padding: 13px 20px; 
        width: 220px;
    } 
    .testmall_btns {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
    }
    .new_solution_blogcard {
        padding: 30px;
        background: #FFFFFF;
        border-radius: 18px;
        box-shadow: 0 20px 50px rgba(0, 45, 98, 0.15);
        border-top: 6px solid #4C6EF5;
        height: 880px;
    }
    .row{
        padding-left: 10px;
        padding-right: 10px;
    }
    
    
}



/* ===== FIX EVENT SLIDER IMAGE ON SMALL SCREENS ===== */
/* ===== EVENT SLIDER – FINAL RESPONSIVE SIZE FIX ===== */

.eventx-card {
  width: 100%;
  max-width: 420px;        /* 🔥 Bigger cards for laptop */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Large laptops / desktops */
@media (min-width: 1200px) {
  .eventx-card {
    max-width: 420px;
  }
}

/* Laptops */
@media (max-width: 1199px) {
  .eventx-card {
    max-width: 360px;
  }
}

/* Tablets */
@media (max-width: 991px) {
  .eventx-card {
    max-width: 320px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .eventx-card {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/*hover*/
/* =====================================
   EVENT IMAGE HOVER ZOOM EFFECT
   ===================================== */

/* Ensure clipping */
.eventx-card {
  overflow: hidden;
}

/* Smooth zoom */
.eventx-card img {
  transition: transform 0.6s ease;
}

/* Hover zoom (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .eventx-card:hover img {
    transform: scale(1.08);   /* 🔥 adjust zoom level */
  }
}