/* --------------- Font Family ---------------  - START */
@font-face {
    font-family: 'AvenirLTStd-Black';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Black.otf') format('opentype');
    /* font-weight: 900; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-BlackOblique';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-BlackOblique.otf') format('opentype');
    /* font-weight: 900; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Book';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Book.otf') format('opentype');
    /* font-weight: 400; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-BookOblique';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-BookOblique.otf') format('opentype');
    /* font-weight: 400; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Heavy';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Heavy.otf') format('opentype');
    /* font-weight: 800; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-HeavyOblique';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-HeavyOblique.otf') format('opentype');
    /* font-weight: 800; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Light';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Light.otf') format('opentype');
    /* font-weight: 300; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-LightOblique';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-LightOblique.otf') format('opentype');
    /* font-weight: 300; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Medium';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Medium.otf') format('opentype');
    /* font-weight: 500; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-MediumOblique';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-MediumOblique.otf') format('opentype');
    /* font-weight: 500; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Oblique';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Oblique.otf') format('opentype');
    /* font-weight: 600; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Roman';
    src: url('../Assets/Font/Avenir-font/AvenirLTStd-Roman.otf') format('opentype');
    /* font-weight: 600; */
    /* font-style: normal; */
}

/* --------------- Font Family ---------------  - END */


#esri_logo {
    width: 12rem;
    margin-right: 50px;
}




.hover-banner {
    cursor: pointer;
}

.carousel-indicators [data-bs-target] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* Makes them circular */
    background-color: #6c757d;
    /* Optional: custom color */
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: #ffffff;
    /* Optional: highlight active dot */
}

:root {
    --calcite-ui-background: #ffffff;
    /* white */
    --shadow-color: rgba(0, 0, 0, 0.2);
    /* subtle shadow */
}

.image-box {
    position: relative;
    height: 160px;
    overflow: hidden;
}

/* .image-box img {
    transition: all 0.4s ease;
  } */

.image-box:hover {
    transform: scale(0.98);
    /* Slight inward zoom */
    transition: all 0.4s ease;
    box-shadow:
        inset 0 0 0 2px var(--calcite-ui-background),
        inset 0 0 0 10px var(--shadow-color);
}

.dropdown-menu {
    width: 420px;
}

/* esri logo */
#Layer_1 {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.5s ease;
}

#Layer_1:hover {
    opacity: 1;
}

.hover-contrast-social {
    /* opacity: 0.5; */
    cursor: pointer;
    transition: opacity 0.5s ease;
}

.list-unstyled ul {
    list-style-type: none
}

.list-unstyled ul a {
    text-decoration: none;
    color: #595959;
}

.list-unstyled ul a:hover {
    color: #0079c1;
}

.list-unstyled h6 {
    color: #4c4c4c;
}

/* submenu dropdown div */
#navbarNav ul {
    border-radius: 0;
}


/* --------------- Navbar Styles ---------------  - START */

/* Navbar Menu - START */

.nav-item {
    cursor: default;
    padding: 8px 12px;
}

.nav-item a {
    font-family: 'AvenirLTStd-Light';
}

.nav-link.dropdown-toggle::after {
    display: none !important;
}

.navbar {
    padding-bottom: 0px;
}

.dropdown-item {
    cursor: pointer;
}

/* Navbar Menu - END */



/* ---  Industry - submenu --- - START */

.dropdown-menu.custom-width {
    width: 600px;
    padding: 1rem;
}

.industries-columns ul li a {
    cursor: pointer;
}

.industries-columns {
    display: flex;
    gap: 2rem;
}

.industries-columns ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 50%;
    font-family: 'AvenirLTStd-Light';

}

.industries-columns li {
    margin-bottom: 0.5rem;
    width: 18.125rem;
}

/* ---  Industry - submenu --- - END */

/* Navbar dropdown list styles - START */

.dropdown-item {
    opacity: 0.7;
    font-size: 15px;
}

.dropdown-item:hover {
    /* color: black !important; */
    background-color: white !important;
    opacity: 1 !important;
}

.dropdown-item:active {
    color: black;
    background-color: white !important;
}

/* Navbar dropdown list styles - END */

/* Industries button inside the industries submenu - START */

.industry-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #007ac2;
    color: #007ac2;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: transparent;
    border-radius: 0;
}

.industry-button:hover {
    box-shadow: inset 0 0 0 2.3px rgb(8, 103, 165);
    color: #007ac2;
    background-color: #ffffff;
}

/* Industries button inside the industries submenu - END */

/* Submenu on click styling - START */

.nav-item.dropdown {
    position: relative;
    box-sizing: border-box;
    border-bottom: 3px solid transparent;
    /* Default transparent border */
}

.nav-item.dropdown:hover {
    border-bottom: 3px solid rgb(99, 164, 185);
    /* Light blue border on hover */
}

.nav-item.dropdown:not(.bottom-color-change):hover {
    border-bottom: 3px solid rgb(99, 164, 185);
    /* transition: all 0.3s ease-in-out; */

}

.bottom-color-change {
    border-bottom: 3px solid #4169E1 !important;
    /* Dark blue border when active */
}

.industries-menu {
    cursor: default;
}




/* Submenu on click styling - END */


/* --------------- Navbar Styles ---------------  - END */

@media (max-width: 718px) {
    .footer-logo-social {
        flex-direction: row;
        justify-content: space-between;
    }

    /* #footerAccordion * {
        color: #323233;
        font-family: 'AvenirLTStd-Book' !important;
        font-size: 12px;
        letter-spacing: 1.5px;
        text-decoration: none;


    } */

    /* .accordion-item {
        border: none !important;
    }

    .list-unstyled li {
        padding: 17px;
    }

    .accordion-button {
        background-color: inherit !important;
        color: inherit !important;
        box-shadow: none !important;
    }

    .list-unstyled li a {
        color: #595959 !important;
        font-size: 13px;


    }

    .accordion-body {
        padding-top: 0;
    } */
}

/* Three cards section - START */

/* @media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1490px;
    }
} */

/* Three cards section - END */






/* Keyframes for scrolling effect */
@keyframes gradientScroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -133vw 0;
    }
}

/* Above Footer Gradient Bar - END */





/* Navbar Bar Responsiveness - START */
.custom-container {
    width: 100%;
    /* max-width: 1440px; */
    margin: 0 auto;
}

/* Mobile view - START */

@media (max-width: 320px) {
    #esri_logo {
        margin-right: 0 !important;
    }

    #heroSectionHeading {
        text-align: center;
    }

    #cardContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Mobile view - END */

/* Navbar Bar Responsiveness - END */



/* About Menu - START */

/* Optional: Better mega menu styling */

/* .desktop-about-menu {
    display: block;
} */

.about-heading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 3px;
    padding-right: 3px;
}

.about-menu-heading {
    position: relative;
    left: 15px;
    font-family: 'AvenirLTStd-Book';
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 30px;
    text-align: center;
    top: 15px;
}

.about-hr{
    position: relative;
    left: 14px;
    width: 10rem;
    margin: 0;
    border: none;
    border-top: 1px solid #000;
}

.mobile-about-menu {
    display: none;
}

.mega-menu {
    width: 600px;
    max-width: 100%;
}

.dropdown-menu {
    border-radius: 0;
    border: 1px solid #ddd;
}

.menu-mobile {
    padding: 18px 18px;
}

.nav-pills .nav-link {
    font-weight: 500;
    text-align: left;
}

.dropdown-item {
    padding-left: 0;
    font-size: 0.9rem;
}


/* Optional: Adjust width of About dropdown */
.dropdown-menu.mega-menu {
    width: 600px;
}

/* Blue dot while hover  - START */

/* --- Left Blue Dot and Background Logic --- */

/* Default state for each list item */
.nav-link-p {
    background-color: rgb(239, 239, 239);
    transition: background-color 0.3s;
    position: relative;
}

/* On hover */
.nav-link-p:hover {
    background-color: rgba(239, 239, 239, 0.5);
}

/* When button inside is active */
.nav-link-p:has(.nav-link.active) {
    background-color: white !important;
}

/* Style the button itself */
.nav-link-p .nav-link {
    color: #000;
    border: none;
    text-align: left;
    width: 100%;
    /* padding: 10px 20px; */
    background: transparent;
    box-shadow: none;
    position: relative;
}

/* Blue dot styling */
.mega-menu .nav-link::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* On hover: faint blue dot */
.nav-link-p:hover .nav-link::before {
    background-color: #0079c1;
    opacity: 0.5;
}

/* When active: solid blue dot */
.mega-menu .nav-link.active::before {
    background-color: #0079c1;
    opacity: 1;
}

/* Blue dot while hover  - END */

/* arrow transition for nav links - START */
.arrow-transition::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: inherit;
}

.arrow-transition {
    position: relative;
    display: inline-block;
    width: auto;
    transition: color 0.3s ease;
}

.arrow-transition:hover {
    color: #3d5a96;
}

.arrow-transition:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

/* arrow transition for nav links - END */


.nav-link:focus,
.nav-link:active,
.nav-link.show,
.nav-link.active {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit;
}
.custom-btn{
    font-size:0.538rem ;
}





/* About Menu - END */


/*---------------------------------- RESPONSIVENESS SECTION ----------------------------------*/

/* 4K Desktop Monitor - 3840x2160 */
@media (min-width: 2561px) {

    /* Styles for 4K+ screens */
    .custom-logo-padding-left {
        padding-left: 36rem;
    }

    /* .nav-item a {
        font-size: 1.2rem;
    } */
    .custom-btn{
        font-size:0.8rem ;
    }

    .about-ul {
        min-width: 13rem; 
        left:0rem !important
    }
    .dropdown-menu{
        width: 30rem;
        padding: 17px;
    }
    .dropdown-menu .dropdown-item {
        white-space: normal;
        word-break: break-word;
    }
    .link-1{
        width: 16rem;
    }
    .about-box{
        width: 11.5rem !important;
        padding: 0px 0px 0px 15px !important;  
    }
    .about-box-2{
        border-bottom: 0px !important;
    }

}

/* Ultrawide Monitor - 2560x1080 */
@media (max-width: 2560px) {

    /* Styles for ultrawide monitors */
    .custom-logo-padding-left {
        padding-left: 32rem;
    }

    /* .nav-item a {
        font-size: 1.2rem;
    } */
    .custom-btn{
        font-size:0.8rem ;
    }

    .about-ul {
        min-width: 13rem;
        left:0rem !important
    }
    .dropdown-menu{
        width: 30rem;
        padding: 17px;
    }
    .dropdown-menu .dropdown-item {
        white-space: normal;
        word-break: break-word;
    }
    .link-1{
        width: 16rem;
    }
    .about-box{
        width: 11.5rem !important;
        padding: 0px 0px 0px 15px !important;  
    }
    .about-box-2{
        border-bottom: 0px !important;
    }

}



/* Dell Latitude 7490 / Samsung S24C350L Monitor - 1920x1080 */
@media (max-width: 1920px) {

    /* Styles for standard monitors */
    .custom-logo-padding-left {
        padding-left: 15rem;
    }

    .about-ul {
        min-width: 13rem; 
        left:0rem !important
    }
    .dropdown-menu{
        width: 30rem;
        padding: 17px;
    }
    .dropdown-menu .dropdown-item {
        white-space: normal;
        word-break: break-word;
    }
    .link-1{
        width: 16rem !important;
    }
    .custom-btn{
        font-size:0.8rem ;
    }
    .about-box{
        width: 11.5rem !important;
        padding: 0px 0px 0px 15px !important;  
    }
    .about-box-2{
        border-bottom: 0px !important;
    }

}



/* MacBook Pro 16" (M3) – Scaled to ~1728x1117 */
@media (max-width: 1728px) {

    /* Styles for retina laptops (can fine-tune height too) */
    .custom-logo-padding-left {
        padding-left: 15rem;
    }

    .about-ul {
        min-width: 13rem;
        left:0rem !important 
    }
    .dropdown-menu{
        width: 30rem;
        padding: 17px;
    }
    .link-1{
        width: 16rem;
    }
    .custom-btn{
        font-size:0.8rem ;
    }
    .about-box{
        width: 11.5rem !important;
        padding: 0px 0px 0px 15px !important;  
    }
    .about-box-2{
        border-bottom: 0px !important;
    }

    






    

}

/* HP EliteBook 820 G3 - 1366x768 */
@media (max-width: 1366px) {
    /* Styles for smaller laptops */

    .custom-logo-padding-left {
        padding-left: 8rem;
    }

    /* .dropdown-menu[data-bs-popper] {
        left: -31.7rem;
    } */

    .about-ul {
        min-width: 13rem;
        left: 0rem !important; 
    }
    .about-menu-medium{
        width: 37rem;
        background-color: white;
    }
    
    .dropdown-menu{
        width: 31rem;
        padding: 17px;
    }
    .link-1{
        width: 16rem;
    }
    .custom-btn{
        font-size:0.8rem ;
    }
    .white-box{
        display: none;
    }
    .white-box-2{
        width: 180px;
        
    }

}

/* iPad 9th Gen (Landscape) - 1080x810 approx. */
@media (max-width: 1080px) {
    /* Styles for landscape tablets or large phones */

    .custom-logo-padding-left {
        padding-left: 4rem;
    }

    /* .dropdown-menu[data-bs-popper] {
        left: 0rem;
    } */
    .dropdown-menu{
        width: 13rem;
        padding: 17px;
    }

    .about-ul {
        min-width: 13rem; 
        left: 0rem !important;
        /* top: 20px; */
    }

    .industries-columns {
        display: flex;
        flex-wrap: nowrap;
        gap: 2rem;
    }

    .industries-columns ul {
        flex: 1 1 45%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .dropdown-menu .dropdown-item {
        white-space: normal;
        word-break: break-word;
    }

    


    .industry-ul{
        width: 35rem;
        padding: 1rem 1rem;
    }
    .link-1{
        width: 16rem;
    }
    .custom-btn{
        font-size:0.8rem ;
    }
}

/* iPad 9th Gen (Portrait) - 768x1024 */
@media (max-width: 810px) {

    /* Styles for portrait tablets */
    .custom-logo-padding-left {
        padding-left: 1rem;
    }

    #nav-1,
    #nav-2,
    #nav-3,
    #nav-4,
    #nav-5 {
        border-bottom: none;
    }

    #nav-1 .dropdown-menu,
    #nav-2 .dropdown-menu,
    #nav-3 .dropdown-menu,
    #nav-4 .dropdown-menu #nav-5 .dropdown-menu {
        border: none;

    }

    #nav-1 .product-menu,
    #nav-2 .industries-menu,
    #nav-3 .industries-menu {
        display: none;
    }

    #nav-1 hr,
    #nav-2 hr,
    #nav-3 hr {
        display: none;
    }

    .industries-columns {
        flex-direction: column;
        gap: 0px;
    }

    #nav-2 .dropdown-menu {
        width: 16rem;
    }

    .nav-item a {
        font-size: 0.9rem;
    }

    .custom-padding-top,
    .menu-mobile {
        padding: 0px 18px;
    }

    .desktop-about-menu {
        display: none !important;
    }

    .mobile-about-menu {
        /* display: block !important; */
        min-width: 90vw;
        border: none;
        padding: 0px 18px;
        width: 18rem;
    }

    .mobile-about-menu li {
        padding-right: 0px;
    }

    #nav-4  {
        width: 18rem;
    }

    .dropdown-header{
        color: #282525;
        font-weight: 900;
    }

    .about-ul {
        min-width: 19rem; 
    }
    .link-1{
        width: 18rem;
    }
    .custom-btn{
        font-size:0.738rem ;
    }
    .about-heading-wrapper{
        display: none;
    }
}

/* iPad 9th Gen (Portrait) - 768x1024 */
@media (max-width: 768px) {

    /* Styles for portrait tablets */
    .custom-logo-padding-left {
        padding-left: 1rem;
    }

    #nav-1,
    #nav-2,
    #nav-3,
    #nav-4,
    #nav-5 {
        border-bottom: none;
    }

    #nav-1 .dropdown-menu,
    #nav-2 .dropdown-menu,
    #nav-3 .dropdown-menu,
    #nav-4 .dropdown-menu #nav-5 .dropdown-menu {
        border: none;

    }

    #nav-1 .product-menu,
    #nav-2 .industries-menu,
    #nav-3 .industries-menu {
        display: none;
    }

    #nav-1 hr,
    #nav-2 hr,
    #nav-3 hr {
        display: none;
    }

    .industries-columns {
        flex-direction: column;
        gap: 0px;
    }

    #nav-2 .dropdown-menu {
        width: 16rem;
    }

    .nav-item a {
        font-size: 0.9rem;
    }

    .custom-padding-top,
    .menu-mobile {
        padding: 0px 18px;
    }

    .desktop-about-menu {
        display: none !important;
    }

    .mobile-about-menu {
        /* display: block !important; */
        min-width: 90vw;
        border: none;
        padding: 0px 18px;
        width: 18rem;
    }

    .mobile-about-menu li {
        padding-right: 0px;
    }

    #nav-4  {
        width: 18rem;
    }

    
    .dropdown-header{
        padding: 0.5rem 0rem;
        font-weight: 900;
        color: #282525;
    }

    .about-menu-medium{
        width: 40rem;
    }

    #aboutTabs {
        width: 13rem;
    }
    .link-1{
        width: 18rem !important;
    }

    
}

@media (max-width: 432px) {
    .link-1{
        width: 18rem !important;
    }

}

/* iPhone 15 Plus / iPhone 15 Pro Max / Galaxy S23 - ~430x932 */
@media (max-width: 430px) {

    /* Styles for large phones */
    .custom-logo-padding-left {
        padding-left: 1rem;
    }

    #nav-1,
    #nav-2,
    #nav-3,
    #nav-4,
    #nav-5 {
        border-bottom: none;
    }

    #nav-1 .dropdown-menu,
    #nav-2 .dropdown-menu,
    #nav-3 .dropdown-menu,
    #nav-4 .dropdown-menu #nav-5 .dropdown-menu {
        border: none;

    }

    #nav-1 .product-menu,
    #nav-2 .industries-menu,
    #nav-3 .industries-menu {
        display: none;
    }

    #nav-1 hr,
    #nav-2 hr,
    #nav-3 hr {
        display: none;
    }

    .industries-columns {
        flex-direction: column;
        gap: 0px;
    }

    #nav-2 .dropdown-menu {
        width: 16rem;
    }

    .nav-item a {
        font-size: 0.9rem;
    }

    .custom-padding-top,
    .menu-mobile {
        padding: 0px 18px;
    }

    .desktop-about-menu {
        display: none !important;
    }

    .mobile-about-menu {
        /* display: block !important; */
        min-width: 90vw;
        border: none;
        padding: 0px 18px;
        width: 18rem;
    }

    .mobile-about-menu li {
        padding-right: 0px;
    }

    #nav-4  {
        width: 18rem;
    }

    .dropdown-header{
        /* padding: 0.5rem 0rem; */
        font-weight: 900;
        color: #282525;
    }

    .about-ul {
        min-width: 19rem; 
    }
    .link-1{
        width: 18rem !important;
    }
}

/* Motorola G73 / iPhone 15 Pro - 393x852 */
@media (max-width: 393px) {

    /* Styles for Motorola G73 / iPhone 15 Pro */
    .custom-logo-padding-left {
        padding-left: 1rem;
    }

    #nav-1,
    #nav-2,
    #nav-3,
    #nav-4,
    #nav-5 {
        border-bottom: none;
    }

    #nav-1 .dropdown-menu,
    #nav-2 .dropdown-menu,
    #nav-3 .dropdown-menu,
    #nav-4 .dropdown-menu #nav-5 .dropdown-menu {
        border: none;

    }

    #nav-1 .product-menu,
    #nav-2 .industries-menu,
    #nav-3 .industries-menu {
        display: none;
    }

    #nav-1 hr,
    #nav-2 hr,
    #nav-3 hr {
        display: none;
    }

    .industries-columns {
        flex-direction: column;
        gap: 0px;
    }

    #nav-2 .dropdown-menu {
        width: 16rem;
    }

    .nav-item a {
        font-size: 0.9rem;
    }

    .custom-padding-top,
    .menu-mobile {
        padding: 0px 18px;
    }

    .desktop-about-menu {
        display: none !important;
    }

    .mobile-about-menu {
        /* display: block !important; */
        min-width: 90vw;
        border: none;
        padding: 0px 18px;
        width: 18rem;
    }

    .mobile-about-menu li {
        padding-right: 0px;
    }

    #nav-4  {
        width: 18rem;
    }

    .dropdown-header{
        color: #282525;
        font-weight: 900;
    }

    .about-ul {
        min-width: 19rem; 
    }
    .link-1{
        width: 18rem !important;
    }
}

/* Motorola 662 - 360x800 */
@media (max-width: 360px) {

    /* Styles for Motorola 662 or similar */
    .custom-logo-padding-left {
        padding-left: 1rem;
    }

    #nav-1,
    #nav-2,
    #nav-3,
    #nav-4,
    #nav-5 {
        border-bottom: none;
    }

    #nav-1 .dropdown-menu,
    #nav-2 .dropdown-menu,
    #nav-3 .dropdown-menu,
    #nav-4 .dropdown-menu #nav-5 .dropdown-menu {
        border: none;

    }

    #nav-1 .product-menu,
    #nav-2 .industries-menu,
    #nav-3 .industries-menu {
        display: none;
    }

    #nav-1 hr,
    #nav-2 hr,
    #nav-3 hr {
        display: none;
    }

    .industries-columns {
        flex-direction: column;
        gap: 0px;
    }

    #nav-2 .dropdown-menu {
        width: 16rem;
    }

    .nav-item a {
        font-size: 0.9rem;
    }

    .custom-padding-top,
    .menu-mobile {
        padding: 0px 18px;
    }

    .desktop-about-menu {
        display: none !important;
    }

    .mobile-about-menu {
        /* display: block !important; */
        min-width: 90vw;
        border: none;
        padding: 0px 18px;
        width: 18rem;
    }

    .mobile-about-menu li {
        padding-right: 0px;
    }

    #nav-4  {
        width: 18rem;
    }

    .dropdown-header{
        color: #282525;
        font-weight: 900;
    }

    .about-ul {
        min-width: 19rem; 
    }
    .link-1{
        width: 18rem !important;
    }
}

/* iPhone 5 / SE (1st Gen) - 320x568 */
@media (max-width: 320px) {

    /* Styles for very small screens */
    .custom-logo-padding-left {
        padding-left: 0;
    }

    #nav-1,
    #nav-2,
    #nav-3,
    #nav-4,
    #nav-5 {
        border-bottom: none;
    }

    #nav-1 .dropdown-menu,
    #nav-2 .dropdown-menu,
    #nav-3 .dropdown-menu,
    #nav-4 .dropdown-menu #nav-5 .dropdown-menu {
        border: none;

    }

    #nav-1 .product-menu,
    #nav-2 .industries-menu,
    #nav-3 .industries-menu {
        display: none;
    }

    #nav-1 hr,
    #nav-2 hr,
    #nav-3 hr {
        display: none;
    }

    .industries-columns {
        flex-direction: column;
        gap: 0px;
    }

    #nav-2 .dropdown-menu {
        width: 16rem;
    }

    .nav-item a {
        font-size: 0.9rem;
    }

    .custom-padding-top,
    .menu-mobile {
        padding: 0px 18px;
    }

    .desktop-about-menu {
        display: none !important;
    }

    .mobile-about-menu {
        display: block !important;
        min-width: 96vw;
        border: none;
        padding: 0px 18px;
        width: 18rem;
    }

    .mobile-about-menu li {
        padding-right: 0px;
    }

    #nav-4  {
        width: 18rem;
    }

    .dropdown-header{
        color: #282525;
        font-weight: 900;
    }

    .about-ul {
        min-width: 19rem; 
    }

}