/******==================== Case Study Listing Page CSS Start ====================******/
.filter-active{color: red;}
.small-banner-sec{padding: 140px 0px 100px;}
.small-title-sec{max-width: 100%;padding: 0px;}
.small-title-sec h1{font-size: 60px; line-height: 70px; letter-spacing: -1.5px; font-weight: 800; margin-bottom: 40px;}
.small-title-sec p{font-size: 18px; line-height: 28px; margin-bottom: 0rem;}
.cs-brands-listing-sec{padding: 0px 0px 80px;}
/* Filter CSS Start */
.cs-filter-bar{display: flex; align-items: center; justify-content: space-between;border-bottom: 1px solid rgba(238, 238, 238, 1); position: relative;}
.cs-filter-bar .tab-filter{padding-bottom: 20px; position: relative;}
.cs-filter-bar .tab-filter a{color: #81959E; font-size: 16px; font-weight: 600; margin: 0px 20px; padding-bottom: 20px;}
.cs-filter-bar .tab-filter a:hover{color:#252B33;}
.cs-filter-bar .tab-filter a.active{color:#252B33; border-bottom: 1px solid rgba(37,43,51,1);}
.cs-filter-bar .tab-filter a:first-child{margin:0px 20px 0px 0px;}
.filterby-sec{display: none;align-items: center; justify-content: space-between;margin-bottom: 40px;}
.filterby-sec h4{font-size: 24px; font-weight: 800;}
.listing-filter{display: none;}
.category-filter .dropdown {display: inline-block; cursor: pointer; padding: 0px 0px 20px 0px;margin: 0px 50px 0px 0px;}
.category-filter .dropdown:last-child{margin: 0px 0px 0px 0px;}
.category-filter .dropdown .drop{color:#252B33; font-size: 16px; font-weight: 600;padding:0px 20px 0px 0px; position: relative;}
.category-filter .dropdown .dropdown-menu{margin:0rem 0rem 0;transition: all .5s ease;padding: 0.5rem 0;height: auto;box-shadow: 0 0 16px 0 rgba(0,0,0,0.15);border-radius: 4px; border: none;min-width: 150px; right: 0px; left: inherit;}
.category-filter .dropdown .dropdown-menu.two-part-tab{min-width:350px;}
.category-filter .dropdown .dropdown-menu.two-part-tab li{display: inline-block; width: 49%;}
.category-filter .dropdown .dropdown-menu.three-part-tab{min-width:350px;}
.category-filter .dropdown .dropdown-menu.three-part-tab li{display: inline-block; width: 49%;}
.category-filter .dropdown:hover .dropdown-menu{display: block;}
.category-filter .dropdown > .dropdown-menu > li > span {padding: 0.2rem 1rem;display: inline-flex;color: #252B33 !important;text-align: left;transition: all 0.25s linear;font-weight: 400;font-size: 14px;}
.category-filter .dropdown > .dropdown-menu > li > span:hover,.category-filter .dropdown > .dropdown-menu > li > span.filter-active {color: #F13C31 !important;}
.category-filter .dropdown .drop::after{position: absolute; content: ""; width: 0;height: 0;border-style: solid;border-width: 5px 5px 0 5px;border-color: black transparent transparent transparent;display: inline-block;margin-left: 6px;top: 10px;transform: rotate(0deg);transition: all 0.25s ease-in;}
.category-filter .dropdown .drop.dropdown-active::before{position: absolute; content: ""; width: 4px;height: 4px;background: #F13C31; display: inline-block;right: 17px;top: 3px;transform: rotate(0deg);transition: all 0.25s ease-in;border-radius: 30px;}
.category-filter .dropdown .drop:hover::after{transform: rotate(180deg);transition: all 0.25s ease-out;}
.category-filter .dropdown .dropdownArrow{position:absolute;top:38px;right:50%;margin:0 0 0 -6px;width:12px;height:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px 0 0 0;background:#fff;-webkit-box-shadow:-3px -3px 5px rgba(82,95,127,.04);box-shadow:-3px -3px 5px rgba(82,95,127,.04);will-change:transform;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform; z-index: 9999;display: none;}
.category-filter .dropdown:hover .dropdownArrow{display:block;}
.mb-filter-close{display:none;position: fixed; left: 15px; bottom: 15px; background: #F13C31;color: #fff; font-size: 14px; font-weight: 600;border-radius: 25px; padding: 3px 13px;text-align: center; text-decoration: none; transition: all 0.3s ease-in-out !important; border: 2px solid #F13C31;z-index: 9999; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); cursor: pointer;}

.filter-dropdown-sec { display: flex; align-items: center;}
.filter-dropdown-sec .reset-ic { padding: 0px 0px 20px 0px;}
.filter-dropdown-sec .reset-ic a { position: relative;display: flex;}
.icon-refresh{color: #252B33 !important;font-size: 20px;}
.filter-dropdown-sec .reset-ic .tooltiptext { visibility: hidden; position: absolute; bottom: 60%;left: 50%;transform: translateX(-50%); width: 100px; background-color: #ffffff; color: #252b33;  font-size: 14px;line-height: 20px;text-align: center; padding: 5px; border-radius: 4px; z-index: 1; opacity: 0;transition: opacity .6s; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);}
.filter-dropdown-sec .reset-ic a:hover .tooltiptext { visibility: visible; opacity: 1;}
.filter-dropdown-sec .reset-ic .tooltip-top::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #FFFFFF transparent transparent transparent;}
/* Filter CSS End */

.cs-listing-sec{padding: 60px 0px 80px;}
.cs-mar-top-60, .popular-brands-sec .mar-top-100{margin-top: 60px;}
.noresult {font-weight: 600;}
.popular-brands-sec .noresult{margin-top: 60px;}
.case-listing-col .cs-listing-img{overflow: hidden;box-shadow: 0px 0px 10px 0px rgba(0,0,0,.1); height: 270px; border-radius: 5px;}
.case-listing-col .cs-listing-img img{width: 360px; height: 100%; min-height: 270px; object-fit: cover;transition: 0.4s ease;}
.case-listing-col .cs-listing-img:hover img{transform: scale(1.08);}
.case-listing-col .cs-project-detail{margin-top: 15px;}
.case-listing-col .cs-project-detail p{color: #81959E; font-size: 12px; text-transform: uppercase; font-weight: normal; margin-bottom: 5px;min-height: 26px;}
.case-listing-col .cs-project-detail a h3{color: #252B33; font-size: 20px; font-weight: 600;}
.case-listing-col .cs-project-detail .project-bio{color: #252b33;font-size: 16px;line-height: 26px;margin-top: 5px;display: block;display: -webkit-box;align-self: flex-start;height: 55px;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.case-listing-col .cs-technology{margin-top: 10px;}
.case-listing-col .cs-technology span{border: 1px solid rgba(218,225,228,1);border-radius: 12px;font-size: 12px;color: #81959E;font-weight: normal; padding: 1px 10px; margin-right: 4px; display: inline-block;}

.brand-listing-col .brand-logo-img{display: flex; align-items: center;min-height: 70px; margin-bottom:20px;}
.brand-listing-col .brand-cs-detail {display: flex; flex-wrap: wrap; align-items: flex-end;}
.brand-listing-col a{color: #F13C31; font-size: 16px;font-weight: 600;display: flex;align-items: center;}
.brand-listing-col a span{color: #F13C31 !important;margin-left: 10px;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}
.brand-listing-col a span::before{color:#F13C31;}
.brand-listing-col a:hover span{margin-left: 15px;}
.brand-listing-col p {display: block; display: -webkit-box; align-self: flex-start; height: 155px; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 20px;}
.dark-light-logo .white-mode-img{display: none;}
/******==================== Case Study Listing Page CSS End ====================******/

/******==================== Brands Case Study Detail Page CSS Start ====================******/

/* Comman CSS Start */
.client-cs-white-title{font-size: 60px; font-weight: 800; line-height: 70px; color: #252B33; letter-spacing: -1px; margin: 20px 0px 30px;}
.client-cs-p-black{font-size: 16px; color: #252B33; font-weight: 400; letter-spacing: 0; line-height: 26px;}
.client-cs-p-black p{margin-bottom: 15px;}
.client-cs-p-black p:last-child{margin-bottom: 0px;}
.client-cs-sub-title{font-size: 40px; line-height: 58px; color: #252B33; letter-spacing: -1.25px; font-weight: 800; margin-bottom: 20px;}
.client-cs-h4{font-size: 24px; color: #252B33; font-weight: 800; letter-spacing: -0.5px; line-height: 28px;}
.container-fluid{padding: 0px;}
.cs-mr-to-80{margin-top: 80px;}
.captcha-outer .btn{margin-top:20px !important;justify-content: center;}
.captcha-outer .btn:hover{border-color: transparent;}
/* Comman CSS End */

/* Client Banner Section CSS Start */
.client-cs-banner{padding: 130px 0px 100px;}
.client-cs-title-sec{background: #000; height: 100%; position: relative; display:flex; flex-direction:column; justify-content:center; align-content:center; align-items: flex-start; padding: 0px 40px;}
.case-title .cs-sub{display:block; color: #252B33; font-size: 18px; line-height: 28px; font-weight: 400;}
.client-cs-banner .case-title {max-width: 80%;}
.brand-filter{margin-top: 20px; border-bottom: none !important;}
.brand-filter .tab-filter a{padding-bottom: 10px; font-size: 14px; margin: 0px 10px;}
.brand-filter .tab-filter a:first-child {margin: 0px 10px 0px 0px;}
.brand-filter .tab-filter{border-bottom: 1px solid #eeeeee;padding-bottom: 9px;}
/* Client Banner Section CSS End */

/* Client Project Brief Section CSS Start */
.services-sec .cs-services{margin-top: 40px;}
.services-sec .cs-services h4{margin-bottom: 0px;}
.services-sec .cs-services .service{color: #F13C31; font-size: 18px; line-height: 26px; font-weight: 400; text-decoration:none; display: block; margin-bottom: 8px;}
.cs-project-sec .client-cs-p-black{width: 90%;}
/* Client Project Brief Section CSS End */

/* Reqirement Section CSS Start */
.cs-requirment-sec .tagline{color: #F13C31; font-size: 24px; line-height: 38px; font-weight: 400;}
/*.cs-requirment-sec h2{margin-bottom:20px;}*/
/* Reqirement Section CSS End */

/* Team Strategy Section CSS Start */
.team-strategy{padding-top: 75px;}
.team-strategy p{font-size: 25px; line-height: 35px; color: #252b33; font-weight: 400; }
.cs-strategy-sec .client-cs-p-black{width: 96%;}
.cs-strategy-sec .key-benefits{margin-top: 40px;}
.key-benefits .benefits{padding-left: 0px; margin-top: 25px;}
.key-benefits .benefits li{color: #252B33; font-size: 16px; line-height: 28px; display: inline-block; font-weight: 400; width: 95%; padding-left: 35px; list-style: none; margin-bottom:30px; position: relative;}
.key-benefits .benefits li span::before{content: " "; background: #F13C31; position: absolute; left: 0px; top: 9px; height: 8px; width: 16px;}
/* Team Strategy Section CSS End */

/* Result Section CSS Start */
.cs-result-sec{padding: 80px 0px; background: #F7F7F7; }
.cs-result-sec .container{ background: transparent; }
.cs-result-sec .client-cs-p-black{width: 90%;}
.cs-result-sec .technology-sec{margin-top: 60px;}
.technology-sec .technology-tags{margin-top: 20px;}
.technology-sec .technology-tags .tags{ display: inline-block; margin-right: 10px;}
.technology-sec .technology-tags .tags a{color:#252B33; display: block; padding: 2px 20px; font-size: 16px; font-weight: 400; background:#e4e4e4; border-radius: 4px; -webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;}
.technology-sec .technology-tags .tags a:hover{background: #F13C31 !important; color: #fff !important;}
.brand-sec .tech-icon{margin-top: 40px;}
.brand-sec .tech-icon a .fa{color: #252B33; font-size: 30px; margin-right: 15px; border-radius: 4px; border: 1px solid #81959E; padding: 8px 11px;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.brand-sec .tech-icon a:hover .fa{border: 1px solid #252B33; color: #252B33;}
/* Result Section CSS End */

/* Next Case Study Section CSS Start */
.next-case-sec{position: relative;}
.cs-next-project{display: flex; align-items: center; justify-content: center; width: 100%; height: 600px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-size:cover !important; overflow:hidden; background-position:center center !important; background-repeat:no-repeat !important; -webkit-filter: grayscale(100%); filter: grayscale(100%); text-align: center; position: relative;}
.cs-next-project:hover {text-decoration:none; -webkit-filter: grayscale(0%); filter: grayscale(0%);}
.next-project h3 {color: #ffffff; font-size: 28px; font-weight: 400; margin-bottom: 0px;}
.next-project .separator{height: 1px; position: relative; width: 100px; display: block; margin:50px auto 50px auto; background: #fff;}
.next-project h4 {color: #ffffff; text-transform: uppercase; font-size: 20px; font-weight: 400; margin-bottom: 0px;}
.next-project h2 {color: #ffffff; font-size: 60px; font-weight: 800; margin-bottom: 0px;}
.cs-list-view {position: absolute; left: 0px; right: 0px; bottom: -30px; z-index: 10;}
.cs-list-view a.icon-view {background: #fff url('../../assets/images/uploads/2016/08/portfolio-listing-sprite.png') no-repeat; height: 60px; width: 60px; display: block; border-radius: 50px; background-position: -28px 19px; box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin: 0 auto;}
.cs-list-view .icon-view:hover {background-position: 22px 19px;}
/* Next Case Study Section CSS End */

/******==================== Brands Case Study Detail Page CSS End ====================******/


/* Portfolio Form Css Start */
.portfolio-bottom-sec {background: #f8f8f8; overflow: hidden; position: relative;}
.portfolio-bottom-sec .portfolio-footer-left {padding: 60px 0;}
.portfolio-bottom-sec .portfolio-footer-left .inic-contact-btn .iti{width: 100%;}
.portfolio-bottom-sec .portfolio-form input {border: 1px solid #ddd; height: 50px; border-radius: 4px; box-shadow: none; display: block; width: 100%; padding: 15px; font-size: 16px; color: #252b33; background: #fafafa; box-sizing: border-box; margin-bottom: 15px; -moz-appearance: none; -webkit-appearance: none;}
.portfolio-bottom-sec .portfolio-form textarea {font-family: Poppins,sans-serif; border: 1px solid #ddd; border-radius: 4px; box-shadow: none; display: block; width: 100%; padding: 15px; font-size: 16px; color: #252b33; background: #fafafa; resize: none; box-sizing: border-box; margin-bottom: 5px; -moz-appearance: none; -webkit-appearance: none;}
.cd-modal-action {position: relative;}
.cd-modal-action .btn {position: relative; text-align: center; width: 8em !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: color 0.2s 0.3s, width 0.3s 0s, border-radius 1s 0s; -moz-transition: color 0.2s 0.3s, width 0.3s 0s, border-radius 1s 0s; transition: color 0.2s 0.3s, width 0.3s 0s, border-radius 1s 0s; border-radius: 50px !important;}
.cd-modal-action .cd-modal-bg {display: none; position: absolute; z-index: 1; left: 50%; width: 4em; border-radius: 50%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(-2em); -moz-transform: translateX(-2em); -ms-transform: translateX(-2em); -o-transform: translateX(-2em); transform: translateX(-2em); z-index: -1; height: 2.5em; background-color: #F13C31;}
.portfolio-bottom-sec .portfolio-form .cd-modal-action .cd-modal-bg {top: 0;}
.portfolio-bottom-sec .portfolio-footer-right img {position: relative; left: 75px;}
/* Portfolio Form Css End */

/******==================== Black Theme CSS Start ====================******/
.theme-black {background: #000000;}
.theme-black h1, .theme-black h2, .theme-black h3, .theme-black h4, .theme-black h5, .theme-black h6, .theme-black p, .theme-black span, .theme-black blockquote, .theme-black strong, .theme-black b, .theme-black u, .theme-black center, .theme-black ol, .theme-black ul, .theme-black li, .theme-black li a,.body-theme-dark h2 { color:#fff !important;}
.theme-black .brand-logo-img svg g,.theme-black .listing-filter svg g,.theme-black .case-title svg g,.theme-black svg path,.theme-black svg polyline,.theme-black svg polygon,.theme-black .brand-sec svg g {fill: #FFFFFF;}
.theme-black .filter-close svg g path{stroke:#fff;}
.theme-black .client-cs-p-black{color: #fff;}
.theme-black .dark-light-logo .dark-mode-img{display: none;}
.theme-black .dark-light-logo .white-mode-img{display: block;}

/* Filter CSS Start */
.theme-black .cs-filter-bar{border-bottom: 1px solid rgba(238, 238, 238, 0.2);}
.theme-black .cs-filter-bar .category-filter{background: #000000;}
.theme-black .category-filter .dropdown .drop,.theme-black .cs-filter-bar .tab-filter a{color: #fff;}
.theme-black .category-filter .dropdown .drop::after{border-color: white transparent transparent transparent;}
.theme-black .cs-filter-bar .tab-filter a.active{border-bottom: 1px solid rgba(255,255,255,1);}
.theme-black .category-filter .dropdown .dropdown-menu,.theme-black .category-filter .dropdown .dropdownArrow{background-color:#202020;}
.theme-black .category-filter .dropdown > .dropdown-menu > li > span{color: #fff !important;}
.theme-black .category-filter .dropdown > .dropdown-menu > li > span:hover,.theme-black .category-filter .dropdown > .dropdown-menu > li > span.filter-active{color: #F13C31 !important;}
.theme-black .category-filter .dropdown .drop{color: #fff;}
.theme-black .brand-filter .tab-filter{border-bottom:1px solid rgba(238, 238, 238, 0.2);}

.theme-black .filter-dropdown-sec .reset-ic .tooltiptext { background-color:#202020; }
.theme-black .filter-dropdown-sec .reset-ic .tooltip-top::after { border-color: #202020 transparent transparent transparent;}
/* Filter CSS End */

.theme-black .case-listing-col .cs-project-detail .project-bio{ color: #ffffff;}
.theme-black .cs-result-sec {background: #202020;}
.theme-black .technology-sec .technology-tags .tags a{background:#555555; color: #fff;}

.body-theme-dark .portfolio-bottom-sec{background: #1b1a1c;}
.body-theme-dark .portfolio-bottom-sec .portfolio-form input,.body-theme-dark .portfolio-bottom-sec .portfolio-form textarea {background: #1b1b1b; color: #fff;border: 1px solid rgba(255,255,255,.1);}

/******==================== Black Theme CSS End ====================******/

/******==================== Responsive CSS Start ====================******/
@media only screen and (max-width:1280px){
/*=== Brands Case Study Detail Page CSS Start ===*/
.client-cs-white-title{font-size: 60px; line-height: 80px;}
/*=== Brands Case Study Detail Page CSS End ===*/
}

/* iPad 9th Gen Css Start */
@media only screen and (min-width: 744px) and (max-width: 1199px)  {
.small-banner-sec {padding: 60px 0px 60px;}
.small-title-sec h1 {font-size: 40px;line-height: 50px;margin-bottom: 20px;}
.small-title-sec p {font-size: 16px;line-height: 26px;}

.our-work-full-banner .hero-banner img {height: 400px;object-fit: cover;}
.portfolio-about-project-section .portfolio-features {padding: 30px 30px 30px 30px;}
.portfolio-bottom-sec .portfolio-footer-left {padding: 60px 15px;}
.portfolio-bottom-sec .portfolio-footer-right img{max-width: 500px; left: 0px;}
.portfolio-footer-right {display: none;}
}
/* iPad 9th Gen Css End */
/******==================== Responsive CSS End ====================******/