/* General CSS */
html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased }

a, abbr, acronym, address, b, bdo, big, blockquote, body, br, button, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, ins, kbd, legend, li, map, object, ol, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var { 
    margin: 0; padding: 0; border: none }

a, input, select, textarea { outline: 0; margin: 0; padding: 0 }
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

/* body::-webkit-scrollbar{ width: 7px;background:#f5f5f5;}
body::-webkit-scrollbar-thumb{ background-color: #242f51;border-radius:0px; } */

::-moz-selection {color: #000;background: #4dc5cf;}
::selection {color: #000;background: #4dc5cf;}

*:focus {
    outline:none !important;
}
/* Colors CSS */


/* Typography CSS */


/* Button CSS */
input[type="submit"]{ cursor:pointer; }
.overflow-hidden{ overflow:hidden; }
html{ /*overflow-x:hidden;*/-webkit-font-smoothing:antialiased;  scroll-behavior: smooth; }


body { font-family: 'Inter', sans-serif; overflow-x:hidden; outline:0; font-style:normal; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-size-adjust:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; font-size:18px; font-weight:400; color:#8489A2; line-height:normal; color: #000000; }

h1, .h1 { font-size:96px; line-height: 96px;  } 
h2, .h2 { font-size:85px; line-height: 95px;  } 
h3, .h3 { font-size:58px; line-height: 92px; } 
h4, .h4 { font-size:48px; line-height: 58px; } 
h5, .h5 { font-size:36px; line-height: 48px; } 
h6, .h6 { font-size:25px; line-height: 30px; } 
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-family: 'Playfair Display', cursive; font-weight: bold; color: #242A2C;}


p { font-size: 20px;line-height: 24px; font-family: 'Inter', sans-serif;} 
a { text-decoration:none; color:#8489A2; transition:all ease 0.4s; -webkit-transition:all ease 0.4s;  -moz-transition:all ease 0.4s; -o-transition:all ease 0.4s; } 
a:hover { text-decoration:none; color:#33b44a; } 
a:focus { outline:none; text-decoration:none; } 
button { margin:0; padding:0; border:none; } 
button:focus { box-shadow:none; outline:none; text-decoration:none; }
ul{ list-style: none;padding: 0;margin:0; }
img { height: auto; width: 100%; }
input, textarea { font-family: 'Inter', sans-serif; letter-spacing: 4px; }

/***************** HEADER CSS *****************/
header { position: fixed; left: 0; right: 0; top: 56px; z-index: 10; }
header.fixed { transform: translateY(-100%); background-color: #129B9E; top: 0; animation: transheader 1s forwards; }
header .navigation-hamburger { border: unset; padding: 0; background-color: rgba(0, 0, 0, 0); overflow: hidden; width: 28px; height: 22px; position: relative; z-index: 1032; transition: all 0.3s ease-in-out; display: none; margin-right: 15px; }
header .navigation-hamburger span { background-color: #fff; width: 100%; border-radius: 1px; height: 2.1px; display: block; position: absolute; transition: top 0.3s 0.3s, transform 0.4s; }
header .navigation-hamburger span:nth-child(1) { top: 6px; opacity: 1; transition: opacity 0.3s ease-in-out; }
header .navigation-hamburger span:nth-child(2) { top: 13px; width: 70%; right: 0; margin-bottom: 0; } 
header .navigation-hamburger.open span:nth-child(1) { transform: translate(0, 4px) rotate(45deg); transition: all 200ms linear; }
header .navigation-hamburger.open span:nth-child(2) { top: 10px; width: 100%; transform: translate(0px, 0px) rotate(-45deg); }
header nav .navigation-hamburger { display: none; }
.header-wrapper { background: #129B9E; padding: 20px; padding-right: 40px; }
.header-wrapper ul li { padding: 0 15px; }
.header-wrapper ul li:last-child { padding-right: 0; }
.header-wrapper ul li a { color: #fff; font-size: 16px; position: relative; line-height: 20px; padding: 5px 0; letter-spacing: 4px; text-transform: uppercase; }
.header-wrapper ul li a:after { content: ''; height: 1px; background: #fff; position: absolute; transition: all 0.4s ease; left: 0; right: 0; width: 0; bottom: -5px; }
.header-wrapper ul li.active a:after { width: 100%; }
.logo { max-width: 150px; }
.banner { position: relative; }
.banner-txt { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; padding-top: 18%; }
.banner-txt h1 { font-weight: 400; }
.banner-txt p { text-transform: uppercase; font-weight: 600; padding-top: 20px; letter-spacing: 4px; }
.banner-btn { padding: 38px 45px; font-size: 20px; line-height: 24px; border-radius: 140px; margin-top: 120px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; background-color: #fff; transition: all 0.8s ease; }
.banner-btn:hover { background: #129B9E; color: #fff; }
.story-section { padding-top: 170px; }
.story-img { position: relative; padding-right: 80px; }
.story-img:after { content: ''; position: absolute; left: 40px; top: 40px; width: calc(100% - 80px); height: 100%; border: 1px solid #129B9E; }
.story-desc { padding-left: 70px; }
.section-small-title { font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 30px; }
.primary-heading { font-size: 96px; line-height: 96px; color: #129B9E; font-weight: 400; }
.subtitle { font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin: 30px 0 40px; }
.story-desc .desc { margin-bottom: 40px; font-weight: 300; line-height: 41px; font-size: 24px; }

.brand-section { padding: 100px 0; }
.brand-heading { font-size: 96px; line-height: 96px; color: #129B9E; font-weight: 400; display: inline-block; background: #fff; z-index: 1; position: relative; padding-right: 70px; }
.brand-box { position: relative; margin-bottom: 66px; }
.brand-box:after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); background: #000; height: 1px; width: 100%; left: 0; }

.wholesale-section { padding-top: 70px; }
.wholesale-section .story-desc { padding-right: 60px; padding-left: 0; margin-left: auto; max-width: 800px; }
.wholesale-section .story-img { padding-right: 40px; padding-left: 40px; }
.wholesale-section .story-img:after { left: 80px; }
.wholesale-section .primary-heading { font-size: 72px; line-height: 72px; margin-bottom: 40px; }

.contact-section { padding-top: 130px; }
.contact-section .section-small-title { color: #129B9E; }
.contact-section .form-wrapper { padding: 60px; background-color: #129B9E; margin-top: 80px; }
.form-input { background: transparent; border: 0; color: #fff; width: 100%; border-bottom: 1px solid #fff; outline: none; padding: 17px 0; margin-bottom: 56px; font-weight: 600; }
.form-input::placeholder { text-transform: uppercase; color: #fff; }
textarea.form-input { min-height: 190px; }
.primary-btn { background: #3CDBDD; box-shadow: 0 4px 24px 0 #F5F5F526; padding: 18px 48px; color: #000; font-weight: 700; text-transform: uppercase; border-radius: 140px; letter-spacing: 4px; font-size: 20px; line-height: 24px; transition: all 0.8s ease; white-space: nowrap; }
.primary-btn:hover { background-color: #fff; }
.contact-section .primary-btn { min-width: 340px; max-width: 100%; }

footer { margin-top: 200px; padding-top: 130px; background: linear-gradient(180deg, #34BFC1 0%, rgba(52, 191, 193, 0) 80%); }
.newsletter-desc { font-weight: 300; line-height: 30px; }
.newsletter-wrapper { background: #fff; padding: 50px; }
.newsletter-wrapper .form-input { margin-bottom: 0; color: #000; border-bottom-color: #000; }
.newsletter-wrapper .form-input::placeholder { color: #000; }
.newsletter-wrapper .input-wrapper { width: 100%; padding-right: 67px; }
.newsletter-wrapper .primary-btn:hover { background-color: #129B9E; color: #fff; }
.footer-wrapper { padding-top: 100px; padding-bottom: 40px; }
.footer-links li a { text-transform: uppercase; font-weight: 700; letter-spacing: 4px; font-size: 20px; line-height: 24px; color: #000; }
.footer-links li { padding-bottom: 42px; }
.footer-links li:last-child { padding-bottom: 0; }
.footer-wrapper .section-small-title { margin-bottom: 15px; }
.footer-wrapper .desc { line-height: 41px; }
.footer-col .link-box { margin-bottom: 30px; }
.footer-col .link-box .section-small-title { margin-bottom: 10px; }
.footer-col .link-box a{ font-size: 20px; line-height: 24px; color: #000; }
.copyright-txt { font-size: 24px; line-height: 30px; font-weight: 700; }

@keyframes transheader {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}