@import url(https://db.onlinewebfonts.com/c/465b1cbe35b5ca0de556720c955abece?family=Abolition+W00+Regular);

/* Import Abolition font definition */

@font-face {
    font-family: "Abolition";
    src: url("https://db.onlinewebfonts.com/t/465b1cbe35b5ca0de556720c955abece.eot");
    src: url("https://db.onlinewebfonts.com/t/465b1cbe35b5ca0de556720c955abece.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/465b1cbe35b5ca0de556720c955abece.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/465b1cbe35b5ca0de556720c955abece.woff") format("woff"), url("https://db.onlinewebfonts.com/t/465b1cbe35b5ca0de556720c955abece.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/465b1cbe35b5ca0de556720c955abece.svg#Abolition W00 Regular") format("svg");
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    background-color: #0a0b14;
    /* Dark background from index.css */
    font-family: "Abolition", sans-serif;
    color: #fff;
}


/* Background Video Styling */

.background-video-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    overflow: hidden;
    z-index: 2;
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 2;
}


/* --- ABOUT HERO SECTION (OUR STORY) --- */

.about-hero-section {
    padding: 10rem 0 5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(10, 11, 20, 0.8);
    position: relative;
    z-index: 1;
    top: -17%;
}

.about-hero-section h1.display-1 {
    font-size: 6rem;
    letter-spacing: 1px;
    color: #fff;
    font-family: "Abolition", sans-serif;
    text-shadow: 0 0 10px rgba(178, 34, 34, 0.4);
}

.about-hero-section p.lead {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.6rem;
    color: #fff;
    line-height: 1.6;
    font-family: 'Lato', sans-serif;
}


/* --- SPLIT IMAGE/TEXT SECTIONS --- */

.about-section {
    min-height: 80vh;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #0a0b14;
    overflow-x: hidden;
}

.about-section:last-child {
    border-bottom: none;
}

.px-zero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.image-wrap {
    overflow: hidden;
    height: 100%;
    min-height: 500px;
}

.full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-fade-mask {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-fade-mask .full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
}

.mask-fade-right {
    mask-image: linear-gradient(to right, transparent 0%, black 80%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 80%);
}

.mask-fade-left {
    mask-image: linear-gradient(to left, transparent 0%, black 80%);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 80%);
}

.text-box {
    height: 100%;
    min-height: 500px;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.text-box h3 {
    font-family: "Abolition", sans-serif;
    font-size: 5rem;
    color: #b22222;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(178, 34, 34, 0.5);
    padding-bottom: 0.5rem;
}

.text-box p {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #e4e4e7;
}

@media (max-width: 768px) {
    .about-hero-section {
        padding: 8rem 1rem 3rem 1rem;
    }
    .about-hero-section h1.display-1 {
        font-size: 3rem;
    }
    .about-hero-section p.lead {
        font-size: 1.1rem;
    }
    .text-box,
    .image-wrap {
        min-height: 300px;
    }
    .text-box {
        padding: 3rem 1.5rem;
    }
    .text-box h3 {
        font-size: 2rem;
    }
}