* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Noto Sans', sans-serif;
}

html {
   scroll-behavior: smooth;
}

body {
   background: rgba(251, 248, 248, 1);
}

button {
   cursor: pointer;
   transition: .2s ease-in-out;
}

button:hover {
   opacity: .8;
}

/* header section */

.header {
   background: url(../images/masked_bg.svg) center/cover no-repeat;
   width: 100%;
   height: 90vh;
}

.header-content {
   position: relative;
   padding: 10px;
   height: 100%;
}

.container {
   margin: 0 auto;
   width: 1000px;
}

.header-content .logo {
   display: flex;
   align-items: center;
}

.header-content .logo img {
   width: 60px;
}

.header-content .logo img:last-child {
   width: 160px;
   margin-top: 10px;
}

.nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.navlist-logo {
   display: none;
}

.navlist-policy-privacy ul {
   display: none !important;
}

.navlist-policy-privacy.active ul {
   display: flex !important;
}

.hamburger-menu {
   display: none;
   cursor: pointer;
   position: relative;
   z-index: 9999;
}

.hamburger-menu img {
   width: 20px;
}

.hamburger-menu img:last-child {
   display: none;
}

.navlist.active {
   display: block;
   position: fixed;
   margin-top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: #0a0912;
   z-index: 100;
   transition: .35s ease;
}

 .navlist ul {
   display: flex;
   gap: 40px;
   margin-top: -20px;
 }

 .navlist ul li {
   list-style: none;
 }

 .navlist ul li a {
   text-decoration: none;
   color: #fff;
   font-size: 12px;
   transition: .2s ease-in-out;
 }

.header-body-container {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

.header-content-body {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
}

.header-main-text h1 {
   color: #fff;
   font-size: 60px;
   line-height: 70px;
   width: 60%;
}

.header-main-text p {
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   width: 60%;
}

.header-text-container {
   display: flex;
   flex-direction: column;
   gap: 25px;
}

.header-text-container button {
   width: fit-content;
   border: none;
   outline: none;
   border-radius: 8px;
   background: linear-gradient(90deg, #FF5D00 0%, #FF2637 100%);
   padding: 10px 20px;
   font-size: 10px;
   color: #fff;
   font-weight: 500;
   cursor: pointer;
   transition: .2s ease-in-out;
}

.phoenix-img {
   height: 100%;
}

.phoenix-img img {
   height: 550px;
   position: absolute;
   bottom: 0;
   right: -250px;
}

.core-advantage-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 15px;
   margin-top: -50px;
   position: relative;
   z-index: 1;
}

.core-advantage-card {
   border-radius: 20px;
   background-color: #fff;
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.25);
   height: 100%;
   padding: 35px 25px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   transition: .2s ease-in-out;
   cursor: default;
}

.core-advantage-card-header {
   display: flex;
   align-items: center;
   gap: 12px;
}

.core-advantage-card-header img {
   width: 27px;
   height: fit-content;
   transition: .2s ease-in-out;
}

.core-advantage-card-header h3 {
   font-size: 15px;
   font-weight: 600;
   color: rgba(51, 51, 51, 1);
   transition: .2s ease-in-out;
}

.core-advantage-card-body p {
   font-size: 12px;
   color: rgba(118, 118, 118, 1);
   transition: .2s ease-in-out;
}

.core-advantage-card:hover {
   background-color: rgba(249, 92, 4, 1);
}

.core-advantage-card:hover .core-advantage-card-header h3 {
   color: #fff;
}

.core-advantage-card:hover .core-advantage-card-body p {
   color: #fff;
}

.core-advantage-card:hover .core-advantage-card-header img {
   filter: brightness(0) invert(1);
}

/* about us section */

.about-us-container {
   padding: 50px 0;
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.about-us-title,
.how-we-work-title {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.about-us-title h3,
.how-we-work-title h3 {
   color: rgba(90, 90, 90, 1);
   font-size: 23px;
   font-weight: bold;
   text-align: center;
}

.about-us-title p,
.how-we-work-title p {
   color: #777777;
   font-size: 11px;
   text-align: center;
}

.about-us-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
   width: 100%;
}

.about-us-content img {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
}

.about-us-content-details {
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.25);
   padding: 15px 40px 30px 40px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   background: #fff;
   display: flex;
   flex-direction: column;
   gap: 15px;
   height: 100%;
   margin-top: auto;
}

.about-us-card-body {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.about-us-card-body img {
   flex-shrink: 0;
}

.about-us-content-card {
   height: 100%;
}

.about-us-content-details h4 {
   color: rgba(51, 51, 51, 1);
   font-size: 15px;
   font-weight: 600;
}

.about-us-content-details p {
   font-size: 11px;
   color: #777777;
   font-weight: 400;
}

/* core values section */

.core-values-container {
   background: url(../images/core_values_bg.svg) center/cover no-repeat;
   width: 100%;
   padding: 30px 0 30px 0;
}

.core-values-header-title {
   display: flex;
   flex-direction: column;
   gap: 10px;
   text-align: center;
   align-items: center;
}

.core-values-header-title h3 {
   color: #fff;
   font-size: 25px;
   font-weight: bold;
   text-align: center;
}

.core-values-header-title p {
   color: #fff;
   font-size: 11px;
   text-align: center;
   width: 320px;
   letter-spacing: 0.3px;
   font-weight: 400;
}

.core-values-content {
   display: flex;
   flex-direction: column;
   gap: 35px;
}

.core-values-card-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
}

.core-values-card {
   background-color: #fff;
   border-radius: 20px;
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.25);
   height: 100%;
   padding: 30px;
   cursor: default;
   transition: background-color .2s ease-in-out;
}

.core-values-card-content {
   display: flex;
   gap: 15px;
   align-items: center;
}

.core-values-card-content img {
   width: 30px;
   transition: .2s ease-in-out;
}

.core-values-card-content-text {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.core-values-card-content-text h4 {
   color: rgba(90, 90, 90, 1);
   transition: .2s ease-in-out;
}

.core-values-card-content-text p {
   color: #5a5a5a;
   font-size: 12px;
   font-weight: 400;
   transition: .2s ease-in-out;
}

.core-values-card:hover .core-values-card-content-text h4,
.core-values-card:hover .core-values-card-content-text p {
   color: #fff;
}

.core-values-card:hover img {
   filter: brightness(0) invert(1);
}

.core-values-card.red-orange:hover {
   background: #ff5c44;
}

.core-values-card.green:hover {
   background-color: #30c08f;
}

.core-values-card.pink-red:hover {
   background-color: #fe4099;
}

.core-values-card.purple:hover {
   background-color: #a65cff;
}

/* how we work section */

.how-we-work-content {
   padding: 50px 0;
}

.how-we-work-card-container {
   display: grid;
   grid-template-columns: repeat(4, minmax(0,1fr));
   gap: 15px;
 }

 .how-we-work-card {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   aspect-ratio:  10 / 15;
   display: grid;
   place-items: center;
   background: transparent;
   user-select: none;
 }

 .how-we-work-card img{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
   transition: opacity .25s ease-in-out;
 }

 .how-we-work-card img:first-child {
   z-index: 2;
}
 .how-we-work-card:hover img:first-child {
   opacity: 0;
}

.how-we-work-card-text {
   position: absolute;
   top: 63%;
   transform: translateY(-50%);
   padding: 10px;
   border-bottom-left-radius: 16px;
   display: flex;
   flex-direction: column;
   gap: 25px;
}

.how-we-work-card-text h4 {
   color: #5a5a5a;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   height: 30px;
   padding: 0 25px;
   transition: .2s ease-in-out;
}

.how-we-work-card-text p {
   color: rgba(118, 118, 118, 1);
   font-size: 12px;
   font-weight: 400;
   text-align: center;
   padding: 0 20px;
}

.how-we-work-card:hover .how-we-work-card-text h4 {
   color: #fa5c06;
}

.how-we-work-why-it-matters {
   background: url(../images/how_we_work/why_it_matters_bg.svg) center/cover no-repeat;
   height: 100%;
   padding: 25px 30px;
   border-radius: 20px;
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.25);
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.how-we-work-why-it-matters h4 {
   color: #fff;
   font-size: 15px;
   font-weight: 600;
}

.how-we-work-why-it-matters p {
   color: #fff;
   font-size: 12px;
}

/* our services section */

.our-services-container {
   padding: 50px 0;
   background: url(../images/our_services_bg.svg) center/cover no-repeat;
   display: flex;
   flex-direction: column;
   gap: 30px;
   text-align: center;
}

.our-services-content {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.our-services-title {
   display: flex;
   flex-direction: column;
   gap: 15px;
   align-items: center;
}

.our-services-title h3,
.our-services-title p {
   color: #fff;
}

.our-services-title h3 {
   font-size: 25px;
}

.our-services-title p {
   font-size: 11px;
   max-width: 450px;
}

.our-services-card-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
}

.our-services-card {
   display: grid;
   grid-template-rows: auto 1fr auto;
   background: #fff;
   border-radius: 30px;
   box-shadow: 0 6px 12px rgba(76,0,120,.25);
   padding: 25px;
   gap: 15px;
}

.our-services-card-header {
   display: flex;
   flex-direction: column;
   text-align: left;
   gap: 10px;
   padding-right: 20px;
}

.our-services-card-header img {
   width: 70px;
}

.our-services-card-header h3 {
   font-size: 15px;
   font-weight: 600;
   color: #5A5A5A;
   line-height: 1.25;
   margin: 0;
   min-height: calc(1.25em * 2);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.our-services-card-body {
   text-align: left;
   padding-right: 15px;
}

.our-services-card-body img {
   width: 10px;
   height: fit-content;
   margin-top: 5px;
}

.our-services-card-body-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.our-services-card-body-list-item {
   display: flex;
   align-items: start;
   gap: 13px;
}

.our-services-card-body-list-item span {
   font-size: 12px;
   color: rgba(118, 118, 118, 1);
   font-weight: 400;
}

/* contact us section */

.contact-us-container {
   background: rgba(12, 41, 73, 1);
   width: 100%;
   padding: 50px 0 20px 0;
}

.contact-us-content-inner {
   display: grid;
   grid-template-columns: 1.8fr 1fr;
   gap: 20px;
}

.contact-us-form-container {
   background: #0f2a42;
   padding: 24px 0;
   color: #fff;
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   align-items: start;
}

.contact-grid-input {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.contact-us-title {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.contact-us-title h3 {
   color: #fff;
   font-size: 27px;
   font-weight: 600;
}

.contact-us-title p {
   color: #fff;
   font-size: 11px;
}

.name {
   grid-column: 1;
   grid-row: 1;
}
.email {
   grid-column: 1;
   grid-row: 2;
}
.company {
   grid-column: 1;
   grid-row: 3;
}
.message {
   grid-column: 2;
   grid-row: 1 / span 3;
}
.note {
   grid-column: 1;
   grid-row: 4;
   margin: 0;
   color: #fff;
   font-size: 11px;
}
.note-2 {
   display: none;
}
.submit {
   grid-column: 2;
   grid-row: 4;
   justify-self: stretch;
}

.input,
.textarea {
   width: 100%;
   border: 0;
   outline: 0;
   background: #eef4fa;
   color: #1c2a36;
   padding: 5px 15px;
   font-size: 10px;
   resize: none;
   height: 100%;
   transition: .2s ease-in-out;
}
.input:focus, .textarea:focus {
   box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

.input::placeholder,
.textarea::placeholder {
   color: rgba(136, 136, 136, 1);
}

.input {
   padding: 13px;
}

.textarea {
   height: 100%;
   padding: 13px;
}

.submit {
   border: 0;
   border-radius: 5px;
   padding: 12px 20px;
   font-size: 11px;
   font-weight: 600;
   color: #fff;
   background: linear-gradient(90deg,#ff5e00,#ff2e55);
   box-shadow: 0 8px 16px rgba(0,0,0,.25);
   cursor: pointer;
}

.contact-us-image img {
   width: 100%;
}

.underlay {
   width: fit-content;
   margin-top: -32px;
}

.underlay img {
   width: 100%;
   transform: scaleY(-1);
}

.contact-details-title {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.footer-container {
   margin-top: 20px;
   display: grid;
   grid-template-columns: 1fr 3.5fr 1fr;
   gap: 10px;
   font-family: 'Montserrat', sans-serif !important;
}

.contact-details-title h5 {
   color: #fff;
   font-size: 13px;
   font-weight: 600;
}

.contact-details-address-mobile {
   display: none;
}

.contact-details-address p {
   margin-top: -70px !important;
}

.contact-details-title span,
.contact-details-address p {
   color: #fff;
   font-size: 10px;
   font-weight: 400;
   line-height: 12px;
}

.contact-details {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   gap: 15px;
}

.footer-title {
   display: flex;
   flex-direction: column;
   /* gap: 40px; */
   justify-content: space-between;
   align-items: center;
   font-family: 'Noto Sans', sans-serif;
}

.footer-title-logo img {
   height: 32px;
}

.footer-privacy-policy {
   display: flex;
   align-items: center;
   gap: 15px;
}

.footer-privacy-policy-container {
   display: flex;
   gap: 15px;
   align-items: center;
   margin-top: 25px;
}

.divider {
   margin-top: 5px;
}

.copyright span,
.policy a,
.terms-of-service a,
.divider {
   color: #fff;
   font-size: 12px;
}

.copyright span {
   font-size: 11px;
   font-weight: 600;
}

.footer-links {
   display: flex;
   justify-self: center;
   font-family: 'Noto Sans', sans-serif !important;
}

.footer-links ul {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.footer-links ul li {
   list-style: none;
}

.footer-links ul li a {
   color: #fff;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .4px;
   text-decoration: none;
}


/* privacy policy page */
body.privacy-policy-page {
   background: url(../images/privacy_policy_bg.svg) center no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   min-height: 100vh;
}

.privacy-policy-container {
   background: transparent;
   width: 100%;
   min-height: 100vh;
}

.privacy-policy-inner {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 50px 0;
}

.footer-privacy-policy-container {
   padding: 20px 0 50px 0;
}

.privacy-policy-container .nav {
   padding: 10px 20px;
}

.header-content {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding-bottom: 50px;
}

.header-content .privacy-policy-content h1 {
   color: #fff;
   font-size: 27px;
   font-weight: 700;
}

.privacy-policy-content-body {
   padding: 40px;
   background: rgba(0, 0, 0, 0.25);
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.privacy-policy-section-header h4 {
   color: #fff;
   font-size: 17px;
   font-weight: 700;
   letter-spacing: .3px;
}

.privacy-policy-section-header p {
   color: #fff;
   font-size: 11px;
}

.privacy-policy-section-header p span {
   font-weight: 600;
}

.privacy-policy-container-wrapper {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.privacy-policy-section-item {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.privacy-policy-section-body p,
.privacy-policy-section-body-item p,
.privacy-policy-content-body ol li,
.privacy-policy-content-body ul li {
   color: #fff;
   font-size: 11px;
   font-weight: 300;
   line-height: 15px;
   letter-spacing: .3px;
}

.privacy-policy-content-body ol {
   margin-left: 4px;
   padding-left: 0;
   list-style-position: inside;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.privacy-policy-content-body ul {
   margin-left: 23px;
   padding-left: 0;
   list-style-position: inside;
   list-style-type: disc;
}

.privacy-policy-content-body ol li::marker {
   color: #fff;
   font-weight: 600;
}

.privacy-policy-section-container {
   display: flex;
   flex-direction: column;
   gap: 50px;
}

#toast {
   visibility: hidden;
   max-width: 300px;
   background-color: #d4ecda;
   border: 1px solid #c5e2cf;
   color: #14511d;
   text-align: left;
   border-radius: 5px;
   padding: 12px 15px;
   position: fixed;
   z-index: 1;
   right: 30px;
   top: 30px;
   font-size: 13px;
   height: fit-content;
 }

 #toast.show {
   visibility: visible;
   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }

 @-webkit-keyframes fadein {
   from {bottom: 0; opacity: 0;}
   to {bottom: 30px; opacity: 1;}
 }

 @keyframes fadein {
   from {bottom: 0; opacity: 0;}
   to {bottom: 30px; opacity: 1;}
 }

 @-webkit-keyframes fadeout {
   from {bottom: 30px; opacity: 1;}
   to {bottom: 0; opacity: 0;}
 }

 @keyframes fadeout {
   from {bottom: 30px; opacity: 1;}
   to {bottom: 0; opacity: 0;}
 }