:root {
    --primary: #5F25A0;
    --black: #000000;
    --white: #ffffff;
    --bodyFont: 'Metropolis';
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Bold.eot');
    src: url('../fonts/Metropolis-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Metropolis-Bold.woff2') format('woff2'),
        url('../fonts/Metropolis-Bold.woff') format('woff'),
        url('../fonts/Metropolis-Bold.ttf') format('truetype'),
        url('../fonts/Metropolis-Bold.svg#Metropolis-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Thin.eot');
    src: url('../fonts/Metropolis-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Metropolis-Thin.woff2') format('woff2'),
        url('../fonts/Metropolis-Thin.woff') format('woff'),
        url('../fonts/Metropolis-Thin.ttf') format('truetype'),
        url('../fonts/Metropolis-Thin.svg#Metropolis-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis Semi';
    src: url('../fonts/Metropolis-SemiBold.eot');
    src: url('../fonts/Metropolis-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Metropolis-SemiBold.woff2') format('woff2'),
        url('../fonts/Metropolis-SemiBold.woff') format('woff'),
        url('../fonts/Metropolis-SemiBold.ttf') format('truetype'),
        url('../fonts/Metropolis-SemiBold.svg#Metropolis-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Medium.eot');
    src: url('../fonts/Metropolis-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Metropolis-Medium.woff2') format('woff2'),
        url('../fonts/Metropolis-Medium.woff') format('woff'),
        url('../fonts/Metropolis-Medium.ttf') format('truetype'),
        url('../fonts/Metropolis-Medium.svg#Metropolis-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Regular.eot');
    src: url('../fonts/Metropolis-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Metropolis-Regular.woff2') format('woff2'),
        url('../fonts/Metropolis-Regular.woff') format('woff'),
        url('../fonts/Metropolis-Regular.ttf') format('truetype'),
        url('../fonts/Metropolis-Regular.svg#Metropolis-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Black.eot');
    src: url('../fonts/Metropolis-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Metropolis-Black.woff2') format('woff2'),
        url('../fonts/Metropolis-Black.woff') format('woff'),
        url('../fonts/Metropolis-Black.ttf') format('truetype'),
        url('../fonts/Metropolis-Black.svg#Metropolis-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* Basics */
html{ overflow-x: hidden; scrollbar-color: var(--primaryColor) lightgray; scrollbar-width: thin;}
body{ padding:0; margin:0; font-size: 17px; color: var(--white); font-family: var(--bodyFont); overflow-x: hidden; background: var(--primary);}
a, button{ outline:none !important; text-decoration:none; box-shadow:none; transition:all .3s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%; height:auto;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important;}
input, select, textarea, button{ outline:none !important; box-shadow:none;}
input, textarea, select{ /*-moz-appearance: none; -webkit-appearance: none;*/ box-shadow:none !important;}

/* Container */
.container{ width:90%; max-width: 1810px; margin: 0 auto; padding:0;}

.wrapper{ min-height: 100vh; display: flex; overflow: hidden; position: relative;}
.Header{ margin: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 4; height: auto; left: 0; background-color: rgba(0,0,0,0); border-bottom: none; transition: all .4s ease;}
.Header .header-main{ margin: 0; padding: 50px 0;}
.Header .header-main .brand-logo{ width: 196px; display: inline-block;}

.middle_sec{ margin: 0; padding: 35px 0 0; position: relative; width: 100%; display: flex; justify-content: center;}
.middle_sec .container{ display: flex; justify-content: center;}
.middle_sec .curve{ position: absolute; left: 50%; transform: translateX(-50%); width: 100%; z-index: -1; opacity: 0.26; text-align: center; top: 270px;}
.middle_sec .curve img{ margin: 0 auto; width: 1715px;}
.middle_sec h1{ margin: 0; padding: 0; font-size: 105px; font-weight: 100;}
.middle_sec h1 strong{ margin: -30px 0 0; padding: 0; font-size: 174px; font-weight: 700; display: block;}
.middle_sec h1 strong .star{ margin: 0 0 0 -30px; display: inline-flex; gap: 20px;}
.middle_sec h1 strong .star span{ position: relative; height: 36px; width: 36px;}
.middle_sec h1 strong .star span::before{ content: ""; position: absolute; top: 0; left: 0; background: url(../images/anim-ic.svg) center center no-repeat; background-size: 100% 100%; height: 36px; width: 36px;}
.middle_sec h2{ margin: 0; padding: 0; font-size: 110px; font-weight: 100;}
.middle_sec h2 strong{ margin: -30px 0 0; padding: 0; font-size: 174px; font-weight: 700; display: block;}
.middle_sec h2 strong .star{ margin: 0 0 0 -30px; display: inline-flex; gap: 20px;}
.middle_sec h2 strong .star span{ position: relative; height: 36px; width: 36px;}
.middle_sec h2 strong .star span::before{ content: ""; position: absolute; top: 0; left: 0; background: url(../images/anim-ic.svg) center center no-repeat; background-size: 100% 100%; height: 36px; width: 36px;}
.middle_sec figure{ margin: 0 -13%; padding: 0; max-height: 1000px;}
.middle_sec figure img{ height: 100%; width: 100%; object-fit: contain;}
.middle_sec .product{ margin: 70px 0 0; padding: 0; position: relative;}
/*.middle_sec .product:hover figure img{ transform: scale(1.02);}*/
.middle_sec .product::before{ content: ""; position: absolute; top: 90px; left: 50%; transform: translateX(-50%); height: 300px; width: 275px; box-shadow: inset 0.2px 0.2px 0.2px rgba(255, 255, 255, 0.2), inset -0.8px -0.8px 1px rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 50px; z-index: -1; transition: all .4s ease-in-out;}
.middle_sec .product figure{ margin: 0 -15% 0 0; padding: 0;}
.middle_sec .product figure img{ margin: 0; padding: 0; max-height: 280px; height: 100%; width: 100%; object-fit: contain; transition: all .4s ease-in-out;}
.middle_sec .product .detail{ margin: 10px 0 0; padding: 0; text-align: center;}
.middle_sec .product .detail h3{ margin: 0; padding: 0; background: linear-gradient(180deg, #FFFFFF, #9966D2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; font-size: 45px; font-weight: 900; text-transform: capitalize; position: relative; display: inline-block;}
.middle_sec .product .detail h3 span{ display: block; font-size: 20px; font-weight: 500; position: relative;}
.middle_sec .product .detail h3::before{ content: ""; position: absolute; top: -10px; right: -25px; background: url(../images/anim-ic.svg) center center no-repeat; background-size: 100% 100%; height: 22px; width: 22px; animation: spin 12s linear infinite;}
.middle_sec .right-mdl{ margin: 0; padding: 0 0 185px;}

.middle_sec h1 strong span{ display: inline-block;}
.LoadAnimataion span { animation: LoadAnimataion 2s infinite alternate;} 
.LoadAnimataion span:nth-child(1) { animation-delay: 0s;} 
.LoadAnimataion span:nth-child(2) { animation-delay: 0.1s;} 
.LoadAnimataion span:nth-child(3) { animation-delay: 0.2s;} 
.LoadAnimataion span:nth-child(4) { animation-delay: 0.3s;} 
.LoadAnimataion span:nth-child(5) { animation-delay: 0.4s;} 
.LoadAnimataion span:nth-child(6) { animation-delay: 0.5s;} 
.LoadAnimataion span:nth-child(7) { animation-delay: 0.6s;} 
@keyframes LoadAnimataion { 0% { opacity: 1;} 100% { opacity: 0;} }


.footer{ margin: 0; padding: 0 0 45px; position: absolute; width: 100%; left: 0; bottom: 0;}
.footer .bbb-info{ margin: 0; padding: 15px 20px; box-shadow: inset 0.2px 0.2px 0.2px rgba(255, 255, 255, 0.4), inset -0.8px -0.8px 1px rgba(255, 255, 255, 0.4); border-radius: 30px; background: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.footer .bbb-info figure{ margin: 0; padding: 0; width: 274px;}
.footer .right_part{ margin: 0; padding: 0; display: flex; gap: 30px; align-items: end;}
.footer .right_part .add_info{ margin: 0; padding: 0; display: flex; gap: 10px; align-items: center;}
.footer .right_part .add_info i{ height: 42px; min-width: 42px; width: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; box-shadow: inset 0.2px 0.2px 0.2px rgba(255, 255, 255, 0.2), inset -0.8px -0.8px 1px rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.footer .right_part .add_info span{ margin: 0; padding: 0; font-size: 18px; font-weight: 600;}
.footer .right_part .add_info span a{ color: var(--white);}
.footer .right_part .add_info span a:hover{ color: rgba(255, 255, 255, 0.7);}
.social_links{ margin: 0 0 0 40px; padding: 0; display: flex; gap: 12px;}
.social_links a{ height: 56px; width: 56px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: inset 0.2px 0.2px 0.2px rgba(255, 255, 255, 0.2), inset -0.8px -0.8px 1px rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.social_links a img{ transition: all .4s ease-in-out;}
.social_links a:hover{ box-shadow: inset 0.2px 0.2px 0.2px rgba(255, 255, 255), inset -0.8px -0.8px 1px rgba(255, 255, 255);}
.social_links a:hover img{ transform: scale(1.1);}

.spin{ animation: spin 12s linear infinite;}
@keyframes spin {
    0% {        
        transform: rotate(0);
    }
    25% {
        transform: rotate(-90deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    75% {
        transform: rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}