/* common css ******************************************************************************/

/* Font family **************************************************************************** */

@font-face {
    font-family: "Oxanium-Bold";
    src: url("../fonts/Oxanium/Oxanium-Bold.ttf");
}
@font-face {
    font-family: "Oxanium-ExtraBold";
    src: url("../fonts/Oxanium/Oxanium-ExtraBold.ttf");
}
@font-face {
    font-family: "Oxanium-ExtraLight";
    src: url("../fonts/Oxanium/Oxanium-ExtraLight.ttf");
}
@font-face {
    font-family: "Oxanium-Light";
    src: url("../fonts/Oxanium/Oxanium-Light.ttf");
}
@font-face {
    font-family: "Oxanium-Medium";
    src: url("../fonts/Oxanium/Oxanium-Medium.ttf");
}
@font-face {
    font-family: "Oxanium-Regular";
    src: url("../fonts/Oxanium/Oxanium-Regular.ttf");
}
@font-face {
    font-family: "Oxanium-SemiBold";
    src: url("../fonts/Oxanium/Oxanium-SemiBold.ttf");
}
@font-face {
    font-family: "RobotoCondensed-Regular";
    src: url("../fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf");
}
@font-face {
    font-family: "Inter_18pt-Medium";
    src: url("../fonts/inter/Inter_18pt-Medium.ttf");
}

:root {
    --white: #fff;
    --black: #000;
    --black-101010: #101010;
    --gray-B4B4B4: #B4B4B4;
    --gray-E7E8E9: #E7E8E9;
    --gray-D9D9D9: #D9D9D9;
    --red: #FF0000;
    --dark-red: #8F1B0E;
    --gradint:linear-gradient(260deg, rgba(143,27,14,1) 0%, rgba(255,0,0,1) 100%);
}
.white {
    color: var(--white);
}
.black {
    color: var(--black);
}
.light-black{
    color:var(--black-101010)
}
.gray{
    color: var(--gray-B4B4B4);
}
.red{
    color: var(--red);
}
.gradint{
    background: rgb(143,27,14);
    background: linear-gradient(90deg, rgba(143,27,14,1) 0%, rgba(255,0,0,1) 100%);
}

.text-red{
    font-family: "Oxanium-Bold";
    font-size: 28px;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*::before,
*::after {
    box-sizing: border-box;
}
.common::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
}
body {
    background: var(--black);
    font-family: 'Oxanium-Regular', sans-serif;
}
body.show {
    position: fixed;
    top: 0;
    width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
    line-height: 1.2;
    color: var(--white);
    font-weight: 700;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
    margin-bottom: 0;
}
h1 {
    font-size: 80px;
}
h2 {
    font-size: 44px;
}
h3 {
    font-size: 36px;
}
h4 {
    font-size: 28px;
}
h5 {
    font-size: 24px;
}
h6 {
    font-size: 20px;
}
p {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--gray-B4B4B4);
}
p:last-child {
    margin-bottom: 0;
}
.small {
    font-size: 16px;
}
ul,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    text-transform: capitalize;
    display: inline-block;
    line-height: 1.2;
    color: inherit;
    font-family: inherit;
}
span {
    display: inline-block;
}

.big-heading h2 {
    font-family: "Oxanium-Bold";
    opacity: 0.1;
    font-size: 90px;
    text-align: end;
    text-transform: uppercase;
}
.small-heading h5 {
    font-family: "Oxanium-ExtraBold";
    font-size: 30px;
    position: relative;
    margin: 0;
    text-transform: uppercase;
}
.small-heading {
    margin-bottom: 40px;
    margin-top: -44px;
}
.small-heading.zero{
    margin-top: 0;
}
.small-heading h5:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 40px;
    border: 2px solid var(--red);
    transform: translateX(-100%);
}
.btn-common {
    font-size: 18px;
    padding: 14px 50px;
    background: transparent;
    color: var(--white) !important;
    border-radius: 10px;
    border: 1px solid var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'Oxanium-Medium';
    transition:  0.5s ease; 
    overflow: hidden;
    position: relative;
}

.btn-common::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradint); 
    transition: transform 0.5s ease;
    transform: scaleX(0); 
    transform-origin: left;
}

.btn-common:hover::before {
    transform: scaleX(1);
    z-index: 1;
}
.btn-common img {
    max-width: 30px;
    margin-right: 10px;
}
.btn-common span{
    z-index: 9;
}
section {
	/* padding-bottom: 100px; */
	overflow: hidden;
}
.bg {
    padding: 40px 30px 60px;
}
.mobile {
    display: none !important;
}
.desktop {
    display: block !important;
}
img,
video {
    max-width: 100%;
}
.button-box {
    padding-top: 30px;
}
.button-box.center {
    display: flex;
    justify-content: center;
}
.button-box ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}
.owl-theme .owl-dots .owl-dot span {
    background: #3c3c3c;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--white);
}
.owl-nav {
    margin-top: 0;
}
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.owl-nav button.owl-prev {
    left: 0;
}
.owl-nav button.owl-next {
    right: 0;
}
.form-control-common {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--white);
    font-size: 18px;
    padding: 15px 50px 5px 5px;
    width: 100%;
    appearance: textfield;
    color: var(--white);
    border-radius: 0;
    box-shadow: none;
    resize: none;
    outline: none;
    text-transform: capitalize;
}
.form-select {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--white) !important;
    font-size: 18px;
    padding: 15px 50px 5px 5px;
    color: var(--gray-B4B4B4);
    border-radius: 0;
    box-shadow: none !important;
    text-transform: uppercase;
}
.form-select option {
    background: var(--black-101010) !important;
}
.form-control-common::placeholder{
    text-transform: uppercase;
}
.input-group {
    padding-bottom: 50px;
}
textarea#message {
    height: 120px;
}

/* innerBanner css **************************** */

#innerBanner .innerBanner-part {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10% 30px;
    position: relative;
}
#innerBanner .innerBanner-box h1{
    text-transform: uppercase;
    font-family: "Oxanium-Bold";
}


#innerBanner .innerBanner-part:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(260deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.8;
}

  #innerBanner .innerBanner-box{
    position: relative;
    z-index: 9;
 }


/* header css start ******************************************************************************/
@keyframes smoothScroll {
    0% {
        transform: translateY(-60px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
#header.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    animation: smoothScroll 1s forwards;
    z-index: 1000;
    box-shadow: 0 0 10px 2px #000;
}
#header {
	background: var(--black);
	padding: 15px 0;
	transition: .5s all;
	position: relative;
}
#header .header-part {
    padding: 0px 30px;
}
#header .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#header .logo-box img {
    max-width: 170px;
    width: 100%;
}
#header .main-nav .click-menu,
#header .main-nav .cancel-menu {
    display: none;
    cursor: pointer;
    position: relative;
    z-index: 11;
    width: 30px;
    height: 30px;
}
#header .main-nav .click-menu span,
#header .main-nav .cancel-menu span {
    width: 25px;
    height: 3px;
    background: var(--white);
    transition: .5s all ease-in-out;
    position: relative;
    border-radius: 5px;
}
#header .main-nav .cancel-menu span {
    position: absolute;
    height: 4px;
}
#header .main-nav .cancel-menu span:first-child {
    transform: rotate(45deg);
}
#header .main-nav .cancel-menu span:last-child {
    transform: rotate(-45deg);
}
#header .main-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 20px;
}
#header .button-box {
	margin-left: 20px;
	padding-top: 0;
}
#header .main-nav nav ul li {
	display: inline-block;
	position: relative;
	margin-right: 20px;
}
#header .main-nav nav ul li a {
	color: var(--white);
	padding: 5px;
	font-size: 18px;
    text-transform: uppercase;
    position: relative;
}
#header .main-nav nav ul li a::before {
    content: "";
    position: absolute;
    width: 0%;
    background-color: var(--red);
    bottom: 0;
    left: 0;
    opacity: 0;
    border: 1px solid var(--dark-red);
    transition: 0.5s;
}
#header .main-nav nav ul li a:hover::before{
    opacity: 1;
    width: 100%;
}
#header .main-nav .dropdown-menu {
    background: black;
}
#header .main-nav .dropdown-menu li a::before{
    display: none;
}
#header .main-nav .dropdown-menu  li {
    border-bottom: 1px solid var(--dark-red);
    width: 100%;
    padding: 8px 20px;
    
}
#header .main-nav .dropdown-menu  li:hover {
    background-color: #b4b4b44a;
    border-bottom: none;
}
#header .main-nav .dropdown-menu  li:hover a{
    color: var(--white);
}
#header .main-nav .dropdown-menu  li a {
    font-size: 15px;
    text-transform: capitalize;
    color: var(--gray-B4B4B4);
}
#header .main-nav .dropdown-menu  li a:hover {
    background-color: transparent !important;
    /* color: var(--white); */
}


.dropdown-toggle::after {
    border: none !important;
    vertical-align: .255em;
    background-image: url("../images/arrow.png");
    width: 20px;
    height: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* homeBanner css ******************************************************************************/

/* movies css ******************************************************************************/

#movies .movies-part{
    background-color: var(--black-101010);
}
#movies .movies-box .img-box{
    position: relative;
    overflow: hidden;
}
#movies .movies-box .img-box img{
    width: 100%;
    border-radius: 25px;
}
#movies .movies-box .img-box:hover .box-content{
cursor: pointer;
bottom: 0;
transition: 0.3s;
visibility: visible;
}
#movies .movies-box .img-box .box-content {
    position: absolute;
    bottom: -100px;
    color: var(--white);
    z-index: 99;
    padding: 0px 20px 20px;
    background: rgb(16,16,16);
background: linear-gradient(4deg, rgba(16,16,16,0.6643032212885154) 0%, rgba(16,16,16,0) 100%);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    visibility: hidden;
}
#movies .movies-box .img-box .box-content .text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#movies .movies-box .img-box .box-content .title{
    font-weight: 600;
}
#movies .movies-box .row{
    row-gap: 20px;
}

/* about css ******************************************************************************/

#about .about-part.bg{
    padding: 40px 30px 0;
}

#about .about-box .text-box .text p {
    text-transform: capitalize;
    font-family: 'RobotoCondensed-Regular';
}
#about .about-box .img-box {
    display: flex;
    justify-content: center;
}
#about .about-box .text-box {
    margin-bottom: 20px;
}

/* teams css ******************************************************************************/

#teams .teams-part{
    background-color: var(--black-101010);
}
#teams .teams-box .img-box {
    background-color: var(--black);
    border-radius: 20px;
    margin-bottom: 20px;
    margin-right: 30px;
} 
#teams .teams-box .info h6 {
    font-family: "Oxanium-Bold";
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
}
#teams .teams-box .info p{
    text-transform: uppercase;
    text-align: center;
}

/* form css ******************************************************************************** */

#form .form-box .boxes {
    display: flex;
    column-gap: 40px;
    align-items: start;
    margin-bottom: 20px;
}
#form .form-box .boxes img{
    width: 25px;
}
#form .form-box iframe {
    width: 100%;
    height: 400px;
}
#form .form-box .row {
    justify-content: space-between;
}

/* footer css ******************************************************************************/

#footer .footer-part{
    background-color: var(--black-101010);
}
#footer .footer-part.bg{
    padding-bottom: 0;
}
#footer .top-box .logo-box img {
    max-width: 170px;
}
#footer .top-box .row{
    align-items: center;
}
#footer form#searchform {
    width: 50%;
}

#footer .top-box  input[type=text] {
    width: 100%;
    border: 1px solid var(--gray-B4B4B4);
    font-size: 18px;
    background-color: var(--white);
    /* background-image: url('../images/search-icon.png'); */
    /* background-position: 5%; */
    /* background-repeat: no-repeat; */
    padding: 15px 10px 15px 15px;
    font-family: 'RobotoCondensed-Regular';
    text-transform: lowercase;
}
#footer .top-box .search-box {
    display: flex;
    justify-content: end;
}
#footer .top-box .submit-btn {
    border-radius: 0;
    border: none;
    background: var(--gradint);
    padding: 10px 40px;
    color: var(--white);
    font-family: "Inter_18pt-Medium";
    text-transform: capitalize;
}
#footer p {
    font-family: "Oxanium-Medium";
    line-height: 1.6;
}
#footer .mid-box {
    border-block: 1px solid var(--white);
    padding: 50px 0;
    margin-top: 30px;
}
#footer .mid-box .box.box1  {
    width: 90%;
}
#footer .mid-box h5 {
    margin-bottom: 40px;
    color: var(--red);
    text-transform: uppercase;
    font-size: 20px;
}
#footer .mid-box .list-box ul{
    color: var(--gray-B4B4B4);
    font-family: "Oxanium-Medium";
}
#footer .mid-box .list-box li:not(:last-child) {
    margin-bottom: 20px;
}
#footer .mid-box .link-box ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 25px;
    row-gap: 10px;
    margin-top: 20px;
}
#footer .mid-box .link-box ul img {
    max-width: 40px;
    transition: 0.5s;
}

#footer .mid-box .link-box ul img:hover {
    transform: translateY(-3px);
}
#footer .end-box {
    padding: 30px 0;
    text-align: center;
}




/* ===============================

About-us page start

=============================== */

#who .who-part{
    background-color: var(--black-101010);
}


#who .who-box .text-box .text p {
    text-transform: capitalize;
    font-family: 'RobotoCondensed-Regular';
}

#who .who-box .text-box .text p:first-child {
    font-size: 20px;
}


#who .who-box .numbers {
    display: flex;
    column-gap: 50px;
    margin-top: 30px;
}

#who .who-box .numbers .first h3 {
    color: transparent;
    -webkit-text-stroke: 0.5px #FFFFFA;
    font-family: 'Oxanium-SemiBold';
    font-size: 55px;
    margin-bottom: 0;
}
#who .who-box .numbers .first h3 .red{
    color: var(--red);
    font-family: "Oxanium-ExtraLight";
    -webkit-text-stroke: 0px;
}
#who .who-box .numbers .first p{
    font-family: 'Oxanium-SemiBold';
    font-size: 16px;
}
#who .who-box .img-box{
    display: flex;
    justify-content: end;
}
#who .who-box .img-box img {
    border-radius: 20px;
}



#help .help-part {
    background-image: url("../images/support-image.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 80px 0;
}

#help .help-part:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--black-101010);
    opacity: 0.7;
}
#help .help-box{
    position: relative;
    z-index: 9;
}

#help .help-box .text {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

#help .help-box .text p{
    font-family: 'RobotoCondensed-Regular';
    line-height: 1.6;
}



#feature .feature-box .text-box {
    margin-bottom: 20px;
}


#feature .feature-box .text-box .text p {
    font-size: 20px;
    font-family: 'RobotoCondensed-Regular';
    text-transform: capitalize;
}

#feature .feature-box .boxes {
    border: 1px solid var(--gray-B4B4B4);
    border-radius: 20px;
    padding: 30px 30px;
    height: 100%;
}

#feature .feature-box .boxes .title {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
}
#feature .feature-box .boxes .title img {
    max-width: 30px;
}
#feature .feature-box .boxes .title h5 {
    text-transform: uppercase;
    font-size: 24px;
    font-family: 'Oxanium-Bold';
}
#feature .feature-box .boxes .text p{
    font-family: 'RobotoCondensed-Regular';
    line-height: 1.6;
    text-align: center;
}

#feature .feature-box .row{
    row-gap: 20px;
    justify-content: center;
}
/* ===============================

About-us page end

 =============================== */


/* ===============================

advertising page start

 =============================== */

 .services ul {
    list-style-type: disc;
    padding-left: 20px;
    color: var(--gray-B4B4B4);
    font-family: 'RobotoCondensed-Regular';
    margin-bottom: 20px;
}



 #film .film-part{
    background-color: var(--black-101010);
 }
 #film .film-box .text-box .text p {
    text-transform: capitalize;
    font-family: 'RobotoCondensed-Regular';
}

#film .film-box  .img-box {
    display: flex;
    justify-content: end;
}

#film .film-box .img-box img {
    border-radius: 20px;
    width: 100%;
}

#film .film-box .row {
    align-items: center;
    justify-content: space-between;
}
#film .film-box .row .col-lg-6 {
    width: 47%;
}

.agency .film-box .button-box .btn-common{
    border-radius: 50px;
}


#other .other-box .boxes {
    border: 1px solid var(--gray-B4B4B4);
    border-radius: 20px;
    padding: 30px 10px;
    transition: .5s;
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
}
#other .other-box .boxes::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: -100%;
    background: var(--gradint);
    /* opacity: 0; */
    transition: 0.5s;
    z-index: -1;
}
#other .other-box .boxes:hover::after {
    /* opacity: 1; */
    top: 0;
}
#other .other-box .boxes:hover svg {
    filter: brightness(0) invert(1);
    transition: 0.5s;
}
#other .other-box .row{
    row-gap: 20px;
}

#other .other-box .boxes .img-box{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#other .other-box .boxes .text h6{
    font-family: 'Oxanium-Bold';
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
}

#other .other-box .boxes svg {
    height: 80px;
    width: 80px;
}

#detail .detail-box .form-box  .input-group {
    width: 90%;
    padding-bottom: 20px;
}

#detail .detail-part{
    background-color: var(--black-101010);
}

/* ===============================

advertising page end

 =============================== */

 /* ===============================

agency-inner page start

 =============================== */

.agency-inner #film .film-box .row:not(:last-child) {
    margin-bottom: 60px;
}



 /* ===============================

agency-inner page end

 =============================== */


  /* ===============================

portfolio page start

 =============================== */
 .work-part.bg {
    background-color: var(--black-101010);
 }

 #work .work-part .boxes {
    display: grid;
    column-gap: 25px;
    row-gap: 50px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr) );
}
#work .work-part .boxes .box{
    min-height: 300px;
    background-color: var(--gray-D9D9D9);
    border-radius: 20px;
}
#work .work-part .nav-pills .nav-link.active  {
   background: var(--gradint);
}
#work .work-part .nav-pills .nav-link {
    border: 1px solid #b4b4b426;
    border-radius: 10px;
    color: var(--white);
}
#work .work-part .nav-pills {
    justify-content: center;
    column-gap: 30px;
}

  /* ===============================

portfolio page end

 =============================== */


/* ===============================

contact page start

 =============================== */

 .contact-us #innerBanner .innerBanner-part:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(260deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.contact-us #innerBanner .innerBanner-box {
    position: relative;
    z-index: 9;
}

 #contact-form  .contact-form-part{
background-color: var(--black-101010);
 }

 .contact-us #contact-form .details {
    width: 80%;
    margin: 0 auto;
    border: 1px solid var(--gray-B4B4B4);
    border-radius: 30px;
    overflow: hidden;
}
.contact-us #contact-form  .form-box {
    margin: 40px 40px;
}

.contact-us #contact-form .img-box img {
    width: 100%;
    max-height: 740px;
    /* object-fit: cover;
    object-position: top; */
}


#social-detail .boxes {
    border: 1px solid var(--gray-B4B4B4);
    border-radius: 20px;
    padding: 30px 30px;
    height: 100%;
}

#social-detail .boxes .title {
    display: flex;
    column-gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

#social-detail .boxes .title h6{
    text-transform: uppercase;
    font-family: "Oxanium-Bold";
    
}

#social-detail .boxes .title img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}
#social-detail .boxes .text p {
    font-family: 'RobotoCondensed-Regular';
    text-transform: capitalize;
    line-height: 1.8;
    text-align: center;
    margin: 0;
}

/* ===============================

contact page end

 =============================== */