.Distributor {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline: auto;
    padding-block: 80px;
    .left {
        width: 50%;

        h1 {
            color: var(--primary);
            font-size: var(--titleFsize);
            letter-spacing: 4px;
        }

        h4 {
            font-weight: bold;
            font-size: 46px;
        }

        .word_container {
            display: flex;
            line-height: 40px;

            div:nth-child(1) {
                margin-right: 40px;
            }
        }

        .button_container {
            width: 150px;
        }
    }

    .right {
        width: 50%;

        img {
            width: 96%;
        }
    }
}

.Distributors_page{
    width: 90%;
    display: flex;align-items: center;flex-direction: column;
    margin-inline: auto;
    padding-block: 20px 80px;
    .header_link{
        width: 100% !important;
    }
    .top {
        width: 100%;
        @include Flex;
        img{
            width: 100%;
        }

    }

    .bottom {
        @include Flex; flex-direction: column;
        width: 100%;
        h1 {
            padding-block: 40px;
            color: var(--primary);
            font-size: var(--titleFsize);
            letter-spacing: 4px;
        }

        h4 {
            font-weight: bold;
            font-size: 46px;
        }

        .distributor_collaps{
            width: 40%;
            border: 0;
            box-shadow: 0 !important;
            background: inherit !important;
            .collaps_children{
                @include Flex; flex-direction: column;
                text-align: center ;
                
                h1{
                    margin: 0;
                    padding-bottom: 30px;
                    font-size: 20px;
                    color: var(--primary);
                }
                p{
                    padding-bottom: 30px;
                    font-size: 24px
                }
                svg{
                    color: var(--secondary);
                    font-size: 30px;
                }

            }
        }
    }
    
    .ant-collapse [class^="ant-collapse"],
    .ant-collapse [class*=" ant-collapse"] {
    border: 0 !important;
    }
    
    .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
      font-size: max(20px,1.8vw);
      font-weight: 500;
    //   width: 10px !important;
    }
    .ant-collapse-item{
        @include Flex; flex-direction: column;
    
    }
    .ant-collapse-header{
        margin-block: 30px;
        width: 40%;
    }
    .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
      font-size: 1.7vw;
    }
    
    .ant-collapse .ant-collapse-content {
      p {
        font-size: 25px;
        color: var(--text);
        margin-bottom: 0;
      }
    }
    
    .label-active {
      color: var(--primary);
      transition: ease-in-out .4s;
    }
    .ant-collapse>.ant-collapse-item >.ant-collapse-header{
        @include Flex; 
    }
    
    .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text{
        text-align: center;
    }
}

@media screen and (max-width:800px) {
    .Distributor {
        width: 90%;
        padding-block: 20px;
        flex-direction: column;
        .left,
        .right{
            @include Flex; flex-direction: column;
            width: 90%;
            margin-inline: auto;
            margin-bottom: 20px;
            h1 {
                font-size: 14px;
            }

            h4 {
                font-size: 18px;
            }

            .button_container {
                width: 150px;
            }
        }
    
        .right {
            img {
                width: 100%;
            }
        }
    }


    .Distributors_page{
        width: 90%;
        padding-block: 0px 50px;
        .bottom {
            h1 {
                padding-block: 30px;
                font-size: 16px;
            }
            h4 {
                font-size: 27px;
            }
    
            .distributor_collaps{
                width: 70%;
                .collaps_children{
                    h1{
                        padding-bottom: 20px !important;
                        font-size: 16px;
                    }
                    p{
                        padding-bottom: 20px;
                        font-size: 18px
                    }
                    svg{
                        color: var(--secondary);
                        font-size: 24px;
                    }
    
                }
            }
        }
        
        .ant-collapse [class^="ant-collapse"],
        .ant-collapse [class*=" ant-collapse"] {
            border: 0 !important;
        }
        
        .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
          font-size: 18px !important;
          font-weight: 500;
        //   width: 1px !important;
        }
        .ant-collapse-item{
            @include Flex; flex-direction: column;
        
        }
        .ant-collapse-header{
            margin-block: 10px;
            width: 20%;
        }
        .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
          font-size: 15px;
        }
        
        .ant-collapse .ant-collapse-content {
          p {
            font-size: 1.4vw;
            color: var(--text);
            margin-bottom: 0;
          }
        }
        
        .label-active {
          color: var(--primary);
          transition: ease-in-out .4s;
        }
        .ant-collapse>.ant-collapse-item >.ant-collapse-header{
            @include Flex; 
        }
        
        .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text{
            text-align: center;
        }
    }
    
}