/* 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{text-decoration: none;font-size: inherit !important;}
.back-img img{border-radius: 15px;}
.related-read {margin: 40px 0;padding: 24px;border-left: 4px solid #000;background-color: #f9f9f9;}
.related-read h3 {margin: 0 0 10px;font-size: 18px;}
.related-read p {margin: 0 0 12px;font-size: 15px;color: #444;}
.related-read .read-more-link {font-weight: 600;text-decoration: none; color: #000;}
.related-read .read-more-link:hover {text-decoration: underline;}
.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;}
     .ddslide img{height: 400px !important; object-fit: cover;}
  }
  .process-box-main .process-single-box{ box-shadow: 0 8px 18px 6px #0000000e !important; border-radius: 10px;position: relative;background-repeat: no-repeat !important;background-position-x: -51px !important;}
.process-box-main .process-single-box.one{background:  url(../images/dev/1.svg);}
.process-box-main .process-single-box.two{background:  url(../images/dev/2.svg);}
.process-box-main .process-single-box.three{background:  url(../images/dev/3.svg);}
.process-box-main .process-single-box.four{background:  url(../images/dev/4.svg);}
.process-box-main .process-single-box.five{background:  url(../images/dev/5.svg);}
.web-design-bnglr .blur-content-box{background-image: url(../images/dev/web-design-companies-in-bangalore-banner.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;border-radius: 15px;}
.web-design-bnglr .blur-box-content{background: #fdfdfd9e; backdrop-filter: blur(12px);border-radius: 14px;}
.tech-stack .texh-image{border-radius: 18px;}
.related-read a{color: #111; text-decoration: underline; font-weight: 500;}

@media (min-width: 1200px){
    .faq .nav-item{width: 23%;}
    .faq-boxes { width: 70% !important; margin: auto;}
}
.faq .nav-link.active{background-color: #111111; color: #fdfdfd; font-weight: 500; border-radius: 30px; border: 1px solid #111111;}
.faq .nav-link{background-color: #fdfdfd; color: #111111; font-weight: 500; border-radius: 30px; border: 1px solid #111111;transition: 0.3s;width: 100%;}
.faq .nav-link:hover{border: 1px solid #111111;}
@media (max-width: 1200px){
    .faq .nav-tabs{flex-wrap: nowrap; overflow-x: scroll; white-space: nowrap; gap: 12px;padding: 1px 0;}
}
.mytab{display:none !important;}


@media (min-width: 1200px){
  .dd-rht .tabcontent1, .dd-rht .tabcontent2, .dd-rht .tabcontent3, .dd-rht .tabcontent4, .dd-rht .tabcontent5 { display:none;}
.solutions-desktop{overflow: hidden; height: 100%; position: relative;}
.dd-left-bg{height: 100vh; display: flex; align-items: center; position: relative;} 
.dd-left{display: flex; flex-direction: column; justify-content: center; width: 100%;}  
.dd-rht{ width: 100%; height: 100%; position: relative; overflow: hidden;}
.ddslide{ width: 100%; height: 100vh; position: absolute; top: 0; left: 0;display: flex; align-items: center; justify-content: center;}
.ddslide1, .ddslide2, .ddslide3, .ddslide4, .ddslide5{  padding: 20px 0px 10px;z-index: 2;}
.mytab .htablinks{opacity: 0.6; border:0; background-color:unset; color: #fdfdfd; font-weight: 400; font-size: 14px;font-family: var(--font-secondary);}
.mytab{column-gap: 30px; display: flex !important;}
}

.ddslide img{border-radius: 12px;}
.ddslide .gif-box{border-radius: 12px;}
@media (max-width: 1200px){
  .ddslide{padding: 50px 0px;}
  .ddslide img{height: 250px; object-fit: cover;}
  .ddslide:first-child{padding:0 0 50px 0;}
}
.hero .swiper-pagination-bullet-active {
    width: 40px !important;
    border-radius: 20px !important;
}
.hero .swiper-pagination-bullet {
    background-color: #111 !important;
    transition: 0.3s;
}

.btn-3{border: 1px solid #111111 !important; padding: 15px 45px;display: inline-block;border-radius: 30px; text-decoration: none;position: relative;background-color: #111111;}
.btn-3:before{content: ''; background-color: #fdfdfd; width: 100%; height: 100%; border-radius: 30px;position: absolute; top:0; left:0;transition: 0.5s;opacity: 1;}
.btn-3 span{position: relative; color: #111111;transition: 0.6s;font-size: 16px;}

.btn-3:hover:before{transform: scale(0);}
.btn-3:hover span{color:#fdfdfd;}