/* Toggle switch basic styling */
.darkmode-toggle { position: fixed; top: 1rem; right: 1rem; display: inline-block; width: 50px; height: 26px; }
.darkmode-toggle input { opacity: 0; width: 0; height: 0; } 
.slider { position: absolute; cursor: pointer; background-color: #ccc; border-radius: 34px; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; }
.slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: 0.4s; } 
input:checked + .slider { background-color: #666; } \
input:checked + .slider:before { transform: translateX(24px); }
.table-responsive { width: 100%;margin-bottom: 1.5rem; color: #111111;overflow: visible; font-size: 16px;}
.table-responsive table {width: 100%; border-collapse: collapse;table-layout: fixed;color: inherit;}
.table-responsive thead th {font-weight: 600;padding: 12px 10px;border-bottom: 2px solid #ccc;text-align: left;vertical-align: middle;color: #111111;}
.table-responsive tbody td {  padding: 12px 10px; border-bottom: 1px solid #ddd;vertical-align: middle;word-wrap: break-word;white-space: normal;color: #111111;}
.table-responsive tbody tr:nth-child(even) {background-color: #fdfdfd;}
/* Column widths for better balance */
.table-responsive thead th:nth-child(1),
.table-responsive tbody td:nth-child(1) {
  width: 20%;
}

.table-responsive thead th:nth-child(2),
.table-responsive tbody td:nth-child(2) {
  width: 50%;
}

.table-responsive thead th:nth-child(3),
.table-responsive tbody td:nth-child(3) {
  width: 30%;
}

/* Style the hex code monospace and center */
.table-responsive tbody td:nth-child(1) span {
  font-family: monospace;
  font-weight: 500;
  display: inline-block;
  margin-left: 6px;
  color: #555;
}

.blogs .swiper-pagination-bullet {
    background-color: #111111 !important;
    transition: 0.3s;
}

.career-box{background-color: #fdfdfd; padding: 20px; border-radius: 18px;position:relative;}
.career-box .exp{color: #AFAFAF;}
.career-box .exp::before{ 
        content: url(../images/main/nav-menu-icon.svg);
        position: absolute;
        right:50px;
        bottom: 25px;
        opacity: 0;
        visibility: hidden;
        transition: 0.4s ease-in;
    }

    .career-box:hover .exp::before{ 
        right:25px;
        opacity: 1;
        visibility: visible;
    }

.backtocareer{position: relative; padding-left:30px;display: flex;align-items: center;}
.backtocareer:before{
        content: url(../images/main/nav-menu-icon.svg);
        position: absolute;
        left:0;
        transform: rotate(180deg) scale(0.7);
    }

 .btn-group{flex-wrap: wrap;gap: 12px;}
.btn-group .share-btn{color: #111111;}
.btn-group .share-btn i::before{font-size: 25px !important;}

.newsletter-banner{background-image: url(../images/dev/newsletter-banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;position: relative;}
.newsletter-banner .btn-closed{position: absolute; right: 0; top: 0;padding: 4px;
    border: 0;
    background: #111111;
    color: #fdfdfd;
    width: 32px;
    margin: 0 !important; }
@media (min-width: 1200px){
  .newsletter-banner{height: 320px; display: flex; justify-content: center;}
}

.modal.show {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color:rgb(255 255 255 / 40%);
}

body.modal-open{padding-right: 0 !important;}

.right-line{border-left: 2px solid #111111; padding-left: 8px;}

.bg-black .custom-card{background-color: #111111 !important; box-shadow: 0 0 60px 10px #fdfdfd0e !important;}
.bg-black .custom-card img{border-radius: 16px;}
.contentmainSwiper {width: 90%; margin: auto;}
.contentmainSwiper .swiper-slide{display: flex; align-items:stretch; height: auto; flex-direction: column;}
.contentmainSwiper .tech-main-box{border: 1px solid #111111; padding: 30px;border-radius: 15px; position: relative;height: 100%; display: flex; align-items: center;justify-content: center; flex-direction: column;}
.contentmainSwiper .key-content{display: flex;justify-content: center; align-items: center;position: relative;transition: 0.4s;top:0;padding: 25px;opacity: 1;}
.contentmainSwiper .sub-content{display: flex;justify-content: center; align-items: center;position: absolute;left: 0;right: 0; width: 100%; height: 100%; background: #111111;top: 100%;color: #fdfdfd;transition: 0.4s;padding: 25px;opacity: 0;}
.contentmainSwiper .tech-main-box:hover .key-content{top: -130%;opacity: 0;}
.contentmainSwiper .tech-main-box:hover .sub-content{top:0;opacity: 1;}

.contentmainSwiper .swiper-slide{margin-bottom: 0 !important;}
.content-slider .tech-slider-prev::after{content: url(../images/dev/left-scroll.svg);position: relative; left:2px;}
.content-slider .tech-slider-next::after{content: url(../images/dev/right-scroll.svg);position: relative; right: 2px;}

.custom-web-devlopment .video-container video {width: 100%;height: 306px;transform: scale(2);transform-origin: center;}

.custom-web-devlopment .blur-content-box{background-image: url(../images/dev/custom-website-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.custom-web-devlopment .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.cms-integrate .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.cms-integrate .blur-content-box{background-image: url(../images/dev/csm-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.web-application .blur-content-box{background-image: url(../images/dev/web-application-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.web-application .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.web-design .blur-content-box{background-image: url(../images/dev/web-design-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.web-design .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.product-design .blur-content-box{background-image: url(../images/dev/product-design-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.product-design .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.api-integrate .blur-content-box{background-image: url(../images/dev/api-and-backend-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.api-integrate .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.dev-bnglr-company .blur-content-box{background-image: url(../images/dev/web-development-seo-lp-bangalore-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.dev-bnglr-company .blur-box-content{background: #fdfdfd70; backdrop-filter: blur(12px);border-radius: 14px;}
.blog-link-url{background-color: #111111; color:#fdfdfd;padding: 0 2px; text-decoration: none;transition: 0.3s;}
.blog-link-url:hover{background-color: #fdfdfd; color:#111111;}
.back-img img{border-radius: 15px;}
.content-over-box{background-color: #fff; padding: 40px; box-shadow: 0 0 60px -10px #00000026; border-radius: 15px;}
@media (min-width: 1200px){
     .over-grid .row:nth-child(odd) .col-md-8 {position: relative; left: -230px; bottom: -75px; }
     .over-grid .row:nth-child(even) .col-md-6 {position: relative;left: -230px; bottom: -75px;}
  }
@media (min-width: 600px) and (max-width: 1200px){
     .over-grid .row:nth-child(odd) .col-md-8 {position: relative; left: -120px; bottom: -75px; }
     .over-grid .row:nth-child(even) .col-md-6 {position: relative;left: -120px; bottom: -75px;}
  }