/*
Theme Name: A-Distr
Theme URI: https://artlanding.net
Description:
Author: Artlanding
Author URI: https://artlanding.net
Version: 1.0.1
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); 

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{border:0;background:#12242F;}
::-webkit-scrollbar-track{border:0;background:#eee;}

*{box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:#fff;padding:0;margin:0;font-family:'Open Sans';font-size:17px;font-weight:100;text-align:left;overflow-x:hidden;} body.over{overflow:hidden;} b, strong{font-weight:600;} h1, h2{position:relative;padding:0;margin:0 0 25px;font-size:35px;font-weight:700;} a, a:hover{text-decoration:none;border-bottom:none;color:inherit;} input, button, textarea{outline:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:100;color:#333;font-size:15px;font-family: 'Open Sans';} .container{position:relative;margin:0 auto;max-width:1300px;width:100%;z-index:3;} .btn, .btn:hover{display:inline-flex;border-radius:35px;font-weight:400;margin:10px 0;padding:5px 5px 5px 15px;font-size:15px;align-items:center;background:#7317a9;transition:all .3s;color:#fff;cursor:pointer;} .btn:after{display:inline-block;content:"";width:35px;height:35px;background: #fff url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.22 14.1146L20.496 8.39062L18.6106 10.276L23.0013 14.6666H9.66797V17.3333H23.0013L18.6106 21.724L20.496 23.6093L26.22 17.8853C26.7199 17.3852 27.0007 16.7071 27.0007 16C27.0007 15.2929 26.7199 14.6147 26.22 14.1146Z" fill="%23888888"/></svg>') no-repeat 3px center / 70%;border-radius:100%;margin:5px 5px 5px 10px;transition:all .3s;} .btn:hover:after{background-position:7.5px center;} .btn[disabled]{opacity:.5;cursor:not-allowed;} input.error, textarea.error{box-shadow:inset 5px 0 0 0 red;} .msg{background:#666;padding:5px 10px;border-radius:5px;font-size:13px;color:#fff;} .msg:empty{display:none;}

input, textarea{position:relative;resize:none;width:100%;padding:15px;background:#fff;border-radius:10px;border:1px solid #ccc;margin-bottom:10px;} textarea{height:150px;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:#fff!important;transition:background-color 5000s ease-in-out 0s;}

#head{position:relative;z-index:5;} #head .container{display:flex;align-items:center;justify-content:space-between;} #head .logo{display:inline-block;margin:10px 20px;} #head .logo img{height:50px;} #head .menu{position:relative;margin:5px 10px;} #head .menu a{position:relative;display:inline-block;margin:5px 10px;color:#333;font-weight:600;transition:all .3s;} #head .menu a:before{position:absolute;content:"";bottom:0;left:0;height:10px;width:0;background:#00d7c9;transition:width .3s;} #head .menu a:hover:before{width:75%;} #head .menu a span{position:relative;} #head .pm{position:relative;display:none;margin:5px 20px;width:45px;height:45px;background:#00d7c9;border-radius:100%;} #head .pm:before{position:absolute;content:"";top:50%;left:50%;width:20px;height:15px;border-top:2px solid #333;border-bottom:2px solid #333;transform:translate(-50%, -50%);} #head .pm:after{position:absolute;content:"";top:50%;left:50%;width:10px;height:2px;background:#333;transform:translate(-50%, -50%);transition:width .3s;} #head .pm:hover:after{width:35px;} #head .menu.mobile{position:absolute;right:20px;width:150px;border-radius:15px;background:#fff;margin:0;top:85px;box-shadow:0 0 10px rgba(0,0,0,.5);display:none;} #head .menu.mobile a{display:block;margin:10px;}

@media screen and (max-width:450px){ #head .pm{display:inline-block;} #head .menu{display:none;} }

#main{position:relative;padding:250px 0;width:calc(100% - 20px);max-width:1500px;margin:0 auto;border-radius:20px;background-repeat:no-repeat;background-position:center;background-size:cover;overflow:hidden;} #main:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, rgba(0,0,0,.5), rgb(115,22,161,.25));z-index:2;} #main .ttl{max-width:800px;margin:0 20px;} #main .ttl h1{color:#fff;} @media screen and (max-width:450px){ #main{width:100%;} #main .txt h1{font-size:35px;} }

#about{position:relative;padding:65px 0;} #about .col h2:before{position:absolute;content:"";bottom:0;left:0;height:10px;width:50px;background:#00d7c9;} #about .colums{display:flex;flex-wrap:wrap;margin:5px;} #about .col{flex:1;margin:15px;min-width:300px;} #about .img img{width:100%;height:100%;object-fit:cover;border-radius:20px;} @media screen and (max-width:450px){ #about .img{order: 1;} }

#brands{position:relative;padding:25px 0 65px;} #brands .ttl{position:relative;margin:0 20px;} #brands .ttl:before{position:absolute;content:"";bottom:0;left:0;height:10px;width:50px;background:#00d7c9;} #brands .colums{margin:75px 15px 0;} #brands .col{margin:5px;background:#2ef6e9;border-radius:15px;padding:10px;height:125px;} #brands .col img{width:100%;height:100%;object-fit:contain;} #brands .nav{position:relative;width:calc(100% - 15px);margin:20px 7.5px 0;padding:0;list-style:none;text-align:center;} #brands .nav li{position:relative;display:inline-block;width:12.5px;height:12.5px;border-radius:20px;background:#aaa;margin:0 5px;cursor:pointer;transition:all .5s;} #brands .nav li.active{background:#7317a9;width:45px;} #brands .track{display: flex;}

#services{position:relative;padding:75px 0;background:#2ef6e9;width:calc(100% - 20px);max-width:1500px;margin:0 auto;border-radius:20px;overflow:hidden;} #services .ttl{position:relative;margin:20px;} #services .ttl:before{position:absolute;content:"";bottom:0;left:0;height:10px;width:50px;background:#00d7c9;} #services .colums{display:flex;margin:75px 0 0;flex-wrap:wrap;} #services .colums .col{position:relative;flex:1 0 0;margin:20px;font-weight:500;padding-top:20px;min-width:200px;} #services .colums .col:before{position:absolute;content:attr(data-text);left:0;top:-25px;font-size:35px;color:#7317a9;font-weight:800;-webkit-mask-image:linear-gradient(0, transparent, black);} @media screen and (max-width:450px){ #services{width:100%;} } #services.img{background-repeat: no-repeat;background-position:center;background-size:cover;} #services.img:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, rgba(0,0,0,.5), rgb(115,22,161,.25));z-index:2;} #services.img .ttl, #services.img .colums .col{position:relative;z-index:3;color:#fff;} #services.img .colums .col:before{color:#fff;}

#contact{position:relative;padding:65px 0;overflow:hidden;} #contact .colums{display:flex;flex-wrap:wrap;margin:0 -10px;} #contact .colums .col{margin:10px 30px;min-width:300px;flex:1 0 0;} #contact .ttl{position:relative;} #contact .ttl:before{position:absolute;content:"";bottom:0;left:0;height:10px;width:50px;background:#00d7c9;} #contact .colums .col form{background:#2ef6e9;padding:25px;border-radius:20px;}

#footer{position:relative;background:#2ef6e9;padding:10px;} #footer .txt{color:#333;font-size:14px;font-weight:400;margin:0 20px;text-align:center;} #footer .txt a{color:#333;}

.ttl{transition:opacity 1.5s ease-in-out;opacity:0;} .ttl.active{opacity:1;}