/*
* ui+cms: https://www.cagatayldzz.com
*/

/* header */
header .h-menu{position: absolute;right: 0;top: 2rem;}
header .h-menu img{cursor: pointer;transition: all 0.5s;}
header .h-menu .turn{transform: rotate(90deg);}
header .h-menu .h-menu-body{position: absolute;width: 218px;top: 60px;right: 0;z-index: 9999;border-radius: 15px;background: #261a40;color: #fff;}
header .h-menu .h-menu-body .nav{position: relative;border: 2px solid #fff;border-radius: 15px;}
header .h-menu .h-menu-body .nav-item{width: 100%;text-align: center;}
header .h-menu .h-menu-body .nav-item:last-child{border-right: 0;}
header .h-menu .h-menu-body .nav-item .nav-link{color: #f1ebdd;}
header .h-menu .h-menu-body .nav-item .nav-link:hover{color: #dcc500;}
header .logo img{width: 260px;height: 54px;object-fit: cover;}
header .hero-bg img{position: absolute;}
header .hero-bg-right img{position: absolute;top: 0;right: 0;width: 280px;}

/* main */
main{position: relative;}
main .ct-1{margin-top: 20em;}
main .ct-2{margin-top: 20em;}
main .county-card img{height: 115px;width: fit-content;margin: 0 auto;}
main .blog-img{display: flex;justify-content: center;margin: 0;}
main .blog-img img{max-width: 100%;border-radius: 15px;margin-bottom: 1rem;}
main .blog-card{position: relative;}
main .blog-card .blog-card-layer{background: linear-gradient(to bottom, #2a1140,#251541, #1e2147);border-radius: .25rem .25rem 0 0;border-bottom: 0;z-index: 5;}
main .blog-card img{width: 140px;height: 80px;object-fit: cover;}
main .blog-card-footer{background: #231a41;position: relative;width: 99.9%;}
main .blog-card-footer:before{content: "";position: absolute;width: 100%;height: 11px;bottom: 42px;z-index: 2;background: #0887d0;}
main .blog-card-footer a{z-index: 9;background: #43577b;padding: 5px 10px;}
main .hero .title{width: 60%;}
main .hero .explanation{width: 60%;}
main .hero .explanation span{color: #dcc500;}
main .home-about-i{height: 360px;object-fit: cover;object-position: center;}
main .home-blog-item{background: linear-gradient(to bottom, #be2f54, #6b2043);}
main .home-blog-item img{height: 90px;object-fit: cover;object-position: center;}
main .h-media-icon{position: relative;}
main .h-media-icon:before{content:"";position: absolute;width: 44px;height: 44px;left: -9px;top: -8px;border-radius: 50%;border: 2px solid #07d1ed;}
main .h-media-icon img{width: 25px;}
main .login-layer{position: relative;}
main .login-layer .layer-m{position: absolute;right: 115px;top: -86px;background-repeat: no-repeat;}
main .login-layer h4{color: #dcc500;position: relative;z-index: 99;font-size: 30px;padding-left: 136px;}
main .login-layer h4:before{content:"";position: absolute;background: url(../../assets/ui/login-chat.png);left: 104px;top: 7px;width: 24px;height: 25px;}
main .login-layer:before{content:"";position: absolute;top: -125px;left: 0px;background: url(../../assets/ui/login-bg.png);width: 532px;height: 610px;background-size: contain;background-repeat: no-repeat;z-index: -1;}
main .login-layer form{width: 390px;margin-left: 60px;}
main .login-layer form input{height: 60px;font-size: 18px;border-radius: 7px;border: 3px solid #000b91;}
main .login-layer form input::placeholder{color: #580e51;padding-left: 1em;}
main .login-layer form input:focus{border-color: #4b0f56;box-shadow: 0 0;}
main .login-layer form .btn-layer-1{border: 0;background: linear-gradient(130deg, #283655, #633075, #611b57, #231843);background-size: 300% 100%;box-shadow: 0 2px 9px 1px rgba(0,0,0,.18);transition: all 0.5s;}
main .login-layer form .btn-layer-1:hover{background-position: 100% 0;transform: scale(1.1);}
main .login-layer form .btn-layer-1:focus{box-shadow: 0 2px 9px 1px rgba(0,0,0,.18);}
main .login-layer form .btn-layer-1 img{width: 20px;}
main .login-layer form .note{position: absolute;top: 18px;right: 15px;font-weight: 400;line-height: 12px;width: 63px;text-align: center;color: #a580a1;font-size: 13px;}
main .login-layer form .i-happy,
main .login-layer form .i-key{position: relative;}
main .login-layer form .i-happy img{position: absolute;width: 29px;top: 15px;filter: invert(33%) sepia(89%) saturate(4991%) hue-rotate(210deg) brightness(100%) contrast(108%);left: 25px;}
main .login-layer form .i-key img{position: absolute;width: 25px;top: 18px;filter: invert(33%) sepia(89%) saturate(4991%) hue-rotate(210deg) brightness(100%) contrast(108%);left: 25px;}
main .login-layer form .i-happy:before,
main .login-layer form .i-key:before{content:"";position: absolute;background: #000b90;top: 19px;left: 74px;height: 24px;width: 2px;}
main .layer-1{position: relative;background: linear-gradient(to bottom, #8c132f, #3a0331);overflow: hidden;}
main .layer-1:before{content:"";position: absolute;top: -18px;width: 100%;height: 35px;z-index: 9;background: #fff;box-sizing: content-box;transform: rotate(-1deg);}
main .layer-1:after{content:"";position: absolute;bottom: -18px;width: 100%;height: 35px;background: #fff;z-index: 9;box-sizing: content-box;transform: rotate(-1deg);}
main .layer-1 .layer-body{position: relative;z-index: 1004;}
main .layer-1 .layer-body img{width: 80px;filter: brightness(0) invert(1);}
main .layer-2{position: relative;background: linear-gradient(to bottom, #2a1140,#251541, #1e2147);}
main .layer-2 .layer-body{position: relative;z-index: 1004;}
main .layer-2 .layer-body .layer-circle{position: absolute;margin-top: -96px;z-index: 9;background: #281240;border: 8px solid #fff;width: 100px;height: 100px;border-radius: 50%;padding: 1em;transition: all 1.5s;}
main .layer-2 .layer-body .layer-circle:hover{transform: rotate3d(0, 13, 0, 360deg);}
main .layer-2 .layer-body .layer-circle img{width: 100%;height: 100%;filter: brightness(0) invert(1);}
main .markdown h3{color: #560e52;font-weight: bold;}
main .markdown p:last-child{margin-bottom: 0;}
main .markdown figure{display: flex;margin: 0;}
main .markdown figure img{max-width: 100%;border-radius: 15px;margin-bottom: 1rem;}
main .store-download .media{cursor:pointer;width: 210px;transition: all 0.5s;}
main .store-download .media:hover .h-media-icon img{filter: brightness(0) invert(1);}
main .store-download .media:hover{transform: scale(1.1);}

/* footer */
footer .f-menu .nav-item a{color: #7f264f;transition: all 0.5s;}
footer .f-menu .nav-item a:hover{color: #fff;transform: scale(1.1);border-radius: 5px;background: linear-gradient(to bottom, #281341, #7f264f);}
footer .layer-3{background: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);border-bottom: 2px solid #b5b5b5;}
footer .social-nav .nav-item{position: relative;transition: all 0.5s;}
footer .social-nav .nav-item:before{content:"";position: absolute;top: -2px;left: 5px;background: linear-gradient(to bottom, #281340, #063b7b);width: 50px;height: 50px;border-radius: 50%;z-index: -1;}
footer .social-nav .nav-item:hover{transform: scale(1.3);}
footer .social-nav .nav-item:hover:before{background: linear-gradient(to bottom, #067edc, #790f30);}
footer .social-nav .nav-item img{width: 30px;filter: brightness(0) invert(1);}

/* other */
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-17{font-size: 17px;}
.fw-1{font-weight: 100;}
.fw-3{font-weight: 300;}
.fw-4{font-weight: 400;}
.fw-5{font-weight: 500;}
.fw-6{font-weight: 600;}
.text-c1{color: #1e65d0;}
.text-c2{color: #624db7;}
.bg-linear-1{background: linear-gradient(-180deg,#fafbfc66,#39479124,#fafbfc66 90%);}
.bg-linear-2{background: linear-gradient(-180deg,#fafbfc66,#9b004c17,#fafbfc66 90%);}
.form-control:focus{border-color: #c82281;box-shadow: 0 0;}
.ff-poppins{font-family: 'Poppins';}
.btn-custom-1{border: 0;background: linear-gradient(130deg, #283655, #633075, #611b57, #231843);background-size: 300% 100%;box-shadow: 0 2px 9px 1px rgba(0,0,0,.18);transition: all 0.5s;}
.btn-custom-1:hover{background-position: 100% 0;transform: scale(1.1);}
.btn-custom-1:focus{box-shadow: 0 2px 9px 1px rgba(0,0,0,.18);}
.hvr-grow-rotate{display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;}
.hvr-grow-rotate:hover,
.hvr-grow-rotate:focus,
.hvr-grow-rotate:active{-webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}

/* responsive */
@media (max-width: 2000px){
header .hero-bg{position: absolute;width: 100%;}
header .hero-bg img{width: 71%;}
header .hero-bg.page img{width: 80%;height: 197px;object-fit: cover;object-position: top;}
main .login-layer .layer-m{right: -100px;width: 150px;}
}
@media (max-width: 1600px){
header .hero-bg{position: absolute;width: 100%;}
header .hero-bg img{width: 71%;}
header .h-menu{right: 2rem;}
main .login-layer:before{width: 450px;left: 40px;top: -101px;}
main .login-layer .layer-m{width: 110px;right: -77px;}
main .ct-1{margin-top: 8em;}
main .ct-2{margin-top: 10em;}
}
@media (max-width: 1440px){
header .hero-bg{position: absolute;width: 100%;}
header .hero-bg img{width: 80%;}
main .hero .title,
main .hero .explanation{width: 90%;}
main .login-layer:before{width: 450px;z-index: 2;left: 80px;top: -89px;}
main .login-layer form{position: relative;z-index: 2;width: 339px;margin-left: 132px;}
main .login-layer h4{padding-left: 170px;}
main .login-layer h4:before{display: none;}
main .login-layer .layer-m{display: none;}
main .ct-1{margin-top: 10em;}
main .ct-2{margin-top: 10em;}
}
@media (max-width: 1200px){
header .hero-bg{width: 100%;height: 700px;position: absolute;overflow: hidden;}
header .hero-bg img{width: 90%;}
main .ct-2{margin-top: 10em;}
main .login-layer:before{top: -68px;width: 391px;left: 83px;}
main .login-layer form{width: 73%;margin-left: 117px;}
main .login-layer .layer-m{display: none;}
}
@media (max-width: 992px){
header .hero-bg{width: 100%;height: 700px;position: absolute;overflow: hidden;}
header .h-menu{right: 1.5em;left: inherit;}
header .hero-bg img{width: 150%;}
header .h-menu .h-menu-body{left: inherit;right: 0;}
main .login-layer form{margin-left: 0;width: 70%;margin: 0 auto;}
main .ct-1{margin-top: 10em;}
main .ct-2{margin-top: 8em;}
main .store-download{display: none;}
main .login-layer:before{display: none;}
main .hero .title,
main .hero .explanation{width: 100%;text-align: center;}
main .hr-icon{display: flex;margin: 0 auto;width: 70%;}
main .login-layer{margin-top: 3em;}
main .layer-2 .layer-body .layer-circle{position: relative;margin-top: 0;width: 80px;height: 80px;}
main .login-layer h4:before{display: none;}
main .login-layer h4{padding-left: 0;text-align: center;}
footer .social-nav .nav-item{margin-bottom: 1em;}
footer .f-logo{width: 250px;}
}
@media (max-width: 768px){
header .h-menu{right: 1em;}
header .hero-bg{width: 100%;height: 990px;position: absolute;overflow: hidden;}
header .hero-bg img{width: 170%;}
header .h-menu .h-menu-body .nav-item{border-right: 0;}
header .h-menu .h-menu-body .nav-item .nav-link{font-size: 14px;}
header .h-menu .h-menu-body .nav{border-radius: 5px!important;}
header .hero-bg-right img{width: 200px;}
header .h-menu .h-menu-body{width: 150px;border-radius: 5px!important;}
main .hero .title,
main .hero .explanation{width: 100%;text-align: center;}
main .ct-1{margin-top: 10em;}
main .ct-2{margin-top: 16em;}
}
@media (max-width: 576px){
header .h-menu img{width: 37px;}
header .hero-bg img{width: 250%;}
header .hero-bg-right img{width: 180px;}
header .hero-bg{width: 100%;height: 990px;position: absolute;overflow: hidden;}
header .logo img{width: 230px;}
main .login-layer h4{padding-top: 2em;}
main .login-layer:before{display: block;top: -39px;width: 100%;left: 0;}
main .ct-1{margin-top: 15em;}
main .ct-2{margin-top: 17em;}
main .login-layer form{width: 85%;}
}
@media (max-width: 480px){
main .ct-2{margin-top: 6em;}
}
@media (max-width: 320px){
main .ct-1{margin-top: 15em;}
main .ct-2{margin-top: 4em;}
}