/* Global CSS  */

@font-face {font-family: 'Sofia Pro'; src: url('../fonts/SofiaPro.eot'); src: url('../fonts/SofiaPro.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaPro.woff2') format('woff2'), url('../fonts/SofiaPro.woff') format('woff'), url('../fonts/SofiaPro.ttf') format('truetype'), url('../fonts/SofiaPro.svg#SofiaPro') format('svg'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'Sofia Pro'; src: url('../fonts/SofiaPro-Medium.eot'); src: url('../fonts/SofiaPro-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaPro-Medium.woff2') format('woff2'), url('../fonts/SofiaPro-Medium.woff') format('woff'), url('../fonts/SofiaPro-Medium.ttf') format('truetype'), url('../fonts/SofiaPro-Medium.svg#SofiaPro-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap;}
@font-face {font-family: 'Junicode'; src: url('../fonts/Junicode-MediumItalic.eot'); src: url('../fonts/Junicode-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Junicode-MediumItalic.woff2') format('woff2'), url('../fonts/Junicode-MediumItalic.woff') format('woff'), url('../fonts/Junicode-MediumItalic.ttf') format('truetype'), url('../fonts/Junicode-MediumItalic.svg#Junicode-MediumItalic') format('svg'); font-weight: 500; font-style: italic; font-display: swap;}
:root {--primary_color: #001F5F; --body_content: #3B3B3B; --light_content: #76787B; --primary_light: #DFEDFF; --primary_font: 'Sofia Pro'; --grey_bg: #F6F6F6; --golden_gradient: linear-gradient(90deg, #BC8F38 0%, #FDE6B1 50%, #BC8F38 100%);}
* {box-sizing: border-box; margin: 0px; padding: 0px;}
body {color: var(--body_content); font-size: 20px; line-height: 26px; font-family: var(--primary_font);}
h1, .h1 {font-size: 64px; line-height: 70px; letter-spacing: -0.03em; font-weight: 400; color: var(--primary_color); margin: 0 0 32px;}
h2, .h2 {font-size: 52px; line-height: 57px; font-weight: 400; color: var(--primary_color); letter-spacing: -0.03em; margin: 0 0 24px;}
h3, .h3 {font-size: 32px; line-height: 38px; color: var(--primary_color); font-weight: 400; margin: 0 0 8px;}
h1 em, h2 em {display: block; font-family: 'Junicode'; font-size: 1.1em; line-height: 1.1em;}
p {margin: 0 0 20px;}
p:last-child {margin-bottom: 0px;}
a, button, input[type="submit"] {cursor: pointer; transition: all 0.3s;}
a {color: var(--primary_color); text-decoration: none;}
.container {max-width: 1312px; margin: 0 auto; padding: 0px 16px;}
button, .button, input[type="submit"] {display: inline-block; background-color: var(--primary_color); border: 1px solid var(--primary_color); color: #ffffff; text-transform: uppercase; line-height: 1; padding: 17px 32px; text-decoration: none; text-align: center;}
button:hover, .button:hover, input[type="submit"]:hover {background-color: transparent; color: var(--primary_color);}
button, .button {margin: 30px 0px 0px;}
p + a.button {margin: 12px 0px 0px;}
img {vertical-align: bottom; max-width: 100%; height: auto;}
ul {list-style-position: inside;}
.form-field:not(:last-child) {margin: 0 0 16px;}
form label {display: block; font-size: 16px; line-height: 24px; color: var(--primary_color); margin: 0 0 8px;}
.form-input {width: 100%; display: block; background-color: var(--grey_bg); border: 0; border-bottom: 1px solid var(--primary_color); padding: 16px; height: 56px; font-family: inherit; font-size: 16px; line-height: 24px;}
::placeholder {color: var(--body_content) !important; opacity: 1 !important;}
.submit-field {margin: 24px 0px 0px;}
input[type="submit"] {font-family: inherit; font-size: 16px; line-height: 20px; width: 100%;}
.section-heading {text-align: center;}
.section-heading p {font-size: 22px; max-width: 1112px; margin: 0 auto;}
button.slick-arrow {padding: 0; background-color: transparent; border: 0; margin: 0; width: 24px; height: 24px; font-size: 0px; background-image: url(../images/CaretLeft.svg); background-repeat: no-repeat; background-position: center; position: absolute; bottom: 0; left: calc(50% - 86px); bottom: -7px;}
button.slick-arrow.slick-next {background-image: url(../images/CaretRight.svg); left: auto; right: calc(50% - 86px);}
.slick-disabled {opacity: .4;}
ul.slick-dots {list-style: none; display: flex; justify-content: center; align-items: center; gap: 24px; margin: 47px 0px 0px;}
ul.slick-dots li {line-height: 0;}
ul.slick-dots li button {padding: 0; margin: 0; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; font-size: 0;}
ul.slick-dots li.slick-active button {background-color: #ffffff;}


/* Header  */

.header {padding: 20px 0px 28px; position: relative; z-index: 11;}
.header::after {content: ""; position: absolute; width: 100%; height: 8px; background-image: var(--golden_gradient);bottom: 0; left: 0;}

/* Banner Section */

.banner-sec {padding: 60px 0px; position: relative; overflow: hidden; z-index: 99;}
.banner-sec::before {content: ""; background: linear-gradient(180deg, var(--grey_bg) 0%, rgba(246, 246, 246, 0) 100%); position: absolute; width: 100%; height: 100%; top: 0; z-index: 1;}
.parallax-img.ukiyo {position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-size: cover; background-position: center;}
.banner-outer {position: relative; z-index: 2;}
.banner-inner {display: flex; justify-content: space-between; position: relative; align-items: flex-start;}  
.banner-content {max-width: 59.063%; flex: 0 0 100%; padding: 60px 0px 0px;}
.banner-content p {font-size: 24px; line-height: 30px; max-width: 612px; color: var(--primary_color);}
.banner-img {margin: 29px 0px 0px;}
.banner-form {max-width: 40.625%; flex: 0 0 100%; background-color: #ffffff; padding: 40px;}
.form-sec h2 {font-weight: 500; max-width: 280px; margin: 0 0 24px;}

/* Three Column Section */

.three-col-sec {padding: 80px 0px; overflow: hidden;}
.three-col-row {display: flex; text-align: center;}
.three-col-row > * {flex: 1; padding: 0px 40px;}
.col-icon {background-color: var(--primary_light); display: inline-flex; width: 64px; height: 64px; justify-content: center; align-items: center; border-radius: 50%; position: relative; transition: all 0.4s;}
.single-col:hover .col-icon {background-color: var(--primary_color);}
.col-icon::after {top: -5px; left: -5px; padding: 5px; box-shadow: 0 0 0 4px var(--primary_color); transition: transform 0.4s, opacity 0.4s; transform: scale(.8); opacity: 0; content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%;}
.single-col:hover .col-icon::after {transform: scale(1);  opacity: 1;}
.col-icon img {transition: all 0.4s;}
.single-col:hover .col-icon img {filter: brightness(0) invert(1);}
.col-content {margin: 24px 0px 0px;}
.col-title  {font-size: 24px; line-height: 1; color: var(--primary_color); margin: 0 0 12px;}

/* Two Column Image and Content Section  */

.two-col-image-content-sec {background-color: var(--grey_bg); padding: 120px 0px; overflow: hidden;}
.two-col-image-content-inner {display: flex; justify-content: space-between;}
.two-col-image-content-inner > *, .brand-representative-inner > * {max-width: 46.876%; flex: 0 0 100%;}
.content-sec {max-width: 520px;}
.content-sec h2 {margin: 0 0 16px;}
.icon-content-list {margin: 40px 0px 0px; display: flex;}
.icon-content-list > * {margin: 0 24px 0px 0px; display: flex; align-items: center; gap: 16px;}
.item-content p {color: var(--primary_color); font-size: 16px; width: max-content;}
.item-icon {position: relative; border-radius: 50%; transition: all 0.4s; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;}
.single-item:hover .item-icon {box-shadow: 0 0 0 4px var(--primary_color);}
.item-icon::after {top: 0; left: 0; padding: 0; box-shadow: 0 0 0 2px var(--primary_color); transition: transform 0.4s, opacity 0.4s; pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; box-sizing: content-box;}
.single-item:hover .item-icon::after {transform: scale(0.85); opacity: 1; background-color: var(--primary_light); box-shadow: 0 0 0 2px var(--primary_light);}
.item-icon img { position: relative; z-index: 1; transition: all 0.4s;}
/* .single-item:hover .item-icon img {filter: brightness(0) invert(1);} */

/* Testimonials Section  */

.testimonials-sec {background-color: var(--primary_color); padding: 120px 0px; color: #fff; position: relative; overflow: hidden;}
.testimonials-sec::after {content: ""; position: absolute; width: 100%; height: 5.556vw; background-image: url(../images/bottom_curve.png); bottom: 0; left: 0; background-size: cover; background-position: bottom; background-repeat: no-repeat;}
.testimonials-sec .container {max-width: 100%;}
.top-content p {font-size: 20px; line-height: 17px; text-transform: uppercase; letter-spacing: -0.03em;}
.top-content > *:not(:last-child) {margin: 0 0 8px;}
.testimonial-slider {margin: 24px 0px 0px;}
.testimonial-slider .slick-list {margin: 0px -15px;}
.testimonial-slider .slick-slide {margin: 0px 15px;}
.testimonial-content {padding: 43px 0px 0px; position: relative;}
.testimonial-content::before {content: ""; position: absolute; background-image: url(../images/icon-quote-white.png); width: 34px; height: 27px; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: contain;}
.testimonials-sec .h3 {color: #ffffff;}
.slide-inner, .top-content {max-width: 880px; margin: 0 auto;}
.client-details {margin: 16px 0px 0px; text-align: right;}
.client-details p {display: inline-flex; align-items: center;}
.client-details p br {display: none;}
.client-details p::before {content: ""; display: inline-block; width: 200px; height: 1px; background-color: #fff; vertical-align: middle; margin-right: 10px;}
.my-horizontal-section {position: relative; overflow: hidden; height: 100vh;}
.my-horizontal-section .inner {margin: 24px 0px 0px; display: flex; height: 100%;}
.testimonial-slide {flex: 0 0 100vw; height: 100%; display: flex; align-items: center; justify-content: center;}

/* Collection Section  */

.collection-sec {background-color: var(--grey_bg); padding: 120px 0px; overflow: hidden;}
.collection-sec .container, .comparison-sec .container {max-width: 1120px;}
.collection-listing {margin: 48px 0px 0px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.collection-content, .comparison-content {margin: 24px 0px 0px; color: var(--body_content);}
.collection-content h3, .comparison-content h3 {font-size: 24px; line-height: 1; font-weight: 400; color: var(--primary_color); margin: 0 0 12px;}
.collection-img {overflow: hidden;}
.collection-img img {transition: all 0.5s; background-color: #ffffff; width: auto;}
.single-collection:hover .collection-img img {transform: scale(1.04);}
.collection-content ul {list-style-position: outside; padding-left: 20px;}

/* Comparison Section */

.comparison-sec {padding: 120px 0px; overflow: hidden;}
.comparison-row {margin: 48px 0px 0px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}

/* Representative Section */

.brand-representative-sec {padding: 120px 0px; background-size: cover; background-position: center;position: relative; overflow: hidden;}
.brand-representative-outer {position: relative;}
.brand-representative-inner {display: flex; justify-content: space-between;  align-items: center;}
.brand-representative-content p {font-size: 22px;}
.brand-representative-listing > * {background-color: #fff; display: flex;}
.brand-representative-listing > *:not(:last-child) {margin: 0 0 40px;}
.representative-details {padding: 32px;}
.representative-img {flex: 0 0 100%; max-width: 33.334%;}
.representative-img img {width: 100%; height: 100%; object-fit: cover;}
.representative-details p {margin: 0 0 12px; max-width: 230px;}
.representative-details ul {list-style: none;}
.representative-details ul li:not(:last-child) {margin: 0 0 12px;}
.representative-details ul li a {font-size: 18px; color: var(--body_content); display: flex; align-items: center; gap: 12px; word-break: break-word;}

.sticky-btn-outer {position: fixed; top: 12px; right: 20px; z-index: 99;}
.sticky-btn-outer a {box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, .2); margin: 0px;}
.sticky-btn-outer a:hover {background-color: #ffffff;}

/* Footer */

.footer {padding: 48px 0px;}
.footer-top {display: flex; align-items: center; justify-content: space-between;}
.footer-content {max-width: 75%; text-align: right;}
.footer-content p, .footer-copyright p {font-size: 16px; color: var(--light_content);}
.footer-content p {font-size: 14px; line-height: 20px;}
.footer-copyright {text-align: center;  margin: 48px 0px 0px;}

/* Animations */

.page--home .fade-in {opacity: 0}
.page--home .fade-in-y {-webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); -o-transform: translateY(70px); transform: translateY(50px); opacity: 0}
.page--home .fade-in-x {-webkit-transform: translateX(-70px); -moz-transform: translateX(-70px); -ms-transform: translateX(-70px); -o-transform: translateX(-70px); transform: translateX(-70px); opacity: 0}
.page--home .fade-in-x.right {-webkit-transform: translateX(70px); -moz-transform: translateX(70px); -ms-transform: translateX(70px); -o-transform: translateX(70px); transform: translateX(70px); opacity: 0}

/* Success Popup */

.success-popup {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .5); z-index: 99;}
.popup-inner {background: #fff; padding: 50px; max-width: 500px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.success-popup h3 {margin: 0 0 20px; font-family: 'Junicode';}
.best-regards {font-size: 16px;}
.best-regards span {display: block;}

/* Responsive / Media Queries */

@media (max-width: 1199px) {
    body {font-size: 18px; line-height: 24px;}
    h1, .h1 {font-size: 50px; line-height: 56px; margin: 0 0 24px;}
    h2, .h2 {font-size: 42px; line-height: 47px;}
    h3, .h3 {font-size: 28px; line-height: 34px;}
    .banner-content p {font-size: 20px; line-height: 26px; max-width: 512px;}
    .form-sec h2 {max-width: 230px; margin: 0 0 16px;}
    .banner-form {padding: 24px;}
    .three-col-row > * {padding: 0px 8px;}
    .icon-content-list {flex-wrap: wrap; gap: 16px 0px;}
    .slide-inner, .top-content {max-width: 770px;}
    .section-heading p, .brand-representative-content p {font-size: 20px;}
}
@media (max-width: 991px) {
    body {font-size: 16px; line-height: 22px;}
    .banner-inner, .three-col-row, .two-col-image-content-inner, .brand-representative-inner {flex-wrap: wrap;}
    .banner-form, .two-col-image-content-inner > *, .brand-representative-inner > * {max-width: 100%;}
    .banner-content {max-width: 80%; padding: 0;}
    .three-col-sec {padding: 60px 0px;}
    .three-col-row {gap: 32px 0px; justify-content: center;}
    .three-col-row > * {flex: 0 0 100%; max-width: 50%;}
    .two-col-image-content-sec, .comparison-sec, .brand-representative-sec {padding: 80px 0px;}
    .image-col, .brand-representative-listing, .banner-form {margin: 40px 0px 0px;}
    .testimonials-sec {padding: 80px 0px 20px;}
    .client-details p::before {width: 138px;}
    .collection-sec {padding: 80px 0px 80px;}
    .section-heading p, .brand-representative-content p {font-size: 18px;}
    .collection-listing {gap: 16px;}
    .footer-content {max-width: 55%;}
}
@media (max-width: 767px) {
    body {font-size: 14px;}
    h1, .h1 {font-size: 32px; line-height: 38px; margin: 0 0 12px; letter-spacing: -0.04em;}
    h2, .h2 {font-size: 32px; line-height: 38px; margin: 0 0 16px;}
    h3, .h3, .collection-content h3, .comparison-content h3 {font-size: 20px; line-height: 24px;}
    p + a.button {margin: 4px 0px 0px;}
    form label {font-size: 14px; line-height: 20px;}
    .form-input {padding: 12px 16px; height: 44px; font-size: 14px; line-height: 20px;}
    input[type="submit"] {font-size: 14px; line-height: 20px; padding: 11px 32px;}
    button, .button, input[type="submit"] {padding: 14px 32px; width: 100%;}
    .header {padding: 12px 0px 18px;}
    .header::after {height: 6px;}
    .logo-sec img {max-height: 32px; width: auto;}
    .banner-sec {padding: 40px 0px 48px;}
    .banner-sec .parallax-img {background-image: url(../images/banner-bg-mobile.png) !important;}
    .banner-content {max-width: 100%;}
    .banner-content p {font-size: 15px; line-height: 22px; margin: 0 0 17px;}
    .banner-img {margin: 17px 0px 0px;}
    .banner-img img {max-width: 226px;}
    .brand-representative-listing, .banner-form {margin: 26px 0px 0px;}
    .form-sec h2 {max-width: 170px;}
    .three-col-sec, .comparison-sec, .brand-representative-sec, .testimonials-sec {padding: 48px 0px;}
    .two-col-image-content-sec {padding: 80px 0px 0px;}
    .three-col-row > * {max-width: 100%;}
    .col-title {font-size: 20px; line-height: 24px; margin: 0 0 8px;}
    .col-content p br {display: none;}
    .icon-content-list {margin: 32px 0px 0px; flex-wrap: unset;}
    .icon-content-list > * {margin: 0 32px 0px 0px; align-items: flex-start; gap: 8px; flex-direction: column;}
    .item-content p, .section-heading p, .brand-representative-content p {font-size: 14px;}
    .item-icon img {min-width: unset;  max-width: 56px;}
    .image-col {margin: 40px -16px 0px; max-width: calc(100% + 32px); flex: 0 0 calc(100% + 32px);}
    .top-content p {font-size: 12px; line-height: 16px;}
    .testimonial-content {padding: 40px 0px 0px;}
    .testimonial-content::before {width: 28px; height: 28px;}
    .client-details p {display: flex; justify-content: space-between;}
    .client-details p br {display: block;}
    ul.slick-dots {gap: 16px;}
    button.slick-arrow.slick-prev {left: calc(50% - 71px);}
    button.slick-arrow.slick-next {right: calc(50% - 71px);}
    .testimonials-sec::after {height: 24px;}
    .collection-sec {padding: 48px 0px 48px;}
    .section-heading p br, .banner-sec::before {display: none;}
    .collection-listing, .comparison-row {margin: 40px 0px 0px; grid-template-columns: repeat(1, 1fr); gap: 32px;}
    .collection-img img {width: 100%;}
    .collection-content, .comparison-content {margin: 16px 0px 0px;}
    .brand-representative-sec .parallax-img {background-image: url(../images/representative-bg-mobile.png) !important;}
    .brand-representative-listing {margin: 40px 0px 0px;}
    .brand-representative-listing > * {padding: 16px; align-items: flex-start;}
    .brand-representative-listing > *:not(:last-child) {margin: 0 0 16px;}
    .representative-details {padding: 0 0 0 16px;}
    .representative-img {max-width: 23.156%;}
    .representative-details h3 {font-size: 16px; line-height: 26px; margin: 0 0 4px;}
    .representative-details p, .representative-details ul li a {font-size: 12px; line-height: 16px; margin: 0 0 8px;}
    .representative-details ul li:not(:last-child) {margin: 0 0 8px;}
    .representative-details ul li a {margin: 0 0 0px; gap: 8px;}
    .representative-details ul li a img {max-width: 20px;}
    .footer {padding: 32px 0px;}
    .footer-top  {flex-wrap: wrap; gap: 16px;}
    .footer-content {max-width: 100%; text-align: left;}
    .footer-content p, .footer-copyright p {font-size: 12px; line-height: 18px;}
    .footer-logo img {max-width: 131px;}
    .footer-copyright {text-align: left; margin: 16px 0px 0px;}
	.sticky-btn-outer a {padding: 10px 15px;}
	.sticky-btn-outer {top: 11px; right: 16px;}
} 
@media (max-width: 570px) {
	.popup-inner {padding: 30px; max-width: calc(100% - 30px);}
	.best-regards {font-size: 14px;}
}