.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-color-primary);
    padding-bottom: 0;
}
.main .container-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
}

.main .container-1 .layer-1 {
            position: absolute;
            bottom: 0;
            width: 100%;
            transform: translateY(2px);
            background-image: url('svg-bg/fixprice-1.svg');
        }
    

.main .container-2 {
        display: grid;
        justify-content: center;
        align-items: center;
        max-width: 1500px;
        width: 100%;
        row-gap: 6rem;
}
.main .container-2 .header {
            text-align: center;
            width: 100%;
            text-align: center;
}
.main .container-2 .header h2 {
                
                align-items: center;
                position: relative;
                
                margin-bottom: .5rem;
}
.main .container-2 .header h2 img {
                    display: none;
                    height: 50px;
                    
                }
            

.main .container-2 .header .vr {
                margin: 2rem auto 2rem;
                opacity: 20%;
                width: 100% !important;
            }

            
        

.main .container-2 .vc {
            display: none;
            opacity: 20%;
        }
.main .container-2 .tab-o {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            padding: 0 2rem;
}
.main .container-2 .tab-o .body .work-section {
                    display: flex;
                    text-align: start;
                    justify-content: start;
                    align-items: center;
                    column-gap: 1rem;
                    margin-bottom: 1rem;
}
.main .container-2 .tab-o .body .work-section label {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 40px;
                        height:40px;
                        min-width: 40px;
                        background: var(--bg-color-secondary);
                        border: none;
                        border-radius: .5rem; 
                    }
.main .container-2 .tab-o .body .work-section span {
                        text-align: center;
                        margin: 12px;
                    }
                

.main .container-2 .tab-o .body .element {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
}
.main .container-2 .tab-o .body .element .icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 1rem;
}
.main .container-2 .tab-o .body .element .icon img {
                            width: 4.5rem;
                        }
                    

.main .container-2 .tab-o .body .element a {
                        text-decoration: none;
                    }

.main .container-2 .tab-o .body .element a:visited {
                        color: #04b;
                        
                    }
                    


.main .container-2 .tab-o .gap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
               
                row-gap: 1rem;
}
    @media (min-width: 1050px) {
      .main .container-2 {
            grid-template-columns: 50% auto 50%;
            align-items: start;
            padding: 0 2rem;
            margin-top: 4rem;
      }
      .main .container-2 .header {
                margin-top: 0;
                margin-bottom: 3rem;
                text-align: start;
      }
      .main .container-2 .header .vr {
                    display: none;
                }
      .main .container-2 .header h2 {
                    display: flex;
                    column-gap: 1.5rem;
      }
      .main .container-2 .header h2 img {
                        display: block;
                    }
                
            

      .main .container-2 .vc {
                display: block;
            }

      .main .container-2 .tab-o {
                align-items: start;
                
            }
          }

.main .container-3 {
        width: 100%;
        margin-top: 6rem;
}
.main .container-3 .header {
            text-align: center;
            margin-bottom: 1rem;
        }
.main .container-3 .tab-bar {
            margin: 0 auto;
            
            max-width: 800px;
}
.main .container-3 .tab-bar .media-scroller {
                
                display: flex;
                margin: 0 1rem;
                max-width: fit-content;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                overscroll-behavior-inline: contain;
                
                position: relative;
}
.main .container-3 .tab-bar .media-scroller .tab {
                    display: inline-flex;
                    white-space: nowrap;
                    column-gap: 2rem;
                    overflow-x: scroll;
                    max-width: 800px;
                    user-select: none;
                    padding: 1rem 1rem;
                    cursor: grab;
}

.main .container-3 .tab-bar .media-scroller .tab.dragging {
    cursor: grabbing;
}
.main .container-3 .tab-bar .media-scroller .tab .left-btn, .right-btn {
                        fill: white;
                        position: absolute;
                        cursor: pointer;
                        width: 4rem;
                        background: rgba(105, 105, 105, 0.5);
                        border-radius: 50%;
                        backdrop-filter: blur(5px);
                        -webkit-backdrop-filter: blur(5px);
                        display: none;
                        transform: translateY(-50%);
                        top:calc(50% - 20px); 
                        transition: .3s ease-in-out;
                    }
                    
                        
                        
                    
.main .container-3 .tab-bar .media-scroller .tab .left-btn {
                        left: 0;
                         
                        display: flex;
                        opacity: 0;
                        visibility: hidden;
                        
                        
                    }
.main .container-3 .tab-bar .media-scroller .tab .left-bg {
                        position: absolute;
                        left: -1rem;
                        width: 2rem;
                        height: 100%;
                        background: linear-gradient(to left, transparent 0%, white 50%);
                    }
.main .container-3 .tab-bar .media-scroller .tab .right-btn {
                        right: 0;
                        display: flex;
                        opacity: 0;
                        visibility: hidden;
}
.main .container-3 .tab-bar .media-scroller .tab .right-btn svg {
                            transform: translate(-2rem, -25%);
                        
                    }

.main .container-3 .tab-bar .media-scroller .tab .right-bg {
                        position: absolute;
                        right: -1rem;
                        width: 2rem;
                        height: 100%;
                        background: linear-gradient(to right, transparent 0%, white 50%);
                    }

.main .container-3 .tab-bar .media-scroller .tab .left-btn:hover {
                        background: rgba(88, 88, 88, 0.726);
                        scale: 1.05;
                    }

.main .container-3 .tab-bar .media-scroller .tab .right-btn:hover {
                        background: rgba(88, 88, 88, 0.726);
                        scale: 1.05;
                    }

.main .container-3 .tab-bar .media-scroller .tab .element {
                        scroll-snap-align: start;
                        display: flex;
                        position: relative;
                        flex-direction: column;
                        
                        text-decoration: none;
                        min-width: 100%;
                        
                        transition: .2s ease-in-out;
}
.main .container-3 .tab-bar .media-scroller .tab .element img {
                            border-radius: 2rem;
                            overflow: hidden;
                            width: 100%;
                            -webkit-user-drag: none;
                            object-fit: cover;
                            aspect-ratio: 3/2;
                        }
                    
.main .container-3 .tab-bar .media-scroller .tab .element .description {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-top: .5rem;



                    
                }

               

.main .container-3 .tab-bar .media-scroller .tab::-webkit-scrollbar {
                    display: none;
                }
            

.main .container-3 .tab-bar .media-scroller .snaps-inline {
                scroll-snap-type: inline mandatory;
                scroll-padding-inline-start: 1rem;
            }

        

        @media (min-width: 1000px) {
          .main .container-3 .tab-bar .media-scroller .tab .element img {
                                aspect-ratio: 3/2;

          }
        }

        @media (min-width:1630px) {
          .main .container-3 .tab-bar .media-scroller .tab .left-btn, .right-btn {
                            width: 5rem;
                        }

          .main .container-3 .tab-bar .media-scroller .tab .left-btn {
                            left: -1.5rem
                        }

          .main .container-3 .tab-bar .media-scroller .tab .right-btn {
                            right: -1.5rem;
                        }

                        


}