header{background-color:var(--blur-color);width:95%;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:var(--lg-radius);z-index:10;justify-content:space-between;align-items:center;padding:15px 25px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}header:after{content:"";opacity:0;border:15px solid var(--border-color);transition:var(--transition);border-block-end-color:#0000;border-inline-color:#0000;position:absolute;top:80%;left:50%;transform:translate(-50%)}header .logo img{width:65px}header nav ul{gap:24px;display:flex}header nav ul li{transition:var(--transition);font-size:1.2rem;font-weight:400}header nav ul li:hover{color:var(--main-color)}header .menu-button-box{display:none}@media (max-width:1400px){header nav .logo span{font-size:1.5rem}header nav ul li{font-size:1rem}header nav button.main-btn{padding:8px 16px}}@media (max-width:1200px){header .menu-button-box{display:flex}header.show-arrow:after{opacity:1;top:100%}header nav{background-color:var(--bg-color);border-radius:var(--lg-radius);-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);opacity:0;visibility:hidden;z-index:9;justify-content:start;align-items:start;width:100%;height:80vh;padding:30px;transition:opacity .5s,transform .5s,visibility .5s;display:flex;position:fixed;top:115%;left:0;transform:translateY(-30px)}header nav.open-nav{opacity:1;visibility:visible;transform:translateY(0)}header nav ul{flex-direction:column;align-items:flex-start}header nav ul li{transition:var(--transition);font-size:1.5rem;font-weight:400}}header a.login-btn{border:1.5px solid var(--main-color);color:var(--main-color);border-radius:var(--sm-radius);transition:var(--transition);white-space:nowrap;padding:10px 20px;font-size:1rem;font-weight:500}header a.login-btn:hover{background-color:var(--main-color);color:var(--white-color)}@media (max-width:900px){header a.main-btn,header a.login-btn{display:none}header .logo img,header .menu-button-box{width:50px}}
button.menu-button{cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex}.menu-button .ham{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:transform .4s}.menu-button .line{fill:none;stroke:var(--white-color);stroke-width:5.5px;stroke-linecap:round;transition:stroke-dasharray .4s,stroke-dashoffset .4s}.menu-button .ham3 .top{stroke-dasharray:40 130}.menu-button .ham3 .middle{stroke-dasharray:40 140}.menu-button .ham3 .bottom{stroke-dasharray:40 205}.menu-button .ham3.active .top{stroke-dasharray:75 130;stroke-dashoffset:-63px}.menu-button .ham3.active .middle{stroke-dashoffset:-102px}.menu-button .ham3.active .bottom{stroke-dasharray:110 205;stroke-dashoffset:-86px}
section.hero-section{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}section.hero-section:after{content:"";box-shadow:0 0 200px 120px color-mix(in srgb, var(--main-color) 10%, transparent);position:absolute;bottom:200px;right:100px}section.hero-section:before{content:"";box-shadow:0 0 150px 200px color-mix(in srgb, var(--main-color) 31%, transparent);position:absolute;top:100px;left:50%}section.hero-section span.shadow:first-child{box-shadow:0 0 150px 190px color-mix(in srgb, var(--main-color) 7%, transparent);position:absolute;top:200px;left:50px}section.hero-section span.shadow:nth-child(2){box-shadow:0 0 150px 200px color-mix(in srgb, var(--main-color) 3%, transparent);position:absolute;bottom:200px;left:50px}section.hero-section .text-box{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}section.hero-section .text-box h1{max-width:50%;margin:15px 0;font-size:90px;font-weight:500}section.hero-section .text-box h1 span{color:var(--main-color)}section.hero-section .text-box p{color:var(--text-color);max-width:50%}section.hero-section .text-box .hero-btns{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:30px;display:flex}section.hero-section .text-box .login-btn-hero{border:1.5px solid var(--main-color);color:var(--main-color);border-radius:var(--sm-radius);transition:var(--transition);cursor:pointer;padding:12px 28px;font-size:1rem;font-weight:500}section.hero-section .text-box .login-btn-hero:hover{background-color:var(--main-color);color:var(--white-color)}@media (max-width:1700px){section.hero-section .text-box h1{max-width:55%}}@media (max-width:1600px){section.hero-section .text-box h1{max-width:60%}}@media (max-width:1450px){section.hero-section .text-box h1{max-width:50%;font-size:70px}}@media (max-width:1350px){section.hero-section .text-box h1{max-width:55%}}@media (max-width:1250px){section.hero-section .text-box h1{max-width:80%;font-size:70px}}@media (max-width:991px){section.hero-section .text-box h1{max-width:90%;font-size:60px}section.hero-section .text-box p{max-width:80%}}@media (max-width:640px){section.hero-section .text-box h1{max-width:95%;font-size:45px}section.hero-section .text-box p{max-width:95%}}section.hero-section .image-box{perspective:1000px;width:40%;transition:var(--transition);margin-top:220px}section.hero-section .image-box .frame{background-color:color-mix(in srgb, var(--white-color) 30%, transparent);border-radius:var(--lg-radius);border:2px solid var(--text-color);justify-content:center;align-items:center;padding:20px;display:flex}section.hero-section .image-box .frame img{border-radius:var(--lg-radius);transform-origin:top;width:100%}@media (max-width:1200px){section.hero-section .image-box{width:60%}}@media (max-width:768px){section.hero-section .image-box{width:65%}section.hero-section .image-box .frame{padding:10px}}
