/* style.css - theme additions for fade-in + small helpers */
body {
    margin: 0 !important;
    padding: 0;
}

/* Fade-in helpers */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease-out, transform .75s ease-out;
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
body {
    background: url('../img/koya.png') no-repeat center top fixed;
    background-size: cover;
}

/* Jumbotron / banner look (optional) */
.jumbotron {
  background: linear-gradient(180deg,#0d3b66 0%,#063a3a 100%);
  color: #fff;
  padding: 40px 20px;
  border-radius: 6px;
}

/* small helpers */
.img-fluid { max-width: 100%; height: auto; }
.center { text-align: center; }

/* Full-width background section */
.about-section {
    width: 100%;
    background: url('../img/about-bg.jpg') center/cover no-repeat;
    padding: 60px 0;
    margin: 0; 
}

/* This forces the section to break outside Bootstrap container bounds */
.about-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}
.about-section h2 {
    font-size: 3.5rem;     /* default was around 1.5rem */
    font-weight: 700;
}

.about-section p {
    font-size: 1.8rem;  /* default was about 1rem */
    line-height: 1.6; 
}
/* Full-width background section */
.random-section {
    width: 100%;
    background: url('../img/random-bg.jpg') center/cover no-repeat;
    padding: 60px 0;
    margin: 0; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}
/* Zoom and shadow effect on hover */
.random-section img:hover {
    transform: scale(1.1);  /* Zoom in the image */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  /* Add subtle shadow */
}
.random-section h2 {
    font-size: 3.5rem;     /* default was around 1.5rem */
    font-weight: 700;
}

.random-section p {
    font-size: 1.8rem;  /* default was about 1rem */
    line-height: 1.6; 
}
/* Full-width background section */
.fishing-section {
    width: 100%;
    background: url('../img/fishing-bg.jpg') center/cover no-repeat;
    padding: 60px 0;
    margin: 0; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}
.fishing-section img{
    margin: 0 20px;
    position: relative;   /* Allows you to position the image */
    left: -20px;           /* Move the image 20px to the right */

}
/* Apply hover zoom effect only to images with the .zoom-effect class */
.zoom-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth transition */
    max-width: 100%;    /* Ensure images are responsive */
    height: auto;       /* Maintain aspect ratio */
}

/* Zoom effect on hover for specific images */
.zoom-effect:hover {
    transform: scale(1.5);    /* Zoom in the image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Add subtle shadow */
}

.fishing-section h2 {
    font-size: 3.5rem;     /* default was around 1.5rem */
    font-weight: 700;
}

.fishing-section p {
    font-size: 1.8rem;  /* default was about 1rem */
    line-height: 1.6; 
}
/* Full-width background section */
.seagod-section {
    width: 100%;
    background: url('../img/seagod-bg.jpg') center/cover no-repeat;
    padding: 60px 0;
    margin: 0; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    color: #fff;
}
.seagod-section h2 {
    font-size: 3.5rem;     /* default was around 1.5rem */
    font-weight: 700;
}

.seagod-section p {
    font-size: 1.8rem;  /* default was about 1rem */
    line-height: 1.6; 
}


/* Slide-in from the right animation */
.slide-in-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When fade-in triggers visibility, animate the slide */
.fade-in.visible .slide-in-right {
    opacity: 1;
    transform: translateX(0);
}

/* FULL WIDTH HERO SECTION (background like about-bg) */
.hero-section {
    width: 100vw;     /* full width of screen */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background: url('../img/hero-bg.png') center/cover no-repeat; /* your new background */
    
    padding: 80px 0;
    color: #fff;
}
.hero-section {
    margin-top: -100px !important; /* pulls background to the top */
    padding-top: 140px !important; /* pushes text down so navbar doesn't cover it */
}

.navbar {
    border-bottom: none !important;
    box-shadow: none !important;
}
.navbar-fixed-top {
    z-index: 9999;
}
body {
    padding-top: 25px; /* Prevent content under navbar */
}
.navbar {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Hero section logo, aligned to the right */
.hero-logo {
    position: absolute;
    top: 40%;
    right: 0;
    transform: translateY(-25%);
    z-index: 1;  /* Make sure logo is on top */
}
.new-image img {
    width: 400px;  /* Adjust the size of the logo */
    height: auto;
    position: absolute;
    top: 40%;
    left: 80px;  /* Adjust this value to move the logo more to the left */
    transform: translateY(-25%);
    z-index: 1;
    max-width: 100%;

}
.hero-image img {
    width: 1250px;  /* Adjust the size of the logo */
    height: auto;
}

.hero-logo img {
    width: 350px;  /* Adjust the size of the logo */
    height: auto;
}

.hero-logo {
    position: absolute;
    top: 40%;
    left: 100px;  /* Adjust this value to move the logo more to the left */
    transform: translateY(-25%);
    z-index: 1;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    100% {
        transform: rotate(360deg); /* Rotate 360 degrees */
    }
}

.hero-logo img {
    animation: rotate 9s linear infinite;  /* 2s duration, infinite loop */
}
.hero-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.hero-section .col-md-6 {
    flex: 1 1 100%;
}
@media (max-width: 992px) {
    .new-image {
        display: none;
    }
}
@media (max-width: 992px) {
    .hero-logo img,
    .new-image img {
        max-width: 180px;
    }
}

.chaos-title {
    font-size: 8rem; /* Increase size, adjust as needed */
    font-weight: bold; /* Optional: make it bold */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* Optional: gives a cool chaotic glow */
    margin-left: 10%;       /* Adjust percentage to move more/less right */
    display: inline-block;  /* Ensures margin-left works correctly */
}
.chaos-desc {
    font-size: 1.6rem; /* Increase size, adjust as needed */
    margin-left: 10%;       /* Adjust percentage to move more/less right */
    display: inline-block;  /* Ensures margin-left works correctly */

}
.btn-secondary {
    background-color: #6c757d !important; /* classic Bootstrap gray */
    color: #fff !important;
    border: none;
}

.btn-chaos {
    background-color: #5073f3;
    color: #fff;
    border: 2px solid #5073f3;
    font-weight: bold;
    padding: 10px 25px;
    border-radius: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    display: inline-flex;        /* allow icon + text alignment */
    align-items: center;         /* vertically center */
    gap: 10px; 
    margin-left: 10%;                  /* space between icon and text */
}

.btn-chaos:hover {
    background-color: #363daa;
    color: #fff;
    transform: translateY(-2px);
}

.btn-chaos .btn-icon {
    width: 24px;                 /* adjust icon size */
    height: 24px;
}
/* Slide-in from right */
@keyframes slide-right-to-left {
    0% {
        opacity: 0;
        transform: translateX(100px); /* start 100px to the right */
    }
    100% {
        opacity: 1;
        transform: translateX(0);     /* final position */
    }
}

.slide-in-right {
    animation: slide-right-to-left 1s ease-out forwards;
}

@keyframes slide-left-to-right {
    0% {
        opacity: 0;
        transform: translateX(-40px); /* start 80px to the left */
    }
    100% {
        opacity: 1;
        transform: translateX(480px); /* final shifted position */
    }
}
.random-img {
    transform: translateX(40px); /* move image slightly right */
    transition: transform 0.8s ease-out;
}
.random-section .random-img {
    animation: slide-left-to-right 1s ease-out forwards;
}

/* Slide-in from left to right */
@keyframes slide-left-to-right2 {
    0% {
        opacity: 0;
        transform: translateX(10%);  /* Start off-screen to the left */
    }
    100% {
        opacity: 1;
        transform: translateX(20px);   /* Adjust this value to move it a bit to the right */
    }
}

/* Apply the animation to the seagodss image */
.seagodss-image {
    animation: slide-left-to-right 1s ease-out forwards;
    position: relative;
    left: 0px; /* Adjust this to move the image a bit more to the right */
}

/* Target the text elements inside the seagod section */
.seagod-section h2,
.seagod-section p {
    text-align: center;  /* Adjust as needed */
    padding: 20px 1200px;
    margin-left: 0;      /* Reset margins */
}
/* Ensure image is positioned to the right */
.seagod-section img {
    width: 100%;  /* Adjust the size of the image */
    max-width: 400px;  /* Adjust this value for the desired max size */
    margin-left: 650px; /* Align the image to the right */
    margin-right: 0;   /* Remove any margin on the right */
    display: block;    /* Ensures it's a block element for margin control */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Include shadow transition */
}

/* Zoom and shadow effect on hover */
.seagod-section img:hover {
    transform: scale(1.1);  /* Zoom in the image */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  /* Add subtle shadow */
}
/* Ensure image is positioned to the right */
.random-section img {
    width: 100%;  /* Adjust the size of the image */
    max-width: 400px;  /* Adjust this value for the desired max size */
    margin-left: 650px; /* Align the image to the right */
    margin-right: 0;   /* Remove any margin on the right */
    display: block;    /* Ensures it's a block element for margin control */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Include shadow transition */
}

/* Zoom and shadow effect on hover */
.random-section img:hover {
    transform: scale(1.1);  /* Zoom in the image */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  /* Add subtle shadow */
}


/* mining */
.mining-section {
    width: 100%;
    background: url('../img/mining-bg.jpg') center/cover no-repeat;
    padding: 60px 0;
    margin: 0; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;

}
.mining-section h2 {
    font-size: 3.5rem;     /* default was around 1.5rem */
    font-weight: 700;
}

.mining-section p {
    font-size: 1.8rem;  /* default was about 1rem */
    line-height: 1.6; 
}
/* Flip vertically */
.flip-vertical {
    transform: scaleY(-1); /* Flip the image vertically */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Optional: Reset the flip on hover */
.flip-vertical:hover {
    transform: scaleY(1); /* Reset to normal on hover */
}


/*lastoption*/
.last-section {
    width: 100%;
    background: url('../img/last-bg.jpg') center/cover no-repeat;
    padding: 0px 800px;
    margin: 0; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}
.last-section h2 {
    font-size: 3.5rem;     /* default was around 1.5rem */
    font-weight: 700;
}

.last-section p {
    font-size: 1.8rem;  /* default was about 1rem */
    line-height: 1.6; 
}
/* Flip vertically */
.flip-vertical {
    transform: scaleY(-1); /* Flip the image vertically */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Optional: Reset the flip on hover */
.flip-vertical:hover {
    transform: scaleY(1); /* Reset to normal on hover */
}
/* Footer Section Styles */

.footer-content {
    margin: 0 auto;
}

.footer-links {
    font-size: 14px;
    margin-bottom: 15px;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
}

.footer-description {
    font-size: 15px;
    margin-bottom: 25px;
}

.footer-brands {
    margin-bottom: 25px;
}

.footer-brands img {
    max-height: 50px;
    margin: 0 20px;
}

.footer-social {
    margin-top: 20px;
}

.footer-social a {
    font-size: 24px;
    color: #aaa;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #fff;
}

.footer-social i {
    font-size: 24px;
    color: #aaa;
}

.footer-social a:hover i {
    color: #fff;
}

.discord-widget {
    position: fixed;
    bottom: 20px; /* Adjust the distance from the bottom of the page */
    right: 20px;  /* Adjust the distance from the right of the page */
    z-index: 1000; /* Ensure it stays on top of other content */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Adds smooth transition */
}
.discord-widget:hover {
    transform: scale(1.1);  /* Increases size on hover */
    opacity: 0.8;           /* Slightly reduces opacity on hover */
}


/* === NAVBAR LOGO POSITION CONTROL === */

.navbar-logo {
    position: relative;      /* allows manual movement */
    display: flex;
    align-items: center;
    height: 70px;            /* match navbar height */
}

/* Adjust the logo itself */
.navbar-logo img {
    height: 55px;            /* logo size control */
    width: auto;

    /* === POSITION ADJUSTMENTS === */
    position: relative;

    top: 0;                  /* move UP (+) or DOWN (-) */
    left: 0;                 /* move LEFT (-) or RIGHT (+) */
}

/* Example: Move logo slightly up and right
.navbar-logo img {
    top: -5px;
    left: 20px;
}
.register-bg {
    background: url('../img/random-bg.jpg') center/cover no-repeat;
    padding: 40px;
    border-radius: 15px;
    max-width: 900px;
    margin: 50px auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
}