.red-section {
    background-color: #3d6585;
    height: 100vh;
    display: block;
    transition: height 0.3s ease-in-out;
}

.red-section .arrow {
    display: block;

    margin-top: 25px;
}

.red-section-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 90%;
}

.main-header .main-box {
    max-height: 60px;
    align-items: flex-start!important;
}

/* Your existing centered styles */
.main-header .logo-box{
    position:relative;               /* anchor for absolutely‑positioned GIF */
    display:flex;                    /* allow easy centering */
    justify-content:center;          /* center children horizontally */
    align-items:flex-start;          /* keep natural vertical flow */
    overflow:visible;
    transition:all .4s ease;
}

.logo-image{
    display:block;
    margin:0 auto;
    height: 330px !important;
    margin-top: 300px;
    transition: all 0.4s ease;
}
.logo-gif{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-90%) scale(2);   /* vertically lift the GIF a bit */
    height:330px !important;
    margin:0 auto;                         /* horizontal center */
    transition:opacity 1.6s ease, transform .4s ease;
}
.logo-gif.hidden {
    opacity: 0;
    display: none!important;
    pointer-events: none; /* optional */
  }
.logo-gif.fade{
    opacity:0;
    transition:opacity 1s ease;   /* tweak speed here */
}
.logo-gif.visible{
    opacity:1;
}

/* When the user scrolls, we'll add .scrolled to .logo-box */
.main-header .logo-image.scrolled {
    /* "Unset" the absolute positioning and transform here */
    margin-top: 0px !important;
    transition: all 1s ease; /* 1 second transition */
    height: 67px !important;
}

/* alignitems */
.logo-box-loader {
    margin: auto;
    margin-top: 300px;
}

@media (max-width:768px) {

    .logo-box-loader {
        margin-top: 210px;
    }

    .logo-image {
        height: 180px !important;
    }

    .links-box, .link-btn {
        margin-top: 12px;
    }

    .logo-gif {
        scale: 4 !important;
        height: unset !important;
        margin-top: unset !important;
        position: absolute !important;
        top: 0% !important;
        left: 0% !important;
        transform: translate(0%, 20%) !important;
    }

    .main-box{
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .main-header .logo-image.scrolled {
        /* "Unset" the absolute positioning and transform here */
        margin-top: 0px !important;
        transition: all 1s ease; /* 1 second transition */
        height: 50px !important;
    }
}


.logo-deer {
    scale: 2;
}