*:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
 
.container {
    width: 100%;  
}

.portfolio-grid {
     /*display: grid;
    grid-template-columns: repeat(4, 1fr); 4 columns */
    width: 100%;
    margin: 20px auto;
    columns: 4;
    column-gap: 20px;
    gap: 20px; /* Adjust spacing between items */
    /* padding-left: 20px; */
}

.box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 10px;
    break-inside: avoid;
}

.box:hover {
    transform: translateY(-5px);
}

.image-wrap img {
    width: 100%;
    height: 100%;  
}

.description {
    padding: 15px;
    text-align: center;
    position: relative;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
    
}

.more {
    color: #ff6600;
    font-size: 16px;
    cursor: pointer;
}

.swiper-button-next, .swiper-button-prev {
  
    color: #fff !important;
    border: 1px solid #000;
    padding: 22px;
    border-radius: 30px;
    background: #000;
}
 
.title {
    font-size: 20px;
    font-weight: bold;
    transition: opacity 0.3s;
}
.portfolio_div{
    transition: 0.3s;
}

.more {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s;
    inset: 0;
    margin: 20px 0px;
}

.portfolio_div:hover .title {
    opacity: 0;
}

.portfolio_div:hover .more {
    opacity: 1;
}

.slide-toggle {
    display: none;
}


/******** Sidebar ***************/

#portfolio-filter ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#portfolio-filter .main-filter-item {
    cursor: pointer; 
    margin-bottom: 5px;
    padding: 8px 0px; 
    border-radius: 5px;
    position: relative;
    
}

#portfolio-filter .sub-menu {
    display: none;
    margin-left: 10px;
    padding-left: 5px;
    font-size: 18px;
}

#portfolio-filter .filter-item {
    cursor: pointer;
    padding: 5px; 
    border-radius: 3px;
    margin-top: 5px;
}

#portfolio-filter .filter-item:hover {
    background-color: #ddd;
}
 
#portfolio-filter ul {
    list-style: none; /* Removes bullet points */
    padding: 0;
    margin: 0;
}

 
#portfolio-filter .main-filter-item::after {
    content: '\25BC'; /* Unicode for dropdown arrow */
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 25px;
    transform: translateY(-50%);
    transition: transform 0.3s ease-in-out;
}

.leftSideBar {
    padding-right: 20px;
    width: 20%;
    position: sticky;
    overflow-y: auto;
    height: 100vh;
    top: 20px; 
    display: flex;
    flex-direction: column;
}

 
/******* page ******************/
#page {
    padding: 0px 20px;
}

main#main {
    padding-top: 0px;
}

.content-area {
    width: 100%;  
} 
.pageInner {
    display: flex;
    width: 100%;
}

.pageInner {
    display: flex;
    align-items: flex-start;
}


.tab-pane {
    flex: 1;
    overflow-y: auto;
    max-height: 100vh; 
}

.tab-pane::-webkit-scrollbar, .leftSideBar::-webkit-scrollbar {
    display: none;
}

/*********** Header *****************/
header#masthead {
    width: 100%;  
    max-width: 100%;
    padding: 20px 0px;
}
.site-branding {
    padding-right: 20px;
    width: 20%;
    position: sticky;
    overflow-y: auto; 
    margin: 0;
}

.is-dark-theme .defaultLogo {
    display: none;
}
.is-dark-theme .dark-Logo.site-logo {
    display: block !important;
}

.site-logo {
    margin: 0;
    padding: 0;
}
.navigation-right {
    width: 80%; 
}
.navigation-right .innerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav#site-navigation {
    margin: 0;
}

#nav-tab {
    display: flex;
    justify-content: start;
}

nav.tab_nav_custom .nav a {
    margin: 0px 14px;
    font-size: 16px;
    color: #000;
    position: relative;
    font-weight: 500;
    text-decoration: none;
  }

  .breadcrumb {
    display: flex;
}

strong {
    outline: 0;
}

ul li {
    font-size: 16px;
    padding: 10px 0px;
    color: #000;
}

a {
    text-decoration: none;
}
 
.nav-toggle {
    display: none;
}
/*********** Footer *****************/
footer {
    margin: 0px !important;
    width: 100%;
    display: none;
}
.site-info {
    display: block !important;
}
.powered-by {
    font-size: 14px;
}

.footer-navigation-wrapper {
    display: block;
    justify-content: left; 
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.facebook a::before {
    content: "\f39e"; 
    font-family: "Font Awesome 5 Brands";
    color: #1877F2;
}

.instagram a::before {
    content: "\f16d";
    font-family: "Font Awesome 5 Brands";
    color: #C13584; /* Instagram Pink */
}

.twitter a::before {
    content: "\f099"; 
    font-family: "Font Awesome 5 Brands";
    color: #1DA1F2; 
}

.footer-navigation li a span {
    display: none;
}

.socialMedia {
    margin-top: auto;
}


/******* Search *******/

 
.search-tabs .search_icon_close {margin-left: 50px; font-size: 24px; }


.search-tabs {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 33%;
}
.search-tabs .gt-touch {
    background-color: #210353;
    padding: 12px 15px;
    color: #fff !important;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    width: 40%;
}
.search-tabs .gt-touch a {
  color: #fff !important;
}


.search-form {
    position: relative;
    width: 300px; 
    margin: 0px auto; 
}


.search-tabs #keyword {padding: 8px; border: 1px solid #ccc; border-radius: 10px 0px 0px 0px; } 

.search-form input {
    width: 100%;  
    font-size: 16px;
    outline: none;
}

.search-form span#search {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #666;
    cursor: pointer;
}

/* Optional: Style on hover */
.search-form span#search:hover {
    color: #333;
}


/*********** Multistep Form **************/

div#multi-step-form ul.fw-progress-bar li:before {
    background: #EFF0F6 !important;
  }

  #multi-step-form.fw-wizard {
    padding: 10px;
    border: 1px solid #260a58; 
    border-radius: 10px;
    box-shadow: 0px 13px 31px rgb(19 50 96 / 34%);
  }

  div#multi-step-form ul.fw-progress-bar .fw-active:last-child:before, div#multi-step-form .fw-progress-step.fw-visited:before {
    background: #210353 !important;
    color: #fff !important;
  }
  div#multi-step-form .fw-button-previous, div#multi-step-form .fw-button-next, div#multi-step-form .fw-button-fileupload {
    background: #210353!important;
  }
  div#multi-step-form ul.fw-progress-bar li.fw-visited:after, div#multi-step-form .fw-progress-step.fw-visited .fw-circle, div#multi-step-form .fw-progress-step.fw-visited .fw-circle-1, div#multi-step-form .fw-progress-step.fw-visited .fw-circle-2 {
    background-color: #210353 !important;
  }
  #multi-step-form.fw-large-container .fw-progress-bar .fw-progress-step:last-child {
    width: 40px;
  }

  div#multi-step-form li.fw-progress-step::after, div#multi-step-form .fw-circle, div#multi-step-form .fw-circle-1, div#multi-step-form .fw-circle-2 {
    background-color: #EFF0F6 !important;
  }
  div#multi-step-form .fw-progress-bar li.fw-active:before {
    background-color: #210353 !important;
    color: #fff !important;
  }



 
#multi-step-form .fw-alert-user {
    position: unset !important;
    color: red !important;  
    z-index: 0 !important;     
    -webkit-box-shadow: none  ;
    -moz-box-shadow: none;
    box-shadow: none !important;
    margin-left: 0 !important;
  }
  
  #multi-step-form .fw-alert-user.fw-alert-user-fail {
    background-color: #fff !important;
  }
  #multi-step-form .fw-step-block {
    margin-bottom: 0 !important;
  }
  
  #multi-step-form [data-type=fw-text] .fw-input-container label { 
    margin-top: 0px !important;
  }
  

#multi-step-form h2.fw-step-part-title { 
    margin: 0 0px 10px 0px !important; 
  }

  #multi-step-form .fw-step-part {
    border-left: none !important;
    background: transparent !important; 
}

/********** Inner page ***********/

.portfolio_modal_div {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    width: 100%; 
    margin: 0 auto;
    gap: 20px; 
}
 
.portfolio_modal_leftdiv,
.portfolio_modal_rightdiv {
    width: 48%; 
    box-sizing: border-box;
}

/* Ensure images inside Swiper take full width */
.portfolio_img img {
    width: 100%;
    height: auto;
    display: block;
}

 

.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

span.portfolio-tag-item {
    background-color: #d5d5d5;
    font-size: 12px;
    padding: 5px 10px;
    display: inline-block;
    margin: 0px 10px 10px 0px;
    border-radius: 20px;
    color: #000;
    font-weight: 400;
  }
  .portfolio-tag-row h3 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 20px;
  }

  .video-btn {
    margin-right: 10px; 
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 50px;
 }
 .portfolio_title {font-size: 26px; line-height: 30px; font-weight: 600; margin-bottom: 6px;}


 h3.map-item {
    display: flex;
    margin: 10px 0px;
    align-items: center;
}
h3.map-item strong {
    padding-right: 10px;
}
.map-item p.portfolio-tag-item {
    padding-left: 10px;
}

.portfolio_p {
    font-size: 16px;
    padding-top: 15px;
}

.portfolioHeader {
    cursor: pointer;
    background: #d5d5d5;
    color: #000;
    padding: 10px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-icon {
    font-size: 18px;
    font-weight: bold;
}

.portfolioItems {
    display: none; /* Initially hidden */
    padding: 10px;
}

.ourTeams-section {
    display: flex;
    align-items: center;
    margin: 15px 0px;
    justify-content: space-between;
}
.ourTeam h3 {
    margin: 0px;
}

.swiper-pagination {
    position: unset !important;
    padding-top: 10px;
}
.swiper-pagination-bullet {
    width: 15px !important;  
    height: 15px !important;  
    background-color: #000 !important;  
}
 
.swiper-pagination-bullet-active {
    width: 18px !important;  
    height: 18px !important;
    background-color: #210353 !important;  
}


.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    border: 1px solid #000;
    padding: 18px;
    border-radius: 30px;
    background: #000;
    height: 20px !important;
    width: 20px !important;
    top: auto !important;
    bottom: 2px;
}

.swiper-button-prev {
    left: auto !important;
    right: 60px !important;
}




/**************** Custom subscriber form ******************/


.custom-subscriber-form { 
    background-color: transparent;
}

.custom-subscriber-form h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #000;
}

.custom-subscriber-form label {
    display: block;
    margin-bottom: 10px;
}

.custom-subscriber-form input[type="text"],
.custom-subscriber-form input[type="email"], .custom-subscriber-form input[type="tel"] {
    width: 100%;
    padding: 5px 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.custom-subscriber-form input[type="submit"],
.custom-subscriber-form button {
    background-color: #120031;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.custom-subscriber-form input[type="submit"]:hover,
.custom-subscriber-form button:hover {
    background-color: #120031;
}

.success-message,
.error-message,
.already-subscribed-message,
.login-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}

.success-message {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.error-message {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.already-subscribed-message {
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    color: #004085;
}

.login-message {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

form#custom-subscriber-form label {
    color: #000;
}

.project_video{
    display: none;
}
 input#subscriber_name {
    color: #747474;
}
button, input, optgroup, select, textarea {
    font-size: 15px;
  }

.overlay{    
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height:100%;
  display: none; 
  position: absolute;
  background: #3737377a;
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}


.submit_btn {
  margin-top: 20px;
}


nav.navigation.post-navigation {
    display: none;
}

/*********** Popup **********************/

.modal-video-body {display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); height: 100vh; align-items: center; }

.video-content {background-color: #fefefe; margin: 0 auto; padding: 20px; border: 1px solid #888; width: 50%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animateTop; animation-duration: 0.4s; }

.right-popup {width: 50%; }

.left-popup {width: 50%; }

.right-popup img {width: 100%; height: 450px; object-fit: cover; }

.main-sub-form{display: flex; align-items: center; }

.project_video h4, .project_video p {color: #000; text-align: center; padding-top: 5px; }

.video-button {color: #aaa; float: right; font-size: 28px; }

.video-button:hover, .video-button:focus {color: black; text-decoration: none; cursor: pointer; }

.video-container {padding: 2px 16px; }


.case-stu {
    padding: 20px;
    text-align: center;
}
.stdHead {
    margin: 20px 0px;
}
a#downloadLink {
    color: green;
}

/******** Contact  Page **********/

header.entry-header {
    margin: 0px !important;
    padding: 15px 0px !important;
    border: none !important;
}

h1.entry-title {
    font-size: 30px !important;
    font-weight: 500;
    text-align: center;
}

.entry-content {
    width: 100% !important;
}

.wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0px !important;
}

.wp-block-columns {
    max-width: 100% !important;
}
.admin-footer {
    padding-top: 40px;
}


input[type=checkbox], input[type=radio] { 
    position: absolute !important; 
}

span.fw-txt-ellipsis {
    display: none !important;
}

.admin-footer p {
    margin: 0px !important;
}

.admin-footer .wp-block-image {
    text-align: left;
}

.pageInner {
    margin-bottom: 0;
}
/************* Dark Theme ************/
.respect-color-scheme-preference.is-dark-theme body {
    background-color: #000 !important;
}

.is-dark-theme nav.tab_nav_custom .nav a, .is-dark-theme ul li {
    color: #fff;
}

.is-dark-theme .swiper-pagination-bullet-active { 
    background-color: #fff !important;
}
.is-dark-theme .swiper-pagination-bullet { 
    background-color: #fff !important;
}


.is-dark-theme .swiper-button-next, .is-dark-theme .swiper-button-prev {
    color: #000000 !important;
    border: 1px solid #fff; 
    background: #fff; 
}

.is-dark-theme .search-tabs .gt-touch {
    background-color: #efb20d; 
}