:root {
    --red: #EB3F43;
    --white: #ffffff;
    --white-light: #F5F5F5;
    --white-light-1: #969696;
    --gray: #6A6A6A;
    --gray-1: #262529;
    --gray-2: #5E5E5E;
    --gray-3: #606060;
    --color-1: #1C1C1A;
    --color-2: #0072C5;
    --color-3: #023859;
    --color-4: #D33638;
    --color-5: #050d19;
    --color-6: #ffcc04;
	--color-7: #68b457;
    --black: #000000;
}

@font-face {
    font-family: "Ogilvy Sans";
    src: url(../fonts/OgilvySansWeb-Regular.woff2) format("woff2"), 
         url(../fonts/OgilvySansWeb-Regular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Ogilvy Sans";
    src: url(../fonts/OgilvySansWeb-Bold.woff2) format("woff2"), 
         url(../fonts/OgilvySansWeb-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "Ogilvy Serif";
    src: url(../fonts/OgilvySerifWeb-Regular.woff2) format("woff2"), 
         url(../fonts/OgilvySerifWeb-Regular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "Ogilvy Serif";
    src: url(../fonts/OgilvySerifWeb-Bold.woff2) format("woff2"), 
         url(../fonts/OgilvySerifWeb-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
}
html {
    font-family: "Ogilvy Sans";
    line-height: normal;
    -webkit-text-size-adjust: 100%;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Ogilvy Sans";
    font-weight: normal;
    line-height: normal;
    color: var(--gray);
    overflow-x: hidden;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
img {
  max-width: 100%;
  vertical-align: top;
  border: none;
}
h1, h2, h3, h4, h5, h6, p{
    margin: 0px;
    padding: 0px;
}
ul, ol, li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.clearfix::after, .container:after, .container-1260:after {
    content: "";
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
}

.container, .container-1520, .container-1440, .container-1260, .container-950, .container-870, .container-1160{
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.container{ max-width: 1560px;}
.container-1520{ max-width: 1520px;}
.container-1440{ max-width: 1480px;}
.container-1260{ max-width: 1300px;}
.container-1160{ max-width: 1200px;}
.container-950{ max-width: 990px;}
.container-870{ max-width: 910px;}

.form-control::-webkit-input-placeholder { color: #5E5E5E;}
.form-control:-moz-placeholder { color: #5E5E5E; opacity:  1;}
.form-control::-moz-placeholder { color: #5E5E5E; opacity:  1; }
.form-control:-ms-input-placeholder { color: #5E5E5E; opacity:  1;}
.form-control::-ms-input-placeholder { color: #5E5E5E; opacity:  1;}
.form-control::placeholder { color: #5E5E5E; opacity:  1;}

.h2{ font-family: "Ogilvy Sans"; font-weight: 700; font-size: 22px; text-align: center; letter-spacing: 0.3em; text-transform: uppercase; color: #EB3F43; margin-bottom: 25px;}
.h3{ font-family: "Ogilvy Serif"; font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: -0.03em; color: #EB3F43; text-align: center; margin-bottom: 25px;}
.h4{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 52px; line-height: 57px; color: #FFFFFF; margin-bottom: 20px;}
.h5{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 25px; line-height: 25px; letter-spacing: -0.01em; color: #FFFFFF;}
.h6{ font-family: "Ogilvy Sans"; font-weight: 700; font-size: 22px; line-height: normal; text-align: center; letter-spacing: 0.3em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 20px;}
.par{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 20px; line-height: 28px; text-align: center; color: #6A6A6A;}
.par:not(:last-child){ margin-bottom: 25px;}
.d-none{ display: none !important;}
@media (min-width: 768px){
    .d-md-none{ display: none !important;}
}
.header{ padding: 20px 0; transition: .2s ease-in-out;}
.headerPos{ position: fixed; top: 0; left: 0; right: 0; z-index: 2;}
.logo{ max-width: 115px;}
.logo-red{ display: none;}
.logo-white, .logo-red{ transition: .5s ease-in-out;}
.headerFlex{ display: flex; align-items: center; justify-content: space-between;}
.hamburgerMenu{ width: 24px; height: 24px; position: relative; background: transparent; border: none; padding: 2px; transition: .5s ease-in-out;}
.hamburgerMenu span{ width: 20px; height: 2px; background: #ffffff; position: absolute; left: 2px; transition: .5s ease-in-out;}
.hamburgerMenu span:first-child{ top: 2px;}
.hamburgerMenu span:last-child{ bottom: 2px;}
.hamburgerMenu span:nth-child(2){ top: 50%; transform: translateY(-50%);}

.menu{ position: fixed; right: 100%; top: 67px; bottom: 0; background: #ffffff; overflow-y: auto; padding: 20px;  transition: .5s ease-in-out; width: 100%;}
.menu li{ font-weight: 700; font-size: 14px;  letter-spacing: 0.1em; text-transform: uppercase; color: #000000;}
.menu li a{ text-decoration: none; color: #000000; line-height: 60px; display: block;}

.menu-open{ overflow: hidden;}
.menu-open .header, .headerScroll{ background: #ffffff;}
.menu-open .logo-white, .headerScroll .logo-white{ display: none;}
.menu-open .logo-red, .headerScroll .logo-red{ display: block;}
.menu-open .menu{ right: 0;}
.menu-open .hamburgerMenu span, .headerScroll .hamburgerMenu span{ background: #000000; }
.menu-open .hamburgerMenu span:first-child{ transform: rotate(45deg); top: 10px;}
.menu-open .hamburgerMenu span:last-child{ transform: rotate(-45deg); bottom: 12px;}
.menu-open .hamburgerMenu span:nth-child(2){ left: -20px; opacity: 0;}
.menu li.current a, .menu li.active a{ color: #EB3F43;}


.homeBanner { position: relative; }
.homeBanner-Img img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center;}
.homeBanner-textSection { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: center; text-align: center;}
.bannerHeading{ font-family: "Ogilvy Serif"; font-weight: 700; font-size: 40px; line-height: 44px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; margin-bottom: 25px;}
.bannerLogo img { max-width: 230px; }
.homeBanner-textSection p{ font-family: "Ogilvy Serif"; font-weight: normal; font-style: italic; font-size: 19px; line-height: 28px; color: #F5F5F5; margin-bottom: 25px;}
.btn-join{ font-family: "Ogilvy Sans"; font-weight: 700; font-size: 18px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; display: inline-block; border: 1px solid #FFFFFF; padding: 20px;}


.whoWeare{ padding: 60px 0;}



.whatWeDo{ background: #EB3F43; padding: 60px 0;}
.whatWeDo h2, .whatWeDo .par{ color: #ffffff;}
.whatFlex{ margin: 0 -20px; display: flex; flex-wrap: wrap; text-align: center;}
.column{ flex: 0 0 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; }
.whatWeDo .column:not(:last-child){ margin-bottom: 60px;}
.heading1{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 52px; line-height: 60px; color: #FFFFFF; margin-bottom: 20px; }
.whatWeDo p{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 20px; line-height: 25px; color: #FFEEEE;}

.mb-60{ margin-bottom: 60px;}
.mb-40{ margin-bottom: 40px;}

.howWeDo{ background: #262529; padding: 60px 0;}
.howWeDo h2, .howWeDo .par{ color: #ffffff;}
.howWeDo .column:not(:last-child){ margin-bottom: 60px;}
.howWeDo .whatFlex p{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 20px; line-height: 25px; color: #969696;}

.ourWork{ background: #ffffff; padding: 60px 0;}
/* .workDiv{  } */
.workDiv > div{ padding: 24px; margin-bottom: 80px;}
.workDiv p{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 20px; line-height: 25px; color: #ffffff; margin-bottom: 20px;}
.workDiv p.gray{ color: #969696;}
.workDiv a{ font-family: "Ogilvy Sans"; font-weight: 700; font-size: 18px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; display: inline-block; text-decoration: none;}
.workDiv--img{ padding: 15px 0 0; margin-bottom: -100px;}
.workDiv--img img{ width: 100%;}


.color1{ background-color: var(--color-1);}
.color2{ background-color: var(--color-2);}
.color3{ background-color: var(--color-3);}
.color4{ background-color: var(--color-4);}
.color5{ background-color: var(--color-5);}
.color6{ background-color: var(--color-6);}
.color7{ background-color: var(--color-7);}

.howWeDoIt{ background: #262529; padding: 60px 0;}
.howWeDoIt .h2{ color: #ffffff;}
.howWeDoIt .par{ color: #969696;}
.teamFlex{ display: flex; flex-wrap: wrap; margin-left: -20px; margin-right: -20px;}
.teamList{ flex: 0 0 50%; max-width: 50%; padding-left: 20px; padding-right: 20px; margin-bottom: 30px; /*text-align: center;*/ }
.teamList > div, .teamList > a{ display: inline-block; text-align: left; text-decoration: none;}
.teamList img{ margin-bottom: 20px; max-width: 100px;}
.teamList .h5{ margin-bottom: 8px;}
.teamList p{ font-family: "Ogilvy Sans"; font-weight: normal; font-size: 12px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: #A5A5A5;}

.craftSection{ padding: 60px 0; position: relative;}
.craftSection .h5{  font-family: "Ogilvy Serif"; font-weight: bold; font-size: 40px; line-height: 44px; text-align: center; letter-spacing: -0.03em; color: #EB3F43; margin-bottom: 25px;}
.craftSection p{ font-family: "Ogilvy Serif"; font-weight: normal; font-style: italic; font-size: 19px; line-height: 28px; text-align: center; color: #6A6A6A;}
/* .craftSection::after{ content: ''; position: absolute; width: 76px; height: 76px; left: 50%; bottom: -38px; background: #FFFFFF; transform: rotate(45deg) translateX(-50%); display: block;} */

.joinSection::before{ content: ''; position: absolute; width: 76px; height: 76px; left: 50%; top: -38px; background: #FFFFFF; transform: rotate(45deg) translateX(-50%); display: block;}
.joinSection{ background: #262529; padding: 60px 0; position: relative;}
.joinForm{ background: #ffffff; padding: 40px 20px; display: flex; flex-wrap: wrap;}
.formSection{ margin-bottom: 60px; width: 100%;}
.formGroup:not(:last-child){ margin-bottom: 40px;}
.form-control{ height: 80px; width: 100%; padding: 20px; font-family: "Ogilvy Sans"; font-weight: normal; font-size: 22px; line-height: 35px; letter-spacing: -0.01em; color: #5E5E5E; }
.submit-btn{ height: 100px; width: 100%; border: none; background: #000000; text-align: center; font-family: "Ogilvy Sans";  font-weight: 700; font-size: 18px; line-height: 60px; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; cursor: pointer;}
.reachUsSection{ text-align: center;}
.reach-title{ font-weight: 700; font-size: 22px; line-height: 60px; letter-spacing: 0.3em; text-transform: uppercase; color: #262529; margin-bottom: 30px;}
.reachUsSection p{ font-size: 20px; line-height: 35px; letter-spacing: -0.01em; color: #000000;}
.reachUsSection p:not(:last-child){ margin-bottom: 25px;}
.reachUsSection p span{ font-size: 22px; line-height: 35px; letter-spacing: -0.01em; color: #5E5E5E; display: block; margin-bottom: 12px;}
.reachUsSection p a{ font-size: 22px; line-height: 42px; letter-spacing: -0.01em; color: #252525; text-decoration: none;}
.br-none{ display: none;}
@media (min-width: 576px){
    .br-sm-none{ display: block;}
}
@media (min-width: 768px){
    .logo{ max-width: 180px;}
    .homeBanner-textSection{ padding-top: 100px;}
    .howWeDo .whatFlex .column{ flex: 0 0 50%; max-width: 50%; }
    .howWeDo .whatFlex .column:last-child{ margin-bottom: 0;}
    .howWeDo .whatFlex .column:nth-last-child(2){ margin-bottom: 0;}
    .teamList{ flex: 0 0 33.3333%; max-width: 33.3333%; }
    .teamList img{ max-width: 120px; }
    .teamList:last-child, .teamList:nth-last-child(2), .teamList:nth-last-child(3){ margin-bottom: 0;}
}
@media (min-width: 991px){
    .whatFlex .column{ flex: 0 0 33.3333%; max-width: 33.3333%; }
    .ourWork_list{ display: flex; flex-wrap: wrap; margin: 0 -20px -60px;}
    .workDiv{ flex: 0 0 50%; max-width: 50%; padding: 0 20px; display: flex; margin-bottom: 60px; }
    /* .workDiv:last-child, .workDiv:nth-last-child(2){ margin-bottom: 0;} */
    .workDiv--img{ margin-bottom: -120px;}
    
}
@media (min-width: 1200px){
    .logo{ max-width: 237px;}
    .hamburgerMenu{ display: none;}
    .menu{ display: block; position: relative; background: transparent; right: inherit; top: inherit; width: inherit; padding: 0; overflow: inherit;}
    .menu li{ display: inline-block; margin: 0 15px;}
    .menu li:last-child{ margin-right: 0;}
    .menu li:first-child{ margin-left: 0;}
    .menu li a{ color: #ffffff;}
    .formSection, .reachUsSection{ flex: 0 0 50%; max-width: 50%;}
    .reachUsSection{ text-align: left;}
    .headerScroll .menu li a{ color: #747474; line-height: normal; position: relative;}
    .headerScroll .menu li.current a,
    .headerScroll .menu li.active a{ color: #EB3F43;}
    .headerScroll .menu li.current a::before,
    .headerScroll .menu li.active a::before
    { content: ''; display: block; background: #EB3F43; width: 50%; height: 2px; position: absolute; bottom: -10px; left: 0;}
    .bannerHeading{ font-size: 100px; line-height: 112px; letter-spacing: -0.03em;}
    .homeBanner-textSection p{ font-size: 38px; line-height: 48px; color: #F5F5F5; margin:0 auto 40px; max-width: 900px;}
    .whoWeare, .whatWeDo, .howWeDo, .howWeDoIt, .craftSection, .ourWork, .joinSection{ padding: 140px 0;}
    .h2{ font-size: 45px; line-height: 45px; margin-bottom: 60px;}
    .h3{ font-size: 122px; line-height: 100px; letter-spacing: -0.04em; margin-bottom: 60px;}
    .h4{ font-size: 62px; line-height: 62px;}
    .h5{ font-size: 42px; line-height: 42px;}
    .h6{ font-size: 60px; line-height: 60px; margin-bottom: 80px;}
    .par{ font-size: 32px; line-height: 45px;}
    .whatWeDo p{ font-size: 22px; line-height: 25px; }
    .whatWeDo p.par{ font-size: 32px; line-height: 45px;}
    .heading1{ margin-bottom: 25px; font-size: 70px; line-height: 92px;}
    .howWeDo p.par{ font-size: 38px; line-height: 48px; color: #F5F5F5;}
    .howWeDo .whatFlex .column{ flex: 0 0 33.3333%; max-width: 33.3333%;}
    .howWeDo .whatFlex .column:nth-last-child(3){ margin-bottom: 0;}
    .howWeDo .mb-60{ margin-bottom: 90px;}
    .howWeDo .heading1{ font-size: 82px; line-height: 92px;}
    .howWeDo .whatFlex p{ font-size: 27px; line-height: 31px;}
    .ourWork_list { margin-bottom: -100px; }
    .workDiv{ padding: 0 70px; margin-bottom: 100px; }
    /* .workDiv:last-child, .workDiv:nth-last-child(2){ margin-bottom: 0;} */
    .workDiv > div{ padding: 60px; margin-bottom: 100px;}
    .workDiv p{ font-size: 18px; line-height: 27px;}
    .workDiv--img{ margin-bottom: -180px;}
    .ourWork_height{ min-height: 260px;}
    .teamList{  flex: 0 0 25%; max-width: 25%;}
    .teamList img{ max-width: 200px; }
    .teamList p{ font-size: 18px; line-height: normal;}
    .howWeDoIt .h2{ font-size: 60px; line-height: 60px; margin-bottom: 30px;}
    .howWeDoIt .mb-60, .teamList{ margin-bottom: 90px;}
    .teamList:last-child, .teamList:nth-last-child(2), .teamList:nth-last-child(3), .teamList:nth-last-child(4){ margin-bottom: 0;}
    .craftSection .h5{ font-size: 122px; line-height: 142px; margin-bottom: 40px;}
    .craftSection p{ font-size: 38px; line-height: 48px; max-width: 880px; margin: 0 auto;}
    .joinForm{ padding: 90px;}
    .formSection{ padding-right: 80px; border-right: 1px solid #000000; margin-bottom: 0;}
    .reachUsSection{ padding-left: 80px;}
    .reach-title{ font-size: 60px; line-height: 60px; margin-bottom: 80px;}
    .reachUsSection p{ font-size: 22px; line-height: 35px; }
    .reachUsSection p:not(:last-child){ margin-bottom: 70px;}
    .reachUsSection p span{font-size: 22px; line-height: 35px;}
    .reachUsSection p a{ font-size: 42px; line-height: 42px;}
}

@media (min-width: 1400px){
    .bannerHeading{ font-size: 115px;}
}



/* House Of Classics */
.hoc_banner{height: 100vh;}
.hoc_banner .h2{
    display: block; font-family: Ogilvy Sans; font-size: 25px; font-weight: 700; 
    text-align: center; letter-spacing: 0.3em; text-transform: uppercase; color: var(--white); margin-bottom: 26px;
}
.hoc_banner .bannerHeading{ font-size: 40px; line-height: 44px; font-weight: normal;}

.inverseMode{background: #262529;}
.inverseMode .h2{color: #fff;}
.inverseMode .par{font-family: Ogilvy Serif; color: #EB3F43; }

.approch { background: #262529; padding: 60px 0; }
.approch .h2{color: #fff;}
.approchHeading{font-family: Ogilvy Serif; font-style: normal; font-weight: normal; font-size: 40px; 
    line-height: 44px; text-align: center; color: #EB3F43; margin-bottom: 40px;}
.approchHeading span{display: block; font-family: Ogilvy Sans; font-size: 45px; line-height: 60px; font-weight: 700; 
    text-align: center; letter-spacing: 0.3em; text-transform: uppercase; color: var(--white); margin-bottom: 26px;}
.disclaimer_para{font-family: Ogilvy Serif; font-style: italic; font-weight: normal; font-size: 19px; line-height: 28px; text-align: center; color: #FFFFFF; margin-bottom: 40px;}

.disclaimer_txt{font-family: Ogilvy Serif; font-style: italic; font-weight: normal; font-size: 19px; line-height: 28px; text-align: center; color: #606060; margin-bottom: 40px;}

.highlights{background-color: #fff;}
.highlights .h2{color: #262529;}
.highlights .approchHeading span{color: #262529; }

.approch .slick-dots{bottom: -55px; left: 0; right: 0;}



.mb-minus-280{padding-bottom: 0 !important; margin-bottom: -100px;}
.pt-280{padding-top: 200px !important;}

.mb-minus-200{padding-bottom: 0 !important; margin-bottom: -100px;}
.pt-230{padding-top: 230px !important;}

@media (min-width: 1200px){
    .hoc_banner .bannerHeading{font-size: 94px; line-height: 100px;}
    .approch{padding: 140px 0; }
    .highlights{ padding: 140px 0; }
    .approchHeading{font-size: 94px; line-height: 100px; margin-bottom: 90px;}
    .disclaimer_para{font-size: 38px; line-height: 48px; margin-bottom: 60px;}
    .disclaimer_txt{font-size: 38px; line-height: 48px;}
    .inverseMode .par{font-size: 64px; line-height: 78px;}

    .mb-minus-280{padding-bottom: 0 !important; margin-bottom: -235px;}
    .pt-280{padding-top: 280px !important;}
    .mb-minus-200{padding-bottom: 0 !important; margin-bottom: -200px;}
    .pt-230{padding-top: 230px !important;}
}

@media (max-width: 992px){
    .approch .homeBanner-Img img{width: auto; max-width: 100%; margin: 0 auto; display: block;}
}



.designSlider1, .designSlider2 { padding: 0 70px; }
.slick-arrow{ width: 56px; height: 56px; border-radius: 100%; }
.slick-arrow:before{ display: none; }
.slick-arrow.slick-prev{background: url(../images/SliderArw-Left.svg); background-size: 100%; left: 0; }
.slick-arrow.slick-next{background: url(../images/SliderArw-Right.svg); background-size: 100%; right: 0;}
.slick-disabled{opacity: 0.3;}
@media (max-width: 767px){
    .designSlider1, .designSlider2 { padding: 0; }
}

.err{
    color: red;
    font-size: 12px;
}
.success-message{
    color: green;
    padding-top: 1rem;
    font-weight: 600;
}
.form-err{
    color: red;
    font-size: 12px;
    padding-top: 1rem;
}