:root {
    /* Color */
    --color-gray: rgba(0, 0, 0, 10%);
    --color-maroon: #570103;
    --color-nav: #d53134;
    --color-whitesmoke: #f8f8f6;
    --color-white: #fff;
    /* BorderRadius */
    --br-50: 50%;
    /* Font */
    --font-inter: Inter;
    /* FontSize */
    --fs-14: 14px;
    /* WidthHeights */
    --height-15: 15px;
    /* LineHeights */
    --lh-20: 20px;
    /* LetterSpacings */
    --ls-0_05: 0.05;
}
.desktop{
    display: unset;
}
.mobile{
    display: none !important;
}

.text-stroke {
    -webkit-text-stroke: 2px black; /* border color and width */
}

.pub-section-block {
    position: relative;
    margin: 0 0;
}

.pub-gallery-section {
    display: block;
    width: 100%;
}

.pub-featuers-section {
    display: block;
    width: 100%;
}

.pub-featuers-section-temp {
    display: block;
    height: 1000px;
    width: 100%;
    background-color: darkred;
}

.pub-overview-section {
    display: block;
    height: 1000px;
    width: 100%;
    background-color: aquamarine;
}



/* ############## Public Site PUB Start  ############### */
.pub1-page-image {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
}
.logo-header{
    height: 40px;
    width: auto;    
    object-fit: cover;    
}
.pub1-header-mobile{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(244 221 211, 0.15);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    padding: 5px;
}
.pub1-overlay {
    position: absolute; /* Positions the overlay relative to the viewport */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    top: 0;
    left: 0;
    /*z-index: 9999;*/ /* Ensures it sits on top of other content */
    display: flex; /* For centering content within the overlay */
    justify-content: center;
    align-items: center;
    color: white; /* Text color for overlay content */
}

.pub1-page-content {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 150px;
}

.pub1-center {
    display: flex;
    width: 100%;
    justify-content: center;
}

.pub1-title {
    font-size: 48px;
    font-family: "Assistant", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.2em
}


.pub1-navigation {
    position: absolute; /* Positions the overlay relative to the viewport */
    top: 30px;
    left: 40px;
    width: 170px;
    z-index: 1001;
}
/* Optional: Style for content within the overlay */
.pub1-overlay h2,
.pub1-overlay p {
    text-align: center;
}

.pub1-navigation a {
    color: unset;
    text-decoration: none;
}
/* nav box start*/

.pub1-vector-parent {
    width: 100%;
    row-gap: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: right;
    font-size: var(--fs-14);
    color: var(--color-whitesmoke);
    font-family: var(--font-inter);
}
.vector-icon{
     height: 40px;
    width: auto;
    object-fit: contain;
}
.pub1-vector-icon {
    position: relative;   
}

.pub1-frame-parent {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 25px 15px;
    background-color: rgba(90, 90, 90, 0.25);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
}

.pub1-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 40px;
}

.pub1-vector-div {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.05em;
    line-height: var(--lh-20);
    font-weight: 400;
    font-family: "Inter", sans-serif;
    font-size: large;
    /*-webkit-text-stroke: 1px black;*/ /* border color and width */
    text-shadow: 1px 1px 0 #444, -1px 1px 0 #444, 1px -1px 0 #444, -1px -1px 0 #444,
}

    .pub1-vector-div.active {
        color: var(--color-nav);
    }

.pub1-vector-group {
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 0px;
}

.pub1-frame-child {
    width: 0.5px;
    position: absolute;
    margin: 0 !important;
    top: 10.5px;
    left: 16.5px;
    height: 497px;
    object-fit: contain;
    z-index: 0;
}

.pub1-ellipse-parent {
    width: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 45px;
    z-index: 1;
    background: linear-gradient(to right, transparent 0%, transparent calc(50% - 2px), #fff 50%, transparent calc(50% + 2px), transparent 100%);
}

.pub1-frame-inner {
    align-self: stretch;
    position: relative;
    border-radius: var(--br-50);
    background-color: var(--color-whitesmoke);
    border: 1px solid var(--color-whitesmoke);
    box-sizing: border-box;
    height: var(--height-15);
    transform: rotate(90deg);
}

    .pub1-frame-inner.active {
        background-color: var(--color-nav);
        border: 1px solid var(--color-maroon);
    }
/* nav box end */
.text-box-title{
    display: block;    
    height: 107px;
    position: relative;
    font-size: 64px;
    letter-spacing: 0.15em;
    line-height: 78px;
    display: flex;
    font-family: Assistant;
    color: #580000;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.text-box-wrapper{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding-top: 30px;    
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;;
    font-weight: 200;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    line-height: 120%;
    word-spacing: 10px;
    max-width: 950px;
    color: #580000;
}
.pub1-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 30px;
    font-weight: 200;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    line-height: 120%;
    word-spacing: 10px;
    max-width: 950px;
    text-align: center;
}

.line {
  height: 2px;
  width:100%;
  background-color: #983535; 
  margin:auto;
}
/* ######### PUB Page 2 ################*/
.pub2-wireframes {
    width: 100%;
    position: relative;
    /*background-color: var(--color-whitesmoke);*/    
    flex-shrink: 0;
    align-items: flex-start;
    padding: 35px 0 35px 15px;
    box-sizing: border-box;
    text-align: left;
    color: var(--color-maroon);
    font-family: "Inter", sans-serif;
    font-size: 28px;
}

.pub2-parent {
    display: flex;
    align-items: center;
    gap: 80px;
}

.pub2-div {
    width: 290px;
    position: relative;
    letter-spacing: 0.01em;
    line-height: 40px;
    display: inline-block;
    flex-shrink: 0;
    padding-left: 15px;
    padding-right: 15px;
}

.pub2-p {
    margin: 0;
    margin-bottom: 0px;
    font-weight: 300;
    font-size: 28px;
    font-variant: unicase;
}

.pub2-p2 {
    margin: 0;
    font-weight: 200;
    font-size: 22px;
}

.scroll-x {
    display: flex; /* arrange items in a row */
    overflow-x: auto; /* enable horizontal scroll */
    overflow-y: hidden; /* hide vertical scroll */
    padding: 10px;
    scroll-behavior: smooth; /* smooth scroll */
    cursor: grab; /* indicate draggable */
}

    .scroll-x::-webkit-scrollbar {
        display: none;
    }
    /* Active drag style */
    .scroll-x.active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

.scroll-x-item {
    min-width: 200px;
    flex: 0 0 auto; /* prevent shrinking */
    padding: 40px 20px;
    user-select: none; /* prevent text selection while dragging */
}

.pub2-features {
    width: 100%;
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
    gap: 60px;
    text-align: left;
    font-size: 62px;
}
.pub2-div1{

}
.pub2-div2 {
    width: 407px;
    border-radius: 30px;    
    box-sizing: border-box;
    height: 699px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 0 60px 30px;
    transition: width 0.5s ease;    
    /*
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    */
    background-color:#580000;
    color:#fff;
    /*background: rgba(255, 255, 255, 0.27);*/
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.79);


    /*background-color: var(--color-whitesmoke);
    border: 3px solid var(--color-maroon);*/
}

    .pub2-div2.border-none {
        border: none;
        justify-content: center;
    }

    .pub2-div2.active {
        width: 900px;
    }

.pub2-frame-parent {
    align-self: stretch;
    position: relative;
    height: 579px;
}

.pub2-frame-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 272px;
    height: 579px;
}

.pub2-group {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 272.5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-48);
}

.pub2-div3 {
    align-self: stretch;
    position: relative;
    line-height: 80px;
    font-weight: 400;
    display: inline-block;
    height: 480px;
    flex-shrink: 0;
}

.pub2-frame-group {
    border: 1px solid #fff;
    border-radius: 10px ;
    display: flex;
    align-items: center;
    gap: 2px;
    text-align: justify;
    font-size: 26px;
    font-weight: 200;;
    color: var(--color-white);
}

.pub2-button-wrapper {
    width: 182px;    
    border-right: 1px solid #fff;
    
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 34px;
    box-sizing: border-box;
}

.pub-button {
    position: relative;
    letter-spacing: 0.15em;
    line-height: 50px;
    font-weight: 300;
}

.pub2-frame-child {
    width: 58px;
    position: relative;
    border-radius: 0 10px 10px 0;
    height: 51px;
}

.pub2-div4 {
    position: absolute;
    top: 0px;
    left: 402px;
    font-size: 32px;
    letter-spacing: 0.01em;
    line-height: 50px;
    font-weight: 300;
    text-align: left;
    display: inline-block;
    width: 414px;
}

.pub2-polygon-icon {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 51px;
    object-fit: contain;
}
.pub2-polygon-icon.active{
    transform: rotate(180deg);
    padding-right: 0px;
    padding-left: 5px;
}
/* ############### PUB 3 #################*/
.pub-3-material {
    width: 100%;
    position: relative;
}
.featuers-pic-box{
    width: 100%;
    position: relative;
}
.blink {
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    50% {
        opacity: 0.5;
    }
}

.blink:hover {
    animation: none;
    opacity: 1;
}

.pub-3-features {
    position: absolute;
    width: 37px;
    height: 37px;
}

    .pub-3-features:hover .blink {
        animation: none;
        opacity: 1;
        border: #fff solid 1px;
    }

    .pub-3-features:hover .pub-3-features-item {
        background-color: #f3efef;
    }

    .pub-3-features.active .blink {
        animation: none;
        opacity: 1;
        border: #fff solid 1px;
    }

    .pub-3-features.active .pub-3-features-item {
        background-color: #f3efef;
    }

.pub-3-f1 {
    top: 50%;
    left: 29%;
}

.pub-3-f2 {
    top: 35%;
    left: 62.3%;
}

.pub-3-f3 {
    top: 53%;
    left: 41%;
}

.pub-3-f4 {
    top:23.5% ;
    left: 43%;
}

.pub-3-f5 {
    top: 74%;
    left: 47%;
}

.pub-3-f6 {
    top: 32%;
    left: 58%;
}

.pub-3-f7 {
    top:26%;
    left: 50%;
}

.pub-3-features-circle-out {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    background-color: rgb(53 47 136 / 88%);
    width: 37px;
    height: 37px;
}

.pub-3-features-circle-in {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    background-color:#b5bdeb;
    width: 17px;
    height: 17px;
}


/* PUB 3 OPTION 1*/
.pub-3-opt {
    width: 24%;
    position: absolute;
    right: 0;
    top: 0;
    height: 98%;
    max-height: 1200px;
    text-align: left;
    font-size: 24px;
    color: #f9fcfa;
    font-family: Assistant;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 80px;
    gap: 40px;
    margin: 10px;
}

.pub-3-opt-glass {
    background-color: rgba(90, 50, 40, 0.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
}

.pub3-opt-close-btn {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    cursor: pointer;
    border: #ccc 1px solid;
    box-shadow: 4px 1px 6px 0 #888;
}

    /* Create the X using pseudo-elements */
    .pub3-opt-close-btn::before,
    .pub3-opt-close-btn::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2px;
        height: 24px;
        background-color: #ccc;
        transform-origin: center;
    }

    .pub3-opt-close-btn::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .pub3-opt-close-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Hover effect */
    .pub3-opt-close-btn:hover::before,
    .pub3-opt-close-btn:hover::after {
        background-color: red;
    }



.pub3-opt-pic {
    width: 276px;
    height: 276px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

.pub3-opt-header {
    font-size: 32px;
    letter-spacing: 0.01em;
    line-height: 50px;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.pub3-opt-info {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    gap: 20px;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    overflow: scroll;
    position: relative;
    display: flex;
}

/* ############### PUB 3 #################*/


.carousel{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    gap: 4vw;
    padding-left: 0;
    overflow-x: auto;
    /*scroll-behavior: smooth;*/
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;          
    anchor-name: --carousel;
    scroll-marker-group: after;
}
.card{        
    border: 0;
    flex: 0 0 100%;
    flex-direction: column;
    height: auto;
    scroll-snap-align: start;
    text-align: center;
    /*aspect-ratio: 5/3;  for image resize*/            
    padding: 1em;
    align-content: center;
    margin-left: 70px;
    margin-right: 70px;
}
.card img{
    border: 3px outset #444;
    border-radius: 16px;
    padding: 2px;
    box-shadow: 0 4px 10px 0 #444;    
}
.card-title{
    font-weight: 600;
    font-size: x-large;
    text-align: center;
}
.carousel::scroll-button(*) {
    border: 0;       
    font-size: 2rem;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding-bottom: .1em;
    color: #fff;
    background-color: #580000;  
    cursor: pointer;
}
.carousel::scroll-button(*):hover,
.carousel::scroll-button(*):focus {
  opacity: 1;
}

.carousel::scroll-button(*):active {
  translate: 1px 1px;
}

.carousel::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}
.carousel::scroll-button(left) {
  content: "◄";
}

.carousel::scroll-button(right) {
  content: "►";
}
/*
.carousel {
  anchor-name: --my-carousel;
}
*/
.carousel::scroll-button(*) {
  position: absolute;
  position-anchor: --carousel;
}
.carousel::scroll-button(*) {
  align-self: anchor-center;
}
.carousel::scroll-button(left) {
  right: calc(anchor(left) + 1px);
}

.carousel::scroll-button(right) {
  left: calc(anchor(right) + 1px);
}


.carousel::scroll-marker-group{
    display: flex;
    justify-content: center;
    gap: .5em;
}
.card::scroll-marker{
    content: '';
    height: 1em;
    width: 1em;
    background-color:#444;
    border-radius: 50%;
    margin-top: 10px;
}
.card::scroll-marker:target-current{
    background-color:#580000
}
.carousel::-webkit-scrollbar{
    display: none;
}
/* ############### PUB 4 #################*/


.carousel-images{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    max-height: 600px;
    gap: 4vw;
    padding-left: 0;
    overflow-x: auto;
    /*scroll-behavior: smooth;*/
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;          
    anchor-name: --carousel-image;
    scroll-marker-group: after;
    box-shadow: 4px 5px 11px 1px #aaa;
    border-radius: 16px;
}
.card-image{        
    border: 0;
    image-rendering: crisp-edges;
    max-width: 900px;
    height: auto;
    object-fit:contain;
    flex: 0 0 100%;
    flex-direction: column;
    scroll-snap-align: start;
    text-align: center;
    /*aspect-ratio: 5/3;     */
    align-content: center;
    background-color: #580000;
}

.carousel-images::scroll-button(*) {
    border: 0;       
    font-size: 2rem;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding-bottom: .1em;
    color: #fff;
    background-color: #580000;  
    cursor: pointer;
}
.carousel-images::scroll-button(*):hover,
.carousel-images::scroll-button(*):focus {
  opacity: 1;
}

.carousel-images::scroll-button(*):active {
  translate: 1px 1px;
}

.carousel-images::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}
.carousel-images::scroll-button(left) {
  content: "◄";
}

.carousel-images::scroll-button(right) {
  content: "►";
}
.carousel-images::scroll-button(*) {
  position: absolute;
  position-anchor: --carousel-image;
}
.carousel-images::scroll-button(*) {
  align-self: anchor-center;
}
.carousel-images::scroll-button(left) {
  right: calc(anchor(left) + 1px);
}

.carousel-images::scroll-button(right) {
  left: calc(anchor(right) + 1px);
}
.carousel-images::scroll-marker-group{
    display: flex;
    justify-content: center;
    gap: .5em;
}
.carousel-images::-webkit-scrollbar{
    display: none;
}
.card-image::scroll-marker{
    content: '';
    height: 1em;
    width: 1em;
    background-color:#444;
    border-radius: 50%;
    margin-top: 10px;
}
.card-image::scroll-marker:target-current{
    background-color:#580000
}

/*################## SCROLL BAR START ############################*/
@media (min-width:500px) {
.scroll-content {
    /*
    width: 600px;
    height: 400px;
    */
    margin: 0;
    padding: 0;
    background: white;
    position: relative;
    scrollbar-gutter: auto;
}

.scroll-content-container {
    /*width: 100%;*/
    height: 100%;
    border: 1px solid black;
    overflow: scroll;
}

.scroll-content::after {
    content: "";
    position: absolute;
    width: calc(100% - 6px); /*6px difference from your custom scrollers (1px is from the border)*/
    height: 20px;
    bottom: 6px; /*6px difference from your custom scrollers (1px is from the border)*/
    left: 0;
    z-index: 1;
}

.scroll-inner {
    height: 220px;
    background-color: red;
    transform: translateZ(0);
}

::-webkit-scrollbar {
    width: 18px;
    height: 12px;
    display: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
}
}
/*################## SCROLL BAR END ############################*/

/*######### FOTTER ######################*/
footer{
    margin-top: 35px;    
    background-color: #580000;
    color: #fff;    
    display: flex;    
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    font-family: Assistant;
    font-size: 20px;;
}
.fotter-about{    
    padding: 25px;
    display: flex;
    flex-direction:row;    
    justify-content: space-between;
}
.fotter-about-info{
    padding: 35px;
    max-width: 400px;
    text-align: left;
}
.footer-privacy{
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;;
}
.fotter-emal a{
    color: #fff;
}

/* ###############  Gallery Start ############### */
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.image-gallery-slides {
  /*display: none;*/
    box-shadow: 4px 5px 11px 1px #aaa;
    border-radius: 16px;
}
.image-gallery-slides img {
  /*display: none;*/    
    border-radius: 16px;
    object-fit: contain;
    max-height: 800px;
}
/* Next & previous buttons */
.gallery-prev, .gallery-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: 200;
  font-size: 32px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.4);
}
.screenshot-gallery-btn{
     background-color: rgba(26,26,26,0.6);
     top:60%
}
/* Position the "next button" to the right */
.gallery-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.gallery-prev:hover, .gallery-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  
}

/* Caption text */
.image-gallery-text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.image-gallery-numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.gallery-dot {
  cursor: pointer;
  height: 17px;
  width: 17px;
  margin: 0 2px;
  background-color: #888;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.gallery-dot.active, .gallery-dot:hover {
  background-color: #580000;
}

.gallery-dot-container{
    text-align: center;
    margin-top: 20px;
}

/* Fading animation */
.fade-image-gallery {  
  animation-name: fade-image-gallery-animation;
  animation-duration: 1.5s;  
}

@keyframes fade-image-gallery-animation {
  from {opacity: .9}
  to {opacity: 1}
}

/* Fading animation */
.fade-screenshot-gallery {  
  animation-name: fade-screenshot-gallery-animation;
  animation-duration: 1.5s;  
}

@keyframes fade-screenshot-gallery-animation {
  from {opacity: .9}
  to {opacity: 1}
}
.screenshot-gallery-slides .pub1-text{
    text-align: center;
}
.screenshot-gallery-slides img{
    border: 3px outset #444;
    border-radius: 16px;
    padding: 2px;
    box-shadow: 0 4px 10px 0 #444;
}
/* ###############  Gallery End ############### */

@media (max-width: 1200px) {
    .pub1-page-image {
        max-height: 820px;
    }

    .pub-3-opt {
        max-height: 790px;
        gap: 20px;
    }

    .pub3-opt-header {
        font-size: 28px;
    }

    .pub3-opt-info {
        font-size: 18px;
        gap: 20px;
    }


    .pub2-div2 {
        width: 307px;
        height: 700px;
        padding: 20px 0 20px 10px;
    }

    .pub2-features {
        font-size: 52px;
        gap: 40px;
    }

    .pub2-div3 {
        height: 540px;
    }

    .pub2-parent {
        gap: 30px;
    }

    .pub2-div2.active {
        width: 500px;
    }

    .pub2-div3.active {
        display: none;
    }

    .pub2-frame-group.active {
        position: absolute;
        top: 600px;
        left: 0px;
    }

    .pub2-div4.active {
        left: 20px;
    }

    .pub1-text {
        padding-top: 15px;
    }

    .pub2-wireframes {
        min-height: 820px;
    }

    .pub-section-block {
        min-height: 820px;
    }
     .image-gallery-slides img {
    /*display: none;*/    
        border-radius: unset;
        max-height: 600px;
    }
    .gallery-prev:hover, .gallery-next:hover {
    background-color: rgba(0, 0, 0, 0.4);
  
    }
}
@media (max-width: 500px) {
    .desktop{
        display: none;
    }
    .mobile{
        display: block !important;
    }


    .pub-3-f1 {
        top: 45%;
        left: 20%;
    }

    .pub-3-f2 {
        top: 37%;
        left: 59%;
    }

    .pub-3-f3 {
        top: 50%;
        left: 34%;
    }

    .pub-3-f4 {
        top:15% ;
        left: 35%;
    }

    .pub-3-f5 {
        top: 74%;
        left: 47%;
    }

    .pub-3-f6 {
        top: 32%;
        left: 30%;
    }

    .pub-3-f7 {
        top:24%;
        left: 44%;
    }

    .logo-header{
        height: 25px;
        width: auto;    
        object-fit: cover;    
    }
    .pub1-nav-link-home{
        position: absolute;
        top:25px;
        left: 25px;
        color: #580000;
    }
    /* PUB 1*/
    .pub1-title{
        font-size: 20px;
        margin-bottom: 250px;;
    }
    .pub2-div{
        width: 100%;
        text-align: center;
    }
    .pub2-wireframes{
        padding: 15px 0 15px 15px;
        min-height: unset;
    }
    .pub2-div3{
        height: 500px;
    }
    .pub2-div4{
        font-size: 24px;
        width: 314px;
    }
    .pub2-div2 {
        height: 600px;
    }
    .pub2-frame-group.active {        
        top: 500px;
    }
    .pub2-frame-group {        
        top: 500px;
    }
    .pub2-div2.active {
            width: 380px;
        }
    .pub-3-opt {
        width: unset;
        position: relative;
        max-height: unset;
        height: 100%;
    }
    .pub3-opt-close-btn{
     display: none;   
    }
    .text-box-title{
        font-size: 28px;
        font-weight: 600;
    }
    .pub-3-opt-glass{
        background-color:#580000;
        box-shadow: unset;
        border: 1px solid #333;
        border-radius: unset;
    }
    .pub-section-block{
        min-height: unset;
    }
    .carousel-images
    {
        max-width: 410px;
        border: unset;
        border-radius: unset;
        max-height: unset;
    }
    .card-image
    {
        max-width: 410px;
        height: 273px;
        background-color: unset;
    }
    .carousel::scroll-button(left) {
        right: calc(anchor(left) -70px);
        display: none;
        }

    .carousel::scroll-button(right) {
    left: calc(anchor(right) -70px);
    display: none;
    }
    .carousel-images::scroll-button(left) {
    right: calc(anchor(left) -70px);
    display: none;
    }

    .carousel-images::scroll-button(right) {
        left: calc(anchor(right) -70px);
        display: none;
    }

    .image-gallery-slides {
    
    box-shadow: 4px 5px 11px 1px #aaa;
    border-radius: unset;
    }

    .image-gallery-slides img {
    /*display: none;*/    
        border-radius: unset;
        max-height: 600px;
    }
    .gallery-prev:hover, .gallery-next:hover {
    background-color: rgba(0, 0, 0, 0.4);
  
    }

}