*,
*:before,
*:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; margin: 0; padding: 0; outline:0 }
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; scroll-behavior: smooth; background-color: black; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.background { background: url("../image/background.jpg") no-repeat center center fixed; background-size: cover; } 

body { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none; margin: 0; padding: 0; position: relative; overflow:scroll; height: 100%; width: 100%; font-family: 'Poppins', sans-serif; line-height: 150%; overflow-x:hidden}

#Content { width: 100%; padding: 0; margin: 0; }

::-webkit-scrollbar { width: 10px; z-index:999}
::-webkit-scrollbar-thumb { background: #b71c87; border-radius: 10px; z-index:999}
::-webkit-scrollbar-track { background: #a9a9a9; z-index:999}

hr { background-color: #000; border: none; }

h1 { font-weight: 800; line-height: 120%; font-size: 45px; font-family: 'Poppins', sans-serif; padding: 0; color: #b71c87; text-align: center }
h2 { font-weight: 800; line-height: 120%; font-size: 45px; font-family: 'Poppins', sans-serif; padding: 0; color: #b71c87; text-align: center }
h3 { font-weight: 700; line-height: 120%; font-size: 20px; font-family: 'Poppins', sans-serif; padding: 0; color: #b71c87; }
h4 { font-weight: 600; line-height: 120%; font-size: 28px; font-family: 'Poppins', sans-serif; padding: 0; color: #b71c87;}
h5 { font-weight: 500; line-height: 125%; font-size: 26px; font-family: 'Poppins', sans-serif; padding: 0; color: #b71c87;}
h6 { font-weight: 400; line-height: 125%; font-size: 24px; font-family: 'Poppins', sans-serif; padding: 0; color: #b71c87;}
p, .white {color: white;}

p+p, h1+p, h2+p, h3+p, p+h3, h4+p{margin-top: 20px}
p+h3 {margin-bottom: 20px}

a:hover{ color: #b71c87; transition: all ease-in-out 250ms; } 
.expandable a { cursor: pointer; text-decoration: none; } 
a:not(.expandable a){ color: white; cursor: pointer; text-decoration: none; } 
a:hover:not(.expandable a){ color: #b71c87; text-decoration: none;} 
.txt-w-line a:not(.expandable a){text-decoration: underline;}
.txt-w-line a:hover:not(.expandable a){text-decoration: underline; color:#b71c87; font-weight: 400;}

button { background-image: linear-gradient(to right, #173f8f 0%, #285dab 100%); border: none; border-radius: 5px; color: white; padding: 15px; width: 150px; font-size: 15px; cursor: pointer; display:block; margin: 0 auto}
button:hover { filter: brightness(75%); transition: all ease-in-out 250ms;}

input { width:100%; padding:2.5%; margin: 7.5% 0% 7.5% 0%; border-radius:20px}


/***** TOP *****/

.top { height: 5rem; width: 100vw; display: flex; position: fixed; z-index: 3; background-image: linear-gradient(black, black, transparent); top: 0; left: 0; transition: top 0.3s; padding-left: 5%; padding-right: 5%; overscroll-behavior: none;}

.top .social-media, .logo, .top .social-media ul {list-style: none; display: flex; align-items: center; }
.top .logo img { height: 2.5rem; width: auto; margin: 10px 1}
.top .social-media img { width: 32px; margin: 10px }

.top .hamburger div { width: 30px; height: 3px; background: #f2f5f7; margin: 5px; transition: all 0.3s ease; }
.top .hamburger { display: none; margin-right: 25px; }
.top .toggle .line1 { transform: rotate(-45deg) translate(-5px,6px); }
.top .toggle .line2 { width: 0px; }
.top .toggle .line3 { transform: rotate(45deg) translate(-5px,-6px); }

.top .nav-links { display: flex; list-style: none; width: 100vw; margin: 0 auto; justify-content: center; align-items: center; }
.top .nav-links li { position: relative; display: inline; padding: 15px; text-align: center; }
.top .nav-links li a { text-decoration: none; margin: 0 1vw; }
.top .nav-links li a:hover { color: #b71c87; transition: all ease-in-out 250ms; }

/***** END TOP *****/

/***** MID *****/

.mid {  background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0)); }

/***** END MID *****/

/***** BTM *****/

.btm { display: grid; grid-template-columns: 2fr 1fr; justify-content: space-between; align-content: center; font-size: 12px; color: #ececec; text-decoration: none; padding: 2.5% 10% 2.5% 10%; background: black; }
.btm img { vertical-align: middle; }
.btm .footer ul { margin: 0; padding: 0; }
.btm .footer ul li { list-style: none; display: inline-block; position: relative; padding: 0; }
.btm .footer ul li:before { content: ' '; padding: 0 10px; }
.btm .footer ul li:first-child:before { content: ''; padding: 0; }
.btm .footer ul li a:hover { color: #b71c87; text-decoration: none; transition: all ease-in-out 250ms;}
.btm .copyright { text-align: right; }

/***** END BTM *****/

.vertical-dot-nav {display:none;}

@media screen and (min-width: 768px) and (max-width: 1024px) {
   
.btm { grid-template-columns: 1fr; justify-content: center; text-align: center; }
.btm .copyright { text-align: center; }

}

@media screen and (max-width: 934px){
.top { height: 4rem; justify-content: space-between; }
.top .social-media img { width: 30px; margin: 5px; }
.top .logo img { width: 75px; height: auto; }
.top .hamburger { display: block; position: relative; cursor: pointer; top: 25%; transition: all 0.7s ease; z-index: 10; }

.top .nav-links { position: fixed; background-color: rgba(0, 0, 0, 0.8);; height: 100vh; width: 100%; flex-direction: column; clip-path: circle(50px at -90% -20%); -webkit-clip-path: circle(50px at -90% -10%); transition: all 1s ease-out; pointer-events: none; justify-content: center; left: 0; }
.top .nav-links { position: fixed; background-color: rgba(0, 0, 0, 0.95); height: 100vh; width: 100%; flex-direction: column; clip-path: circle(50px at -90% -20%); -webkit-clip-path: circle(50px at -90% -10%); transition: all 1s ease-out; pointer-events: none; justify-content: center; left: 0; }
.top .nav-links.open { clip-path: circle(1000px at 90% -10%); -webkit-clip-path: circle(1000px at 90% -10%); pointer-events: all; left: 0; }
.top .nav-links li { opacity:0; display: block; transition: all 0.5s ease 0.5s; }
/*.top .nav-links li:nth-child(1) { transition: all 0.5s ease 0.2s; }
.top .nav-links li:nth-child(2) { transition: all 0.5s ease 0.4s; }
.top .nav-links li:nth-child(3) { transition: all 0.5s ease 0.6s; }
.top .nav-links li:nth-child(4) { transition: all 0.5s ease 0.8s; }
.top .nav-links li:nth-child(5) { transition: all 0.5s ease 1.0s; }*/
.top .nav-links.open li { opacity: 1; }
}

@media screen and (max-width: 768px) {

p { font-size: 14px; }
h3 { font-size: 20px; }
h1, h2 { font-size: 1.85rem; }

.btm { font-size: 10px; grid-template-columns: 1fr; justify-content: center; text-align: center; }
.btm .copyright { text-align: center; }

}
@media screen and (max-width: 480px) {
    p { font-size: 12px; }
}