/*======= Hero section Start =====*/
@media all and (max-width:500px){
    
    .hero {

        background-position: center;
        background-size: cover;
    }
    .hero .content {
        margin-top: 152px;
    }
    h1 {
        font-size: 26px!important ;   
    }
}

@media all and (max-width:765px){
    .hero .content {
        margin-top: 60px;
    }
    h1 {
        font-size: 26px!important ;
    }
    .hero .image img {
        margin-left: 105px !important;
        width: 50% !important;
    }
    .app .col-md-4{
        margin-top: 15px;;
    }
}
@media all and (max-width:921px){
    .hero {

        background-position: center;
        background-size: cover;
    }
    .hero .image img {
        margin-left: 1px;
        width: 100%;
    }
    h1 {
        font-size: 26px;
        
    }
}

@media all and (max-width:1127px){
    .hero .image img {
        margin-left: 1px;
    }
    h1 {
        font-size: 26px;
        
    }
    
}
/*======= Hero section ends ========*/

/* Awesome app Start Oytizo */
@media only screen and (max-width: 990px) {
	.vertical-row {
	 width: 100%;
	}
	.profile-logo img{
		width: 15%;
		position:absolute;
		top: 50%;
		left: 15%;
	}
  }

@media only screen and (max-width: 770px) {
	.vertical-row {
	 width: 100%;
	}
	.profile-logo img{
		width: 15%;
		position:absolute;
		top: 90%;
		left: 15%;
	}
	.make-profile h3,p{
		margin-bottom: 0;
	}
	.make-profile p{
		line-height: 80%;
	}
  }
  @media only screen and (max-width: 576px) {
	.vertical-row {
	 width: 100%;
	}
	.profile-logo img{
		width: 4%;
		position:absolute;
		top: 20%;
		left: 15%;
	}
  
    .vertical-row-profile{
        position: absolute;
        margin-top: 2px;
    }
    .make-profile{

        position: absolute;
        left: 20%;
        bottom: 0;
        }

    .make-profile h3{
        font-size: 7px;
    }
	.make-profile h3,p{
		margin-bottom: 0;
	}
	.make-profile p{

		font-size: 5px;
	}
  }
/* Awesome app End Oytizo */

/* how does this app start Omar*/
@media (max-width: 768px) {
    .bg1 img {
        height: 250px;
        width: 300px;
        position: relative;
        overflow: hidden;
        display: block;
    }
    .bg2 img {
        height: 250px;
        width: 325px;
        position: absolute;
        top: 15px;
        right: 220px;
        z-index: 1;
    }
    .root {
        position: relative;
    }
    .right img {
        height: 200px;
        width: 200px;
        position: absolute;
        top: 40px;
        right: 280px;
        display: block;
        z-index: 1;
    }
}
@media (max-width: 576px){
    .awork{
        margin-top: 800px;
    }
}
@media (max-width: 342px){
    .awork{
        margin-top: 1200px;
    }
}
@media (max-width: 296px){
    .awork{
        margin-top: 2000px;
    }
}

@media (max-width: 1100px) {
    .bg1 img {
        height: 300px;
        width: 400px;
        position: relative;
        overflow: hidden;
        display: block;
    }
    .bg2 img {
        height: 350px;
        width: 425px;
        position: absolute;
        top: 15px;
        right: 90px;
        z-index: 1;
    }
    .root {
        position: relative;
    }
    .right img {
        height: 300px;
        width: 300px;
        position: absolute;
        top: 40px;
        right: 150px;
        display: block;
        z-index: 1;
    }
}
/* how does this app start Omar */

/* Easy pricing start Omar */
/* Easy pricing End Omar */

/* footer Start Zilani */
@media screen and (max-width: 500px) {
    footer .input-group {
      display: none;
    }
    footer .with-bg .logo2{
      width: 30%;
    }
  }
  @media screen and (max-width: 320px) {
    footer .with-bg .logo2{
      width: 40%;
    }
  }
/* Footer End Zilani */

/*Blog Post Responsive Start Sadia Haque*/

.right-sidebar .recent-post h4,
.right-sidebar .categories h4,
.tags h4{
	position: relative;
}
.right-sidebar .recent-post h4::after{
  content: '';
  display: block;
  clear: both;
  border-bottom: 1px solid #3CBCED;
  position: absolute;
  top: 78%;
  left: 33%;
  height: 1px;
  width: 67%;
}
.right-sidebar .categories h4::after{
   content: '';
  display: block;
  clear: both;
  border-bottom: 1px solid #3CBCED;
  position: absolute;
  top: 88%;
  left: 26%;
  height: 1px;
  width: 74%;
}
.tags h4::after{
   content: '';
  display: block;
  clear: both;
  border-bottom: 1px solid #3CBCED;
  position: absolute;
  top: 88%;
  left: 12%;
  height: 1px;
  width: 88%;
}
@media all and (max-width: 768px){
	.right-sidebar .recent-post h4::after{
		left: 23% !important;
		width: 77% !important;
		top: 82% !important;
	}
	.right-sidebar .categories h4::after{
		left: 18% !important;
		width: 82% !important;
	}
	.tags h4::after{
		left: 9% !important;
  		width: 91% !important;
	}
	.blog-post .card .paragraph{
		font-size: 14px;
		line-height: 28px;
	}
	.pagination{
		justify-content: center !important;
	}
}
@media all and (max-width: 988px){
	.margin{
		margin-top: 50px;
	}
	.right-sidebar .recent-post h4::after{
		left: 17%;
		width: 83%;
	}
	.right-sidebar .categories h4::after{
		left: 13%;
		width: 87%;
	}
	.tags h4::after{
		left: 6%;
		width: 94%;
	}
}
@media all and (max-width: 384px){
	.right-sidebar .recent-post h4::after{
		left: 33% !important;
		width: 67% !important;
	}
	.right-sidebar .categories h4::after{
		left: 25% !important;
		width: 75% !important;
	}
	.tags h4::after{
		left: 12% !important;
		width: 88% !important;
	}
	.blog-post .card .mybtn{
		font-size: 14px !important;
	}
	.rob-man{
	  padding: 0 13px !important;
	}
	.rob-man::before,
	.rob-man::after{
		width: 106% !important;
	}
	.blog-post .card .card-title{
		font-size: 20px !important;
	}
	.blog-post .card .paragraph{
		font-size: 13.5px !important;
	}
	.right-sidebar .recent-post .card-title{
		font-size: 18px !important;
	}
}
/*Blog Post Responsive End Sadia Haque*/

/* Related post and comments Start Asif */
@media only screen and  (max-width:1400px){
	#carouselExampleControls.carousel{
		width: 725px;
	}
	#carouselExampleControls.carousel .carousel-item img {
        min-width: 345px;
    }
    .cm-section .comment{
        width: 725px;
    }
}
@media only screen and (max-width: 1200px){
    #carouselExampleControls.carousel{
        width: 615px;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 295px;
    }
    .cm-section .comment{
        width: 615px;
    }
    .cm-section .comment .row .span {
        width: 80px;
        height: 80px;
    }
}
@media only screen and (max-width: 990px){
    #carouselExampleControls.carousel {
        width: 685px;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 330px;
    }
    .cm-section .comment{
        width: 685px;
    }
}
@media only screen and (max-width: 768px){
    #carouselExampleControls.carousel {
        width: 525px;
    }
    .carousel-bet{
        gap: 20px;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 250px;
        height: 150px;
    }
    .inner-span {
        flex-direction: column;
    }
    button.carousel-control-prev,
    button.carousel-control-next{
        width: 30px;
        height: 30px;
    }
    .cm-section .comment{
        width: 525px;
    }
    .cm-section .comment .row .span{
        width: 60px;
        height: 60px;
    }
}
@media only screen and (max-width: 570px){
    .related{
        overflow: hidden;
    }
    #carouselExampleControls.carousel .carousel-bet {
        width: 90%;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 223px;
        height: 130px;
    }
    button.carousel-control-prev{
        left: 37%;
    }
    button.carousel-control-next{
        right: 47%;
    }
    .cm-section .comment {
        width: 450px;
        margin-left: 10px;
    }
    .cm-section .comment .row .col-sm-2,
    .col-sm-2.circle{
        margin-bottom: 20px;
    }

}
@media only screen and (max-width: 425px){
    #carouselExampleControls.carousel .carousel-bet {
        width: 75%;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 185px;
        height: 100px;
    }
    button.carousel-control-prev{
        left: 30%;
    }
    button.carousel-control-next{
        right: 55%;
    }
    .cm-section .comment {
        width: 350px;
    }
}
@media only screen and (max-width: 375px){
    #carouselExampleControls.carousel .carousel-bet {
        width: 66%;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 150px;
    }
    button.carousel-control-prev{
        left: 25%;
    }
    button.carousel-control-next{
        right: 60%;
    }
    .cm-section .comment {
        width: 320px;
    }
}
@media only screen and (max-width: 320px){
    #carouselExampleControls.carousel .carousel-bet {
        width: 56%;
    }
    #carouselExampleControls.carousel .carousel-item img {
        min-width: 135px;
    }
    button.carousel-control-prev{
        left: 21%;
    }
    button.carousel-control-next{
        right: 65%;
    }
    .cm-section .comment {
        width: 270px;
    }
}