@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html {
    font-size: 16px; /* Root font size set to 16px */
}

body
{
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   background-color:#F7F7F7;
   color:#000;
   height:100vh;
}
:root
{
    --magenta: #EC268F;
}


 @media (max-width:1550px)
     {
        html
        {
            font-size: 14px;
        }

     }

     @media (max-width:1350px)
     {
        html
        {
            font-size: 13px;
        }

     }



.topRightLine
{
    border-left:2px solid var(--magenta);
}
.topAccount
{
    padding-top:15px;
}

.topAccount .forMagenta
{
    text-decoration:none;
    color:var(--magenta);
    font-weight: 300;
    font-size: 0.875rem;
    display:inline-block;
    text-align:center;
    margin-left: 10px;
}
.searchTop
{
    color:var(--magenta);
     padding-bottom: 0vh;
     padding-top:15px;

}
.searchTop input[type="text"]
{
    border:0px;
    border-bottom: 1px solid var(--magenta);
    background-color: transparent;
}
.navbar
{
    margin-top:0px !important;
    padding-top:0px !important;
}

.navbar-brand
{
   margin-left:-180px;
   margin-top:-40px;

}
.navbar-brand img
{
    height:16vh;
}
.navbar-nav .nav-item:first-child  .lknormal
{
    border-left:0px !important;
}

.nav-link
{
    color:#000;
    text-align:right;
    margin-right:30px;
    font-weight:300;
    font-size: 0.875rem;


}
.nav-link .lknormal
{
       border-left:2px solid var(--magenta);
       padding-top:8px;
       padding-left:5px;
       display:inline-block;

}
.menuCustom
{
    margin-bottom: 50px;
}
.divMenuCustom
{
    padding-left:0px;
}
.lastBox
{
    padding-top:5vh;
}

.menuCustom .nav-link
{
    float:left;
}
.borderStart
{
    border-left:2px solid var(--magenta);
}
.forLogoNew img
{
    width:40%;
    margin-top:-40px;
}

.rz
{
    color: var(--magenta);
}
.rotated
{
    transform: rotate(180deg);
     display: inline-block;
     font-size: 0.875rem;
}
.prLeft
{

    width:15%;
}
.leftLine
{
     border-left: 2px solid var(--magenta);
    border-bottom: 2px solid var(--magenta);
    height:92.5%;
    width:100%;
}

.prRight
{

    padding:20px;
    padding-bottom:0px;
      background-size:7% auto;
      margin-bottom:15px;
      padding-top:10px;
      font-size: 0.875rem;
      padding-left:0px;
      padding-right:0px;
      width:85%;

}
.prRight img
{
    width:100%;
    margin-bottom:6%;
    margin-left:-13px;
}
.prRight span
{
    display: inline-block;
    padding-left:5px;
    padding-top:6px;
    font-weight:300;
}
.bpad
{
    padding:15px;
}
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 10, /* Adjusted for thin weight */
        'GRAD' 0,
        'opsz' 24;
       font-size: 22px;
}
.material-symbols-outlined {
    font-weight: 40 !important;
}
.bottomRight
{
    position:fixed;
    margin-right:25px;
    margin-bottom:25px;
    right:225px;
    bottom:25px;
}
.bottomRight img
{
    height:32vh;
}
.lateralProduct
{
    bottom:27vh;
    right:200px;
}
.lateralProduct  img
{
    height:250px;
    display: block;
}

.afisareTransport span
{
    display: none;

}

.afisareTransport
{    padding-left:25px;
    color: var(--magenta);
    font-weight: 300;
    font-size:14px;
    height:150px;
   width:200px;
}
.afisareTransport b
{
    font-weight:700;
    font-size:28px;
}

.mainProduct
{


    background-repeat: no-repeat;
    background-position:top left;
    padding:20px;
    padding-bottom:0px;
      background-size:2% auto;
      margin-bottom:15px;
      padding-top:10px;
      font-size: 0.875rem;
      min-height:90vh;

}
.leftDecoration
{
    height: 120vh;
    width:25px;
    border-left: 2px solid var(--magenta);
    border-top: 2px solid var(--magenta);
    float:left;
    margin-left:-3px;
}
.rightContent
{
    width: calc(100% - 30px) !important;
    float:right;
    margin-bottom: 80px;
}

.breadcrumb
{
    padding-left:30px;
    margin-top:-8px;
    font-weight:300;
}
.productImages img
{
    width:100%;
    margin-bottom:15px;
}
.productDetails
{
    font-weight:300;
}

.productDetails h1
{
    font-size: 1.375rem;
    color: var(--magenta);
    font-weight:700;
    padding-bottom:1px;
    margin-bottom:0px;
}

.productDetails h3
{
    font-size: 1.375rem;
    color: var(--magenta);
    font-weight:700;
    cursor:pointer;
    margin-top:10px;
}

.productDetails h4
{
    font-size: 1.125rem;
    color: #000;
    font-weight:700;
    border-left:2px solid var(--magenta);
    margin:0px;
    padding-left:4px;
    margin-bottom:0px;
}
.subliniat
{
        border-bottom:2px solid var(--magenta);
        padding-left:4px;
        padding-bottom:2px;
        margin-bottom:6px;
}

 input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      display: inline-block;
      width: 14px;
      height: 14px;
      background-color: white;
      border: 2px solid var(--magenta);
      border-radius: 0px; /* Makes it square */
      position: relative;
      cursor: pointer;
    }

    /* Checked state */
    input[type="radio"]:checked {
      background-color: var(--magenta);
    }
    .productRadio
    {
        font-weight:300;
        font-size: 1rem;
    }
  .hidemax
    {
        display: none !important;
    }

    .forGrafica
    {
        border:2px solid var(--magenta);
        padding:0px;
        margin-top:10px;
    }
    .forGrafica textarea
    {
        width:100%;
        border:none;
        background-color:transparent;
        height:80px;
        padding:10px;

    }
    .productInput input[type="text"]
    {
         border:2px solid var(--magenta);
         width:135px;
         background-color:transparent;
    }


  @media (max-width:767px)
 {

    .mainCont
    {
        padding-left:25px;
        padding-right:25px;
    }
      .leftDecoration
      {
          height:auto;
          min-height: 110vh;
      }

    .mainCont .col-2
    {
        width:50% !important;
    }
    .mainCont .col-2:first-child
    {
        display: none;
    }
       .mainCont .col-2:last-child
    {
        width:100% !important;
        text-align: center;
    }
    .mainCont .col-2:last-child img
    {
        width:25% !important;
    }
    .divMenuCustom
    {
        display:none;
    }
    .hidemax
    {
        display: inline-block !important;
    }
    .hidemin
    {
        display: none !important;
    }

    .topRightLine
    {
        border-left:none;
    }
    .tpLogoMob
    {
        width:33vw !important;
        padding-top:15px;
        padding-bottom: 15px;
        padding-right:15px;
        text-align:center;
    }

    .tpLogoMob img
    {
        width:90%;

    }
    .topAccount
    {
       width: 66.3vw !important;
       right:0;
         border-left:2px solid var(--magenta);
         position: absolute;
         background-color:#f7f7f7;
         line-height:0px;
    }
    .navMob
    {
        color:var(--magenta);
        float: right;
        margin-top:70px;
        font-weight: 300;
    }
    .navMob span
    {
        font-size:40px;
    }
    .navbar
    {
        width: 66.6vw;
        right:0;
        background-color:#F7F7F7 !important;
        padding-bottom:0px;
        line-height: 16px;
    }
    .navbar-nav .nav-item:first-child  .lknormal
    {
        border-left:2px solid var(--magenta) !important;
    }
    .navbar-nav .nav-item
    {
        margin-top:10px;
        margin-bottom:10px;
    }
     .navbar-nav .nav-item:last-child
     {
         margin-bottom:120px;
     }
     .menuCustom
    {
        margin-bottom: 0px;
    }
    .topAccount .forMagenta
    {
        line-height:16px;
    }


    .breadcrumb
    {
        padding-left:12px;
    }

    .productImages
       {
           width: 30% !important;
       }

 }


  @media (max-width:510px)
 {
    .tpLogoMob
    {
        padding-top:4vh;
        padding-bottom: 4vh;
    }
    .leftDecoration
      {
          height:auto;
          min-height: 85vh;
      }
 }

   @media (max-width:400px)
 {
    .tpLogoMob
    {
        padding-top:6vh;
        padding-bottom: 6vh;
    }
    .leftDecoration
      {
          height:auto;
          min-height: 85vh;
      }

 }

   @media (max-width:350px)
 {
    .tpLogoMob
    {
        padding-top:8vh;
        padding-bottom: 8vh;
    }

 }