body1 {
    padding-top: 50px;
    padding-bottom: 20px;
      padding:0;
}

/* Set padding to keep content from hitting the edges */
.body-content1 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt1 {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input1,
select1,
textarea1 {
    max-width: 280px;
}

/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar1 {
    margin-bottom: 0;
    border-radius: 0;
}
    
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content1 {
    height: 1250px;
}
    
/* Set gray background color and 100% height */
.sidenav1 {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
    /* #f1f1f1 */
}
    
/* Set black background color, white text and some padding */
xMenuBar {
    background-color: #01488A;
    color: white;
    padding: 15px;
    width: 100%;
    position:fixed ;
    left: 0;
    top: 0;
}

footer2 {
    background-color: #01488A;
    color: white;
    padding: 5px;
    height:30px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}
footer11 {
    background-color: #01488A;
    color: white;
    padding: 15px;
    width: 100%;
    left: 0;
    bottom: 0;
}
    
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav1 {
        height: auto;
        padding: 15px;
    }
    .row.content1 {
        height:auto;
    } 
}

div.sticky1 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
}


/* Navbar container */
.meganavbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
}

/* Links inside the navbar */
.meganavbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* The dropdown container */
.megadropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.megadropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.meganavbar a:hover, .megadropdown:hover .dropbtn {
    background-color: red;
}

/* Dropdown content (hidden by default) */
.megadropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
   
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Mega Menu header, if needed */
.megadropdown-content .megaheader {
    background: red;
    padding: 16px;
    color: white;
}

/* Show the dropdown menu on hover */
.megadropdown:hover .megadropdown-content {
    display: block;
}

/* Create three equal columns that floats next to each other */
.column1 {
    /*float: left;*/
    /*width: 33.33%;*/
    padding: 10px;
    /*background-color: #ccc;*/
    /*height: 250px;*/
}

/* Style links inside the columns */
.column1 a {
    float: none;
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a background color on hover */
.column1 a:hover {
    background-color: #ddd;
    /*background-color:#fff;*/
}

/* Clear floats after the columns */
.row1:after {
    content: "";
    display: table;
    clear: both;
}


.navbar-custom1 {
    background-color: #0073C6;
    color: #ffffff;
    border-radius: 0;
}

.navbar-custom .navbar-nav > li > a {
    color: #fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color: transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open > a {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-custom .navbar-brand {
    color: #eeeeee;
}

.navbar-custom .navbar-toggler {
    background-color: #eeeeee;
}

.navbar-custom .icon-bar {
    background-color:red;
}

/*My Custom Panel*/

.card1 > .card-header bg-info {
    border-color: #dddddd;
}

.card1 > .card-header {
    color: #3a87ad;
    /*background-color: #033c73;*/
    background-color: red;
    border-color: #dddddd;
}

.card1 > .card-header + .collapse > .card-body {
    border-top-color: #dddddd;
}

.card1 > .card-header .badge {
    color: #033c73;
    background-color: #3a87ad;
}

.card1 > .card-footer + .collapse > .card-body {
    border-bottom-color: #dddddd;
}

.dtHorizontalVerticalExampleWrapper {
    max-width: 600px;
    margin: 0 auto;
}

    /***************Test Carousel************/
.container11 {
    margin: 0 auto;
    width: 250px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}

.carousel11 {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

/*.item {
    display: block;
    position: absolute;
    background: #000;
    width: 250px;
    height: 200px;
    line-height: 200px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    opacity: 0.95;
    border-radius: 10px;
}*/

.a {
    transform: rotateY(0deg) translateZ(250px);
    background: #ed1c24;
}

.b {
    transform: rotateY(60deg) translateZ(250px);
    background: #0072bc;
}

.c {
    transform: rotateY(120deg) translateZ(250px);
    background: #39b54a;
}

.d {
    transform: rotateY(180deg) translateZ(250px);
    background: #f26522;
}

.e {
    transform: rotateY(240deg) translateZ(250px);
    background: #630460;
}

.f {
    transform: rotateY(300deg) translateZ(250px);
    background: #8c6239;
}

.carousel-item-next1, .carousel-item-prev1 {
    color: #444;
    position: absolute;
    top: 100px;
    padding: 1em 2em;
    cursor: pointer;
    background: #CCC;
    border-radius: 5px;
    border-top: 1px solid #FFF;
    box-shadow: 0 5px 0 #999;
    transition: box-shadow 0.1s, top 0.1s;
}

.carousel-item-next1:hover, .carousel-item-prev1:hover {
    color: #000;
}

.carousel-item-next1:active, .carousel-item-prev1:active {
    top: 104px;
    box-shadow: 0 1px 0 #999;
}

.carousel-item-next1 {
    right: 5em;
}

.carousel-item-prev1 {
    left: 5em;
}

.bg-primary {
    background-color: #01488A;
}

.text-primary {
    color: #01488A;
}

/* Start of styling for the Gallery Banner */

.gallery-container { /* Added container for background styling */
    background-color: #D2D2D2;
    background-image: repeating-linear-gradient( to right, transparent 0 100px, #25283b22 100px 101px ), repeating-linear-gradient( to bottom, transparent 0 100px, #25283b22 100px 101px );
    position: relative; /* Needed for ::before positioning */
}

/* Modified .gallery-container::before to .gallery-bg */
.gallery-container .gallery-bg {
    position: absolute;
    width: min(1400px, 90vw);
    top: 10%;
    left: 50%;
    height: 90%;
    transform: translateX(-50%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    pointer-events: none;
}


.gallery-banner {
    width: 100% !important;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.gallery-banner .gallery-slider {
    position: absolute;
    width: 200px;
    height: 250px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: galleryAutoRun 20s linear infinite;
    z-index: 2;
}

@keyframes galleryAutoRun {
    from {
        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
    }

    to {
        transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
    }
}

.gallery-banner .gallery-slider .gallery-item {
    position: absolute;
    inset: 0 0 0 0;
    transform: rotateY(calc( (var(--gallery-position) - 1) * (360 / var(--gallery-quantity)) * 1deg)) translateZ(550px);
}

.gallery-banner .gallery-slider .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-banner .gallery-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    height: max-content;
    padding-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

    .gallery-banner .gallery-content h1 {
        font-family: 'ICA Rubrik';
        font-size: 16em;
        line-height: 1em;
        color: #25283B;
        position: relative;
    }

        .gallery-banner .gallery-content h1::after {
            position: absolute;
            inset: 0 0 0 0;
            content: attr(data-gallery-content);
            z-index: 2;
            -webkit-text-stroke: 2px #d2d2d2;
            color: transparent;
        }

    .gallery-banner .gallery-content .gallery-author {
        font-family: Poppins;
        text-align: left;
        max-width: 200px;
    }

    .gallery-banner .gallery-content h2 {
        font-size: 3em;
    }

    /* Removed background-image from .gallery-model */
    .gallery-banner .gallery-content .gallery-model {
        /* background-image: url(ZEGU-model.gif); REMOVED */
        width: 100%;
        height: 75vh;
        position: absolute;
        bottom: 0;
        left: 0;
        background-size: auto 130%;
        background-repeat: no-repeat;
        background-position: top center;
        z-index: 1;
    }

@media screen and (max-width: 1023px) {
    .gallery-banner .gallery-slider {
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }

        .gallery-banner .gallery-slider .gallery-item {
            transform: rotateY(calc( (var(--gallery-position) - 1) * (360 / var(--gallery-quantity)) * 1deg)) translateZ(300px);
        }

    .gallery-banner .gallery-content h1 {
        text-align: center;
        width: 100%;
        text-shadow: 0 10px 20px #000;
        font-size: 7em;
    }

    .gallery-banner .gallery-content .gallery-author {
        color: #fff;
        text-shadow: 0 10px 20px #000;
        z-index: 2;
        max-width: unset;
        width: 100%;
        text-align: center;
        padding: 0 30px;
    }
}

@media screen and (max-width: 767px) {
    .gallery-banner .gallery-slider {
        width: 100px;
        height: 150px;
        left: calc(50% - 50px);
    }

        .gallery-banner .gallery-slider .gallery-item {
            transform: rotateY(calc( (var(--gallery-position) - 1) * (360 / var(--gallery-quantity)) * 1deg)) translateZ(180px);
        }

    .gallery-banner .gallery-content h1 {
        font-size: 5em;
    }
}
.gallery-container {
    background: transparent !important;
}