.header-main{position:fixed;width:100%;height:50px;background:rgb(255 255 255 / 12%);box-shadow:none;transition:background 0.4s ease}
.top-header{height:100vh;background-image:url('/wp-content/themes/webacademy/images/wordpress/gettyimages-1502770338-2048x2048.jpg');line-height:1.5}
.top-header::before{background:linear-gradient(180deg, rgb(129 32 201 / 90%), rgb(160 121 224 / 90%))}
.top-header .wa-content{position:relative}
ul.navbar-top > li a{color:#fff;font-size:18px;transition:color 0.4s ease}
.line-icon1, .line-icon2, .line-icon3{background-color:#e0c879}
.header-main.scrolled{background:#8120c9}
h1 span{display:block;font-weight:bold;color:yellow;font-size:50px}
.text-action{text-align:center;padding:50px 0;font-size:45px;background:#fff}
.text-action .wrap-text{padding-right:25px;line-height:1.3}
.text-action .wrap-text span{font-weight:600}
.text-action .wrap-img img {border-radius:30px}
.header-title{padding:0 0 40px;text-align:center}
.header-title h2{margin:0 0 15px}
.header-title p{margin:0;font-size:24px}
.feature-block{color:#fff}
.features{display:flex;gap:24px}
.feature-item{display:flex;align-items: center;border-radius:12px;padding:14px 20px;gap:16px;text-align:left;background-color:transparent;box-shadow:none;opacity:0;transform:translateX(-20px);transition:all 0.5s ease}
.feature-item.visible{background-color:rgb(160 121 224 / 70%);box-shadow:0 4px 10px rgba(0, 0, 0, 0.15),inset 0 1px 2px rgba(255, 255, 255, 0.1);opacity: 1;transform: translateX(0)}
.checkmark-wrapper{width:40px;height:40px;flex-shrink:0}
.checkmark-circle,.checkmark-check{stroke-dasharray:100;stroke-dashoffset:100;stroke:#fff;stroke-width: 2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feature-text{font-size:28px;opacity:0;transform:translateX(-20px);transition:all 0.7s ease;line-height:1.2}
.feature-text.visible{opacity:1;transform:translateX(0)}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.target-audience {background:linear-gradient(180deg, rgb(129 32 201 / 76%), rgb(160 121 224 / 90%));/*background-color:#8e63d6;*/color:#fff;padding:40px 24px;border-radius:16px;max-width:800px;margin:50px auto;box-shadow:0 4px 20px rgba(0, 0, 0, 0.15);opacity:0;transform:translateY(50px);transition:opacity 0.6s ease-out, transform 0.6s ease-out}
.target-audience.visible{opacity:1;transform:translateY(0)}
.target-audience h2{font-size:45px;color:#fff;font-weight:600;margin-bottom:12px;text-align:center}
.target-audience .subtitle{font-size:24px;margin-bottom:24px;text-align:center}
.audience-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.audience-list li{position:relative;width:100%;max-width:660px;margin:auto;padding-left:44px;font-size: 20px;line-height:1.2;background-color:rgba(255, 255, 255, 0.08);border-radius:12px;padding:14px 20px 14px 44px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1),inset 0 1px 2px rgba(255, 255, 255, 0.05);opacity:0;transform:translateX(-30px);transition:opacity 0.5s ease,transform 0.5s ease}
.audience-list li::before {content:"\2714";position: absolute;left:16px;top:50%;display: inline-block;transform:translateY(-50%);color:yellow;font-size:1.2rem;opacity:0;transition:opacity 0.3s ease}
/* .audience-list li::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='yellow'%3E%3Cpath d='M7.629 14.566l-4.95-4.95 1.414-1.414 3.536 3.536 7.778-7.778 1.414 1.414z'/%3E%3C/svg%3E");
background-size: contain;
} */
.audience-list li.visible {opacity:1;transform:translateX(0)}
.audience-list li.visible::before{opacity:1}
.service-benefits {background-color:#f2ecfd;padding:40px 24px;border-radius:16px;max-width:800px;margin:40px auto;box-shadow:0 4px 20px rgba(0, 0, 0, 0.05);opacity:0;transform:translateY(60px);transition:opacity 0.6s ease,transform 0.6s ease}
.service-benefits.visible {opacity:1;transform:translateY(0)}
.service-benefits h2 {font-size:45px;margin-bottom:12px;text-align:center}
.service-benefits .subtitle{font-size:24px;margin-bottom:24px;text-align:center;color:#666}
.benefits-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.benefits-list li{position:relative;width:100%;max-width:500px;margin:auto;font-size:1rem;background-color:rgba(0, 0, 0, 0.1);border-radius:12px;padding:14px 20px 14px 44px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.03),inset 0 1px 2px rgba(255, 255, 255, 0.04);opacity:0;transform:translateX(-20px);transition:opacity 0.5s ease,transform 0.5s ease}
.benefits-list li::before{content:"✔";position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#4caf50;font-size:1.2rem;opacity:0;transition:opacity 0.3s ease}
.benefits-list li.visible{opacity:1;transform:translateX(0)}
.benefits-list li.visible::before{opacity:1}
.how-we-work {background:linear-gradient(90deg, #8120c9, #a079e0);/*background-color:#8e63d6;*/color:#fff;padding:40px 20px;border-radius:16px;max-width:800px;margin:50px auto;box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);opacity:0;transform:translateY(50px);transition:opacity 0.6s ease,transform 0.6s ease}
.how-we-work.visible {opacity:1;transform:translateY(0)}
.how-we-work h2 {font-size:45px;margin-bottom:12px;text-align:center;color:#fff}
.how-we-work .subtitle{text-align:center;font-size:24px;margin-bottom:30px}
.steps-list{max-width:500px;margin:auto;counter-reset:step-counter;list-style:none;padding:0;display:grid;gap:16px}
.steps-list li{position:relative;background-color:rgba(255, 255, 255, 0.08);border-radius:12px;padding:14px 20px 14px 52px;font-size:1rem;line-height:1.5;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1),inset 0 1px 2px rgba(255, 255, 255, 0.05);opacity:0;transform:translateX(-30px);transition:opacity 0.5s ease,transform 0.5s ease}
.steps-list li::before{counter-increment:step-counter;content:counter(step-counter);position:absolute;left:0;top:50%;transform:translateY(-50%);background-color:#f5f5f5;color:#000;font-weight:bold;width:34px;height:100%;border-radius:6px 0 0 6px;line-height:24px;font-size:18px;display:flex;align-items:center;justify-content:center}
.steps-list li.visible{opacity:1;transform:translateX(0)}
/* базові послуги */
/* .pricing-section{position:relative;background-image:url('/wp-content/themes/webacademy/images/wordpress/ChatGPT_1.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.pricing-section::after{content:"";position:absolute;width:100%;height:100%;inset:0;background-color: rgba(0,0,0,0.4)} */
.pricing-section {padding:40px 0;background:#f8f8f8;text-align:center}
.pricing-section h2{font-size:45px;margin-bottom:30px;color:#5a3abf}
.pricing-table {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;opacity:0;transform:translateY(50px);transition:all 0.8s ease}
.pricing-table.visible {opacity:1;transform:translateY(0)}
.pricing-card .line{display:block;height:10px}
#site-price .line{background:#FFC107;}
#ecommerce-price .line{background:rgb(135, 62, 255);}
.pricing-card{height:425px;position:relative;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-width:320px;flex:1 1 280px;transition:transform 0.3s ease,box-shadow 0.3s ease;overflow:hidden;}
.pricing-card .card-header{height:70px}
.pricing-card .card-content{padding:24px 20px}
/* .pricing-card:hover{transform:translateY(-5px);box-shadow:0 6px 16px rgba(0,0,0,0.15)} */
.pricing-card h3{font-size:1.4rem}
#site-price h3::after{content:'';height:2px;width:150px;display:block;margin:10px auto;background:#FFC107}
#ecommerce-price h3::after{content:'';height:2px;width:150px;display:block;margin:10px auto;background:rgb(135, 62, 255)}
.pricing-card .price{font-size:30px;margin:0 0 16px;font-weight:bold}
#site-price .price{color:#FFC107}
#ecommerce-price .price{color:#913bff}
.pricing-card ul{list-style:none;padding:0;margin:0;text-align:left}
.pricing-card li{position:relative;margin-bottom:6px;font-size:1rem}
.pricing-card li::before{content:'';position:absolute;left:0;top:4px;width:20px;height:20px;background-size: 20px 20px;background-repeat: no-repeat}
.pricing-card li span{display:inline-block;margin-left:30px}
#site-price li svg{color:#FFC107}
#site-price li::before{background-image: url('data:image/svg+xml;utf8,')}
#ecommerce-price li::before{background-image: url('data:image/svg+xml;utf8,')}
.pricing-card .deadline{text-align:left;font-size:17px;font-weight:bold;margin-top:15px;margin-left:30px}
.pricing-card .price-footer{position:absolute;bottom:0;width:100%;padding:5px 20px;background:#f5f5f5}
.pricing-card .note{font-size:0.9rem;color:#777;text-align:left}
.pricing-card .note span{font-size:22px;line-height:1}
/* додаткові послуги */
.extras-section{padding:40px 20px;background:#fff;text-align:center}
.extras-section h2{font-size:45px;margin-bottom:30px;color:#5a3abf}
.extras-table{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(50px);transition:all 0.8s ease}
.extras-table.visible{opacity:1;transform:translateY(0)}
.extras-item{display:flex;justify-content:space-between;background:#f9f9f9;padding:14px 20px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05);font-size:1rem;transition:0.3s ease}
.extras-item:hover{background:#f0f0ff}
.extras-item .price{color:#000;font-weight:bold}
/* кнопка заповнити анкету */
.cta-button-wrapper{text-align:center;margin-top:40px}
.cta-button{display:inline-block;min-width:150px;padding:15px 15px;line-height:1;background-color:#e60d2e;color:#fff;text-decoration:none;border-radius:6px;font-size:20px;border:none;cursor:pointer;transition:background 0.3s ease,transform 0.3s ease}
.cta-button:hover{background:#c90825;transform:scale(1.05);color:#fff}
/* секція "Готові створити сайт?" */
.cta{position:relative;background-image:url('/wp-content/themes/webacademy/images/wordpress/gettyimages-1174840407-2048x2048.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.cta:before{content:"";position:absolute;width:100%;height:100%;inset:0;background-color: rgba(0,0,0,0.4)}
.cta-section{position:relative;z-index:10;padding:40px 20px;text-align:center;opacity:0;transform:translateY(50px);transition:all 0.8s ease}
.cta-section.visible{opacity:1;transform:translateY(0)}
.cta-section h2{font-size:2rem;margin-bottom:15px;color:#fff}
.cta-section p{font-size:18px;max-width:600px;margin: 0 auto 25px;color:#fff}
.paralax{position:relative;background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat}
.paralax::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;inset:0}
.audience-paralax{background-image:url('/wp-content/themes/webacademy/images/wordpress/gettyimages-1502770338-2048x2048.jpg')}
.audience-paralax::before{background-color: rgba(0,0,0,0.4)}
.work-paralax{background-image:url('/wp-content/themes/webacademy/images/wordpress/gettyimages-837392998-2048x2048.jpg')}
.work-paralax::before{background-color: rgba(0,0,0,0.4)}
.service-paralax{background-image:url('/wp-content/themes/webacademy/images/wordpress/gettyimages-1652770303-2048x2048.jpg')}
.service-paralax::before{background-color:rgba(255, 255, 255, .5)}
/* .text-action{background:linear-gradient(90deg, #8120c9, #a079e0)} */
/* приклади сайтів */
/* .examples{position:relative;background-image:url('/wp-content/themes/webacademy/images/wordpress/ChatGPT_2.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.examples::after{content:"";position:absolute;width:100%;height:100%;inset:0;background-color: rgba(0,0,0,0.4)} */
.examples{padding:60px 20px;background-color:#f6f3ec}
.examples h2{text-align:center;font-size:45px}
.card-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap:24px}
.site-card{position:relative;display:block;overflow:hidden;border-radius:12px;background:#fff;border-radius:12px;overflow:hidden;transition:transform 0.3s ease}
.site-card:before{content:'';position:absolute;top:0;right:0;width:0;height:0;border-radius:0 0 0 100% !important;background-color:#f6ff78;transition:all 0.6s ease-in-out;pointer-events:none}
.site-card:hover:before{width:1000px;height:1000px}
.site-card:hover .icon{background-color:#f6ff78}
.site-overlay{position:absolute;right:0;top:0;width:60px;height:60px;padding:0 0 10px 10px;background-color:#f6f3ec;border-radius:0 0 0 30px;z-index:2}
.site-overlay::before{content:'';position:absolute;top:0;left:-20px;width:20px;height:20px;background-color:transparent;border-top-right-radius:30px;box-shadow:10px -10px 0 10px #f6f3ec}
.site-overlay::after{content:'';position:absolute;top:60px;right:0;width:20px;height:20px;background-color:transparent;border-top-right-radius:30px;box-shadow:10px -10px 0 10px #f6f3ec}
.site-card .icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;min-width:50px;font-size:18px;background-color:#fff;color:#000;border-radius:100%;transition:all .3s ease;z-index:5}
.site-card .icon::before{content: "→"}
.site-card a{color:inherit;text-decoration:none;display:block;height:100%}
.site-card .image-wrapper {overflow:hidden;height:180px}
.site-card .image-wrapper img{position:absolute;left:-20px;bottom:-30px;height:180px;width:80%;transition:all .5s ease;object-fit:cover;border-radius:0 30px 0 0}
.site-card:hover .image-wrapper img{left:0;bottom:0}
.site-card .card-info{position:relative;z-index:100;padding:16px 20px}
.site-card .card-info h3{margin:0 0 12px}
/*Замовити послугу/консультацію */
#modalService .content-wrap{padding:0 10px 30px 0}
#modalService h3{margin:0 0 30px;text-align:center;font-weight:600}
#modalService h3::after {
content: '';
height: 2px;
width: 150px;
display: block;
margin: 10px auto;
background: #8120c9;
}
#modalService .modal-content{max-width:650px}
#modalCall .cta-button-wrapper{margin-top:0}
#modalCall .cta-button{width:95%;background:linear-gradient(90deg, #8120c9, #a079e0);}
#modalCall .form-group input{display:block;width:95%;margin:auto}
.modal-order{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(90deg, #8120c9, #a079e0);opacity:0;visibility:hidden;display:flex;align-items:center;justify-content:center;transition:opacity 0.4s ease, visibility 0.4s ease;z-index:1000}
.modal-order.active{opacity:1;visibility:visible}
.modal-order .modal-content{background-color:#fff;border-radius:6px; max-width:450px;padding:0 20px;width: 90%;max-height:calc(100vh - 100px);overflow:hidden;transform:translateY(-30px);opacity:0;transition:opacity 0.4s ease, transform 0.4s ease;position:relative}
.modal-order .modal-content h2{margin-top:0;text-align:center}
.modal-order .content-wrap{padding:0 0 30px;margin-top:40px;max-height:calc(100vh - 150px);overflow:auto}
.modal-order .selected-services{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;min-height:40px;border:2px solid #ddd;padding:8px 10px;border-radius:8px;background:#fafafa}
.modal-order .selected-services .tag{position:relative;background:#913bff;color:#fff;padding:3px 20px;border-radius:6px;display:flex;align-items:center;gap:8px;user-select:none}
.modal-order .services-list{display:flex;gap:15px;margin-bottom:20px}
.modal-order label.service-option{padding:7px 15px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all 0.3s ease;user-select:none;display:flex;align-items:center;gap:15px}
.modal-order label.service-option:hover{border-color:#8120c9}
.modal-order input[type="checkbox"]{width:20px;height:20px;cursor:pointer}
.modal-order textarea{width:100%;min-height:120px;padding:12px 15px;font-size:1rem;border-radius:8px;border:2px solid #ddd;resize:vertical;transition:border-color 0.3s ease}
.modal-order textarea:focus{outline:none;border-color:#8120c9;box-shadow:0 0 6px rgba(63, 81, 181, 0.4)}
/* кнопка видалення послуги START */
.modal-order .selected-services .tag .remove-btn{display:none!important;width:25px;height:25px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:25px;line-height:0;padding:0 6px 2px 6px;border-radius:50%;background:#e60d2e;color:#fff;transition:background-color 0.3s ease;position:absolute;top:-10px;right:-13px;font-weight:400;padding-top:2px}
.modal-order .selected-services .tag .remove-btn:hover{background:rgba(255 255 255 / 0.8)}
/* кнопка видалення послуги END */
.modal-order .label-text{display:block;margin-bottom:5px;font-weight:600;line-height:1.4}
.modal-order .form-group{position:relative;margin-bottom:24px}
.modal-order .form-group input{width:100%;padding:16px 12px 12px;font-size:16px;border:1px solid #ccc;border-radius:8px;outline:none;background-color:transparent;transition:border-color 0.3s}
.modal-order .form-group input:focus{border-color:#007bff}
.modal-order .form-group label{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-size:16px;color:#777;pointer-events:none;background-color:#fff;padding:2px 4px 0;transition:0.2s ease all}
.modal-order .form-group input:focus+label, .form-group input:not(:placeholder-shown)+label{top:-2px;left:10px;font-size:12px;color:#007bff}
.modal-order.active .modal-content{opacity:1;transform:translateY(0)}
.modal-order .modal-close{position:absolute;top:10px;right:13px;background:none;border:none;font-size:28px;cursor:pointer;color:#666;line-height:1}
.modal-order .form-group input:focus {border-color:#007bff}
.modal-order .form-group input:focus+label,.form-group input:not(:placeholder-shown)+label{top:-8px;left:10px;font-size:12px;color:#007bff}
/* кнопка "Потрібна уонсультація?" */
.wrap-trigger{position:fixed;bottom:20px;right:20px;z-index:999}
.trigger-btn{opacity:0;visibility:hidden;transition:opacity 0.4s ease, visibility 0.4s ease,transform 0.4s;flex-direction:column;align-items:center;text-align:center;cursor:pointer;}
.wrap-trigger .close-trigger{position:absolute;right:0;top:-35px;width:100%;text-align:right;cursor:pointer}
.trigger-btn.active{opacity:1;visibility:visible}
.trigger-btn .text-trigger{background-color:yellow;transition:box-shadow 0.4s, transform 0.4s,border 0.4s;padding:5px 14px;border-radius: 20px;font-size:18px;margin-bottom:8px;border:5px solid #f5f5f5;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);line-height:1.3}
.trigger-btn .wrap-img{width:100%;justify-content:end}
.trigger-btn .wrap-img span{padding:5px;background:yellow;display:inline-block;height:60px;width:60px}
.trigger-btn:hover .text-trigger{box-shadow:0 6px 18px rgba(0, 0, 0, 0.8);transform:scale(1.05);border:5px solid yellow;}
.trigger-btn{transition: max-height 0.5s ease;max-height:125px;}
.trigger-btn.collapsed{max-height:30px}
.arrow-up{padding:2px;border-radius:99999px;background:#fff;color:#fff}
/* стилі сповіщення відправки форми*/
.success-message,.error-message{text-align:center;padding:15px;border-radius:8px;margin-top:20px;max-width:600px;margin-left:auto;margin-right:auto}
.success-message{background:#d4edda;border:1px solid #c3e6cb;color:#155724}
.error-message{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}
#toastContainer{position:fixed;top:30px;right:0;left:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:90%;margin:auto}
.toast{background-color:#333;color:#fff;padding:12px 18px;border-radius:6px;box-shadow:0 4px 10px rgba(0, 0, 0, 0.2);opacity:0;transform:translateY(-20px);animation:slideIn 0.4s forwards,fadeOut 0.4s ease 4s forwards;font-size:16px;min-width:200px;position:relative;overflow:hidden}
.toast.success{background-color:#28a745}
.toast.error{background-color:#dc3545;color:#fff}
@keyframes slideIn{to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-20px)}}
.footer-menu a{display:block;font-size:16px;color:#f5f5f5;transition:color 0.3s ease}
.footer-menu a:hover{color:yellow}
.footer-menu a:nth-child(n+2){margin-bottom:5px}
.footer-menu h5{margin:0 0 5px;color:#fff;opacity:0.5}
@media(max-width:767px) {
.page-template-page-wordpress h2{margin-top:0;font-size:28px}
.target-audience,.service-benefits,.how-we-work,.examples,.extras-section{padding:40px 16px}
.extras-item{flex-direction:column}
.text-action{font-size:24px}
.text-action .wa-col-2{width:100%}
.text-action .wrap-text{padding:0 0 30px}
.features{flex-direction:column}
.feature-text{font-size:18px}
.pricing-table{gap:24px 0}
}
@media(max-width: 560px){
.header-main{background:none;box-shadow:none}
.nav-main{justify-content:flex-end}
#menu-top{display:block}
ul.navbar-top{margin:0}
.header-title{padding:0 0 20px}
.header-title p{line-height:1.3}
.pricing-card{height:auto}
.pricing-card .price-footer{position:relative}
.modal-order .services-list{flex-direction:column}
.modal-order .selected-services{gap:10px 20px}
.trigger-btn .text-trigger{font-size:16px}
.footer-menu{margin-bottom:30px}
}