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





.main .container-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        
    }
@media (min-width: 800px) {
    .main .container-1 {
        background-attachment: fixed;
    }
}
   

.main .container-2 {
    position: sticky;
        display: grid;
        justify-content: center;
        align-items: center;
        max-width: 1500px;
        width: 100%;
}
.main .container-2 .header {
            text-align: center;
            width: 100%;
            text-align: center;
}

.main .container-2 .header h1 {
    margin-bottom: .5rem;
}

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

.main .container-2 .tab-1 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 6rem;
            padding: 0 2rem;
            
}
.main .container-2 .tab-1 .body {
                display: flex;
                column-gap: 4rem;
                row-gap: 1rem;
                justify-content: center;
                flex-wrap: wrap;
                width: 100%;
                max-width: 1200px;
}
.main .container-2 .tab-1 .body .element {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    border-radius: .5rem;
                    padding: .5rem 1rem;
                    box-shadow: rgba(0, 0, 0, .1) 0px 5px 8px;
                    border: 1px solid var(--border-color-05);
                    column-gap: 1rem;
                    
}
.main .container-2 .tab-1 .body .element .old {
                        transform: translateX(100%);
                        
                    }
                    
.main .container-2 .tab-1 .body .element svg {
                        width: 2.5rem;
                        opacity: 0;
                        visibility: hidden;
                        
                    }
                    
.main .container-2 .tab-1 .body .element .new {
                        opacity: 0;
                        
                        background: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
                        -webkit-background-clip: text;
                        background-clip: text;
                        color: transparent
                    }

.main .container-2 .vc {
            display: none;
            opacity: 20%;
        }

.main .container-2 .tab-2 {
            padding: 0 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
}
.main .container-2 .tab-2 .body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
               
                row-gap: 1rem;
}
.main .container-2 .tab-2 .element {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
}
.main .container-2 .tab-2 .element .icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 1rem;
                        box-shadow: none;
}
.main .container-2 .tab-2 .element .icon img {
                            width: 4.5rem;
                        }
.main .container-2 .tab-2 .element .icon svg {
                            width: 4.5rem;
                        }                    

.main .container-2 .tab-2 .element a {
                        text-decoration: none;
                    }
.main .container-2 .tab-2 .element a:visited {
                        color: #04b;

        }
    

    @media (min-width: 1400px) {

      .main .container-2 {
            grid-template-columns: 50% auto 50%;
            align-items: start;
            
            padding: 1rem 2rem 0;
      }
      .main .container-2 .header {
                text-align: start;
                margin-bottom: 3rem;
      }
      .main .container-2 .header .vr {
                    display: none;
                }
            

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

      .main .container-2 .tab-1 {
                align-items: start;
      }
      .main .container-2 .tab-1 .body {
                    max-width: 600px;
                    justify-content: start;
                }
            

      
    }

    @media (min-width: 1400px) and (min-height: 1025px) {
      .main .container-2 .tab-2 .body .element:nth-child(1) {
                    animation-delay: .4s;
                }
      .main .container-2 .tab-2 .body .element:nth-child(2) {
                    animation-delay: .6s;
                }
      .main .container-2 .tab-2 .body .element:nth-child(3) {
                    animation-delay: .8s;
                }
      .main .container-2 .tab-2 .body .element:nth-child(4) {
                    animation-delay: 1s;
                }
            
        
    }

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

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

            
        }

.main .container-3 .vc {
            display: none;
            opacity: 20%;
        }
.main .container-3 .tab {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            padding: 0 2rem;
}

.main .container-3 .tab .body .work-section {
                    display: flex;
                    text-align: start;
                    justify-content: start;
                    align-items: center;
                    column-gap: 1rem;
                    margin-bottom: 1rem;
}
.main .container-3 .tab .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-3 .tab .body .work-section span {
                        text-align: center;
                        margin: 12px;

    }
    @media (min-width: 1050px) {
      .main .container-3 {
            grid-template-columns: 50% auto 50%;
            align-items: start;
            padding: 0 2rem;
            margin-top: 8rem;
      }
      .main .container-3 .header {
                margin-top: 0;
                margin-bottom: 3rem;
                text-align: start;
      }
      .main .container-3 .header .vr {
                    display: none;
                }
      .main .container-3 .header h2 {
                    display: flex;
                    column-gap: 1.5rem;
      }
      .main .container-3 .header h2 svg {
                        display: block;
                    }
                
            

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

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

    }

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