/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Orbitron:wght@400..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@200..800&display=swap');

html { font-size: 62.5%;}

:root {
    --colorPrimary: #950E1C;
    --colorSecondary: #F15D16;
    --bodyText: #4d4d4d;
    --fontHeading: "Manrope", sans-serif

}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Lato", sans-serif;
    background: #fff;
    background-size: cover;
    font-size: 16px;
    color: #34373C;
    overflow-x: hidden;

}

.font-heading { font-family: "Manrope", sans-serif;}

.container { max-width: 1140px; margin: auto;} 

.d-flex { display: flex;}
.d-block { display: block;}

.btn-primary {padding: 17px 40px 17px 40px; white-space: nowrap; font-size: 16px; transition: all 0.5s ease-in-out; background-color: var(--colorSecondary); color: white; font-family: var(--fontHeading); text-align: center; text-decoration: none; font-weight: bold;}
.btn-primary:hover {background-color: var(--colorPrimary);}

.pt-50 { padding-top: 5rem;}
.pb-50 { padding-bottom: 5rem;}

.mar-b-10 {margin-bottom: 10px;}
.mar-b-20 {margin-bottom: 20px;}
.mar-b-30 {margin-bottom: 3rem;}
.mar-b-40 {margin-bottom: 4rem;}
.mar-b-50 {margin-bottom: 5rem;}

.mar-t-10 {margin-top: 10px;}
.mar-t-20 {margin-top: 20px;}
.mar-t-30 {margin-top: 3rem;}
.mar-t-40 {margin-top: 4rem;}
.mar-t-50 {margin-top: 5rem;}

.toggle-menu-icon { display: none; cursor: pointer;}

.header {position: absolute; width: 100%; z-index: 99; padding: 20px 0}

body.scrolled .header { background-color: rgba(0, 0, 0, 0.6);}

.header .main-logo { max-width: 143px; align-self: center; width: 100%;}
.header .container { justify-content: space-between; align-items: center;}

nav.main-nav { width: 75%; justify-content: flex-end; align-items: center;}
nav.main-nav > ul { list-style: none; display: flex; justify-content: space-between; }
nav.main-nav ul li { position: relative;}
nav.main-nav > ul > li > a,
nav.main-nav > ul > li > div > a
 { font-size: 16px; color: white; text-decoration: none; font-weight: 600; padding-left: 22px; padding-right: 22px;}

 .down-arrow-mobile { color: white;}
/* dropdown menu */
.sub-menu {
    transform: translateY(20%);
    opacity: 0;
    transition: 0.1s;
    width: 220px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
    background-color: white;
    list-style: none;
    visibility: hidden;
}
.sub-menu a { color: black; padding: 15px; border-bottom: solid 1px rgba(0,0,0,0.5); display: block; text-decoration: none; font-size: 16px; font-weight: 600; text-align: left;}
.sub-menu a:hover { color: var(--colorSecondary);}

.has-sub-menu:hover > .sub-menu { opacity: 1; transform: translateY(0%); visibility: visible;}
.has-sub-menu:hover span.material-symbols-outlined { transform: rotate(90deg); transition: all 0.3s ease;}

.swiper-container { width: 100vw;}

.main-slider-wrapper .swiper-button-prev,
.main-slider-wrapper .swiper-button-next { display: none !important; color: #000 !important;}

.swiper-button-prev,
.swiper-button-next { color: #000 !important;}

.img-attribution { font-size: 12px; color: #000; opacity: 0.5;}
.img-attribution a { color: var(--colorPrimary);}


.main-slider-wrapper .img-attribution { position: absolute; top: 96%; z-index: 99; left: 20px; color: #fff; opacity: 0.5;}
.main-slider-wrapper .img-attribution a { color: pink;}
.main-slider-wrapper { color: white; display: flex; align-items: center; justify-content: space-between; height: 100vh; flex-direction: column;}
.main-slider-wrapper .content { margin-top: 30vh; position: relative; z-index: 2;}
.main-slider-wrapper .backdrop-slideshow { position: absolute;}
.main-slider-wrapper h2 { font-size: 6rem; font-family: var(--fontHeading); color: white; line-height: 7rem; margin-bottom: 4rem; text-transform: capitalize;}
.main-slider-wrapper .heading { max-width: 800px; margin: auto;}
.main-slider-wrapper p { font-size: 18px; line-height: 30px;}

.main-slider-wrapper .swiper-slide-cover::before { content: ""; width: 100%; height: 100%; border: solid 2px green; display: block; background: #000; position: absolute; z-index: 9; opacity: 0.50;
}

.swiper-slide .content { display: none;}

.bottom-services { display: flex; max-width: 1140px; position: relative; z-index: 2;}
.bottom-services h3 { font-family: var(--fontHeading); font-size: 20px; gap: 10px; align-items: center; margin-bottom: 2rem; font-weight: bold;}
.bottom-services p { font-size: 17px; line-height: 26px; text-align: left;}
.bottom-services .service-block { border-left: solid 1px #ffff; padding: 20px}
.bottom-services .service-block:last-child { background-color: #fff; color: #000;}
.bottom-services .material-symbols-outlined { font-weight: 300; font-size: 3.5rem;}

.section-2 { display: flex; gap: 3rem;}
.section-2 h2, .step-to-start h2, .creative-partner h2 { font-size: 4rem; color: var(--colorPrimary); text-align: left; font-family: var(--fontHeading); margin-bottom: 6rem;}
.section-2 h4 { font-size: 2.2rem; color: #000; font-family: var(--fontHeading); text-align: left; margin-bottom: 4rem;}
.section-2 h4 + p { line-height: 26px; font-size: 18px; text-align: left;}
.section-2 p + .portrait-image { margin-top: 4rem;}
.section-2 img { width: 100%; height: auto;}
.number_count { background-color: var(--colorSecondary); margin: 0px 0px -20px 13px; padding: 15px 15px 15px 15px; font-family: var(--fontHeading); width: 8rem; font-size: 3rem; color: white; font-weight: 800; position: relative;}
.section-2 .section-column:nth-child(2) .number_count {margin: -40px 0px 0px 13px;}
.section-2 .section-column:nth-child(2) .portrait-image { margin-bottom: 4rem;}

.section-2 .portrait-image,
.main-image,
.product-slider,
.page-image,
.aboutus
{ position: relative;}
.section-2 .portrait-image .img-attribution { position: absolute; bottom: 5%; left: 15px;}
.section-2 .portrait-image .img-attribution a, .section-2 .portrait-image .img-attribution { color: white;}

.main-image .img-attribution,
.aboutus .img-attribution,
.product-slider .img-attribution,
.page-image .img-attribution
{ position: absolute; top: 5%; left: 15px; color: white;}

.aboutus .img-attribution a, .page-image .img-attribution a { color: white;}
.main-image .img-attribution a, .product-slider .img-attribution a { color: rgb(255, 168, 168);}
.section-2 .section-column:nth-child(2) .img-attribution {bottom: 15%;}

.pattern { background: url(../images/bg_pattern_1.png) repeat; height: 5rem; margin-bottom: 5rem;}

.aboutus { background-image: url(../images/42287.jpg); background-position: top center; background-repeat: no-repeat; background-size: cover; padding: 16rem 3rem 0 0rem; display: flex; justify-content: flex-end; max-width: 1500px; margin: auto; }
.aboutus .content-wrap { display: flex; max-width: 1000px;  }
.aboutus .content-wrap .heading { background-color: var(--colorPrimary); color: #fff; font-size: 3rem; padding: 3rem; font-family: var(--fontHeading); font-weight: bold; min-width: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.aboutus .content-wrap .content { background-color: #fff; padding: 3rem; line-height: 26px;}

.product-slider { background-color: #fff2f3; padding: 6rem 0; margin: 5rem 0;}
.product-slider .swiper-slide { background: none;}
.product-slider .container { overflow: hidden;}
.product-slider h2 { font-size: 4rem; color: var(--colorPrimary); text-align: left; font-family: var(--fontHeading); margin-bottom: 6rem; text-align: center;}
.product-slider h2 span { font-size: 20px; color: black; font-family: "Lato"; display: block;}

.swiper-container-image img { width: 100%; height: auto;}

.review-wrapper { background-color: #f9f9f9; padding: 6rem 0;}
.review-wrapper h2 { font-size: 4rem; color: var(--colorPrimary); text-align: left; font-family: var(--fontHeading); margin-bottom: 6rem; text-align: center;}
.review-wrapper h2 span { font-size: 20px; color: black; font-family: "Lato"; display: block;}

.review-wrapper .container { overflow: hidden;}
.review-wrapper .swiper-container-review { position: relative;}
.testimonial-section { color: black; padding: 0 10rem; background: none;}
.testimonial-section img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 50%;}
.testimonial-section h4 { margin: 2rem 0 4rem;}
.testimonial-section p { font-size: 18px; line-height: 26px; opacity: 0.7;}

.footer { padding: 8rem 0 4rem; text-align: left;}
.footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.footer h3 { font-size: 23px; color: var(--colorPrimary); margin-bottom: 4rem; font-family: var(--fontHeading);}
.footer svg { width: 25px; height: 25px;}
.footer ul { list-style: none; line-height: 3rem;}
.footer ul li a { color: #4d4d4d; text-decoration: none; display: flex; align-items: center; }
.footer ul li a:hover { color: #F15D16;}
.footer .social { display: flex; gap: 10px; text-decoration: none; margin-top: 4rem;}
.footer .social a { text-decoration: none;}
.footer .number { color: var(--colorPrimary); font-family: var(--fontHeading); font-size: 2rem; font-weight: bold;}
.footer .d-flex { gap: 10px; margin-bottom: 2rem;}
.footer .column:last-child a { color: var(--bodyText);}


.img-responsive { width: 100%; height: auto;}
.text-left { text-align: left;}
.text-center { text-align: center;}
.text-right { text-align: right;}
/* INNER PAGES */

.grid-two-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;}

.page-banner {background-position: center center; background-repeat: no-repeat;  background-size: cover; height: 41.0rem; position: relative;}
.page-banner.studio { background-image: url(../images/42287.jpg);}
.page-banner::before { background-color: #00000090; content: ""; display: block; width: 100%; height: 100%; position: absolute;}
.page-banner .container {padding-top: 15rem; position: relative; color: white; max-width: 800px; text-align: center;}
.page-banner h3 { font-size: 5rem; font-family: var(--fontHeading); margin-bottom: 3rem;}
.page-banner p {font-size: 18px; line-height: 28px;} 

.page-banner .img-attribution { position: absolute; bottom: 20px; color: white; left: 10px;}
.page-banner .img-attribution a { color: white;}

.page-body p { line-height: 30px;}
.page-title { font-size: 5rem; color: var(--colorPrimary); font-family: var(--fontHeading); margin-bottom: 3rem;}
.sub-title {font-size: 3.4rem; color: var(--colorPrimary); font-family: var(--fontHeading); margin-bottom: 1rem;}

.sub-heading-text { font-size: 2.5rem; font-style: italic; line-height: 3.5rem; opacity: 0.8}

.our_team_card_wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.our_team_card {}
.our_team_card img.card-img {object-fit: cover; width: 16rem; height: 16rem; border-radius: 50%; margin-bottom: 4rem;}
.our_team_card h4 { font-size: 2.5rem; color: var(--bodyText); font-family: var(--fontHeading); margin-bottom: 0px;}
.our_team_card h4 + span { font-size: 18px; font-style: italic; opacity: 0.7;}
.our_team_card .social svg { width: 20px; height: 20px; fill: #fff !important; }
.our_team_card .social { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 2rem; }
.our_team_card .social a { display: inline-flex; align-items: center; justify-content: center; background-color: var(--colorPrimary); color: white; width: 30px; height: 30px; border-radius: 50%;}
.our_team_card .social a:hover { background-color: var(--colorSecondary);}

ul.bullet-list { list-style: none; line-height: 28px;} 
ul.bullet-list li { display: flex; gap: 10px; text-align: left;}
ul.bullet-list li span.material-symbols-outlined {margin-top: 5px;}

.scope-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;}
.scope-card { background: #f9f9f9; box-shadow: 0 0 5px #c9c9c9; border-radius: 5px; border-left: solid var(--colorSecondary); padding: 2rem; margin-top: 2rem;}
.scope-card h4 { font-size: clamp(18px, 2rem, 2rem); color: var(--colorSecondary); margin-bottom: 1rem;}
.scope-card h4 + p { line-height: 24px;}


.bg-overlay {
    background: #2d1b19ed;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    opacity: 0;
    transition: all 0.3s ease;
    visibility: hidden;
    z-index: 3;
}
body.menu-active .bg-overlay { opacity: 1; visibility: visible;}


.three-column-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem;}
.contact-card { padding: 20px; border: solid 1px #f0efef; display: flex; gap: 2rem; text-align: left;}
.contact-card h4 { font-size: 2rem; margin-bottom: 1.5rem;}
.contact-card .icon { background-color: var(--colorSecondary); width: 5rem; height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
.contact-card:first-child { background-color: var(--colorPrimary); color: white;}
.contact-card a { color: var(--colorPrimary);}
.contact-card p { font-size: 16px; line-height: 24px;}

.contact-form .input-text { padding: 15px 25px 15px 25px; font-family: "Lato"; width: 100%; border: solid 1px #ededed; background-color: #fafafa; font-size: 16px;}
.contact-form .form-group { flex-grow: 1; margin-bottom: 20px;}
.contact-form .d-flex { gap: 20px;}
.contact-form .input-text::placeholder { font-size: 14px;}
.contact-form .page-title { font-size: 3rem; text-align: left;}
.contact-form .btn-primary { border: none; width: 100%;}


.client-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4rem;}
.client-logos img { width: 100%; height: auto;}

.our_services_wrapper { background-color: #f9f5f2;}

.our_services_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;}
.our_services_grid .service-box { background: white; border-radius: 4rem; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 4rem 3rem; box-shadow: 0 0 5px 4px #e7e7e7;}
.our_services_grid .service-box .icon-box { margin-bottom: 3rem;   background-image: -moz-linear-gradient( -90deg, rgb(179,39,170) 0%, rgb(243,77,97) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(179,39,170) 0%, rgb(243,77,97) 100%);
    background-image: -ms-linear-gradient( -90deg, rgb(179,39,170) 0%, rgb(243,77,97) 100%); width: 12rem; height: 12rem; border-radius: 12rem; display: flex; align-items: center; justify-content: center;}
    .our_services_grid .service-box .icon-box img { max-width: 5rem; width: 100%;}
.our_services_grid .service-box h3 { font-family: var(--fontHeading); font-size: 3.4rem; text-transform: uppercase; font-weight: 300; margin-bottom: 2rem;}
.our_services_grid .service-box .btn-primary { border-radius: 4rem; text-transform: uppercase;}
.our_services_grid .service-box p { line-height: 24px; margin-bottom: 4rem;}
.our_services_grid .service-box:last-child {   grid-column: span 3; }

.step-to-start { background-color: #e9e9e9; text-align: center;}
.step-to-start h2 { text-align: center; margin-bottom: 0;}
.step-to-start h2 + p { font-size: 18px; margin: 0 0 2rem;}

.step-to-start .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; margin-top: 5rem;}
.step-to-start .steps-grid .steps-block { background-color: white; padding: 2.5rem; border: dashed 1px var(--colorSecondary);}
.step-to-start .steps-grid .steps-block .number { border: solid 2px var(--colorSecondary); margin: auto; width: 4rem; height: 4rem; border-radius: 4rem; display: flex; align-items: center; justify-content: center;}
.step-to-start .steps-grid .steps-block h4 { font-size: 20px; margin: 1rem 0;}

.creative-partner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;}
.creative-partner .left-column { text-align: left;}
.creative-partner h2 { margin: 0;}
.creative-partner ul { list-style: none; font-size: 18px; line-height: 24px;}
.creative-partner ul li { display: flex; gap: 10px; margin-top: 3rem;}
.creative-partner ul li span { color: var(--colorSecondary);}
.creative-partner .img-responsive { border-radius: 5rem;}

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem;}
.gallery-grid img { width: 100%; height: auto;}