/*============================
   ##  1  Service Common Page Css
=============================*/
 .title-color {color: var(--bs-light-orange)}
 .title-orange {color: var(--bs-orange)}
 .title-width {width: fit-content}
 .case-heading::after {background: var(--bd-gray-border);width: 100%;height: 2px;position: absolute;content: "";display: block;bottom: 0;border-radius: 15px;margin: 0 auto;left: 0;right: 0}
.fs-13{font-size: 13px;}

 /*============================
       1.1    Header Background Fixed
=============================*/
 #header {background: var(--bs-black)}

 /*** ----------------------------------------
       Portfolio Page Css 
---------------------------------------------*/
 .portfolio-title {transition: 0.5s all ease-in-out;padding: 9px 0;color:var(--bs-gray-dark)}
 .portolio-details {transition: 0.5s all ease-in-out}
.portolio-details:hover {transform: translateY(-10px)}
 .portfolio-blog:hover .portfolio-title {color: var(--bs-light-orange)}
 .shape-img {position: absolute;top: 0;z-index: -1;display: none}
 .shape-img.right-shape {right: 0}

 /*** ----------------------------------------
       Portfolio Detail Page Css 
---------------------------------------------*/
/* Breadcumb Section */
.portfolio-breadcumb {
	margin-top: 60px;
	background: var(--bs-gray-secondary);
	padding: 23px 0;
}
.breadcumb-menu {position: relative;z-index: 1}

/* Case Study Details Section */
.case-study-section {margin-top: 40px}









.left-casestudy img {width: 92%;z-index: 1;position: relative}
.technology-casestudy {position: relative;margin-top: 20px;text-align: center}
.technology-casestudy::before {content: "";background: var(--bs-white);position: absolute;z-index: 0;left: 0;right: 0;margin: 0 auto;width: 96%;height: 113px;top: -126px;border-radius: 12px}
.technology-case-title {padding-top: 15px}
.technology-group ul li {display: inline-block;margin: 5px  }
.flip-box {width: 82px;height: 82px;border-radius: 10px;perspective: 1000px}
.flip-box-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.8s;transform-style: preserve-3d;display: flex;justify-content: center;align-items: center}
.flip-box:hover .flip-box-inner {transform: rotateY(180deg)}
.flip-box-front, .flip-box-back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;flex-direction: column;border-radius: 10px;border: 2px solid var(--bs-light-orange)}
.flip-box-front {background-color: var(--bs-white)}
.flip-box-front img {width: auto}
.nodejs-icon {max-width: 67px;}
.flip-box-back {background-color: var(--bs-light-orange);transform: rotateY(180deg)}
.right-casestudy {background: var(--bs-light-orange);padding: 30px;margin-left: 0;position: relative}
.right-casestudy::after {background: var(--bs-black);position: absolute;content: "";z-index: -1;width: 100%;border-radius: 11px 11px 0 0;clip-path: none;left: 0;height: 300px;top: -310px}
.casestudy-read-more {border-bottom: 1px solid var(--bs-white);transition: 0.5s all ease-in-out}
.casestudy-read-more:hover {color: var(--bs-black);border-bottom: 1px solid var(--bs-light-orange)}
.case-heading {text-align: center}
.case-study-text p {font-size: 18px}


 /*** ----------------------------------------
       Portfolio Graphic Page Css 
---------------------------------------------*/
.casestudy-graphic-section {background: var(--bs-orange-secondary);padding: 70px 0 50px}
.graphic-inner {display: flex;align-items: end}
.graphic-inner li {display: inline-block}
.graphic-inner li:nth-child(1) img {position: relative;z-index: 1;width: 83%;box-shadow: 14px 19px 11px -8px rgb(242, 213, 193)}
.graphic-inner li:nth-child(2) img {position: relative;box-shadow: 14px 19px 11px -8px rgb(242, 213, 193);top: 0;width: 86%;margin-left: -70px}
.graphic-inner li:last-child img {position: absolute;right: 0;box-shadow: 14px 19px 11px -8px rgb(217, 186, 166);width: 64%;bottom: 0}

 /*============================
    1.10 Form Section
=============================*/
.development-form-section {background: var(--bg-gray);padding: 70px 0}
.development-form-title.fw-regular {color: var(--bs-black-gray)}
.web-development-form {border-top: 2px solid var(--bd-gray-border);padding-top: 50px}


@media only screen and (min-width:421px) {
.shape-img {display: block}
.shape-img {width: 70px;}
.shape2-left, .shape3-right, .shape4-left, .shape5-right, .shape6-left, .shape7-right, .shape8-left, .shape9-right, .shape10-left{display:none}
}

@media only screen and (min-width:480px) {
   .shape-img {width: 70px}
}
@media only screen and (min-width:576px) {
   .shape-img {width: 83px}

.left-casestudy img {width: 400px}
.technology-casestudy::before {width: 86%;height: 119px;top: -130px;border-radius: 32px}
}
@media only screen and (min-width:768px) {
   .shape-img {width: 62px}

   .portfolio-breadcumb {margin-top: 75px}

.left-casestudy img {
	width: 477px;
}
.technology-casestudy::before {width: 77%}
.right-casestudy::after {height: 197px;top: -202px}

   .casestudy-graphic-section {padding: 70px 0 50px;}
   .graphic-inner li:nth-child(2) img {top: 0;width: 86%;margin-left: -70px}
   .graphic-inner li:last-child img {width: 64%;bottom: 0   }
}
@media only screen and (min-width:992px) {
   .shape-img {width: 83px}

   .portfolio-breadcumb {margin-top: 116px;background: transparent}
   .case-study-section {margin-top: -94px}

.casestudy-bg-left::after {
	background: var(--bs-black);
	width: 70%;
	position: absolute;
	z-index: -1;
	content: "";
	height: 590px;
	top: 105px;
}
.akvira-page .casestudy-bg-left::after,
.rajasthan-visit-page .casestudy-bg-left::after {
	height: 568px;
}
.tiffin-mama-page .casestudy-bg-left::after {
	height: 612px;
}
.real-prabhu-page .casestudy-bg-left::after {
	height: 567px
}
.casestudy-bg-right::after {background: var(--bs-light-orange);width: 50%;right: 0;height: 100%;position: absolute;content: "";z-index: -1}
.left-casestudy {padding:20px 15px 4px 0;background: var(--bs-black)}
.real-prabhu-page .left-casestudy,
.rajasthan-visit-page .left-casestudy {
	margin-top: 25px;
}
.left-casestudy h1 {color: var(--bs-white)}
.left-casestudy img {width: 100%}
.technology-casestudy::before {display: none}
.right-casestudy {margin-left: 70px}
.right-casestudy::after {width: 71px;clip-path: polygon(100% 0, 100% 100%, 0 87.5%, 0 104px);left: -71px;top: 0;height: 100%;background: linear-gradient(90deg, var(--bs-light-orange) 0%, var(--bs-orange) 100%);border-radius: 0}
.case-heading {text-align: left}

.casestudy-graphic-section {padding: 220px 0 50px}
.graphic-inner li:nth-child(2) img {top: -125px;width: 86%;margin-left: -70px}
.graphic-inner li:last-child img {width: 64%;bottom: 0}

}

@media only screen and (min-width:1200px) {
.shape-img {width:68px}
.shape2-left, .shape2-right, .shape3-left, .shape4-right, .shape5-left, .shape5-right,
.shape6-left, .shape7-right, .shape8-left, .shape8-right, .shape9-left, .shape10-right{display:none}
.shape3-right, .shape4-left, .shape9-right  {display:block;}
.case-study-section .container {max-width: 1180px}
.casestudy-bg-left::after,
.akvira-page .casestudy-bg-left::after,
.real-prabhu-page .casestudy-bg-left::after,
.rajasthan-visit-page .casestudy-bg-left::after {
	height: 497px;
	top: 148px;
}
.jatbet-page .casestudy-bg-left::after {
	height: 543px;
}
.addto-deal-page .casestudy-bg-left::after, 
.khel-bro-page .casestudy-bg-left::after  {
	height: 520px;
}
.tiffin-mama-page .casestudy-bg-left::after {
	height: 543px;
}
.tawi-career-page .casestudy-bg-left::after {
	height: 520px;
}
.left-casestudy {padding: 90px 15px 90px 0}
.real-prabhu-page .left-casestudy,
.rajasthan-visit-page .left-casestudy {
	margin-top: 0;
}
.technology-casestudy {position: absolute}
.technology-case-title {color: var(--bs-black);padding-top: 0}
.right-casestudy {margin-left: 97px;padding: 20px 0px 20px 20px}
.right-casestudy::after {width: 45px;left: -56px;clip-path: polygon(100% 0, 100% 100%, 0 81%, 0 151px)}
.case-study-text p {font-size: 21px}
.graphic-inner li:nth-child(1) img {width: 92%}
.graphic-inner li:nth-child(2) img {top: -125px;width: 100%}
.graphic-inner li:nth-child(3) img {width: 695px}
}


@media only screen and (min-width:1400px) {
   .shape-img {width:77px}
.case-study-section .container {max-width: 1320px}
.casestudy-bg-left::after,
.jatbet-page .casestudy-bg-left::after,
.addto-deal-page .casestudy-bg-left::after,
.khel-bro-page .casestudy-bg-left::after,
.tawi-career-page .casestudy-bg-left::after {
	height: 490px;
	top: 134px;
}
.akvira-page .casestudy-bg-left::after {
	height: 490px;
	top: 134px;
}
.left-casestudy {
	padding: 68px 15px 70px 0;
}
.tiffin-mama-page .casestudy-bg-left::after {
	height: 487px;
}
.real-prabhu-page .casestudy-bg-left::after {
	height: 488px;
	top: 134px;
}
.rajasthan-visit-page .casestudy-bg-left::after {
	height: 488px;
	top: 134px;
}
.right-casestudy {padding: 30px 0px 30px 30px}
.right-casestudy::after {width: 97px;left: -97px;clip-path: polygon(100% 0, 100% 100%, 0 82.3%, 0 134px)}  
.graphic-inner li:nth-child(1) img {width: 100%}
.graphic-inner li:nth-child(2) img {width: auto;top: -145px}
.graphic-inner li:last-child img {width: 64%;bottom: 0}

}