.containerproduct {
    
    display: flex;
    justify-content: center;
    
    margin-top: 2rem;
     
   
    flex-wrap: wrap; /* Ensure wrapping on smaller screens */
    
}



/* Base layout for large screens (min-width: 992px) */
.left-div {
    flex: 0 0 60%;
    margin-left: 10rem;
   
}

.right-div {
    flex: 0 0 30%;
   
    margin-right: 10rem;
    max-width: 450px;
}

/* Small screens (max-width: 576px) */
@media (max-width: 576px) {
    .container {
        flex-direction: column;
        
    }

    .left-div, .right-div {
        flex: 0 0 100%;
        margin-bottom: 20px;
        margin: 0rem;
    }
}

/* Medium screens (min-width: 768px and max-width: 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        flex-direction: row;
         /* Adjust gap for medium screens */
       
    }

    .left-div {
        flex: 0 0 65%; /* Adjust width for medium screens */
        margin: 0rem;
    }

    .right-div {
        flex: 0 0 30%;
        margin: 0rem;
    }
}

/* Large screens (min-width: 992px) */
@media (min-width: 992px) {
    .container {
        flex-direction: row;
       
        
    }   

    .left-div {
        flex: 0 0 60%;
        margin: 0rem;
    }

    .right-div {
        flex: 0 0 30%;
        margin: 0rem;
        max-width: 450px;
    }
}

.containersmr {
        
        align-items: center;
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 0;

        margin: 20px;
        box-shadow:  0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    }
      .product-container {
        display: flex;
        align-items: center;
       
        padding: 20px;
        
        
    }
    .step-number-deact {
        background-color: #c9c9c9;
        color: #ee7710;
       
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-right: 10px;
    }
    .login-info {
        flex-direction: column;
        flex-grow: 1;
        padding: 20px;
        
     
    }
    .login-info .login-header {
        display: flex;
        align-items: center;
    }
    .login-info .login-text {
        color: #ee7710;
        font-size: 14px;
        margin-right: 5px;
    }
    .login-info .check-icon {
        color: #ee7710;
        font-size: 14px;
        margin-right: 10px;
    }
    .user-info {
        font-weight: bold;
        font-size: 16px;
        margin-top: -10px;
        
    }
 
    
   .headeract {
        background-color: #ee7710;
        color: #fff;
        padding: 10px 20px;
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    .headeract span {
        margin-right: 10px;
    }
    .headeract .title {
        flex-grow: 1;
    }
    .headerdeact {
        
        color: #c9c9c9;
        padding: 10px 20px;
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    .headerdeact span {
        margin-right: 10px;
    }
    .headerdeact .title {
        flex-grow: 1;
    }
    
    .address-section {
        padding: 20px;
    }
    .address-item {
        border-bottom: 1px solid #ddd;
        
        display: flex;
        align-items: center;
    }
    .address-item:last-child {
        border-bottom: none;
    }
    
   
    .address-item .details .name {
        font-weight: bold;
        font-size: 16px;
    }
  
    .address-item .details .phone {
        font-weight: bold;
        margin-left: 10px;
    }
    .address-item .details .address {
        margin-top: 5px;
        font-size: 14px;
    }
    .address-item .details .postal-code {
        font-weight: bold;
    }
    .headerdeact .edit {
        color: #ee7710;
        font-weight: bold;
        cursor: pointer;
  
        
    }
 .step-number {
        background-color: #f0f4ff;
        color:#ee7710;
       
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-right: 10px;
    }
    .check-icon {
        color: #1a73e8;
        font-size: 14px;
        margin-left: 4px;
    }
    .check-icon-deact {
        color: #ee7710;
        font-size: 14px;
        margin-left: 4px;
        display:none;
    }
     
    .product-image {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }
    .product-details {
        flex-grow: 1;
    }
    .product-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .product-price {
        color: #888;
        margin-bottom: 10px;
    }
    .quantity-controls {
        display: flex;
        align-items: center;
    }
   
    .quantity-controls input {
        width: 15px;
        height: 15px;
        text-align: center;
        border: 1px solid #ddd;
        margin: 0 5px;
    }
     .login-container {
        display: flex;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 10px;
        
    }
    .login-form {
        text-align: center;
        margin-right: 20px;
    }
    .login-form h2 {
        margin-bottom: 20px;
        font-size: 18px;
        color: #333333;
    }
    .input-group {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .input-group input {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        
        background-color: #f0f4f8;
        font-size: 14px;
    }
    .sign-in-button {
        background-color: #ee7710;
        color: #ffffff;
        padding: 10px 20px;
        border: none;
        
        font-size: 16px;
        cursor: pointer;
    }
    .forgot-password {
        margin-bottom: 10px;
    }
    .forgot-password a {
        color: #ee7710;
        text-decoration: none;
        font-size: 14px;
    }
    .social-login-container {
        text-align: center;
    }
    .social-login-container h2 {
        margin-bottom: 20px;
        font-size: 18px;
        color: #333333;
    }
    .social-login {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    .social-login a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #ffffff;
        font-size: 18px;
        text-decoration: none;
    }
    .social-login a.facebook {
        background-color: #ee7710;
    }
    .social-login a.google {
        background-color: #ee7710;
    }
    .social-login a.linkedin {
        background-color: #ee7710;
    }
     .price-details {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 0;
       
        padding: 20px;
        box-shadow:  0 1rem 3rem rgba(0, 0, 0, 0.175) !important
    }
    .price-details h2 {
        font-size: 16px;
        color: #757575;
        margin: 0 0 10px 0;
    }
    .price-details .solid-line {
        border-top: 1px solid #e0e0e0;
        margin: 10px 0 20px 0;
    }
   
    .price-details .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
    }
    .price-details .item .free {
        color: #388e3c;
    }
    .price-details .total {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0;
    }
    .price-details .savings {
        font-size: 14px;
        color: #388e3c;
        text-align: center;
        margin-top: 10px;
    }
    .price-details .dotted-line {
        border-top: 1px dotted #e0e0e0;
        margin: 10px 0;
    }
        .containerpy {
        
        background-color: white;
        
        box-shadow:  0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:20px;
    }

    .tabs {
        display: flex;
        align-items: center;
    }

    .tab-nav {
        
        border-right: 1px solid #ddd;
      
    }
  
    .tabs ul li {
        width: 100% !important;
        padding: 0px;
        text-align: left !important;
    }

    .tab-nav ul.pay {
        list-style-type: none;
        padding: 0;
        justify-content: center;
        text-align: center;
        display: contents;
}
.tab-content ul.pay {
        list-style-type: none;
        
       
        display: contents;
}
    .tab-nav li {
        padding: 10px;
        
        margin-bottom: 10px;
        cursor: pointer;
        
        
    }

    .tab-nav li.active {
    text-decoration: underline;
         text-decoration-color: #ee7710;
        color: black;
    }

    .tab-content {
        flex-grow: 1;
        padding-left: 20px;
        
    }

    .tab-pane {
        display: none;
        
    }

    .tab-pane.active {
        display: block;
    }

    .tab-pane img {
        max-width: 152px;
        height: auto;
        margin-left: 22%;
        margin-top: -10px;
    }
    select {
  padding: 5px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 60px; /* Adjust width as needed */
}

label {
  font-family: Arial, sans-serif;
  margin-right: 10px;
}
.editadd{
    padding: 20px;
}

.login-container {
    display: block; /* Stack the elements vertically on small screens */
    width: 100%;
}

.login-form, .social-login-container {
    width: 100%; /* Full width for both divs on small screens */
     margin-bottom: 10px;/* Space between stacked elements */
   
}

/* Medium screens (min-width: 768px and max-width: 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .login-container {
        display: flex;
        flex-direction: column; /* Still vertical alignment but with flexbox */
        align-items: center;
    }

    .login-form, .social-login-container {
        width: 70%; /* Adjust width for medium screens */
    }

    .social-login-container {
        text-align: center; /* Center-align content in medium screens */
    }
}

/* Large screens (min-width: 992px) */
@media (min-width: 992px) {
    .login-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .login-form {
        width: 100%; /* Adjust width as needed */
    }

    .social-login-container {
        width: 40%;
        text-align: center; /* Align content to the right on large screens */
    }
}
#errorMessage {
            color: red;
            font-weight: bold;
        }


        .login-container2 {
            text-align: center;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 400px;
        }
        .login-container2 h2 {
            margin-bottom: 20px;
            font-size: 18px;
            color: #333333;
        }
        .social-login2 {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .social-login2 a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #ffffff;
            font-size: 18px;
            text-decoration: none;
        }
        .social-login2 a.facebook {
            background-color: #ee7710;
        }
        .social-login2 a.google {
            background-color: #ee7710;
        }
        .social-login2 a.linkedin {
            background-color: #ee7710;
        }
        .divider2 {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        .divider2::before,
        .divider2::after {
            content: '';
            flex: 1;
            height: 1px;
            background-color: #e0e0e0;
        }
        .divider2 span {
            margin: 0 10px;
            color: #999999;
        }
        .input-group2 {
            margin-bottom: 20px;
        }
        .input-group2 input {
            width: 100%;
            padding: 10px;
            border: 1px solid #e0e0e0;
   
            background-color: #f0f8f8;
            font-size: 14px;
            color: #999999;
        }
        .input-group2 .password-icon2 {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999999;
        }
        .input-group2.password {
            position: relative;
        }
        .sign-in-button2 {
            background-color: #ee7710;
            color: #ffffff;
            padding: 10px 20px;
            border: none;
           
            font-size: 16px;
            cursor: pointer;
            width: 50%;
        }
        @media (max-width: 400px) {
            .social-login2 a {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
            .sign-in-button2 {
                font-size: 14px;
                padding: 8px 16px;
            }
        }