@charset "utf-8"; :root { /* COLOR VARIABLES */
--white: #fff; --gray-thin: #f7f7f7; --gray-lite: #d9d9d9; --gray-mild: #9A9A9A; --gray-dark: #666; --pink: #f52379; --blue: #0aa7f9; --black: #1c212e; /* FONT FAMILY VARIABLES */
/* TRANSITION SPEED */
--all-fast: all 0.3s; --all-medium: all 0.5s; --all-slow: all 0.8s; /* FONT SIZE VARIABLE */
--font-sm: 14px; --font-md: 16px; --font-lg: 18px; --font-xl: 20px; }


/* ========================== COMMON CSS ========================== */

html { scroll-behavior: smooth; }

*,
ul,
ol,
li,
a { margin: 0; padding: 0; list-style-type: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }

input,
input:focus,
textarea,
textarea:focus,
.form-control,
.form-control:focus { box-shadow: none; outline: none; border-bottom-color: var(--blue); width: 100%; background: var(--blue-thin); color: var(--blue-mild); }

*,
a,
a:active,
a:focus,
a:hover,
button:focus,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { text-decoration: none; -webkit-box-shadow: none; box-shadow: none; outline: 0; }

button { background: transparent; }
.btn-secondary.focus,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show>.btn-secondary.dropdown-toggle:focus { box-shadow: none; }

a { color: var(--blue-mild); transition: var(--all-fast); }

a:hover { color: var(--blue-dark); }

::-moz-selection { color: var(--blue-mild); background: var(--red); }

::selection { color: var(--blue-mild); background: var(--red); }

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

p,
a,
ul,
li { margin: 0; padding: 0; }


/* Firefox */

input[type=number] { -moz-appearance: textfield; }

body { font-size: 14px; color: #232425; font-weight: 400; width: 100%; position: relative; font-family: 'Oswald', sans-serif; }

body.no-scroll { overflow: hidden; }

body p { font-size: 18px; line-height: 1.5; margin-bottom: 16px; font-weight: 200; letter-spacing: 1px; }

[type=reset],
[type=submit],
button { -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; border: none; cursor: pointer; }

footer,
section { width: 100%; position: relative; overflow: hidden; }
.smooth-scroll { position: relative; }
.border-link { color: var(--blue); }
.border-link:hover { color: var(--pink); }


/*------------------- loader ----------------------*/

.loader { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 111111; transition: opacity 1s cubic-bezier(0.2, 0.6, 0.35, 1) 1.8s, visibility 1s cubic-bezier(0.2, 0.6, 0.35, 1) 1.8s, transform 1s cubic-bezier(0.5, 0.05, 0.7, 0.2) 1.2s; }
.loader__bckg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--white); transform-origin: center top; transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1) 1.2s; }
.loader__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.6s cubic-bezier(0.5, 0.05, 0.7, 0.2) 1s, opacity 0.8s cubic-bezier(0.2, 0.6, 0.35, 1) 1.2s; }
.loader-logo { display: block; width: 100px; height: auto; }
.loading .loader { opacity: 0; visibility: hidden; transform: translateY(-100%); }
.loading .loader__bckg { transform: scaleY(0.0001); transition-delay: 1.2s; }
.loading .loader__logo { opacity: 0; transform: translate(-50%, -50%) translateY(-60px); }
.loader__logo { background-size: auto 100px; background-repeat: no-repeat; background-color: transparent; background-image: url("../images/loder-logo-icon.png"); background-position: center bottom; }
.loader__logo img { visibility: hidden; }
.loader__logo span { content: ''; width: 100px; height: 100px; position: absolute; left: 0; bottom: 0; background-size: auto 100px; background-repeat: no-repeat; background-color: transparent; background-image: url("../images/loder-logo-icon-blue.png"); background-position: center bottom; z-index: 10; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0, 0.01, 0.01, 0.98); transition-timing-function: cubic-bezier(0, 0.01, 0.01, 0.98); max-height: 0; -webkit-transform-origin: center; transform-origin: bottom; display: block; }


/*.container { max-width: 1290px; }*/

.form-control { border: none; border-bottom: 1px dashed var(--gray-mild); border-radius: 0; padding: 15px; height: auto; }
.form-control:focus { border-bottom-color: var(--blue); }


/* IMG BOX */

.img-box { display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.3s; }
.img-box img { width: 100%; height: 100%; object-fit: contain; }
.typed-cursor { display: none; }
.smooth-scroll { will-change: transform !important; }


/*----------------- header css ----------------------*/


.container { width: 1500px; max-width: 1500px; margin: auto; }
.header .container { width: 100%; max-width: 100%; padding: 0px 60px; }
.header { padding: 15px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1111; transition: var(--all-fast); }
.logo img { width: 100%; }
.header .img-box { transition: all 0.3s; }
.header.sticky .img-box { width: 60px; margin-left: auto; }
.header { padding: 20px 0px; }
.header .logo { width: 200px; transition: var(--all-fast); margin-right: auto; }
.header .row { display: flex; justify-content: space-between; align-items: center; }
.social-icon { width: auto; margin-left: auto; }
.social-icon li { display: inline-block; margin-left: 15px; }
.social-icon li a { display: block; }
.social-icon li a img { max-width: 30px; transition: all 0.4s; }
.social-icon li:hover a img { opacity: 0.7; }

#menu { position: inherit; height: auto; width: auto; }
.stellarnav { margin: auto; }


/*------------ menu css ------------------*/

#menu li { background: transparent; margin: 0px 40px; }
#menu li a { color: #fff; font-size: 35px; font-weight: 300; background: transparent; opacity: 0.8; position: relative; padding: 10px 0px; }
#menu li.active a { padding: 10px 0px; }
#menu li:hover { background: transparent; }
#menu li a::before { content: ""; width: 100%; height: 4px; opacity: 1; margin-left: auto; position: absolute; right: 0; bottom: 0; background: #fff; transition: 0.5s transform ease; transform: scale3d(0, 1, 1); transform-origin: 0 50%; }
.stellarnav.dark li.active a,
.stellarnav.dark li:hover a { color: #1269AE; }
#menu li a:hover::before { transform: scale3d(1, 1, 1); }
#menu li a::before,
#menu li.active a::before { background: #f1482c; transform-origin: 100% 50%; }
#menu li.active { background: transparent; }
#menu li:hover { color: #fff; }
#menu li.active a::before { transform: scale3d(1, 1, 1); }


/*------------ mobile menu css ----------------*/


/*======================= mobile css ===============*/

.stellarnav.mobile.dark ul { background: #c8c8c8; }
.stellarnav .menu-toggle span.bars span { display: block; width: 22px; height: 2px; transition: all 0.6s; }
.stellarnav .menu-toggle { padding: 4px 8px; }
.stellarnav.dark.right.mobile.active .menu-toggle span.bars span:nth-child(1) { transform: rotate(45deg) translate(5px, 9px); }
.stellarnav.dark.right.mobile.active .menu-toggle span.bars span:nth-child(2) { opacity: 0; }
.stellarnav.dark.right.mobile.active .menu-toggle span.bars span:nth-child(3) { transform: rotate(-45deg) translate(2px, -6px); }


/*=================== banner section ====================*/

.banner-img { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.overlay-color { position: absolute; top: 0px; right: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); }
.banner-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-text { position: absolute; bottom: 20px; left: 15%; width: 80%; text-align: left; overflow: hidden; z-index: 9; }
.banner-text h1 { font-size: 100px; font-weight: 700; color: #fff; position: relative; width: auto; text-align: left; display: inline-block; }
.banner-text h1:after { content: ""; position: absolute; left: 100%; bottom: 20px; width: 130%; height: 4px; background: #a84836; margin: 0px 0px 0px 30px; }
.scroll-text { position: absolute; right: 30px; bottom: 30px; color: #fff; font-size: 30px; font-weight: 300; transform: rotate(-90deg); opacity: 0.7; z-index: 9; }
.video{ width: 100%; height: 100% }
video { width: 100%!important; height: 100%!important; object-fit: cover; }
.mute-bt{ border:1px solid #fff; width:50px; height:50px; border-radius:50%; padding:5px; background-image: url("../images/mute.svg"); background-position: center center; background-repeat: no-repeat; background-size: 15px; position: absolute!important; bottom:120px;right: 35px;z-index:99; cursor:pointer;}
.mute-bt.stop{background-image: url("../images/unmute.svg"); background-size: 15px; background-position: center center; background-repeat: no-repeat;}



/*================ about section =====================*/

.section-title { font-size: 100px; font-weight: 600; color: #fff; margin-bottom: 40px; margin-top: 100px; }
.about-section { background: #c8c8c8; }
.about-text { text-align: left; }
.about-text p { font-size: 35px; color: #373737; margin-bottom: 25px; }
.about-text p span { color: #f1482c; font-weight: 500; }



/*=============== work section ==================*/

.work-section { background: #1e1e1e; padding-bottom: 50px; position: relative; }
.work-section .section-title { margin-top: 150px; }
.work-section .container { width: 100%; max-width: 100%; padding: 0px 60px; }
/* .work-section .col-12 { padding: 0; } */
.work-text { display: flex; justify-content: space-between; display: none; }
.work-text a { font-size: 33px; color: #fff; font-weight: 600; text-align: left; }
.work-logo { text-align: right; }
.work-logo li { display: inline-block; margin: 0px 5px; }
.work-logo li a { display: block; }
.work-logo li a img { width: 50px; }
.work-div { display: block; transition: all 0.3s;border:1px solid #1e1e1e }
.img-div { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.7; }
.img-div img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.overlay { position: absolute; bottom: 0; right: 0; left: 100%; height: 100%; width: 0; height: 100%; background: rgba(234, 96, 69, 0.7); transition: all 0.5s; display: flex; justify-content: flex-end; align-items: center; opacity: 0; }
.work-div:hover .overlay { left: 0; width: 100%; opacity: 1; }
.work-div:hover{ cursor: pointer;}
.overlay-text h5 { font-size: 70px; color: #fff; text-transform: uppercase; letter-spacing: 10px; font-weight: 300; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.side-text { transform: rotate(-90deg); text-align: left; margin-right: -60px; margin-bottom: -30px; width: 250px; }
.side-text p { font-size: 17px; color: #fff; margin-bottom: 0px; line-height: 22px; font-weight: 400; font-family: 'Oswald', sans-serif; }
.work-slider{ position: relative;}
.work-slider .btn-wrap .btn , .testi-slider .btn-wrap .btn { position: absolute; top:50%; transform: translateY(-50%); width: 60px; height: 60px; z-index: 11; border-radius: 50%; border:1px solid rgba(255,255,255,0.60); display: flex; align-items: center; justify-content: center; transition: all 0.3s }
.work-slider .btn-wrap .btn img{ width: 12px }
.work-slider .btn-wrap .prev{ left: -80px; }
.work-slider .btn-wrap .next{ right: -80px; }
.work-slider .btn-wrap .btn{ opacity: 1 }
.work-slider .btn-wrap .btn.swiper-button-disabled{ opacity: 0 }
.play-icon{ display: none;}


/*============== awards section ======================*/

.award-section { background: #c8c8c8; }
.award-section .section-title { text-align: left; }
.award-text p,
.award-year p { font-size: 27px; color: #1e1e1e; font-weight: 300; margin-bottom: 0px; }
.award-text p span { font-size: 30px; color: #f1482c; font-weight: 500; }
.award-logo .img-bx { width: 250px; }
.award-logo .img-bx img { width: 100%; }
.awrad-row { margin-bottom: 60px; }
.award-text { text-align: left; }
.award-year { text-align: right; }


/*---------- contact -section ----------------*/

.Contact-section { background: #1e1e1e; text-align: left; }
.Contact-section .section-title { color: #f1482c; }
.contact-decr p { color: #fff; font-size: 43px; font-weight: 300; margin-bottom: 70px; line-height: 55px; }
.contact-div h2 { font-size: 30px; color: #fff; font-weight: 500; margin-bottom: 5px; }
.contact-div p { font-size: 24px; color: #e6e6e6; font-weight: 300; line-height: 35px; margin-bottom: 0px; }
.mobile-header { padding: 7px; background: #dcdcdc; text-align: center; font-weight: 400; display: none; }
.mobile-header a { font-size: 18px; color: #646464; text-align: center; font-weight: 400; }
.stellarnav.dark .menu-toggle span.bars span { background: #f1482c; width: 30px; margin-bottom: 6px; height: 2px; }
.stellarnav .menu-toggle span.bars { margin-right: 0px; }
.header.sticky { position: fixed; top: 0px; }

#menu ul.social-icon { display: none; }
.stellarnav.mobile>ul { border-top: 0px; }


/*---------------- modal code -------------------*/

.modal { background: rgba(0, 0, 0, 0.50); z-index: 1111; padding: 0; }
.modal-dialog { max-width: 100%; width: 100%; height: 100%; margin: 0; }
.modal-content { background: rgba(0, 0, 0, 0.50); height: 100%; }
.modal-video { width: 100%; }
.modal-icon { text-align: right; }
.modal-icon .social-icon li { font-size: 30px; color: #fff; font-weight: 500; }
.top-bar { padding: 5px 10px; }
.back-btn { font-size: 30px; color: #fff; font-weight: 500; text-align: left; display: block; }
.modal .container { width: 100%; max-width: 100%; }
.writer-div { display: flex; margin-top: 10px; padding: 0px 10px; }
.writer-div h6 { color: #fff; font-size: 30px; font-weight: 600; }
.writer-div p { padding-left: 10px; }
.writer-div p,
.writer-div ul li a { font-size: 30px; font-weight: 300; color: #fff; opacity: 0.6; }
.writer-div ul li a { padding: 0px 10px; position: relative; display: block; ; }
.writer-div ul li a:after { content: ""; position: absolute; right: 0px; width: 1px; height: 20px; top: 50%; transform: translateY(-50%); background: #fff; opacity: 0.3; }
.writer-div ul li:last-child a:after { display: none; }
.writer-div ul li { display: inline-block; }
.modal-body { padding: 0px; display: flex; width: 100%; justify-content: center; align-items: center; }
.modal video { height: 87vh!important; }
.back-btn,
.modal-icon .social-icon li,
.writer-div h6,
.writer-div p,
.writer-div ul li a { font-size: 25px; }
.writer-div h6 { margin-bottom: 10px; }
.modal .social-icon li a img { max-width: 22px; }
.modal .social-icon li { margin-left: 10px; }
.back-btn:hover { color: #f1482c; }
.video iframe { border: 0; touch-action: none; pointer-events: none; width: 100%; height: 100vh; object-fit: cover; }
.video2 { position: relative; pointer-events: auto; width: 100%; height: calc(100vh - 200px); }
.video2 iframe { position: absolute; top: 0px; left: 0px; right: 0px; width: 100%; height: 100%; object-fit: cover; background-color: #121212; }
.video { position: relative; z-index: 1; height: 100%; width: 100%; }
.vimeo-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.vimeo-wrapper iframe { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; }
.Banner-section { background: #000; z-index: 1; }
.contact-div { padding-right: 63px; }
.modal-video .container{ padding: 0px 60px; }

/* .work-container{ height: 700px; overflow-y: scroll;} */

/* award section  */
.award-table{ width: 100%;}
.award-table tr td p{ font-size: 27px;color: #1e1e1e;font-weight: 300;margin-bottom: 0px;}
.award-table tr td p span{ color:#f1482c; font-weight: 500;}
.award-row{ margin-bottom: 30px;}
.award-table tr td:first-child{ text-align: left;}
.award-table tr td:last-child{ text-align: right;}

.award-cont{ height:100%; overflow-y: scroll;}
.award-cont::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }

  /* new logo section  */
  .award-logo-cont li{ text-align: center; margin-bottom: 30px; display: flex; align-items: center; justify-content: center;}
  .arrow-div{ width: 25px; display: none;}
  .arrow-div img{ width:100%;}

/* button */
.commn-btn{ transition: all 0.4s; padding: 15px 22px; margin-top: 30px; border:1px solid #fff; color:#fff; font-size: 16px; text-transform: uppercase; display: inline-block; text-align: center; cursor: pointer; }
.commn-btn:hover{ background: #f1482c; border-color:#f1482c; color:#fff}
.modal-video{ width: 1200px;}
.video2{ height: 700px;}
.contact-div p a{ transition: all 0.4s;}
.contact-div p a:hover{ color:#f1482c}

.copy-text { opacity:0.4;margin-top:90px;color: white;font-size: 1.2em;padding-bottom:10px;}