/* Existing mobile adjustments for max-width: 768px remain here  about page */

@media (max-width: 480px) {
    /* Adjust overall container width */
    .container-full {
      width: 100%;
      height: auto; /* Let content determine height */
      padding: 0 10px;
    }
    
    /* Make images fully responsive */
    .backgroundImage,
    .boyImage {
      width: 100% !important;
      height: auto;
      object-fit: cover;
    }
    
    /* Scale down header logos */
    .logo {
      max-height: 25px;
    }
    
    /* Adjust text sizes */
    .text p {
      font-size: 2.5rem;
      padding-top: 5px;
    }
    
    /* Adjust card and content area if needed */
    .card {
      width: 100%;
      margin-top: 100px;
      padding: 0 5px;
    }
    
    .content {
      width: 100%;
      padding: 10px;
    }
  }
  /* hhhhhhhhHHHHHHHHHH */

  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
    width: 100vw;
    /* Let height grow with content */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* stack sections vertically */
    align-items: center;
    background: black;
    overflow-x: hidden; /* allow vertical scrolling if needed */
    padding-bottom: 80px; /* adjust this value to the height of your footer plus some extra spacing */
}

/* Prevent any horizontal shift and keep footer fixed */
html, body {
  overflow-x: hidden;
}

/* Header styling */
.header-container {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    background: transparent;
}

.logo {
    max-height: 50px;  
    width: auto;
    margin-right: 0.1px;
}

/* — override logo size — */
header.header-container .logo {
  max-height: 45px !important;  /* bump this to taste */
  width: auto;
}

/* Adjust card section to leave space for the fixed header */
.card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1280px;
    height: 720px;
    margin-top: 80px; /* leave room for the header */
}

.content {
    width: 1300px;
    height: 562px;
    border-radius: 40px;
    animation: 200s linear infinite brightness;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content */
    overflow: hidden;
}

.container-full {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    animation: 200s linear infinite zoom-in;
    position: relative;
    overflow: hidden;
}

.backgroundImage, .boyImage {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill; /* stretches the image to fully fill the container */
}

/* Existing mobile adjustments */
@media (max-width: 768px) {
    /* If you want a larger width than 100% on mobile, update here */
    .backgroundImage, .boyImage {
        width: 160% !important;  /* change from 100% to your desired width */
        height: auto;
        object-fit: cover;
    }
}

.boyImage {
    z-index: 2;
    animation: 200s linear infinite blur;
    border-radius: 0px;
}

.cube, .face {
    width: 970px;
    height: 190px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: absolute;
}

.cube {
    position: relative;
    transform-style: preserve-3d;
    perspective: 489px;
    perspective-origin: 51% 70%;
}

.face {
    background: rgba(0, 0, 0, 0);
    border: none;
    opacity: 0.5;
}

.text p {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: calc(6em + (190px / 10) * 0.7);
    padding-top: 20px;
    color: #fff;
}

.text span {
    color: red;
}

/* Existing keyframe animations */
@keyframes left {  
    100% { margin-left: -54000px; }  /* Change -54000px if your frames’ total width is different */
}
@keyframes back {  
    100% { margin-left: -54870px; }  /* Set exactly so the back face aligns with your photo edges */
}
@keyframes right {  
    100% { margin-left: -55740px; }  /* Adjust so the right face matches perfectly */
}

/* Face transforms – set these exact transforms so each face of the cube (or animated element) aligns with your photos */
.front { 
    transform: translateZ(435px); 
    display: none; /* if you wish to hide front face */
}
.back { 
    transform: translateZ(-435px) rotateY(180deg) scaleX(-1); 
}
.left { 
    transform: translateX(-435px) rotateY(-90deg) scaleX(-1); 
}
.right { 
    transform: translateX(435px) rotateY(90deg) scaleX(-1); 
}
.top { 
    transform: translateY(-435px) rotateX(90deg) scaleY(-1); 
}
.bottom { 
    transform: translateY(-245px) rotateX(-90deg) scaleY(-1); 
}

/* Additional CSS rules remain unchanged */
/* You can leave your additional animations and styles (hue, container-reflect, etc.) as is */

/* Align logo and text, and force text to be white */
.navbar-brand {
    display: flex;
    align-items: center;
}
#navbarBrand {
    color: white !important;
    margin-left: 10px;
    font-size: 1.5rem;
    line-height: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Header adjustments */
    .header-container {
        padding: 0 10px;
    }
    .logo {
        max-height: 30px;
    }
    #navbarBrand {
        font-size: 1.2rem;
        margin-left: 5px;
    }
    
    /* Card and content area */
    .card {
        width: 190%;
        height: auto;
        margin-top: 100px;  /* extra space to account for the fixed header */
        padding: 0 10px;
    }
    .content {
        width: 100%;
        height: auto;
    }
    
    /* Container adjustments */
    .container-full {
        width: 100%;  /* Increase container width on smaller devices */
        height: 190%;
    }
    
    /* Make images responsive */
    .backgroundImage, .boyImage {
        width: 120% !important;
        height: auto;
        object-fit: cover;
    }
    .boyImage {
        border-radius: 5px; /* reduce border radius if desired */
    }
    
    /* Adjust ticker text font sizes if needed */
    .text p {
        font-size: calc(3em + (190px / 10) * 0.7);
        padding-top: 10px;
    }
    
    /* Adjust final text content styling */
    div[style*="max-width: 800px"] {
        padding: 20px;
    }
    div[style*="max-width: 800px"] h1 {
        font-size: 2rem;
    }
    div[style*="max-width: 800px"] p {
        font-size: 1rem;
    }
}

/* Position the TradingView widget container over the photo */
.tradingview-widget-container {
    position: absolute;
    bottom: 0; /* adjust if needed (e.g. top: 0 or a custom offset) */
    left: 0;
    width: 100%;
    height: 100%;  /* or use a fixed height if preferred */
    z-index: 3;  /* ensure it appears above the photo */
    background: transparent !important;
    margin : 0;
}




/* Set the About Us heading to red */
.animate-text h1 {
    color: red !important;
}

/* Keep the paragraph text white */
.animate-text p {
    color: white !important;
}

/* Responsive adjustments for phones */
@media (max-width: 768px) {
    .animate-text {
        padding: 20px;
        max-width: 90%;
    }
    .animate-text h1 {
        font-size: 2rem;
        margin-top: 10px;
    }
    .animate-text p {
        font-size: 1rem;
        margin-top: 10px;
    }
}

/* Make sure the footer is fixed at the bottom */
.interactive-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;          /* span full width without shifting */
    margin: 0 auto;
    background-color: rgb(0, 0, 0);
    padding: 20px 0;
    text-align: center;
    z-index: 1100;
}

/* --- Additional CSS (after the main content) --- */

/* Ensure the SVG scales responsively */
.animated-about-container {
    max-width: 100%;
}
.animated-about {
    width: 100%;
    height: auto;
}
/* Animation for drawing the SVG path */
.draw-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    /* Animation is triggered by adding the animate class */
}
/* New rule that triggers the draw animation */
.draw-path.animate {
    animation: draw 5s ease-in-out forwards;
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
/* Hover effect for the SVG */
.animated-about-container:hover .draw-path {
    stroke: #a01b5b;
    transition: stroke 0.3s ease;
}
/* Add a subtle glow effect */
.animated-about-container {
    filter: drop-shadow(0 0 5px rgba(189, 11, 65, 0.5));
}
/* Smooth scaling on hover */
.animated-about-container:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.footer-icons a,
.footer-icons a svg {
    margin: 0;
    padding: 0;
}
.footer-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;  /* adjust gap as needed */
    margin: 0;
    padding: 0;
}

.footer-icons a svg {
    width: 40px;  /* adjust width as needed */
    height: auto;
}
/* youtube logo */
.footer-icons a:first-of-type svg {
    width: 26px; /* Adjust this value as needed */
    height: auto;
    margin-bottom: 0px; /* Adjust this value as needed */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}