#blogBannerWrapper {margin: 0; padding: 0; height: 700px;}
#blogBannerWrapper #blogBanner {height: 100%; display: flex; flex-wrap: wrap;}
#blogBannerWrapper #blogBanner .item {position: relative;}
#blogBannerWrapper #blogBanner .item .contentWrapper {position: absolute; right: 0; top: 0; padding: 60px; max-width: 600px; background: linear-gradient(157.71deg, #274DAE 9.09%, #7717AF 73.78%, #7717AF 100%); height: 100%;}
#blogBannerWrapper #blogBanner.owl-carousel .owl-stage {height: 100%;}
#blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item {height: 100%;}
#blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item {height: 100%;}
#blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item .imageWrpper {height: 100%; width: calc(100% - 600px)}
#blogBannerWrapper #blogBanner .contentWrapper ul {margin: 0 0 15px 0; padding: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;}
#blogBannerWrapper #blogBanner .contentWrapper ul li {margin: 0; padding: 0 25px 0 0; display: inline-flex; align-items: center; flex-wrap: wrap; position: relative;}
#blogBannerWrapper #blogBanner .contentWrapper ul li a {font-weight: 400; font-size: 14px; line-height: 24px; color: #fff; text-decoration: none;}
#blogBannerWrapper #blogBanner .contentWrapper ul li a:hover {text-decoration: underline;}
#blogBannerWrapper #blogBanner .contentWrapper ul li:after {content: "/"; position: absolute; right: 10px; top: 0; font-weight: 400; font-size: 16px; line-height: 22px; color: #fff;}
#blogBannerWrapper #blogBanner .contentWrapper ul li:last-child:after {display: none;}
#blogBannerWrapper #blogBanner .contentWrapper h1 {margin: 0; padding: 0 0 15px 0; font-weight: 700; font-size: 32px; line-height: 38px; color: #fff;}
#blogBannerWrapper #blogBanner .contentWrapper p {margin: 0; padding: 0 0 15px 0; font-weight: 400; font-size: 16px; line-height: 24px; color: #fff;}
#blogBannerWrapper #blogBanner .contentWrapper .authorDetails {margin: 0; padding: 0 0 30px 0; display: flex; align-items: center; flex-wrap: wrap;}
#blogBannerWrapper #blogBanner .contentWrapper .authorDetails .authorImage {width: 60px; height: 60px; margin-right: 15px; display: inline-flex; align-items: center; flex-wrap: wrap;}
#blogBannerWrapper #blogBanner .contentWrapper .authorDetails .authorImage img {max-width: 100%; border-radius: 100%;}
#blogBannerWrapper #blogBanner .contentWrapper .authorDetails .authorContent {width: calc(100% - 75px); display: inline-flex; align-items: center; flex-wrap: wrap;}
#blogBannerWrapper #blogBanner .contentWrapper .authorDetails .authorContent h2 {margin: 0; padding: 0; font-weight: 700; font-size: 18px; line-height: 25px; color: #fff; width: 100%; display: flex;}
#blogBannerWrapper #blogBanner .contentWrapper .authorDetails .authorContent p {margin: 0; padding: 0; font-weight: 400; font-size: 14px; line-height: 19px; color: #fff;}
#blogBannerWrapper #blogBanner .contentWrapper a.readMore {padding: 10px 40px; border: 1px solid #fff; background: #fff; border-radius: 30px; font-weight: 600; font-size: 18px; line-height: 27px; color: #393939; transition: all ease-in-out 0.2s; display: inline-flex; align-items: center; flex-wrap: wrap;}
#blogBannerWrapper #blogBanner .contentWrapper a.readMore:hover {background: rgba(255, 255, 255, 0.3); color: #fff;}
#blogBannerWrapper #blogBanner .owl-nav {position: absolute; right: 60px; bottom: 80px;}
#blogBannerWrapper #blogBanner .owl-nav button.owl-prev {width: 50px; height: 50px; background: url(../images/caro-left-arrow.png) no-repeat center center rgba(255, 255, 255, 0.15); border: 1px solid #fff; border-radius: 25px;}
#blogBannerWrapper #blogBanner .owl-nav button.owl-next {width: 50px; height: 50px; background: url(../images/caro-right-arrow.png) no-repeat center center rgba(255, 255, 255, 0.15); border: 1px solid #fff; border-radius: 25px;}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    #blogBannerWrapper {height: auto;}
    #blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item .imageWrpper {height: 400px; width: 100%;}
    #blogBannerWrapper #blogBanner .item .contentWrapper {position: static; padding: 20px; max-width: 100%; height: calc(100% - 400px);}
    #blogBannerWrapper #blogBanner .contentWrapper ul li a {font-size: 12px; line-height: 20px;}
    #blogBannerWrapper #blogBanner .contentWrapper h1 {font-size: 22px; line-height: 28px;}
    #blogBannerWrapper #blogBanner .contentWrapper p {font-size: 14px; line-height: 22px; padding: 0; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
    #blogBannerWrapper #blogBanner .contentWrapper .authorDetails {padding: 0 0 15px 0;}
    #blogBannerWrapper #blogBanner .contentWrapper a.readMore {padding: 8px 30px; font-size: 16px; line-height: 26px;}
    #blogBannerWrapper #blogBanner .owl-nav {right: 20px; bottom: 10px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #blogBannerWrapper {height: auto;}
    #blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item .imageWrpper {height: 400px; width: 100%;}
    #blogBannerWrapper #blogBanner .item .contentWrapper {position: static; padding: 20px; max-width: 100%; height: calc(100% - 400px);}
    #blogBannerWrapper #blogBanner .contentWrapper h1 {font-size: 28px; line-height: 32px;}
    #blogBannerWrapper #blogBanner .contentWrapper p {font-size: 14px; line-height: 22px; padding: 0; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
	#blogBannerWrapper #blogBanner .owl-nav {bottom: 10px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #blogBannerWrapper {height: 500px;}
	#blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item .imageWrpper {height: 100%; width: calc(100% - 380px);}
    #blogBannerWrapper #blogBanner .item .contentWrapper {padding: 30px; max-width: 380px;}
    #blogBannerWrapper #blogBanner .contentWrapper ul li a {font-size: 12px; line-height: 20px;}
    #blogBannerWrapper #blogBanner .contentWrapper h1 {font-size: 22px; line-height: 30px;}
    #blogBannerWrapper #blogBanner .contentWrapper p {font-size: 14px;}
    #blogBannerWrapper #blogBanner .contentWrapper a.readMore {font-size: 16px; line-height: 24px;}
    #blogBannerWrapper #blogBanner .owl-nav {right: 30px; bottom: 20px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #blogBannerWrapper {height: 500px;}
	#blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item .imageWrpper {height: 100%; width: calc(100% - 460px);}
    #blogBannerWrapper #blogBanner .item .contentWrapper {padding: 40px; max-width: 460px;}
    #blogBannerWrapper #blogBanner .contentWrapper h1 {font-size: 23px; line-height: 30px;}
    #blogBannerWrapper #blogBanner .contentWrapper p {padding: 0; margin: 0 0 15px 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}
    #blogBannerWrapper #blogBanner .owl-nav {right: 40px; bottom: 40px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
	#blogBannerWrapper {height: 560px;}
	#blogBannerWrapper #blogBanner.owl-carousel .owl-stage .owl-item .item .imageWrpper {height: 100%; width: calc(100% - 520px);}
	#blogBannerWrapper #blogBanner .item .contentWrapper {padding: 40px; max-width: 520px;}
}