/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{--accent-color: #293895;--contrast-color:#ffffff; --themegr:linear-gradient(90deg, rgba(235,40,145,1) 0%, rgba(250,155,65,1) 100%);}
body {color:#fff;}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {font-family: "Montserrat", sans-serif; font-weight: 700}
p { line-height:1.3; }
.ft-playpen {font-family: "Playpen Sans", cursive;font-optical-sizing: auto; font-weight:500}
/* .animated {animation-duration:.6s} */
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header {background: #fff;padding: 1em 0;}
header .logo { width:180px; display:block }
@media (max-width:768px){
	header .logo { width:120px }
}

/*--------------------------------------------------------------
# Section
--------------------------------------------------------------*/
main {background-size: cover;background-position: top center; background-repeat: no-repeat;}
section { padding-top:100px; padding-bottom: 20px; text-align: center}
section:first-child .title { font-size:26px; margin-top:1rem; margin-bottom:1rem;}
section:last-child { padding-bottom:100px; }
.title { margin-bottom:2rem; }
.title span { font-size:80% }
.sparkle { width:150px; margin-bottom:2rem;}
.btn-gr {background: rgb(235,40,145);background: var(--themegr);position: relative;padding: 10px 40px;color: #fff; display:inline-block;}
.btn-gr:after {content:"";border:1px solid #fff;margin:3px;display: block;height: calc(100% - 6px);position: absolute;width: calc(100% - 6px);top: 0;left: 0;border-radius: 30px;transition: .3s;}
.btn-gr:hover { color:#fff; }
.btn-gr:hover:after {height:calc(100% - 0px); width:calc(100% - 0px);margin:0px; transition: .3s;}
.pink-bg {padding-top:100px; text-align: center;}
.brands img { width: 130px;}
/* .animate { opacity: 0;} */
@media (max-width:768px){
	section { padding-top:50px }
	.pink-bg {padding-top:50px;background-image: url('../img/pink-bg.png');background-repeat: no-repeat;background-position: bottom;background-size: cover;}
	section:last-child { padding-bottom:50px; }
	.sparkle { width:70px; margin-bottom: 1em;}
}

/*--------------------------------------------------------------
# Projects Card
--------------------------------------------------------------*/
.card.projects {--bs-card-border-radius:1.5rem; --bs-card-inner-border-radius: 1.5rem; border:0; position:relative;}
.card.projects .card-img-top {aspect-ratio: 6 / 4; object-fit: cover;}
.card.projects .projects-logo {padding:1.5rem;height: 160px;object-fit: contain;}
.card.projects .card-title {font-size:16px;text-transform:uppercase;margin: 0;}
.card.projects:after {content:"";width: 4px;height: 1rem;display:block;position:absolute;bottom: -1rem;left: 50%;transform: translateX(-50%);background: #fff;}
.card.projects + .rel-link .rel-icon { width:20px; height:20px; object-fit:contain; transition:.3s;}
.card.projects + .rel-link {border: 4px solid #fff;border-radius: 1rem;padding: .8rem;margin-top: 1rem;display: flex;justify-content: space-around; position:relative; overflow: hidden}
.card.projects + .rel-link:before, .card.projects + .rel-link:after,
.card.projects + .rel-link .rel-url:before, .card.projects + .rel-link .rel-url:after {content:"";width:5px;height: 2rem;background:url('../img/formframe.png') center;display: block;position: absolute;}
.card.projects + .rel-link .rel-url {background: #fff;border-radius: .75rem;width: 40px;height: 40px;display: flex; align-items: center; justify-content: center; position: relative;}
.card.projects + .rel-link:before {transform: translateY(-50%) rotate(-90deg);left: 12px;top: 50%;}
.card.projects + .rel-link:after {transform: translateY(-50%) rotate(90deg);right: 12px;top: 50%;}
.card.projects + .rel-link .rel-url:before {top: -1rem;left: 50%;transform: translateX(-50%); height:1rem;}
.card.projects + .rel-link .rel-url:after { bottom: -1rem; left: 50%;transform: translateX(-50%) rotate(180deg); height:1rem;}
.card.projects + .rel-link .rel-url:hover {box-shadow: 0 0 10px rgb(0 232 255 / 85%);}
.card.projects + .rel-link .rel-url:hover .rel-icon { transform:scale(1.3); transition:.3s;}
.card.projects + .rel-link + .more-btn {background: linear-gradient(90deg, rgba(235,40,145,1) 0%, rgba(250,155,65,1) 100%);padding: .5rem 2rem;color: #fff;display: inline-block;margin: auto;border-radius: 0 0 1rem 1rem;border: 4px solid #fff;border-top: 0;text-decoration: none;transition:.5s}
.card.projects + .rel-link + .more-btn:hover { padding:.5rem 3rem; transition:.5s}
@media (max-width:768px){
	.card.projects:after { height:.5rem; bottom: -.5rem;}
	.card.projects + .rel-link {padding: .4rem .2rem;margin-top: .5rem;}
	.card.projects .projects-logo { height:100px; padding: 0.85rem;;}
	.card.projects + .rel-link:before, .card.projects + .rel-link:after {height: 1rem;}
	.card.projects + .rel-link:before { left:4px; }
	.card.projects + .rel-link:after { right:4px; }
	.card.projects + .rel-link + .more-btn { padding:.1rem 1rem; }
	.card.projects + .rel-link + .more-btn:hover {padding:.1rem 1.5rem;}
}

.tnc a{
	color: white !important;
}

.tnc a:hover{
	color: #000 !important;
}



/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/
.form ::placeholder {color: #a8a8a8;}
.form {position:relative;--wiregap: 35px;b;border: 5px solid #fff;border-radius: 40px; overflow:hidden;}
.form:before,.form:after, .form-inner:before, .form-inner:after {content:"";background:url('../img/formframe.png')	 center;background-size: contain;width:100%;height:var(--wiregap);display:block;}
.form:after { transform:rotate(180deg); }
.form-inner:before, .form-inner:after {position:absolute; top: calc(50% - var(--wiregap)/2)}
.form-inner:before {transform:rotate(90deg);right: calc(-50% - var(--wiregap)/2);}
.form-inner:after {transform:rotate(-90deg);left: calc(-50% - var(--wiregap)/2);}
.form-inner {color: #111;padding: 50px;background: #fff;border-radius: 20px;margin:0 var(--wiregap);position: relative;}
.form .form-check { font-size:13px; font-style:italic; padding-left: 0;}
.form .btn-gr { margin:auto; display:block }
@media (max-width:768px){
	.form {--wiregap: 15px;}
	.form-inner { padding:30px }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {background: #000; padding: 1em 0;}
footer .social-icons { text-align:center }
footer .social-icons ul {list-style:none; padding-left:0; margin-bottom: 0; display:flex; margin: auto}
footer .copyright {font-size: 12px;line-height: 1.3;}
footer .social-icons a.btn {padding: 5px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center; background: #fff;--bs-btn-bg:#fff}
footer .social-icons a.btn:hover { color: var(--accent-color);}
@media (max-width:768px){
	footer .copyright { text-align:center; margin-bottom:.5rem; }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader{position:fixed;inset:0;z-index:9999;overflow:hidden;background-color:var(--background-color);transition:all .6s ease-out;width:100%;height:100vh}
#preloader:after,#preloader:before{content:"";position:absolute;border:4px solid var(--accent-color);border-radius:50%;animation:animate-preloader 2s cubic-bezier(0,.2,.8,1) infinite}
#preloader:after{animation-delay:-.5s}
@keyframes animate-preloader{
	0%{width:10px;height:10px;top:calc(50% - 5px);left:calc(50% - 5px);opacity:1}
	100%{width:72px;height:72px;top:calc(50% - 36px);left:calc(50% - 36px);opacity:0}
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top{position:fixed;visibility:hidden;opacity:0;right:15px;bottom:-15px;z-index:99999;background-color:var(--accent-color);width:44px;height:44px;border-radius:50px;transition:all .4s;display: flex;justify-content: center;align-items: center; text-decoration:none;}
.scroll-top i{font-size:24px;color:var(--contrast-color);line-height:0}
.scroll-top:hover{background-color:color-mix(in srgb,var(--accent-color),transparent 20%);color: #fff}
.scroll-top.active{visibility:visible;opacity:1;bottom:15px}