@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* GENERAL START */
a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    color: #262626;
}
h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 44px;
    color: #262626;
}
h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 20px;
    color: #262626;
}
p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #262626;
}
.title {
    margin-bottom: 60px;
}
ul {
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}
hr {
    background: #d9d9d9;
    height: 2px !important;
}
/* GENERAL END */

/* HEADER START */
.header-bg {
    background: #34006a;
    height: 132px;
    padding: 47px 0;
}
.logo {
    max-width: 320px;
}
.navbar-nav,
.menu-item {
    flex: 1;
    padding: 0;
    line-height: 1;
    text-align: center;
}
.menu-item {
    color: #fff;
    transition: all 0.3s;
    line-height: 53px;
}
.navbar-light {
    padding: 0;
    margin-top: -6px;
}
.account {
    margin-left: 30px;
}
.account img {
    position: relative;
    left: -10px;
}
.menu-item.active,
.menu-item:hover {
    color: #ff6c4c;
    transition: all 0.3s;
}
.border-right {
    content: "";
    border-right: solid 2px #5000a4;
    position: relative;
}
/* HEADER END */

/*SLIDE*/
.slide {
    background-image: url("../../assets/img/slide-desktop.png");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 601px;
}
.slide .container {
    position: relative;
}
.left {
    padding: 210px 0;
}
.left h1 {
    color: #fff;
}
.left p {
    color: #fff;
    font-size: 24px;
    line-height: 32px;
    padding-right: 20px;
}
.right {
    background: #f4f6fb;
    padding: 50px;
    position: absolute;
    width: 100%;
    margin-top: 130px;
    box-shadow: 0 3px 50px rgba(0, 0, 0, 0.1), 0 3px 50px rgba(0, 0, 0, 0.1);
    right: 0;
    max-width: 38%;
}
.right h4 {
    margin-bottom: 3px;
}
.right p {
    margin-bottom: 10px;
}
.form {
    padding-bottom: 25px;
}
.form input {
    width: 100%;
    padding: 10px 10px 10px 20px;
    border-radius: 8px;
    border: none;
    background: #fff;
}
.form select {
    width: 100%;
    padding: 10px 10px 10px 15px;
    border-radius: 8px;
    border: none;
    background: #fff;
    margin-top: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}
.btn-send button {
    background: #ff6c4c;
    width: 100%;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 0;
}
.btn-send button:hover {
    background: #ff502a;
    color: #fff;
}
.accept-gdpr label {
    font-size: 14px;
    line-height: 19px;
    padding-left: 15px;
    color: #262626;
    font-family: "Poppins", sans-serif;
}
.accept-gdpr {
    display: flex;
    margin-bottom: 30px;
}
.accept-gdpr #gdpr {
    width: 24px;
    height: 24px;
}
.logo-operator {
    position: absolute;
    right: 60px;
    margin-top: -7px;
}

/*SLIDE END*/

/*Sectiune Optiuni Home*/
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 30px 15px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
}

.tabset > label:hover,
.tabset > input:focus + label {
    color: #ff6c4c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: #06c;
}

.tabset > input:checked + label {
    border-color: #fff;
    border-bottom: 2px solid #ff6c4c;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 40px 0;
    border-top: 1px solid #f2f2f2;
}
.optiuni {
    padding: 100px 0 50px 0;
}
.box-optiune {
    border: 2px solid #e4e4e4;
    margin: 12px 0;
}
.box-optiune:hover {
    border: 2px solid #e70101;
    background: #e70101;
}
.box-optiune:hover h4,
.box-optiune:hover p {
    color: #fff;
}
.box-optiune h4 {
    margin: 0;
    text-align: center;
    font-size: 40px;
    color: #e60000;
    padding: 35px;
}
.box-optiune p {
    margin: 0;
    text-align: left;
    padding: 26px 0 26px 60px;
}
.optiuni label img {
    margin-right: 5px;
}
.opt-orange h4 {
    color: #ff6600;
}
.opt-telekom h4 {
    color: #e30074;
}
.opt-orange:hover {
    border: 2px solid #ff6c4c;
    background: #ff6c4c;
}
.opt-telekom:hover {
    border: 2px solid #e30074;
    background: #e30074;
}

/*Sectiune Optiuni Home END*/

/*Sectiune Pasi incarcare Home*/
.pasi-incarcare img {
    width: 63px;
    height: 63px;
    margin-bottom: 50px;
}
.pasi-incarcare h4 {
    padding-right: 100px;
    min-height: 60px;
}
.pasi-incarcare {
    padding: 50px 0;
}
.optiuni .tabset {
    margin-top: 30px;
}
.optiuni .tabset img {
    width: 25px;
    height: 25px;
}

/*Sectiune Pasi incarcare Home END*/

/*Sectiune Avantaje Home*/
.avantaje {
    padding: 50px 0 100px 0;
}
/*Sectiune Avantaje Home END*/

/*FOOTER*/
.footer {
    background: #34006a;
    padding: 50px 0;
}
.footer ul li a {
    color: #fff;
}
.footer ul li a:hover {
    color: #ff6c4c;
}
.footer .visa-logo {
    margin-top: 40px;
}
.footer p {
    color: #fff;
    font-size: 14px;
    line-height: 19px;
    margin: 0;
    padding-top: 70px;
}
.visible-mobile {
    display: none;
}
/*FOOTER END*/

/*Pag. Cum incarc*/
.slide-cum-incarc {
    background-image: url("../../assets/img/slide-cum-incarc.png");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 600px;
}

.cta {
    color: #fff;
    font-size: 16px;
    background: #ff6c4c;
    border-radius: 5px;
    display: block;
    width: 270px;
    height: 56px;
    text-align: center;
    line-height: 100%;
    padding: 20px 0;
    margin-left: calc(50% - 135px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.cta:hover {
    color: #fff;
    background: #ff502a;
}
.sectiune-btn {
    padding: 100px 0;
}

.cum-incarc-pasi {
    padding: 100px 0 50px 0;
}
.cum-incarc-avantaje {
    padding: 0;
}

/*Pag. Cum incarc END*/

/*Pag. Optiuni*/
.sectiune-logo {
    padding: 50px 0;
}
.companie {
    display: flex;
}
.nume-companie {
    padding: 20px 0px 0px 30px;
}

.content-center {
    padding: 20px 100px 0 100px;
}
.zona-optiuni .col-md-3:first-child,
.zona-optiuni .col-md-6 {
    border-right: 2px solid #d9d9d9;
}
.zona-optiuni {
    padding: 50px 0;
}
.content-left {
    padding: 20px 0;
}
.content-left h1 {
    margin: 0;
}
.zona-optiuni .btn {
    padding: 50px 0;
}
.alte-optiuni {
    padding: 70px 0;
}
.alte-optiuni h1 {
    margin-bottom: 40px;
}
.optiune-orange h4 {
    margin: 0;
    text-align: center;
    font-size: 40px;
    color: #ff6600;
    padding: 35px;
}
.optiune-orange p {
    margin: 0;
    text-align: left;
    padding: 26px 0 26px 60px;
}
.optiune-orange {
    border: 2px solid #e4e4e4;
    margin: 12px 0;
}
.optiune-orange:hover {
    border: 2px solid #ff6c4c;
    background: #ff6c4c;
}
.optiune-orange:hover h4,
.optiune-orange:hover p {
    color: #fff;
}

/*Pag. Optiuni END*/

/*Pag. Intrebari*/
.sectiune-intrebari {
    padding: 100px 0;
}
.sectiune-intrebari h4 {
    margin-bottom: 40px;
}
button.accordion {
    width: 100%;
    background-color: #fff;
    border: none;
    outline: none;
    text-align: left;
    padding: 15px 0px 15px 0px;
    font-size: 14px;
    color: #262626;
    cursor: pointer;
    transition: background-color 0.2s linear;
    border-bottom: 1px solid #d9d9d9;
    line-height: 19px;
    font-family: "Poppins", sans-serif;
}

button.accordion:after {
    font-family: FontAwesome;
    content: "\f078";
    font-family: "fontawesome";
    font-size: 18px;
    float: right;
    color: #ff6c4c;
}

button.accordion.is-open:after {
    content: "\f077";
    color: #ff6c4c;
}
.accordion-content {
    background-color: #fff;
    border: none;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
}
.accordion-content p {
    padding: 20px 0;
    font-size: 14px;
    color: #262626;
    margin: 0;
}
/*Pag. Intrebari END*/

/*Pag. Contul meu*/
.account-section {
    padding: 50px 0;
    min-height: 100vh;
}
.tab {
    float: left;
    border: 2px solid #f5f5f5;
    background-color: #fff;
    width: 25%;
    margin-right: 10px;
    padding: 15px;
    border-radius: 5px;
    border-top: 6px solid #27a9e1;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: inherit;
    color: #707070;
    padding: 5px 5px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
}

/* Change background color of buttons on hover */
.tab button:hover {
    color: #262626;
}

/* Create an active/current "tab button" class */
.tab button.active {
    color: #262626;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 15px;
    width: 70%;
    margin-left: 20px;
}

.box-container {
    background: #f2f2f2;
    border-radius: 5px;
    padding: 15px;
}
.box-container h4,
.box-container p {
    margin: 0;
}
.box-container img {
    margin-top: 15px;
}
.box-container .cta {
    margin-top: 10px;
}
.box-container-border {
    border: 3px solid #bfbfbf;
    padding: 38px 15px;
    border-radius: 5px;
    border-style: dashed;
}
.box-container-border input {
    text-align: center;
    border: none;
}
.box-margin {
    margin: 30px 0;
}
.istoric {
    padding: 15px 45px;
}

.edit-btn {
    color: #262626;
    font-size: 16px;
    background: transparent;
    border-radius: 8px;
    display: block;
    width: 270px;
    height: 56px;
    text-align: center;
    line-height: 100%;
    padding: 20px 0;
    margin-left: calc(50% - 135px);
    border: 2px solid #ff6c4c;
    font-family: "Poppins", sans-serif;
}
.edit-btn:hover {
    background: #ff6c4c;
    color: #fff;
}
.istoric input {
    background: transparent;
    border: none;
}
/*Pag. Contul meu END*/

/*Pag. Contact*/
.group {
    display: block;
    margin-top: 20px;
}

.form-label {
    font-size: 14px;
    color: #262626;
    margin-bottom: 15px;
    font-family: "Poppins", sans-serif;
}

.form-control {
    border: 1px solid #707070;
    border-radius: 8px;
    padding: 0;
    line-height: 56px;
    color: #7f7f7f;
    padding-left: 15px;
    font-family: "Poppins", sans-serif;
}

::-webkit-input-placeholder {
    /* Edge */
    font-size: 14px;
    font-family: "Poppins", sans-serif;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: 14px;
    font-family: "Poppins", sans-serif;
}

::placeholder {
    font-size: 14px;
    font-family: "Poppins", sans-serif;
}

.contact-pag h1 {
    margin-bottom: 35px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

textarea {
    resize: none;
}

.contact-pag .accept-gdpr label {
    font-size: 14px;
    line-height: 21px;
    padding-left: 15px;
    color: #262626;
    padding-right: 110px;
}

.contact-pag .accept-gdpr {
    margin-top: 30px;
}
.view-desktop .group {
    width: 50%;
}
.view-desktop {
    display: flex;
}
.group-flex {
    margin-right: 15px;
}
.group-flex2 {
    margin-left: 15px;
}
.contact-pag .btn-send button {
    width: 48%;
}
.contact-pag {
    padding: 100px 0 100px 0;
}
.img-contact {
    margin-top: 100px;
}

/*Pag. Contact END*/

/* Pag. Operator */
.pag-operator {
    background: #e60000;
    min-height: 381px;
}
.pag-orange {
    background: #ff6600;
}
.pag-telekom {
    background: #e30074;
}
.descriere-operator {
    padding: 80px 0 0 0;
}
.box-left {
    display: flex;
    padding: 120px 0;
}
.zona-txt h1,
.zona-txt p {
    color: #ffffff;
}
.zona-txt p {
    margin-bottom: 0;
}
.zona-txt h1 {
    margin-top: 15px;
}
.pag-operator .right {
    margin-top: 80px;
}
.pag-operator .container {
    position: relative;
}
/* Pag. Operator END */

/*Responsive*/
@media screen and (max-width: 1366px) {
    .right {
    }
    .menu-item {
        font-size: 14px;
    }
    .account {
        margin-left: 0;
    }
    .border-right {
        left: -15px;
    }
    .account img {
        position: relative;
        left: 0px;
    }
}

@media screen and (max-width: 1024px) {
    .cta {
        width: 200px;
        margin-left: calc(50% - 100px);
    }
    .contact-pag .accept-gdpr label {
        padding-right: 0;
    }
}

@media screen and (max-width: 991px) {
    .header-bg .navbar-collapse {
        background: #34006a;
        width: 100%;
        text-align: center;
        z-index: 999;
        padding-top: 20px;
    }
    .menu-item {
        padding: 10px 0;
        line-height: 15px;
    }

    .navbar-toggler {
        position: absolute;
        right: 30px;
        top: -35px;
        border: none;
        padding: 0;
    }
    .navbar-light .navbar-toggler-icon {
        background-image: url("../../assets/img/menu-icon.svg");
    }
    .view-desktop .group {
        width: 100%;
    }
    .group-flex {
        margin-right: 0;
    }
    .group-flex2 {
        margin-left: 0;
    }
    .view-desktop {
        display: block;
    }
    .contact-pag .btn-send button {
        width: 100%;
    }
    .border-right {
        border: none;
    }
    .navbar-light {
        padding: 40px 0 0 0;
        margin-top: 0;
    }
    .account {
        margin-left: 0;
    }
    .border-right {
        left: 0;
    }
    .account img {
        left: -5px;
    }
    .menu-item {
        font-size: 16px;
    }
    .right {
        max-width: 50%;
    }
}

@media screen and (max-width: 767px) {
    .right {
        width: 100%;
        position: relative;
        margin-top: 0;
        right: 0;
        max-width: 100%;
    }
    .slide .right {
        display: none;
    }
    .slide {
        background-image: url("../../assets/img/slide-mobile.png");
        min-height: 300px;
    }
    .left {
        padding: 50px 0;
    }
    .optiuni .tabset label span {
        display: none;
    }
    .title {
        text-align: center;
    }
    .pasi-incarcare,
    .avantaje {
        text-align: center;
    }
    .pasi-incarcare h4 {
        padding-right: 0;
        min-height: 0;
    }
    .pasi-incarcare img {
        margin-bottom: 20px;
    }
    .companie {
        display: block;
        text-align: center;
    }
    .nume-companie {
        padding: 20px 0px 0px 0px;
    }
    .sectiune-logo {
        padding: 30px 0;
    }
    .content-left {
        text-align: center;
    }
    .zona-optiuni .col-md-3:first-child {
        border-bottom: 2px solid #d9d9d9;
        border-top: 2px solid #d9d9d9;
        border-right: none;
    }
    .zona-optiuni .col-md-6 {
        border: none;
    }
    .line-separator {
        display: none;
    }
    .alte-optiuni h1 {
        text-align: center;
    }
    .slide-cum-incarc {
        min-height: 300px;
    }
    .sectiune-btn {
        padding: 30px 0;
    }
    .cum-incarc-avantaje {
        padding: 0 0 50px 0;
    }
    .tab {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }
    .tab button {
        text-align: center;
    }
    .tabcontent {
        padding: 0;
        width: 100%;
        margin-left: 0px;
    }
    .account-section {
        margin-bottom: 450px;
    }
    .edit-btn {
        width: 120px;
        margin-left: calc(50% - 60px);
    }
    .visible-mobile {
        display: block;
    }
    .copyright {
        display: none;
    }
    .footer p {
        padding-top: 40px;
    }
    .footer-menu {
        padding-top: 40px;
    }
    .footer {
        padding: 50px 10px;
    }
    .img-contact {
        display: none;
    }
    .contact-pag img {
        width: 15%;
        position: absolute;
        right: 55px;
        top: 200px;
    }
    .pag-operator .right {
        display: none;
    }
    .opt-operator {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .contact-pag {
        padding: 40px 0 40px 0;
    }
    .contact-pag img {
        right: 25px;
        top: 165px;
    }
    .left h1 {
        font-size: 26px;
        line-height: 32px;
    }
    .left p {
        font-size: 14px;
        line-height: 21px;
        padding-right: 170px;
    }
    .left {
        padding: 30px 0;
    }
    .right h4 {
        font-size: 20px;
        line-height: 30px;
    }
    .right p {
        font-size: 14px;
        line-height: 18px;
    }
    h1 {
        font-size: 32px;
        line-height: 36px;
    }
    .avantaje {
        padding: 50px 0 50px 0;
    }
    .alte-optiuni {
        padding: 0px 0 70px 0;
    }
    .cum-incarc-avantaje {
        padding: 0px 0 50px 0;
    }
    .sectiune-intrebari {
        padding: 50px 0;
    }
    .navbar-toggler {
        right: 30px;
    }
    .header-bg {
        background: #34006a;
        height: 85px;
        padding: 20px 0;
    }
    .slide {
        min-height: 210px;
    }
    .right {
        padding: 15px 10px;
    }
    .navbar-light {
        padding: 20px 0 0 0;
    }
    .navbar-light .container-fluid {
        padding: 0;
    }
    .header-bg .col-12:nth-child(2) {
        padding: 0;
    }
    .navbar-toggler {
        right: 15px !important;
    }
    .header-bg .navbar-collapse {
        padding-top: 0;
    }
    .pag-operator {
        min-height: 252px;
    }
    .box-left {
        padding: 55px 0;
    }
    .descriere-operator {
        padding: 30px 0 40px 0;
    }
    .zona-txt h1 {
        margin-top: 20px;
    }
    .formular-mobil .right {
        padding: 60px 10px;
    }
}

@media screen and (max-width: 414px) {
    .navbar-toggler {
        right: 0px;
    }
}

@media screen and (max-width: 400px) {
    .logo {
        max-width: 200px;
    }
    .header-bg {
        padding: 50px 0;
    }
    .navbar-toggler {
        top: -28px;
    }
}
/*Responsive END*/