@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [SD1](//sd1.su)
 * @summary
 * @created 2016-06
 * @modified 2017-01
 *
 * @link https://cdn.sd1.su/css/domain/sdc-sd1-page-index.css
 * @file D:/kz/kz-controls/sd1.su/cdn.sd1.su/css/domain/sdc-sd1-page-index.css
 *
 * @remarks
 * =============================================================================
 */

:root
{
--color-primary:#e8522d;
--color-secondary:#312651;
--color-accent1:#78a423;
--color-accent2:#b02626;
--color-accent3:#17696a;
--color-text-muted:#83829a;
--color-bg-light1:#f2fae3;
--color-bg-light2:#dbe9ea;
--color-bg-light3:#f3f4f8;
}

body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background-color:var(--color-bg-light3);color:var(--color-secondary)}
.gradient-bg-hero{background-image:linear-gradient(135deg,var(--color-bg-light2) 0%,var(--color-bg-light1) 100%)}
.gradient-bg-feature{background-image:linear-gradient(45deg,var(--color-accent3),var(--color-accent1));color:#fff}
.gradient-text{background-image:linear-gradient(90deg,var(--color-primary),var(--color-accent2));background-clip:text;color:transparent}
.btn-primary{background-image:linear-gradient(90deg,var(--color-primary),#f56a45);color:#fff;transition:all .3s ease-in-out;box-shadow:0 4px 15px 0 rgba(232,82,45,.4)}
.btn-primary:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px 0 rgba(232,82,45,.6)}
.project-card{background-color:#fff;border-radius:12px;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;box-shadow:0 4px 6px rgba(0,0,0,.05);border:1px solid var(--color-bg-light2)}
.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(49,38,81,.1)}
.project-card i{transition:transform .4s ease-in-out}
.project-card:hover i{transform:rotateY(360deg)}
.benefit-card{background-color:#fff;border-radius:10px;padding:1.5rem;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.07);transition:all 0.3s ease;border-left:5px solid transparent}
.benefit-card:hover{transform:scale(1.03);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.benefit-card:nth-child(odd):hover{border-left-color:var(--color-primary)}
.benefit-card:nth-child(even):hover{border-left-color:var(--color-accent1)}
.benefit-card i{font-size:2.5rem;margin-bottom:1rem;display:inline-block;transition:transform 0.3s ease}
.benefit-card:hover i{transform:scale(1.1) rotate(-5deg)}

.workflow-step{position:relative;text-align:center;padding:1rem;flex:1;min-width:120px}
.workflow-step i{font-size:2rem;padding:1rem;border-radius:50%;background-color:var(--color-bg-light2);color:var(--color-accent3);margin-bottom:0.5rem;display:inline-block;transition:all 0.3s ease}
.workflow-step:hover i{background-color:var(--color-accent3);color:white;transform:scale(1.1)}

.workflow-container > div:not(:last-child)::after{content:'\f061';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:-15px;top:50%;transform:translateY(-110%);color:var(--color-text-muted);font-size:1.2rem}

@media (max-width:768px){
.workflow-container > div:not(:last-child)::after{content:'\f063';right:50%;top:auto;bottom:-15px;transform:translateX(50%)}
.workflow-step{margin-bottom:30px}
.workflow-step:last-child{margin-bottom:0}
}
.payment-card{background-color:white;border:1px solid var(--color-bg-light2);border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px rgba(0,0,0,.05);transition:box-shadow .3s ease}
.payment-card:hover{box-shadow:0 5px 15px rgba(0,0,0,.1)}
.payment-card ul{list-style:none;padding-left:0}
.payment-card li{margin-bottom:.75rem;display:flex;align-items:center}
.payment-card li i{margin-right:.75rem;color:var(--color-accent1);width:20px;text-align:center}
.contact-link i{transition:transform .3s ease}
.contact-link:hover i{transform:scale(1.2)}
footer{background-color:var(--color-secondary);color:var(--color-bg-light3)}
footer a{color:var(--color-bg-light2);transition:color .3s ease}
footer a:hover{color:var(--color-primary)}

.icon-orange{color:var(--color-primary)}
.icon-green{color:var(--color-accent1)}
.icon-red{color:var(--color-accent2)}
.icon-teal{color:var(--color-accent3)}
.icon-purple{color:var(--color-secondary)}
.icon-gray{color:var(--color-text-muted)}