/*
Theme Name: WincomT
Version: 1.0
Tested up to: 6.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: New one theme for new project 
Author: Victor Rudenkov
*/


/*Basic*/
body {padding:0; margin:0; font-size:16px; font-family: Arial, Helvetica, sans-serif;}

p {line-height:1.5;}

.wrapper {max-width:1200px; min-width:320px; width:100%; margin:auto; padding:0 20px; box-sizing: border-box;}

.wrapper_s {max-width:960px; min-width:320px; width:100%; margin:auto; padding:0 20px; box-sizing: border-box;}

.h1 {font-size:64px; color:#641CCD;}

.h3 {font-size:38px;}

section {padding:60px 0;}

@media screen and (max-width:960px){
    .h1 {font-size:40px; }
    section {padding:40px 0;}
}

/*Header*/

header {
    width:100%;
    position:fixed;
    height:60px;
    background:#fff;
    box-shadow: 0px 10px 10px 0px rgba(16, 13, 19, 0.10);
    z-index: 10;
}

.header_content {
    display: grid;
    grid-template-columns: 140px auto;
    justify-content: space-between;
    align-items:center;
    
}

.header_logo {display:block; background: url(./logo.png) no-repeat center left; background-size:contain; width:100px; height:50px; }

.header_mobile_menu {display:none;}

.header_menu ul {list-style: none; display:flex; gap:30px;}

.header_menu ul>li {position:relative;}

.header_menu ul>li>a {text-decoration:none; font-weight:bold; color:#000;}
.header_menu ul>li>a:hover {color:#641CCD;}

.header_menu ul>li>ul {display:none; position: absolute; top:15px; left:-15px; background:#fff; padding:30px 20px 20px 20px;}

.header_menu ul>li:hover>ul {display:block; }

.header_menu ul>li>ul a {display: block; padding:8px 0;}

@media screen and (max-width:800px){
    
    .header_menu {display:none; position:fixed; z-index: 5; top:60px; border-top:1px solid #ccc;
        width:100vw; left:-15px; }
    .header_menu.active {display:block; max-height:calc(100vh - 61px); overflow-y:scroll; overflow-x:hidden;}
    .header_menu ul {display:block; width:100%;
    background:#fff; margin-top:0; padding-top:30px;}
    .header_menu ul>li>ul {display:block; position:static; padding-top:20px;}

    .header_mobile_menu {display:block; width:24px; height:24px; 
        background:url(./brg_menu_btn.png); border:none; background-position:left;}
    .header_mobile_menu.active {background-position:right; }

    .menu-top-menu-container {box-shadow: 0px 10px 10px 0px rgba(16, 13, 19, 0.10);}

    .header_menu ul>li>a {color:#777; font-weight: 400;}
    .header_menu ul>li>ul>li>a {color:#641CCD; font-weight: 600;}
}

/* Hero  */
.hero {background: url(bg.png) center no-repeat; background-size: cover;}

.hero p {font-size:18px; max-width:800px; }

.hero ul {
    list-style: none;
    padding:0; 
    margin:50px 0;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    gap:50px;
}

.hero ul li {
    width:100%;
    max-width:300px;
    min-width:200px;
    position: relative;
    padding-top:60px;
    text-align:center;
    font-size:22px;
    line-height: 1.2;
    font-weight:bold;
    color:#000;
    border:4px solid #fff;
    padding:80px 20px 20px 20px;
    border-radius:14px;
}

.hero ul li:before {
    content:'';
    display:block;
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDYzIDYwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS41OyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLC04OC42NDQ5LC0xODAuMTM1KSI+CiAgICAgICAgPHBhdGggZD0iTTExOS42NjYsMTgzLjMwMUwxMjguNzMyLDIwMC4xMTJMMTQ3LjUyMSwyMDMuNTM5TDEzNC4zMzQsMjE3LjM1NUwxMzYuODgxLDIzNi4yODRMMTE5LjY2NiwyMjguMDEyTDEwMi40NTEsMjM2LjI4NEwxMDQuOTk4LDIxNy4zNTVMOTEuODEyLDIwMy41MzlMMTEwLjYwMSwyMDAuMTEyTDExOS42NjYsMTgzLjMwMVoiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOnJnYigyNTUsMTcyLDApO3N0cm9rZS13aWR0aDo2LjMzcHg7Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=) no-repeat;
    height:40px;
    width:40px;
    position:absolute;
    top:20px;
    left:calc(50% - 20px);
}

@media screen and (max-width:800px){
    .hero {background:#E9F1F7; padding-top:60px; }
}

/*product*/

.product {color:#fff; background: rgb(93,91,135);
    background: linear-gradient(90deg, rgba(93,91,135,1) 0%, rgba(69,9,126,1) 28%, rgba(118,9,121,1) 100%, rgba(0,212,255,1) 100%); font-size:18px; line-height:1.5;}

/*specs*/

.specs .items {
    padding:40px 0;
    margin:0;
    list-style: none;
}

.specs .items li {
    display: grid;
    grid-template-columns: 280px auto;
    gap:30px;
}

.specs .item_title {
    font-size: 18px; font-weight: bold; color:#F79824;
    text-align:right;
}

.specs .item_desc {
    color:#555;
    padding:0 0 40px 0;
    margin:0;
}
@media screen and (max-width:960px){
    .specs .items li {grid-template-columns: 200 auto;}
    .specs .item_title {text-align:left;}
}

@media screen and (max-width:600px){
    .specs .items li {display: block;}
    .specs .item_title {text-align:left;}
}

/*motivation*/

.motivation {color:#fff; background-color: #641CCD;}

.motivation .h3 {text-align:center; margin-bottom:20px;}

.motivation .subtitle {text-align:center; font-size:32px; text-transform: uppercase;}

.cards {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:40px; padding-top:50px;}

.card {border-radius:14px; padding:30px 20px; max-width:400px; min-width:180px; box-sizing: border-box;}

.motivation .card {background:#fff; color:#555; line-height: 1.5;}

.motivation .card_title {font-size: 28px; font-weight: bold; color:#641CCD; padding:0 0 30px 0; position:relative; padding-left:10px; line-height: 1.2;}

.motivation .card_title:before {
    content: '';
    display: block;
    width:40px;
    height:40px;
    background-color: #F79824;
    position: absolute;
    z-index: 5;
    transform: rotate(45deg);
    left:-50px;
}

@media screen and (max-width:780px){
    .cards {grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width:480px){
    .cards {grid-template-columns: 1fr;}
}

/*system*/

.system .subtitle {font-size: 20px; color:#641CCD;}
.system .card_title {font-size: 28px; color:#F79824; font-weight: bold;}


/*FAQ*/

.faq {background:#f5f5f5;}

.faq_item {
    padding:30px;
    margin:15px 0;
    background:#fff;
    border-radius: 14px;
}

.faq_question {color:#301A4B; font-size:18px; font-weight:bold;} 

/*Footer*/

footer {background:#f4f8ff; color:rgb(41, 41, 41);}

.footer_content {display:grid; grid-template-columns: 1fr 3fr; gap:20px; padding:40px 0;}



nav.footer_menu div>ul {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:30px;}
footer nav ul {list-style: none; padding:0; margin:0;}

.footer_menu li.menu-item-has-children>a { display:inline-block; font-weight:bold; padding-bottom:8px;}
nav.footer_menu li a {display:inline-block; padding:4px 0; font-weight:normal;}
.footer_menu ul a {color:rgb(46, 45, 45);} 
.footer_menu ul a:hover {color:rgb(59, 0, 168); text-decoration:none;} 
.footer_copyright {
    background:#f0f6ff; text-align:center; font-size:14px; color:#333333; padding:6px 0; box-shadow:0 0 30px #4286f43b;
}

.footer_info_logo img {width:120px; height:60px;}
.footer_info_text {padding:20px 0 0 0; max-width:240px; color:#4285F4;}

@media screen and (max-width:600px){
    nav.footer_menu div>ul {grid-template-columns: 1fr 1fr;}
    .footer_content {grid-template-columns: 1fr;}
}

@media screen and (max-width:400px){
    .footer_content {grid-template-columns: 1fr;}
}

/*404*/

.block_404 {min-height:600px; width:100%; background: rgb(121,175,177);
    background: linear-gradient(30deg, rgba(121,175,177,1) 0%, rgba(88,112,163,1) 48%, rgba(85,49,157,1) 100%);}

.block_404 .wrapper {text-align:center;}

.text_404 {
    color:#fff; font-size:50px; font-weight:600;
    padding-top:240px; text-align:center;
}

.go_back_404_btn {display:inline-block; padding:15px 30px; background:#fff; margin:30px auto; text-align:center; color:rgba(88,112,163,1); text-decoration:none; font-weight:bold;}