/* About Us Page Styles */

.about-page-container,
.about-page-container * {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

.about-page-container {
    background-color: #f7f6f4;
    width: 100%;
    overflow-x: hidden;
}

/* Hero Section */
.about-hero {
    position: relative;
    height: 512px;
    width: 100%;
}

.about-hero-container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.3) 6.18%, rgba(0,0,0,0) 64.44%);
    z-index: 2;
}

.about-hero-content {
    position: relative;
    z-index: 3;
    max-width: 586px;
    color: #eff1f4;
}

.about-hero-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 1.29px;
    margin-bottom: 12px;
	color: #EFF1F4;
	width: 80%;
}

.about-hero-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
	color:#EFF1F4;
}

/* Our Story Section */
.about-story {
    background-color: #eff1f4;
    padding: 122px 0;
    width: 100%;
}

.about-story-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.about-story-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-story-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-story-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #456793;
    text-transform: uppercase;
    letter-spacing: -0.12px;
}

.about-story-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #0a1628;
    line-height: 1.3;
    letter-spacing: -0.56px;
    text-transform: capitalize;
}

.about-story-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #456793;
    line-height: 1.5;
}

.about-story-img {
    width: 580px;
    height: 394px;
    object-fit: cover;
}

/* Our Mission Section */
.about-mission {
    background-color: #0a1628;
    padding: 120px 0;
    width: 100%;
}

.about-mission-container {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
/*     gap: 16px; */
    margin: 0 auto;
    box-sizing: border-box;
}

.about-mission-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #eff1f4;
    text-transform: uppercase;
    letter-spacing: -0.12px;
	padding-bottom:4px;
}

.about-mission-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #f7f6f4;
    line-height: 1.3;
   letter-spacing: -0.2px;
    margin: 0;
	padding-bottom:16px;
}

.about-mission-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #eff1f4;
    line-height: 1.5;
    margin: 0;
	text-align:center;
	width: 65%;
}

/* Why Shop With Us */
.about-why {
    background-color: #f7f6f4;
    padding: 120px 0;
    width: 100%;
}

.about-why-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.about-why-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
/*     margin-bottom: 20px; */
}

.about-why-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #456793;
    text-transform: uppercase;
    letter-spacing: -0.12px;
}

.about-why-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #0a1628;
    line-height: 1.3;
   letter-spacing: -0.2px;
    text-transform: capitalize;
}

.about-why-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    max-width: 1240px;
}

.about-why-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.about-why-card {
    background-color: #eff1f4;
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
/*     gap: 20px; */
    min-height: 256px;
    box-sizing: border-box;
}

.about-why-card-icon {
  width: 46.5px;
    height: 46.5px;
    object-fit: contain;
}

.about-why-card-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #0a1628;
    line-height: 1.2;
    letter-spacing: -0.36px;
    margin-bottom: 8px;
	padding-top:29px;
}

.about-why-card-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #456793;
    line-height: 1.5;
}

.about-why-center-img-wrapper {
    width: 500px;
    height: 532px;
    overflow: hidden;
    position: relative;
}

.about-why-center-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Our Approach Section */
.about-approach {
    background-color: #0a1628;
    width: 100%;
}

.about-approach-container {
/*     display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box; */
	display: flex;
    gap: 60px;
}

.about-approach-content {
      display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 0px;
    width: 57%;
}

.about-approach-header {
    display: flex;
    flex-direction: column;
/*     gap: 16px; */
    color: #eff1f4;
}

.about-approach-eyebrow {
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.12px;
    text-transform: uppercase;
    color:#EFF1F4;
/*     margin-bottom: 4px; */
}

.about-approach-title {
    font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 36.4px */
letter-spacing: -0.2px;
text-transform: capitalize;
	 color:#EFF1F4;
}

.about-approach-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #cfdaeb;
    line-height: 1.5;
	margin-bottom:32px;
/* 	padding-top:16px; */
	padding-top: 13px;
}

.about-approach-list-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-approach-list-title {
  font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 19.2px */
letter-spacing: -0.32px;
text-transform: capitalize;
	color:#F7F6F4;
}

.about-approach-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #cfdaeb;
    font-size: 16px;
}

.about-approach-list li {
    position: relative;
    padding-left: 24px;
    line-height: 1.5;
}

.about-approach-list li::before {
    content: '•';
    position: absolute;
    left: 8px;
    top: 0;
    color: #cfdaeb;
}

.about-approach-footer-desc {
   font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 19.2px */
letter-spacing: -0.32px;
text-transform: capitalize;
	padding-top:32px;
	color:#F7F6F4;
}

.about-approach-img-wrapper {
	margin-right: calc(-1 * (100vw - 1240px) / 2) !important;
    flex: 1 !important;
    width: 574px;
    height: 753px;
}

.about-approach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive adjustments */

@media (max-width: 768px) {
    .about-hero-container {
        align-items: center;
        text-align: center;
    }

    .about-hero {
        height: 400px;
    }
    
    .about-hero-title {
        font-size: 36px;
    }

    .about-story, .about-mission, .about-why {
        padding: 60px 0;
    }

    .about-approach-content {
        padding: 60px 20px;
    }

    .about-story-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }

    .about-why-card {
        padding: 24px 16px;
        min-height: auto;
        height: auto;
    }

    .about-approach-img-wrapper {
        width: 100%;
        height: 300px;
    }
}


@media (max-width: 1366px){
	.about-story,
	.about-mission,
	.about-why{
		padding: 80px 0 !important;
	}
	.about-why-card{
		    padding: 30px 24px !important;
	}
	.about-why-card-title{
		padding-top: 20px !important;
	}
	.about-approach-content{
		width: 51% !important;
		padding: 50px 0px !important;
	}
	.about-approach-img-wrapper{
		margin-right: calc(-1 * (100vw - 1121px) / 2) !important;
		width:auto !important;
		height:auto !important;
	}
	.global-brands-section{
		padding: 80px 00px !important;
	}
	.brand-logo-card {
		padding:30px !important;
	}
	
}


@media (max-width: 1199px){
	.about-hero{
		height: 480px !important;
	}
	.about-story, .about-mission, .about-why {
        padding: 70px 0 !important;
    }
	.about-story-img{
		width: 480px !important;
	}
	.about-story-container {
		gap: 40px !important;
	}
	.about-why-center-img-wrapper{
		width: 380px !important;
    height: 520px !important;
	}
	.about-why-card-title {
        padding-top: 13px !important;
    }
	.about-why-card{
		min-height: 251px !important;
	}
	    .about-approach-img-wrapper {
			margin-right: calc(-1 * (100vw - 940px) / 2) !important;
	}
	    .about-approach-content {
			width: 46% !important;
	}
	.about-approach-list{
		gap: 7px !important;
	}
	.global-brands-section {
        padding: 70px 00px !important;
    }
	.brand-logo-card {
		padding:25px !important;
	}
	.brand-logo-img{
		height:80px !important;
	}
}

@media (max-width: 1024px){
	.about-hero{
		height: 450px !important;
	}
	    .about-story, .about-mission, .about-why {
        padding: 60px 0 !important;
    }
	.about-story-container{
		flex-direction:column-reverse !important;
	}
	.about-mission-desc{
		width: 85% !important;
	}
	.about-why-grid{
		flex-direction:column !important;
		    align-items: center !important;
	}
	.about-why-column{
		flex-direction:row !important;
	}
	    .about-why-card {
        min-height: auto !important;
			width: 50% !important;
    }
	    .about-why-center-img-wrapper {
        width: 380px !important;
        height: 420px !important;
    }
	.about-approach-container{
		gap: 30px !important;
    flex-direction: column-reverse !important;
		padding:60px 0px !important;
	}
	.about-approach-img-wrapper{
		margin-right:0px !important;
	}
	.about-approach-content {
        width: 100% !important;
		padding: 0px 0px !important;
    }
	.about-approach-img{
		object-fit:contain !important;
		height:500px !important;
	}
	    .global-brands-section {
        padding: 60px 00px !important;
    }
	    .brand-logo-img {
        height: 35px !important;
    }
	    .brand-logo-card {
        padding: 20px !important;
    }
}
@media (max-width: 767px){
	    .about-hero {
        height: 380px !important;
    }
	.about-hero-content{
		text-align: left;
	}
	.about-hero-container{
		justify-content: end !important;
		padding-bottom: 48px !important;
	}
	    .about-story, .about-mission, .about-why {
        padding: 50px 0 !important;
    }
	    .about-mission-desc {
        width: 100% !important;
    }
	    .about-why-column {
        flex-direction: column !important;
    }
	    .about-why-card {
        min-height: auto !important;
        width: 100% !important;
			padding: 20px !important;
    }
	    .about-why-center-img-wrapper {
        width: 100% !important;
        height: 380px !important;
    }
	    .about-approach-img {
        object-fit: contain;
        height: 400px !important;
    }
	    .global-brands-section {
        padding: 50px 00px !important;
    }
	    .brand-logo-img {
        height: 50px !important;
    }
	    .brand-name {
        font-size: 16px !important;
    }
	.about-mission-title{
		text-align:center;
	}
	    .about-story-img {
        width: 100% !important;
    }
	.brand-logo-card {
        padding: 15px !important;
		height: 100px !important;
    }
}
@media (max-width: 480px){
	.about-approach-img {
        object-fit: contain;
        height: 350px !important;
    }
}
.brands-explore-btn{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    background-color: #0A1628 !important;
    color: #EFF1F4;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    width: 352px;
    text-decoration: none;
    letter-spacing: -0.28px;
}

.brands-explore-btn:hover{
    background-color: #15243C !important;
	border-color:#15243C !important;
}