body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body.brush-border{

    position: relative;

}
.boder-body {
    width: 80px;
    background: url(../../images/vertical_brush_stroke.svg);
}

.brush-border-left {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

}

span.brush-border-right {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    height: 100%;

}
.boder-body.brush-border-right{
    transform: rotateY(180deg);
}

span.brush-border-bottom {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 9;

}



span.brush-border-left img , span.brush-border-right img {

    width: 100%;

    height: 100%;

}

header {

    margin-bottom: 40px;

}

#navbar ul li a {

    font-family: 'Poppins', sans-serif;

    padding: 0 22px;

}

.about-content a{color:#007bff;}
.about-content .quote{ font-weight:bold; font-style:italic; background-color: var(--hover-color); padding:12px;text-align: center;}
.about-content .subs{ background-color: var(--hover-color); padding:12px; text-align: center;}
.about-content-a {margin:0 290px;}
.about-content-a a{color:#007bff;}
.about-content-a .subs{background-color: var(--hover-color); padding:12px; text-align: center;}

.episode {

   display: grid;

    grid-template-rows: auto 50px;

    width: 100%;
    row-gap: 40px;



}

.buttons {

    display: flex;

    align-items: center;

    justify-content: space-evenly;

}

.about-section , .stock-border-images{

    position: relative;

}

section.hero-section.about-banner-content {
    background-image: url(../../images/about-us-banner.png);
    background-position: center;
    background-repeat: no-repeat;
    min-height: 403px;
    display: flex;
    align-items: center;
}
section.hero-section.about-banner-content .about-content{
    padding: 20px 84px;
}

.about-image {

    position: relative;

}


.p-60{

    padding: 60px;

}

.about-image:before {

    content: "";

    position: absolute;

    top: -3%;

    bottom: 0;

    background-color: var(--warning);

    left: 50%;

    right: -4%;

    height: calc(100% + 40px);

    vertical-align: middle;

    transform: translate(0% , 0%);

}



.about-image img {

    position: relative;

}

body figure {

    margin: 0 0 0 0rem;

}
.hero-img img , .hero-img{
   width: 100%;

}
.hero-section .row.align-items-stretch {
    row-gap: 40px;
}
.hero-img {
    
    height: 100%;
}

.border.recent {
    padding: 10px;

}

.aboutus.brush-border-left {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

}

.aboutus.brush-border-right {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    height: 100%;

}

section.tape_left-section span.tape_left img {

    opacity: 10%;

}
section.tape_left-section span.tape_left img {
    transform: rotate(3deg);
    padding: 0;
    margin: 10px 0 60px 0;
    transform-origin: left;
    min-height: 60px;
    width: 99%;
}
span.tape_left.top_tape img {
    transform: rotate(-3deg) !important;
    margin: 75px 0 -15px 0!important;
}

/*slick css*/

  section.slider-section .owl-carousel .owl-item img {

    display: block;

    width: 30%;

    margin: 0 auto;

}

section.slider-section .owl-stage-outer {

    margin-bottom: 40px;

    margin-top: 40px;}





/*End slick css*/

.emial-form form.form-inline {

    justify-content: center;

}



.emial-form form.form-inline input.form-control {

    border: none;

    outline: none;

    box-shadow: unset;
    width: 250px;


}

.input-box {

    background-color: #fff;

    padding: 10px;

    box-shadow: 0 0 10px rgb(0 0 0 / 15%);

    border-radius: 6px;



}


/*murder page css*/
.murder-content p {
    color:var(--text-color);
}
.murder-content {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    row-gap: 10px;
    box-shadow: 0 0px 2px rgb(0 0 0 / 15%);
    border: none!important;
    padding: 15px;
    height: calc(70vh - 30px);
    margin-bottom: 30px;
    transform: .4s;
}
.murder-content:hover{
     box-shadow: 0 0px 10px rgb(0 0 0 / 15%);
}
.murder-content h5 {
    margin-bottom: 0;
}
/*End murder page css*/

.img_cap{
/*position: absolute;
bottom: 8%;*/
color: #6c757d;
font-size: 14px;
font-style: italic;
display: inline-block;
margin: 30px 0px 10px 0px;
}

























































@media (max-width:1024px) {

    .p-60{

        padding: 0;

    }
    .about-main.px-4 {
    padding: 0!important;
}

    button.navbar-toggler {

    border: 1px solid #eee;
 
    background-color: var(--dark-color);

    height: 50px;

}



button.navbar-toggler {

    position: relative;
    right: 0;
    top: 0;
    margin: 20px;
    z-index: 999;
    display: block!important;

}



button.navbar-toggler span.navbar-toggler-icon {

    background-color: var(--warning);

    height: 2px;

    position: relative;

}





button.navbar-toggler span.navbar-toggler-icon:before{

    content: "";

    background-color: var(--warning);

    height: 2px;

    position: absolute;

    top: -10px;

    width: 100%;

    left: 0;

}



button.navbar-toggler span.navbar-toggler-icon:after {

    top: 10px;

    content: "";

    left: 0;

    right: 0;

    width: 100%;

    position: absolute;

    height: 2px;

    background-color: var(--warning);

}

.brush-border-left , span.brush-border-right {

    display: none;

}
.about-main {
    margin-bottom: 50PX;
}
div#navbar {
    position: fixed;
    top: -65px;
    left: -100%;
    background-color: #fff;
    z-index: 9;
    padding: 10px;
    transition: 0.5s;
    height: calc(102vh);
    width: 100%;
    padding-top: 180px;
}

div#navbar.show {
    left: 0;
}
div#navbar ul li.nav-item {
    line-height: 3;
}
.add nav.navbar {
    position: fixed;
    top: 72px;
    width: 100%;
    z-index: 99;
    transform: translateY(0px);
}

.add .hero-section {
    margin-top: 148px;
}
.add nav.navbar a.navbar-brand {
    position: relative;
    z-index: 99;
}
.hero-img, .hero-img figure, .hero-img figure img {
    height: 100%;
}
.about-content img {
    padding: 20px;
}
}

@media (max-width:  420px ) {
.about-content-a {margin:0;}

}

@media (max-width:  768px ) {
   
    .add nav.navbar {
    top: 54px;
    padding-bottom: 3px;
    width: 100%;
    background-color: #fff;
    transform: translateY(0px);
}

.about-content img {
    width: 100%;
    padding: 20px 0;
}
section.hero-section.about-banner-content{
    background-size: cover;
    position: relative;
    overflow: hidden;
}
section.hero-section.about-banner-content .about-content{
    padding: 60px 0px;
}
section.hero-section.about-banner-content:before , 
section.hero-section.about-banner-content:after {
    content: "";
    background-image: url(../../images/top_strip_without_withoutwhite.svg);
    position: absolute;
    z-index: 9;
    width: 100%;
    left: 0;
    height: 50px;
    display: inline-block;
    right: 0;
    top: 0px;
    bottom: 0;
    background-repeat: no-repeat;
    transform: scale(2);
    transform-origin: top;
}

section.hero-section.about-banner-content:after {
    bottom: 0;
    background-image: url(../../images/top_strip_without_withoutwhite.svg);
    top: unset;
    transform: rotate(180deg) scale(2) translateY(100%);
    transform-origin: bottom;
}
section.hero-section.about-banner-content{
    background-image: unset;
    background-color: #ffd418;
}
}


@media (max-width: 676px) {


.input-box{

    display: flex;

    align-items: center;
    width: 100%;

}

.brush-border-left , span.brush-border-right, 
.stock-border-images span.brush-border-top , .stock-border-images span.brush-border-bottom {

    display: none;

}
span.brush-border-top img {
    margin-top: -2px;
}
footer.py-100 , .about-section.py-100 {
    
    padding-top: 50px;
    padding-bottom: 50px;
}
.buttons a.btn.btn-outline-warning {
    font-size: 11px;
    padding: 10px 5px;
}
span.tape_left.top_tape img{
    margin: 0!important;
}
.add nav.navbar {
    position: fixed;
    top: 26px;
    transform: translateY(0px);
}
.add section#banner-secion {
    margin-top: 148px;
}
div#navbar {
    padding-top: 140px;
}
.emial-form form.form-inline input.form-control{
    width: 100%;
}
.emial-form form.form-inline input.form-control::placeholder{
    font-size: 14px;
}
div#navbar {
    position: fixed;
    top: -33px;

}
}

@media only screen and (max-width: 480px) {
    .img_cap{bottom:-7%; font-size:12px;}
}
@media only screen and (max-width: 810px) {
    .img_cap{bottom:-4%; font-size:12px;}
}