/* Improve hero section paragraph alignment and styling */
body .hero-video-content.text-center p {
    max-width: 800px;
    margin-left: 265px;
    font-size: 19px !important;
    line-height: 1.6;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-align: justify;
    white-space: normal;
    padding-bottom: -133px !important;
    word-break: normal;
}


/* Ensure the hero content is properly centered */
body .hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Improve spacing between hero elements */
body .hero .section-title {
    margin-bottom: 1.5rem;
}

/* Remove any search button remnants from header */
body .search-toggle, 
body .header-search-button, 
body .header-search-form {
    display: none !important;
}

/* Navbar styling - change color to #5A827E and fix layout issues - MORE AGGRESSIVE */
body header.main-header,
body .main-header .navbar,
body .main-header .header-sticky,
body .main-header .header-sticky.active,
body .navbar-expand-lg,
body .navbar-expand-lg .container-fluid,
body .offcanvas,
body .offcanvas-body,
body .responsive-menu,
body nav.navbar,
body .container-fluid,
body .navbar-brand,
body .main-menu,
body .header-right,
body .navbar-toggle,
body #offcanvasRight,
body .navbar-nav,
body .navbar-nav li,
body .navbar-nav li a,
body .navbar-nav .dropdown-menu,
body .navbar-nav .sub-menu {
    background-color: #5A827E !important;
}

/* Force border styling */
body .main-header,
body .main-header .navbar,
body .main-header .header-sticky,
body .main-header .header-sticky.active {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Improve navbar layout and spacing */
body .navbar {
    padding: 0.5rem 1rem !important;
}

body .navbar-brand {
    padding: 0.5rem 0 !important;
}

/* Fix menu alignment and spacing - MORE AGGRESSIVE */
body .main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .main-menu .navbar-nav,
body .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    background-color: #5A827E !important;
}

/* Improve menu item styling - MORE AGGRESSIVE */
body .main-menu .navbar-nav li a,
body .navbar-nav li a,
body .navbar-nav > li > a,
body .main-menu ul li a,
body .navbar ul li a {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.5rem 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
}

/* Add hover effect to menu items - MORE AGGRESSIVE */
body .main-menu .navbar-nav li a:hover,
body .main-menu .navbar-nav li.current-menu-item a,
body .navbar-nav li a:hover,
body .navbar-nav li.current-menu-item a,
body .navbar-nav > li > a:hover,
body .navbar-nav > li.current-menu-item > a {
    color: #e6e6e6 !important;
    background-color: transparent !important;
}

/* Add underline effect on hover - MORE AGGRESSIVE */
body .main-menu .navbar-nav li a:after,
body .navbar-nav li a:after,
body .navbar-nav > li > a:after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 2px !important;
    background: #ffffff !important;
    bottom: 0 !important;
    left: 0 !important;
    transition: width 0.3s ease !important;
}

body .main-menu .navbar-nav li a:hover:after,
body .main-menu .navbar-nav li.current-menu-item a:after,
body .navbar-nav li a:hover:after,
body .navbar-nav li.current-menu-item a:after,
body .navbar-nav > li > a:hover:after,
body .navbar-nav > li.current-menu-item > a:after {
    width: 100% !important;
}

/* Fix submenu positioning - MORE AGGRESSIVE */
body .navbar-nav .menu-item-has-children,
body .navbar-nav li.menu-item-has-children {
    position: relative !important;
}

body .navbar-nav .menu-item-has-children .sub-menu,
body .navbar-nav li.menu-item-has-children .sub-menu,
body .navbar-nav .menu-item-has-children ul.sub-menu,
body .navbar-nav li.menu-item-has-children ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    float: left !important;
    background-color: #5A827E !important;
}

/* Fix for dropdown menus - RESTORE ORIGINAL STYLING */
body .navbar-nav .dropdown-menu,
body .navbar-nav .sub-menu,
body ul.sub-menu,
body .dropdown-menu,
body .navbar-nav .dropdown-menu *,
body .navbar-nav .sub-menu * {
    background-color: #5A827E !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem 0 !important;
    min-width: 250px !important;
    max-width: none !important;
}

/* Fix submenu items - RESTORE ORIGINAL STYLING */
body .navbar-nav .dropdown-menu a,
body .navbar-nav .sub-menu a,
body .navbar-nav .dropdown-item,
body .navbar-nav .menu-item .sub-menu .menu-item a,
body ul.sub-menu li a,
body .dropdown-menu li a {
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    font-weight: 400 !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word !important;
    background: none !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
    line-height: 1.5 !important;
}

/* Submenu hover effect - RESTORE ORIGINAL STYLING */
body .navbar-nav .dropdown-menu a:hover,
body .navbar-nav .sub-menu a:hover,
body .navbar-nav .dropdown-item:hover,
body .navbar-nav .menu-item .sub-menu .menu-item a:hover,
body ul.sub-menu li a:hover,
body .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Fix for submenu display - VERTICAL LAYOUT */
body .navbar-nav .dropdown-menu,
body .navbar-nav .sub-menu,
body ul.sub-menu,
body .dropdown-menu {
    display: none;
    flex-direction: column !important;
    width: auto !important;
    min-width: 250px !important;
}

/* Force vertical layout for submenu items */
body .navbar-nav .dropdown-menu li,
body .navbar-nav .sub-menu li,
body ul.sub-menu li,
body .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure dropdown menus stay in viewport */
body .navbar-nav .dropdown-menu,
body .navbar-nav .sub-menu {
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for Bootstrap dropdown menu */
.dropdown-menu {
    width: auto !important;
    min-width: 250px !important;
    white-space: normal !important;
}

.dropdown-item {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word !important;
}

/* Fix submenu positioning */
body .navbar-nav .menu-item-has-children,
body .navbar-nav li.menu-item-has-children {
    position: relative !important;
}

body .navbar-nav .menu-item-has-children .sub-menu,
body .navbar-nav li.menu-item-has-children .sub-menu,
body .navbar-nav .menu-item-has-children ul.sub-menu,
body .navbar-nav li.menu-item-has-children ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
}

/* Fix submenu display on hover */
body .navbar-nav .menu-item-has-children:hover > .sub-menu,
body .navbar-nav li.menu-item-has-children:hover > .sub-menu,
body .navbar-nav .menu-item-has-children:hover > ul.sub-menu,
body .navbar-nav li.menu-item-has-children:hover > ul.sub-menu {
    display: block !important;
}

/* Fix nested submenus */
body .navbar-nav .menu-item-has-children .sub-menu .menu-item-has-children > .sub-menu,
body .navbar-nav li.menu-item-has-children .sub-menu li.menu-item-has-children > .sub-menu,
body .navbar-nav .menu-item-has-children ul.sub-menu .menu-item-has-children > ul.sub-menu,
body .navbar-nav li.menu-item-has-children ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    left: 100% !important;
    top: 0 !important;
}

/* Make sure nested submenus show on hover */
body .navbar-nav .menu-item-has-children .sub-menu .menu-item-has-children:hover > .sub-menu,
body .navbar-nav li.menu-item-has-children .sub-menu li.menu-item-has-children:hover > .sub-menu,
body .navbar-nav .menu-item-has-children ul.sub-menu .menu-item-has-children:hover > ul.sub-menu,
body .navbar-nav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu {
    display: block !important;
}

/* Bootstrap specific fixes */
.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

.dropdown-menu .dropdown > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* Center hero content and balance spacing - UPDATED */
.hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

.hero .section-title h1 {
    text-align: center !important;
    margin-bottom: -45px !important;
    margin-top: 0 !important;
    padding-top: 156px !important;
    padding-bottom: -90px !important; /* Add padding to ensure heading is visible */
}

.hero .section-title .accent-text {
    display: inline !important;
}

.hero .hero-content-body {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.hero .hero-video-content p {
    text-align: center !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.hero .hero-btn {
    text-align: center !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important; /* Add bottom margin to reduce space at bottom */
}

.hero .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.hero .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.hero .col-lg-12 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.hero-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Testimonial section balance adjustments */
body .our-testimonial .testimonial-review-box {
    padding: 30px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body .our-testimonial .testimonial-item {
    padding: 25px !important;
}

body .our-testimonial .testimonial-content p {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media (max-width: 991px) {
    body .our-testimonial .col-lg-5,
    body .our-testimonial .col-lg-7 {
        width: 100% !important;
    }
    
    body .our-testimonial .testimonial-review-box {
        margin-bottom: 30px !important;
    }
}

/* Fix responsive menu toggle button - MORE AGGRESSIVE */
body .navbar-toggle,
body .navbar-toggle * {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
    background-color: transparent !important;
}

/* Fix header right section spacing - MORE AGGRESSIVE */
body .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    background-color: transparent !important;
}

/* Fix for footer "Get in Touch" button positioning */
.footer-work-together {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 80px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background-image: url('../images/globe-wireframe.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 300px auto !important;
}

.footer-work-together::before {
    content: "LET'S COLLABORATE" !important;
    position: absolute !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
}

.footer-work-together .work-together-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    text-align: center !important;
    position: relative !important;
}

.footer-work-together .work-together-content {
    text-align: center !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

.footer-work-together .work-together-content h2 {
    font-size: 120px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-bottom: 40px !important;
    letter-spacing: -2px !important;
}

/* Hide the Get in Touch button */
.footer-work-together .work-together-btn {
    display: none !important;
}

/* Responsive styles for the Let's Work Together section */
@media (max-width: 992px) {
    .footer-work-together .work-together-content h2 {
        font-size: 80px !important;
    }
    
    .footer-work-together {
        background-position: -50px center !important;
        background-size: 250px auto !important;
    }
}

@media (max-width: 768px) {
    .footer-work-together .work-together-content h2 {
        font-size: 60px !important;
    }
    
    .footer-work-together {
        background-position: -100px center !important;
        background-size: 200px auto !important;
    }
    
    .footer-work-together .work-together-box {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .footer-work-together .work-together-content {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
}

@media (max-width: 576px) {
    .footer-work-together .work-together-content h2 {
        font-size: 40px !important;
    }
    
    .footer-work-together {
        background-position: -120px center !important;
        background-size: 150px auto !important;
    }
}

/* Floating SVG Animation Styles */
.hero {
    position: relative !important;
    overflow: hidden !important;
}

.hero .wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    perspective: 1000px !important;
    pointer-events: none !important;
}

.hero .svg {
    position: absolute !important;
    stroke: #5A827E !important; /* Updated to match navbar color */
    fill: transparent !important;
    stroke-width: 4px !important;
    opacity: 0.8 !important;
    filter: blur(0) !important;
}

.hero .svg:nth-child(1) {
    top: 20% !important;
    left: 10% !important;
    width: 150px !important;
    height: 150px !important;
    animation: raise1 18s linear infinite !important;
}

.hero .svg:nth-child(2) {
    top: 60% !important;
    left: 25% !important;
    width: 180px !important;
    height: 180px !important;
    animation: raise2 22s linear infinite !important;
}

.hero .svg:nth-child(3) {
    top: 30% !important;
    left: 60% !important;
    width: 120px !important;
    height: 120px !important;
    animation: raise3 20s linear infinite !important;
}

.hero .svg:nth-child(4) {
    top: 70% !important;
    left: 70% !important;
    width: 160px !important;
    height: 160px !important;
    animation: raise4 25s linear infinite !important;
}

.hero .svg:nth-child(5) {
    top: 15% !important;
    left: 40% !important;
    width: 130px !important;
    height: 130px !important;
    animation: raise5 19s linear infinite !important;
}

.hero .svg:nth-child(6) {
    top: 50% !important;
    left: 5% !important;
    width: 140px !important;
    height: 140px !important;
    animation: raise6 21s linear infinite !important;
}

.hero .svg:nth-child(7) {
    top: 80% !important;
    left: 40% !important;
    width: 170px !important;
    height: 170px !important;
    animation: raise7 23s linear infinite !important;
}

.hero .svg:nth-child(8) {
    top: 10% !important;
    left: 80% !important;
    width: 110px !important;
    height: 110px !important;
    animation: raise8 17s linear infinite !important;
}

.hero .svg:nth-child(9) {
    top: 40% !important;
    left: 85% !important;
    width: 145px !important;
    height: 145px !important;
    animation: raise9 24s linear infinite !important;
}

.hero .svg:nth-child(10) {
    top: 25% !important;
    left: 55% !important;
    width: 125px !important;
    height: 125px !important;
    animation: raise10 19.5s linear infinite !important;
}

.hero .svg:nth-child(11) {
    top: 65% !important;
    left: 15% !important;
    width: 135px !important;
    height: 135px !important;
    animation: raise11 22.5s linear infinite !important;
}

.hero .svg:nth-child(12) {
    top: 35% !important;
    left: 75% !important;
    width: 155px !important;
    height: 155px !important;
    animation: raise12 20.5s linear infinite !important;
}

.hero .svg:nth-child(13) {
    top: 85% !important;
    left: 60% !important;
    width: 165px !important;
    height: 165px !important;
    animation: raise13 23.5s linear infinite !important;
}

.hero .svg:nth-child(14) {
    top: 5% !important;
    left: 35% !important;
    width: 115px !important;
    height: 115px !important;
    animation: raise14 18.5s linear infinite !important;
}

.hero .svg:nth-child(15) {
    top: 55% !important;
    left: 90% !important;
    width: 175px !important;
    height: 175px !important;
    animation: raise15 21.5s linear infinite !important;
}

.hero .svg:nth-child(16) {
    top: 45% !important;
    left: 20% !important;
    width: 105px !important;
    height: 105px !important;
    animation: raise16 16.5s linear infinite !important;
}

.hero .svg:nth-child(17) {
    top: 75% !important;
    left: 45% !important;
    width: 185px !important;
    height: 185px !important;
    animation: raise17 24.5s linear infinite !important;
}

/* Animation keyframes for floating SVGs */
@keyframes raise1 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

@keyframes raise2 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-360deg); opacity: 0; }
}

@keyframes raise3 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(180deg); opacity: 0; }
}

@keyframes raise4 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-180deg); opacity: 0; }
}

@keyframes raise5 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(270deg); opacity: 0; }
}

@keyframes raise6 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-270deg); opacity: 0; }
}

@keyframes raise7 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(90deg); opacity: 0; }
}

@keyframes raise8 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-90deg); opacity: 0; }
}

@keyframes raise9 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(120deg); opacity: 0; }
}

@keyframes raise10 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(45deg); opacity: 0; }
}

@keyframes raise11 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-45deg); opacity: 0; }
}

@keyframes raise12 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(135deg); opacity: 0; }
}

@keyframes raise13 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-135deg); opacity: 0; }
}

@keyframes raise14 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(225deg); opacity: 0; }
}

@keyframes raise15 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-225deg); opacity: 0; }
}

@keyframes raise16 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(315deg); opacity: 0; }
}

@keyframes raise17 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(-315deg); opacity: 0; }
}
