.bg-image{background-image: url(../images/case-stydy-bg.webp);background-repeat: no-repeat;background-size: cover;padding:0;border-top: 2px solid #000;display: flex;align-items: center;justify-content: center;background-position: center;height: 600px;}
.bg-image section{z-index: 2;}
.page-title h1{font-weight: 300}
.page-title h2{font-size: 30px !important;line-height: 50px;}

.inner-text button.btn{padding:15px 50px;}
.bg-overlay{position:absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: #040404;opacity: .6;z-index: 1;}

/*-------------- Slide Left - Right Start ----------------*/
h1.slide-left-right {animation-duration:1.5s;animation-delay: 0s;animation-name: slideheader;}
h2.slide-left-right{animation-duration:1.7s;animation-delay: 0s;animation-name: slideIntext;}  
@keyframes slideheader {
    0% {opacity: 0;transform: translateX(70%);}
    100% {opacity: 100;transform: translateX(0);}
}
@keyframes slideIntext {
    0% {opacity:0;transform:translateX(80%);}
    100%{opacity:100;transform:translateX(0);}
}
/*-------------- Slide Left - Right End ----------------*/

/*-------------- Slide Dropping Effect Start ----------------*/
.dropping-effect {position: relative;display: flex;}
.dropping-effect span {opacity: 0;animation: drop 0.4s linear forwards;}
.dropping-effect span:nth-child(2) {animation-delay: 0.2s;}
.dropping-effect span:nth-child(3) {animation-delay: 0.4s;}
.dropping-effect span:nth-child(4) {animation-delay: 0.6s;}
.dropping-effect span:nth-child(5) {animation-delay: 0.8s;}
.dropping-effect span:nth-child(6) {animation-delay: 1s;}
.dropping-effect span:nth-child(7) {animation-delay: 1.2s;}
.dropping-effect span:nth-child(8) {animation-delay: 1.4s;}
.dropping-effect span:nth-child(9) {animation-delay: 1.6s;}
.dropping-effect span:nth-child(10) {animation-delay: 1.8s;}

@keyframes  drop {
  0% {transform: translateY(-200px) scaleY(0.9);}
  5% {opacity: 0.7;}
  50% {transform: translateY(0px) scaleY(1);opacity: 1;}
  65% {transform: translateY(-17px) scaleY(0.9);}
  75% {transform: translateY(-22px) scaleY(0.9);}
  100% {transform: translateY(0px) scaleY(1);opacity: 1;}
}
/*-------------- Slide Dropping Effect End ----------------*/


@media screen and (min-width: 320px) and (max-width: 425px) {
    .bg-image {height: 350px}
    .inner-text button.btn{padding:5px 25px;}
    .inner-text{padding:0px 0px 50px;}
    .page-title p{margin: 25px 0px;}
    .page-title h1{font-size: 40px !important;line-height: 40px;;}
    .page-title h2{font-size: 20px !important;line-height: 35px;font-weight: 300;}
}

@media screen and (min-width: 768px) and (max-width: 810px) {
	.bg-image {height:320px !important;}
    .page-title h1{font-size: 60px !important;line-height: 60px;}
    .page-title h2{font-size: 25px !important;line-height: 40px;}
}