/* ==== COMMON SETTINGS ==== */
* { box-sizing: border-box; }
html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li { margin:0; padding: 0; }
p { padding-bottom: 15px; }
a { text-decoration: none; }
ul { list-style-type: none; }
p a:hover { text-decoration: underline; }
.clear { clear: both; }
.hide { display: none; }
body { font-family: 'DM Sans', Arial, sans-serif; color: #2b2b2b; font-size: 18px; }


/* ==== HEADINGS ==== */
h1, h2, h3, h4 { font-weight: normal; }
h2 { }

#main .block h1,
#main .block h2,
#main .block h3   { text-align: center; font-size: 36px; line-height: 50px; color: #af2eff; font-weight: 600; margin-bottom: 46px; position: relative; }
#main .block h1   { font-size: 2.4rem; }

/* ==== FORMS ==== */
label { display: inline-block; width: 200px; }
.text, .select {  margin-bottom: 5px; }
.submit, .button { border: none; cursor: pointer; }

label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: #491665; }
.form-group { margin-bottom: 16px; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea { width: 100%; padding: 12px 14px; border: 1px solid #d9c6e9; border-radius: 8px; background: #fff; color: #2b2b2b; font-size: 16px; line-height: 24px; box-sizing: border-box; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; }

input::placeholder,
textarea::placeholder { color: #9c8fa8; font-weight: 400; }
input:focus,
select:focus,
textarea:focus { border-color: #ff57e3; box-shadow: 0 0 0 3px rgba(255, 87, 227, 0.2); outline: none; background: #fff; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #491665 50%), linear-gradient(135deg, #491665 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; padding-right: 36px; }

button,
input[type="submit"],
input[type="button"],
.submit,
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background: #ff57e3; color: #fff; border: none; border-radius: 5px; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; text-transform: uppercase; }

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit,
.button:hover { transform: translateY(-1px); background: #e64fd2; box-shadow: 0 10px 22px rgba(73, 22, 101, 0.18); }

button:active,
input[type="submit"]:active,
input[type="button"]:active,
.submit,
.button:active { transform: translateY(0); background: #d447c0; box-shadow: none; }

button:disabled,
input:disabled,
select:disabled,
.submit:disabled,
textarea:disabled { opacity: 0.55; cursor: not-allowed; }

form div.phone { display: block; }
.phone .cc  { width: 110px; }
div.phone input.phone { width: calc(100% - 115px); }

.check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.check input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #ff57e3; border: 1px solid #d9c6e9; border-radius: 4px; background: #fff; flex-shrink: 0; }
.check input[type="checkbox"]:focus { border-color: #ff57e3; box-shadow: 0 0 0 3px rgba(255, 87, 227, 0.2); outline: none; }
.check label { margin: 0; width: auto; font-weight: 600; font-size: 15px; line-height: 22px; color: #2b2b2b; }

/* ==== ICONS ==== */
#top::before                    { display: none; }
.ico:before, .icon:before		{ content: ''; font-family: "Font Awesome 7 Pro"; margin-right: 5px; color: #999999c; padding-left: 1px; }
.ico.home:before				{ content: '\f015'; }
.ico.status:before,
.icon.status:before				{ content: '\f205'; }
.ico.phone:before				{ content: '\f095'; }
.icon.user:before,
.ico.user:before				{ content: '\f007'; }
.ico.envelope:before,
.icon.mail:before,
.ico.mail:before				{ content: '\f0e0'; }
.ico.calendar:before			{ content: '\f073'; }
.ico.folder:before				{ content: '\f07c'; }
.ico.list:before				{ content: '\f03a'; }
.ico.hourglass:before			{ content: '\f251'; }
.ico.image:before				{ content: '\f1c5'; }
.icon.time:before,
.ico.time:before				{ content: '\f017'; }
.ico.pdf:before					{ content: '\f1c1'; }
.icon.credit:before,
.ico.credit:before				{ content: '\f0d6'; }
.ico.profile:before				{ content: '\f036'; }
.ico.favorite:before			{ content: '\f004'; }
.ico.book:before				{ content: '\f2b9'; }
.ico.mailcon:before				{ content: '\f199'; margin-right: 7px; }
.icon.note:before,
.ico.note:before				{ content: '\f249'; }
.icon.medal:before,
.ico.medal:before				{ content: '\f091'; }
.ico.ban:before                 { content: '\f05e'; }
.ico.globe:before               { content: '\f0ac'; }
.ico.personal:before            { content: '\f044'; }
.ico.document:before            { content: '\f1c1'; }
.stars                          { color: #FFC107; font-size: 18px; }

.table,
table,
#main .textdiv,
.textdiv,
.textarea  { width: 100%; }


/* ==== PAGE POSITIONING ==== */
#top { width: 100vw; max-width: 1920px; background-color: #fff; margin: 0 auto; position: unset!important; }
#header { }
#container { }
#left { }
#main { }
#footer { }

@media (max-width: 992px) {
    #top { max-width: 100vw; overflow-x: hidden; padding: 0 10px; }
}

/* ------ Header ------ */
#header .inside { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; }
.logo { display: block; width: 180px; height: 27px; background: url('img/logo.svg') center center no-repeat; background-size: contain; }
.logo { margin: 0 auto; }
.buttons { display: flex; align-items: center; gap: 12px; }
.buttons .button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: #ff57e3; color: #fff; border-radius: 5px; font-size: 14px; font-weight: 600; text-transform: uppercase; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.buttons .button:hover { transform: translateY(-1px); background: #e64fd2; box-shadow: 0 8px 18px rgba(73, 22, 101, 0.18); }
.buttons .button:active { transform: translateY(0); background: #d447c0; box-shadow: none; }

#header .nav { position: absolute; top: 0; bottom: 0; left: -20vw; width: 20vw; background-color: #fff; padding: 25px; z-index: 1; box-shadow: 0 6px 16px rgba(255, 87, 227, 0.25); }
#header .nav { transition: left .5s ease; }
#header .nav.open { left: 0; overflow: scroll; }
#header .mobile_btn { position:absolute; top: 15px; cursor: pointer; }
#header .mobile_menu { left: 25px; }
#header .mobile_btn:before { font: 30px "Font Awesome 7 Pro"; color: #999; }
#header .mobile_menu:before { content: '\f0c9'; }
#header .menu_close { right: 25px; }
#header .menu_close:before { content: '\f00d'; }
#header .nav a:visited,
#header .nav a { color: #ff57e3; }
#header .nav .level_2 { margin-left: 16px; }
#header .nav .item { font-weight: 600; margin: 10px; }

@media (max-width: 992px) {
    #header .nav { width: 50vw; left: -50vw; }
}
@media (max-width: 768px) {
    #header .nav { width: 100vw; left: -100vw; }
}

/* ------ Aside ------ */

/* ------ Main ------ */
#main .block { max-width: 1350px; margin: 0 auto 90px; }

#main .mod_catnav.block { margin: 18px 0 10px; max-width: unset; }
.mod_catnav ul.level_1 { display: flex; flex-wrap: wrap; gap: 18px 24px; justify-content: center; }
.mod_catnav ul.level_1 > li > a { color: #AF2EFF; font-weight: 300; letter-spacing: 0.1px; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease; text-transform: uppercase; }
.mod_catnav .bh { display: none; }

#main .slider .active {  }
#main .slider,
#main .slider div { min-height: 600px; background-size: cover; max-width: unset; margin: unset;}

.flex_slider .bullets li { width: 40px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); margin: 0 10px; transition: width 180ms ease, background 180ms ease; }
.flex_slider .bullets li:hover { cursor: pointer; }
.flex_slider .bullets li.active { background: rgb(255, 255, 255); width: 80px; }

@media (max-width: 768px) {
    #main .flex_slider,
    #main .slider { display: none; }
}

/* ------ Agent List ------ */
.agentlist { display: grid; grid-template-columns: repeat(3, minmax(0, 420px)); gap: 20px; margin: 30px 0; justify-content: center; background-color: #fdd5fd; padding: 75px 25px; }
@media (max-width: 992px) {
  .agentlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .agentlist { grid-template-columns: 1fr; }
}
#main .profile { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; background: #ffffff; border-radius: 12px; padding: 20px 18px 18px 18px; box-shadow: 0 10px 30px rgba(73, 6, 101, 0.10); border: 1px solid rgba(73, 6, 101, 0.10); overflow: hidden; min-height: 230px; }
#main .profile .img.pic { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; grid-column: 1; grid-row: 1 / 4; }
#main .profile h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 24px; color: #AF2EFF; font-weight: 600; line-height: 30px; }
#main .profile h3 a { color: #AF2EFF; }
#main .profile .rating { grid-column: 2; grid-row: 2; display: inline-flex; align-items: center; gap: 6px; color: #f4c000; font-size: 13px; line-height: 1; text-decoration: none; }
#main .profile .rating .stars { display: inline-flex; gap: 4px; }
#main .profile .rating .amount { color: #5e4a73; font-size: 12px; font-weight: 600; }
#main .profile p.teaser { grid-column: 1 / 3; margin: 0; font-size: 16px; line-height: 20px; color: #2b2b2b; }
#main .profile .foot { grid-column: 1 / 3;font-size: 13px; line-height: 18px; color: #5e4a73; background: rgba(175, 46, 255, 0.07); padding: 10px 12px; border-radius: 8px; }
#main .profile .right .tariff { color: #E23BBF; }
#main .profile .right .tariff.disable { text-decoration: line-through; color: #999; }
#main .profile .right.buttons { grid-column: 1 / 3; display: block; }
#main .profile .right .button { display: block; text-align: center; margin-top: 10px; }
#main .profile .calls   { line-height: 20px; font-size: 22px; margin-top: 5px; }
#main .profile .calls:before { content: ''; display: inline-block; width: 20px; height: 20px; background: url("img/phone.svg") 0 0 no-repeat; background-size: contain; position: relative; top: 2px; margin-right: 5px; }

.button.offline  { background-color: #fff; color: #999999; border: 1px solid #999999; }
.button.break .ico:before,
.button.busy .ico:before,
.button.offline .ico:before { content: '\f3dd'; font-family: "Font Awesome 7 Pro"; font-weight: 900; transform: rotate(90deg); }
.button.busy  { background-color: #fff; color: #FF57E3; border: 1px solid #FF57E3; }
.button.break  { background-color: #fff; color: #AF2EFF; border: 1px solid #AF2EFF; }
.button.online { background-color: #FF57E3; color: #fff; }
.button.online .ico:before { content: '\f2a0'; font-family: "Font Awesome 7 Pro"; font-weight: 900; }

@media (max-width: 768px) {
    .agentlist { grid-template-columns: 1fr; }
}

/* ------ Agent Detail ------ */
#agentdetail { position: relative; max-width: 1350px; margin: 0 auto 90px; padding: 60px 24px 40px; display: flex; gap: 40px; align-items: flex-start; }
#agentdetail .block { margin: 0 0 90px 0; }
#agentdetail .block .bh { text-align: left; }
#agentdetail:before { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; height: 160px; background: #fdd5fd; transform: translateX(-50%); z-index: 0; }
#agentdetail .left, #agentdetail .right { position: relative; z-index: 1; }
#agentdetail .left { width: 230px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#agentdetail .left img { width: 205px; height: 205px; box-sizing: content-box; border-radius: 50%; object-fit: cover; border: 25px solid #fff; margin-top: -24px; }
#agentdetail .left .button { width: 100%; text-align: center; }
#agentdetail .left .tariff { font-size: 14px; line-height: 20px; color: #333; display: block; }
#agentdetail .right { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
#agentdetail .profile { background: transparent; display: block; border: none; border-radius: unset; box-shadow: none; }
#agentdetail .profile.detail { margin: 0; }
#agentdetail .profile.detail h1 { font-size: 36px; line-height: 44px; color: #af2eff; font-weight: 600; margin: 0 0 50px; }
#agentdetail .profile.detail .stars { font-size: 18px; display: block; }
#agentdetail .profile.detail .calls { color: #999999; line-height: 20px; font-size: 22px; margin-top: 6px; display: block; }
#agentdetail .profile.detail .calls:before { content: ''; display: inline-block; width: 20px; height: 20px; background: url("img/phone.svg") 0 0 no-repeat; background-size: contain; position: relative; top: 2px; margin-right: 5px; }
#agentdetail .profile.detail .longtext { margin-top: 50px; color: #333; }
#agentdetail .pnotice { margin-top: 26px; background: rgba(255, 87, 227, 0.06); padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(79, 12, 117, 0.08); }
#agentdetail .pnotice h2 { margin: 0 0 8px; }

#agentdetail .rating .stars { margin: 0 25px; }
#agentdetail .rating .date { color: #999; font-size: 16px; font-weight: 400; }
#agentdetail .rating .text { margin-top: 10px; }
#agentdetail .rating { padding: 20px 0; border-bottom: 1px solid #FDD5FD; }
#agentdetail .rating .reply { padding-left: 25px; font-style: italic; }
#agentdetail .rating p:last-of-type { padding: 0; }
#agentdetail #ratings .bh { margin-bottom: 15px; }

#agentdetail .categories .item  { display: inline-block; padding: 5px 10px; border-radius: 5px; border: 1px solid #AF2EFF; color: #AF2EFF }
#agentdetail .categories .item  { font-size: 12px; font-weight: 400; line-height: 20px; margin: 0 10px 10px 0; }
#agentdetail .categories .bh    { margin: 10px 0; font-size: 20px; font-weight: 500; }

@media (max-width: 1024px) {
  #agentdetail { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  #agentdetail .left { width: 100%; max-width: 260px; }
  #agentdetail .right { width: 100%; padding-top: 0; }
  #agentdetail .block .bh,
  #agentdetail .profile.detail h1 { text-align: center; }
  #agentdetail .profile.detail .calls { justify-content: center; }
}

/* ------ How it works ------ */
.how-works { max-width: 1260px; margin: 80px auto 70px; padding: 0 24px; text-align: center; color: #333333; }
.how-works .bh { font-size: 36px; line-height: 50px; color: #af2eff; font-weight: 600; margin-bottom: 46px; }
.how-works .box { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.how-works .item { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 220px; }
.how-works .item .icon { width: 80px; height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; }
.how-works .box > div:nth-child(1) .icon { background-image: url('img/sign-up 1.svg'); }
.how-works .box > div:nth-child(3) .icon { background-image: url('img/account 1.svg'); }
.how-works .box > div:nth-child(5) .icon { backgroauthund-image: url('img/consulting 1.svg'); }
.how-works .item span { display: block; font-size: 18px; line-height: 30px; max-width: 370px; text-align: center; }
.how-works .arrow { flex: 0 0 40px; height: 20px; background: url('img/Vector.svg') center center / contain no-repeat; opacity: 0.45; }
.how-works p { margin: 36px auto 0; font-size: 18px; line-height: 30px; color: #333333; }

@media (max-width: 1024px) { .how-works { margin: 70px auto 60px; } .how-works .box { gap: 20px; } .how-works .arrow { display: none; } }
@media (max-width: 640px) { .how-works .bh { font-size: 30px; line-height: 40px; margin-bottom: 32px; } .how-works .item { flex-basis: 100%; } .how-works .item span { max-width: 100%; } .how-works p { margin-top: 28px; } }

/* ------ Advantages ------ */
.advantages { position: relative; padding: 80px 40px 86px; background: #fdd5fd url('img/advantages_bg.svg') center center / cover no-repeat; border-radius: 22px; overflow: hidden; text-align: center; color: #333333; }
.advantages .bh { font-size: 36px; line-height: 50px; color: #af2eff; font-weight: 600; margin-bottom: 46px; position: relative; }
.advantages .box { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 42px; flex-wrap: wrap; }
.advantages .item { flex: 1 1 300px; max-width: 340px; min-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.advantages .item .icon { width: 80px; height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; }
.advantages .box > .item:nth-child(1) .icon { background-image: url('img/meeting 1.svg'); }
.advantages .box > .item:nth-child(2) .icon { background-image: url('img/review 1.svg'); }
.advantages .box > .item:nth-child(3) .icon { background-image: url('img/monitor 1.svg'); }
.advantages .headline { font-size: 18px; line-height: 30px; color: #af2eff; font-weight: 600; display: block; }
.advantages .text { font-size: 18px; line-height: 25px; color: #333333; display: block; }

@media (max-width: 1024px) { .advantages { margin: 30px 16px 70px; padding: 70px 30px 76px; } .advantages .box { gap: 30px; } }
@media (max-width: 640px) { .advantages { padding: 60px 22px 66px; } .advantages .bh { font-size: 30px; line-height: 40px; margin-bottom: 32px; } .advantages .item { flex-basis: 100%; max-width: none; } }

/* ------ Text Block ------ */
#textblock { margin: 90px auto 100px; color: #333333; }
#textblock .bh, .cte_text.block .bh { font-size: 36px; line-height: 50px; color: #af2eff; font-weight: 600; text-align: center; margin-bottom: 26px; }
#textblock > p, .cte_text.block > p { font-size: 18px; line-height: 30px; margin: 0 0 18px; }
#textblock .intro p { margin: 0 0 18px; }
#textblock .intro p:last-child { margin-bottom: 0; }
#textblock .cards, #textblock .box, .cte_text.block .cards, .cte_text.block .box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
#textblock .item { display: flex; flex-direction: column; gap: 12px; }
#textblock .img { width: 430px; height: 250px; max-width: calc(100vw - 56px); background-size: cover; background-position: 50% 50%; }
#textblock .item3 .img { background-image: url('img/image.png');)}
#textblock .item2 .img { background-image: url('img/image-1.png'); }
#textblock .item1 .img { background-image: url('img/image-2.png'); }

#textblock h5 { font-size: 24px; line-height: 30px; color: #af2eff; font-weight: 600; margin: 4px 0 0; display: block; }
#textblock .item p { font-size: 18px; line-height: 30px; margin: 0; }

@media (max-width: 1200px) {
    #textblock { margin: 70px auto 80px; }
    #textblock .box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 768px) {
    #textblock, .cte_text.block { padding: 0 18px; }
    #textblock .bh { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
    #textblock .intro, .cte_text.block .intro { font-size: 17px; line-height: 28px; }
    #textblock .box { grid-template-columns: 1fr; }
    #textblock .item h5 { font-size: 22px; line-height: 28px; }
}




#main .mod_recharge .payment { padding: 25px; border-bottom: 1px solid #ff57e3; margin-bottom: 30px; }
#main .mod_recharge .payment h3 { text-align: left; }

/* ------ Footer ------ */
#footer { background: #fffba3; color: #333; font-size: 14px; line-height: 20px; }
#footer a { color: #333; }
#footer .inside { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1350px; margin: 0 auto; padding: 40px 0; gap: 25px; }
#footer .block { margin: 0; max-width: unset; }
#footer .logo { margin: 0 0 25px 0; }
#footer .bh { text-align: left; margin: 0 0 25px 0; line-height: normal; }
#footer h6.bh { font-size: 1rem; }
#footer .social { margin-top: 25px; }
#footer .social img:hover { transform: scale(1.3); cursor: pointer; transition: transform .3s; }
.contribute { background: #F5F199; color: #333; }

@media (max-width: 992px) {
    #footer .inside { grid-template-columns: 1fr; }
}

/* ------ Window ----- */
#window { max-width: 100vw; }