/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */
   html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1.6; /* Improved line height for readability */
    font: normal 16px 'Open Sans', Arial, Helvetica, sans-serif; /* Changed font family */
    height: 100vh; /* Ensure the body takes full height */
    overflow: hidden; /* Prevent scrolling */
}
.bg-image {
    background: #151515 url(../images/intro-bg.jpg) no-repeat center bottom;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover; /* Ensures the image covers the entire section */
    z-index: -1; /* Puts the background behind other content */
}

.bg-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 21, 21, 0.85); /* Creates a dark overlay with 85% opacity */
    z-index: 0;
}
/* ---- particles.js container ---- */
#particles-js {
    width: 100%;
    height: 100vh; /* Full viewport height */
    position: absolute; /* Positioning for layering */
    top: 0; /* Align to top */
    left: 0; /* Align to left */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0; /* Background layer */
}

/* ---- intro section styles ---- */
#intro {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 720px;
    display: table;
    position: relative;
    text-align: center;
}
.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.intro-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    -webkit-transform: translateY(-2.1rem);
    -ms-transform: translateY(-2.1rem);
    transform: translateY(-2.1rem);
}
.intro-content h1 {
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif; /* Changed font family */
    font-size: 6rem; /* Reduced font size */
    line-height: 1.1; /* Adjusted line height */
    max-width: 900px;
    margin-top: 0;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.intro-content h5 {
    color: #cc005f;
    font-family: 'Poppins', sans-serif; /* Changed font family */
    font-size: 2rem; /* Increased font size */
    line-height: 1.4; /* Adjusted line height */
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .1rem; /* Adjusted letter spacing */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.intro-content .intro-position {
    font-family: 'Lora', serif; /* Changed font family */
    font-size: 1.2rem; /* Increased font size */
    line-height: 1.8rem; /* Adjusted line height */
    text-transform: uppercase;
    letter-spacing: .2rem;
    color: #FFFFFF;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.intro-content .intro-position span {
    display: inline-block;
}
.intro-content .intro-position span::after {
    content: "|";
    text-align: center;
    display: inline-block;
    padding: 0 8px 0 14px;
    color: rgba(255, 255, 255, 0.3);
}
.intro-content .intro-position span:first-child::before {
    content: "|";
    text-align: center;
    display: inline-block;
    padding: 0 14px 0 8px;
    color: rgba(255, 255, 255, 0.3);
}
.intro-content .button {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3);
    height: 5rem !important; /* Adjusted button height */
    line-height: 5rem !important; /* Adjusted button line height */
    padding: 0 3rem !important; /* Adjusted button padding */
    margin-top: 1rem; /* Increased margin */
    font-size: 1.5rem; /* Increased font size */
    text-transform: uppercase;
    letter-spacing: .2rem; /* Adjusted letter spacing */
}
.intro-content .button:hover, .intro-content .button:focus {
    border-color: #cc005f;
}
.intro-content .button::after {
    display: inline-block;
    content: "\f107";
    font-family: FontAwesome; /* Corrected font family */
    font-size: 1.6rem;
    line-height: inherit;
    text-align: center;
    position: relative;
    left: 1rem; /* Adjusted positioning */
}

.intro-social {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 5.2rem;
    font-size: 3rem; /* Adjusted social icons size */
    margin: 0;
    padding: 0;
}
.intro-social li {
    display: inline-block;
    margin: 0 15px; /* Adjusted margin */
    padding: 0;
}
.intro-social li a, .intro-social li a:visited {
    color: #FFFFFF;
}
.intro-social li a:hover, .intro-social li a:focus {
    color: #cc005f;
}