.sp2{
    grid-column: span 2;
}
.span_prise{
    font-size: 16px;
}
.content_wrapper{
    max-width: 1590px;
    width: 100%;
    margin: auto;
}
.none{
    display: none;
}
.contact .img_logo{
    display: none;
}
.box_class{
    position: absolute;
    font-family: 'Gothic A1', sans-serif;
    color: black;
    font-weight: 600;
    line-height: 30px;
    font-size: 20px;
    text-align: left;
    top: 45px;
    right: 0;
    left: 0;
    overflow: hidden;
}

.input_location{
    position: relative;
}

.box_class{
    position: absolute;
    font-family: 'Gothic A1', sans-serif;
    color: black;
    font-weight: 600;
    line-height: 30px;
    font-size: 20px;
    text-align: left;
    top: 45px;
    right: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;

}
.box_class.open{
    z-index: 2;
}
.box_class .wrapper_ul{
    position: relative;
    /*z-index: -1;*/
    transform: translateY(-100%);
    background: #ffffff;
    padding: 20px 15px;
    transition: .5s;
}
.box_class.open .wrapper_ul{
    transform: translateY(0%);
}
.box_class .wrapper_ul_loc{
    position: relative;
    transform: translateY(-100%);
    background: #ffffff;
    padding: 20px 15px;
    transition: .5s;
}
.box_class .wrapper_ul_loc.open{
    transform: translateY(0%);
}
.input_class{
    position: relative;
}
.input_location{
    position: relative;
}
.contact{
    position: fixed;
    background: white;
    top: 20%;
    left:25%;
    right:25%;
    padding: 40px 150px;
    font-family: 'Gothic A1', sans-serif;
    z-index: 4;
    opacity: 0;
    transition-duration: 1s;
}

.none{
    display: none;
}
.nav .box_class li:hover, .nav .box_class li:hover{
    background: rgba(200, 221, 255, 0.59);
    border-radius: 10px;
}
.nav .box_class li:active, .nav .box_class li:active{
    background: rgba(200, 221, 255, 0.78);
    border-radius: 10px;
}
 button{
    cursor: pointer;
}
.nav .box_class li, .nav .box_class li , img, .button, .border{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.nav .box_class li, .nav .box_class li{
    padding: 5px 10px;
    font-size: 20px;
}

.contact.open{
    opacity: 1;
}
.contact h2{
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 30px;
}
.contact input, .nav_mobile input{
    outline: 0;
    outline-offset: 0;
    border: none;
    font-size: 20px;
    width: 100%;;
}
.contact .hr{
    height: 2px;
    width: 100%;
    background: #B4D2FF;
    margin: 5px 15px 5px 0;
}
.contact .input p{
    font-size: 20px;
    padding-bottom: 8px;
    font-weight: 600;
    font-family: 'Inter';
}
.contact .input span{
    color: #ef4444;
    font-size: 18px;
}
.contact .flex{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    grid-gap: 20px 10px;
}
.contact_input_2 .hr{
    width: 100%;

}
.contact_input_2 input{
    width: 100%;

    color: black;
}
.contact_input_2 p{
    margin-top: 20px;
}
.contact_input_2 textarea{
    width: 100%;
    height: 30px;
    margin-top: 40px;
    color: black;
    font-size: 20px;
}
.contact  .button{
    text-align: center;
    margin: 30px auto 0;
}
.contact  button{
    text-align: center;
    margin: auto;
    background: #B4D2FF;
    border: none;
    padding: 15px 60px 10px;
    font-weight: 600;
    font-size: 20px;
    transition-duration: 0.5s;
}
.contact  button:hover{
    background: #f5f414;

}
.contact  button:active{
    background: #919012;
}
.contact .icon span{
    font-size: 24px;
    position: absolute;
    top: 50px;
    left: 45px;
}

.nav_mobile .content_wrapper{
    background: rgba(250, 250, 250);
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 2000px;
    top: 0;
    right: 0;
    text-align: center;
    padding: 100px 80px;
    transform: translateX(100%);
    transition-duration: 1.5s;
}
.nav_mobile .content_wrapper.open {
    transform: translateX(0);
}
.nav_mobile .input .icon{
    margin:0 10px;
 }
.nav_mobile .sort ul{
    margin: 30px;
}
.nav_mobile .sort li{
    font-size: 28px;
    font-weight: 300;
    text-transform: uppercase;
}
.nav_mobile button{
    font-size: 30px;
}
.nav_mobile .img_logo img{
    width:51px;
    height: auto;
}
.nav_mobile .img_logo{
    margin-bottom: 40px;
    width:51px;
    margin: auto;
}

.nav_mobile .info_mobile .hr{
    width: 100%;
    height: 2px;
    background: black;
    margin: 30px 0;
    color: black;
}
.nav_mobile .info_con_mob h3{
     font-size: 30px;
 }
.nav_mobile .info_con_mob ul{
    margin: 10px;
}
.nav_mobile .info_con_mob li{
    padding: 8px;
    font-weight: 500;
    font-family: "Inter" , sans-serif;
}
.nav_mobile .info_con_mob li img{
    width: 55px;
    height: auto;
}



.nav, .nav_mobile{
    background: rgba(250, 250, 250);
    font-family: 'Gothic A1', sans-serif;
}
.nav .menu_icon, .nav_mobile .menu_icon{
    display: none;
}
.nav .menu_icon span,.nav_mobile .menu_icon span{
    font-size: 30px;

}
.nav .content_wrapper {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    padding: 10px 2%;

}

.nav .img_logo img{
    width: 81px;
    height: 100%;
    margin-right:40px ;
}

.nav .input, .nav_mobile .input  {
    display: grid;
    grid-template-columns: auto 1fr auto;
    background: white;
    padding: 8px;
    margin: 20px;
    align-items: center;
    position: relative;
}

.nav .container_class{
    max-width: 510px;
    width: 100%;
}
.nav .input_class .icon {
    margin-right: 10px;
    text-align: right;
}
.nav .input_class input {
    color: rgba(0, 0, 0, 0.89);
}
.nav  label, .nav_mobile label {
    display: grid;
    grid-template-columns: 1fr auto ;
    align-items: center;
}
.nav .container_location {
    max-width: 350px;
    width: 100%;
}
.nav .input_location span {
    margin-right: 5px;
}
.nav .input_location span:hover .box_class{
    display: block;
}
.nav input {
    border: none;
    outline: 0;
    outline-offset: 0;
    font-family: 'Inter', sans-serif;
}

.nav .input img,.nav_mobile .input img{
    width: 35px;
    height: auto;
    padding-right: 10px;
}

.nav .sort ul {
    display: flex;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    grid-gap: 0 20px;
    margin-left: 55px;
    font-size: 16px;
    align-items: center;
}
.nav .sort .active{
    background: rgba(215, 215, 215, 0.77);
}
.nav .sort ul li,.nav_mobile .sort ul li{
    padding: 10px;
    transition-duration: 0.5s;
}
.nav .sort ul li:hover{
    background: rgba(215, 215, 215, 0.77);
}
.nav button, .nav_mobile button{
    border: none;
    background: #B4D2FF;
    font-family: 'Gothic A1', sans-serif;
    text-transform: uppercase;
    padding: 13px 13px 10px 10px;
    margin-left: 20px;
    transition-duration: 0.5s;
}
.nav button:hover{
    background: #f5f414;

}
.nav button:active{
    background: #919012;
}

.title_screen {
    background: rgba(0, 0, 0, 0.54);
    overflow: hidden;
    background-size: 100%;
    color: white;
    padding: 200px 0;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    position: relative;
}
.title_screen .content_wrapper{
    max-width: 1580px;
    width: 100%;
    margin:auto;

}
.title_screen{
    text-align: center;

}
.title_screen .background{
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.title_screen .background img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.title_screen h1 {
    font-size: 46px;
    letter-spacing: 1px;
    padding-bottom: 100px;
    width: 100%;
    line-height: 50px;
    font-weight: 500;
    text-align: left;
}

.title_screen .img_trident {
    display: grid;
    grid-template-columns: auto 1fr;
    font-size: 28px;
    line-height: 30px;
    width: 500px;
    font-weight: 500;
    text-align: left;
}

.title_screen .img_trident img {
    width: 47px;
    height: 70px;
    margin-right: 14px;
}

.title_screen .button {
    text-align: right;
}

.title_screen button {
    border: none;
    background: #B4D2FF;
    font-size: 25px;
    padding: 16px 26px;
    text-transform: uppercase;
    margin-top: 120px;
    font-family: "Inter" , sans-serif;
    font-weight: 500;
    transition-duration: 0.5s;
}
.title_screen button:hover{
    background: #f5f414;

}
.title_screen button:active{
    background: #919012;

}
.commodity_container {
    width: 1480px;
    margin: auto;
}

.commodity .cardList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px 55px;
    margin: 50px 0;
    font-family: 'Gothic A1', sans-serif;
}

.commodity .card .img {
    width: 100%;
    height: 420px;
    border-radius: 15px 15px 0 0;

}

.commodity .card .text {
    background: rgba(217, 219, 219, 0.25);
    padding: 30px 20px;
    width: 100%;
    border-radius: 0 0 15px 15px ;
    overflow: hidden;
}

.commodity .card h2 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Inter" , sans-serif;

}

.commodity .card .location img {
    width: 13px;
    height: auto;
}

.commodity .card .location {
    color: rgba(61, 0, 197, 0.71);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    margin: auto 0;
    height: 1em;
    overflow: hidden;
    margin: 10px 0 15px;
    font-family: "Inter" , sans-serif;

}

.commodity .card .description p {
    font-size: 16px;
    font-family: "Inter" , sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 17px;
    height: 3em;
    overflow: hidden;
}

.commodity .card .text_border {
    width: 200px;
}

.commodity .card .border_container {
    display: flex;
    justify-content: space-between;
}

.commodity .card .border {
    border-radius: 5px;
    border: 3px solid #B4D2FF;
    padding: 10px 15px 10px 12px;
    text-transform: uppercase;

    display: inline-block;
}

.commodity .card .status {
    font-size: 16px;
    margin: 25px 0 10px;
    padding: 8px 20px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
}

.commodity .card .price {
    font-size: 22px;
    font-weight: 600;
    padding: 15px 25px 12px;

}

.commodity .card button {
    border: none;
    background: rgba(180, 210, 255, 0.75);
    font-size: 20px;
    padding: 17px 27px;
    text-transform: uppercase;
    border-radius: 8px;
    font-weight: 600;
    transition-duration: 0.5s;
}
.commodity .card button:hover{
    background: #f5f414;

}
.commodity .card button:active{
    background: #919012;

}
.commodity .card .button {
    display: flex;
    align-items: end;
}
.info_company{
    background: rgba(180, 210, 255, 0.06);
    text-align: center;

}
.info_company .content_wrapper{
    padding: 60px 30px 40px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}
.info_company .text{
    width: 900px;
    padding: 0 30px;
    text-align: center;
    display: inline-block;
    font-family:'Academia_Libera';
}
.info_company .title h3{
    color: rgba(0, 0, 0, 0.60);
    font-weight: 500;
    font-size: 35px;
    padding-bottom:25px ;
}
.info_company .text p {
    color: #1a202c;
    font-size: 25px;
    line-height: 28px;
}
.info_company .icon{
    display: flex;
    font-size: 20px;
    color: rgba(101, 101, 102, 1);
    text-align: center;
    align-items: center;
}
.info_company .icon span{
    padding:  20px  25px;
    border-radius: 50%;
    transition-duration: 0.5s;
}
.info_company .icon span:hover{
    background: rgba(75, 111, 162, 0.08);
    box-shadow: 1px 0 10px rgba(75, 111, 162, 0.08);
}
.info_company .text .language{
    margin-top: 65px;
    color: rgba(0, 0, 0, 0.60);
    font-size: 18px;
}
.language_uk,
.language_en {
    display: none;
    transition: opacity 0.5s ease-in-out;
}
.active {
    display: block;
    opacity: 1;
}

.controls {
    cursor: pointer;
}
.footer{
    background: rgba(30, 30, 30, 0.93);
    color: #E0DBDB;
    font-family: 'Gothic A1', sans-serif;
}
.info_contact .img{
    width: 50px;
    height: 50px;
}
.info_contact img{
    width: 100px;
    height: 100px;
}
.footer .content_wrapper{
    display: flex;
    justify-content: space-between;
    padding: 50px 30px;
}
.info_contact h3{
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 55px;
}
.info_contact ul{
    display: flex;
    flex-direction: column;
    grid-gap: 30px;
    font-size: 20px;
}
.form_contact form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:0 15px ;
}
.form_contact input,textarea {
    background: none;
    outline: 0;
    outline-offset: 0;
    border: none;
    color: white;
    font-size: 18px;
    width: 100%;
}
.form_contact textarea {
    grid-column: span 2;
    height: 20px;
}

.form_contact .container_input form .hr{
    background: white;
    height: 2px;
    width: 240px;
    color: white;
    display: block;
    margin-right: 5px;
}
.form_contact  input{
    padding: 10px 5px;
}
.form_contact  p{
    font-size: 20px;
}
.form_contact input{
    padding: 10px 5px;
}
.container_2 textarea{
    height: 50px;
    width: 500px;
    padding: 10px 5px;
}
.form_contact  p{
    margin-top: 20px;
    font-size: 18px;
}
.form_contact .hr{
    background: white;
    height: 2px;
    width: 100%;
    color: white;
    display: block;
    margin-right: 5px;
}
.form_contact button{
    background: white;
    border: none;
    color: #000000;
    font-weight: 600;
    padding: 20px;
    width: 100%;
    margin-top: 20px;
    transition-duration: 0.5s;
}
.form_contact button:hover{
    background: #b4b4b4;
}
.form_contact button:active{
    background: #7a7a7a;

}
.form_contact .hr_end{
    display: none;
}