/*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    https://example.com/
 Description:  Child theme for the Twenty Sixteen theme
 Author:       By Ramjan
 Author URI:   https://example.com/
 Template:     twentysixteen
 Version:      1.0.0
*/

/* =========================================================
   1) RESET (lightened: avoids forcing line-height everywhere)
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #fff;
  text-decoration: underline;
}

a:hover {
  color: #b91920;
  text-decoration: none;
}

.clear { clear: both; }
.full-width { float: left; width: 100%; }
.floatL { float: left; }
.floatR { float: right; }

/* =========================================================
   2) GLOBAL
   ========================================================= */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #fff;
  background: #020001 url(images/bg-image.jpg) 0 0 no-repeat;
  background-attachment: fixed;
  line-height: 1.4;
}

strong { font-weight: 700; }
:focus { outline: none; }

::-webkit-input-placeholder { color: #000; }
:-moz-placeholder { color: #000; }
::-moz-placeholder { color: #000; }
:-ms-input-placeholder { color: #000; }

* { -webkit-tap-highlight-color: rgba(255,255,255,0); }

/* =========================================================
   3) LAYOUT WRAPPERS
   ========================================================= */
.wrapper {}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: #020001;
  overflow: hidden;
  box-shadow: 0 0 10px 0 #454444;
}

@media (max-width: 1170px) {
  .container { padding: 0 15px; }
}

/* =========================================================
   4) HEADER + NAV
   ========================================================= */
.header { padding: 20px; }
.header h1 { float: left; }
.header .header-right { float: right; }

.header .header-right .social-media {
  float: right;
  margin-top: 40px;
}

/* Clearfix to prevent float-collapse gaps */
.header::after,
.header .header-right::after{
  content:"";
  display:table;
  clear:both;
}

/* social icons list */
.header .header-right .social-media ul li {
  float: left;
  margin-left: 10px;
}

/* menu wrapper */
.header .header-right .menu {
  float: left;
  clear: both;
  margin-top: 25px;
}

/* top-level menu items */
.header .header-right .menu ul li {
  float: left;
  position: relative;
}

.header .header-right .menu ul li a {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 25px 9px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.header .header-right .menu ul li a:hover {
  color: #fff;
  border-radius: 50px;
  background: #b91920;
}

.header .header-right .menu ul li.current-menu-ancestor > a,
.header .header-right .menu ul li.menu-item-has-children:hover > a,
.header .header-right .menu ul li.current-menu-item > a,
.header .header-right .menu ul li a:hover {
  border-radius: 50px;
  background: #b91920;
  color: #fff;
  text-decoration: none;
  margin-top: 4px;
}

/* dropdown */
/*.header .header-right .menu ul ul {*/
/*  display: none;*/
/*  position: absolute;*/
/*  z-index: 50;*/
/*  top: 35px;*/
/*  left: 0;*/
/*  min-width: 170px;*/
/*}*/

.header .header-right .menu ul li:hover ul { display: block; }
.header .header-right .menu ul ul li a { color: #fff; }

/* =========================================================
   5) MOBILE MENU TOGGLE (your new toggle)
   ========================================================= */
.menu-toggle{
  display:none;
  width:44px;
  height:38px;
  cursor:pointer;
  border:1px solid #000;
  background:none;
  padding:0;
  position:relative;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after{
  content:"";
  position:absolute;
  left:50%;
  width:24px;
  height:3px;
  background:#fff;
  transform:translateX(-50%);
}

.menu-toggle__icon{ top:50%; transform:translate(-50%, -50%); }
.menu-toggle__icon::before{ top:-8px; }
.menu-toggle__icon::after{ top:8px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon{ background:transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before{
  top:0; transform:translateX(-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after{
  top:0; transform:translateX(-50%) rotate(-45deg);
}

/* Disable old bootstrap toggle (not needed) */
.navbar-toggle { display:none !important; }

/* Responsive tweaks for header spacing */
@media (max-width: 980px) {
  .header .header-right .menu ul li a { padding: 10px 20px; }
}
@media (max-width: 880px) {
  .header .header-right .menu ul li a { padding: 10px 12px; }
}

/* ===== MOBILE NAV OPEN/CLOSE (SINGLE SOURCE OF TRUTH) ===== */
@media (max-width: 767px){
  .menu-toggle{ display:inline-block; }

  /* stack header blocks (no floats on mobile) */
  .header h1,
  .header .header-right,
  .header .header-right .social-media,
  .header .header-right .menu{
    float:none !important;
    clear:none !important;
    width:100% !important;
  }

  .header h1{ text-align:center; }

  /* remove big top spacing that creates blank area */
  .header .header-right .social-media{ margin-top:10px !important; }
  .header .header-right .menu{ margin-top:0 !important; padding:0 !important; }

  /* CLOSED = no space */
  #site-navigation{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* OPEN */
  #site-navigation.is-open{
    display:block !important;
    margin-top:10px !important;
  }

 #site-navigation .primary-menu li{
    float:none !important;
    width:100% !important;
  }
  
  /* dropdowns normal flow on mobile */
  #site-navigation .primary-menu ul{
    display:none;
    position:static;
    margin-left:20px;
    margin-top:6px;
  }

  /* banner sits right under header */
  .banner{
    clear:both;
    margin-top:10px !important;
  }
  #site-navigation .menu-item-has-children.submenu-open > ul{
    display:block;
  }
}

/* =========================================================
   6) BANNER
   ========================================================= */
.banner {
  width: 100%;
  float: left;
  margin-top: 20px;
}

.banner .flex-direction-nav a {
  background: url(images/arrow.png);
  width: 55px;
  height: 45px;
}

.banner .flex-direction-nav .flex-next { background-position: -70px 0; }

/* =========================================================
   7) HOME
   ========================================================= */
.home-content { margin-top: 20px; }

.home-content .welcometext {
  width: 70%;
  margin: 0 auto;
  display: table;
  text-align: center;
}

.home-content .welcometext .page-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 25px;
}

.home-content .welcometext p { line-height: 22px; }

.home-video {
  width: 100%;
  margin: 0 auto;
  display: table;
  border-bottom: 1px solid #393939;
  border-top: 1px solid #393939;
}

.home-video iframe,
.video iframe {
  background: #000;
  border-color: #000;
}

/* Awards responsive: 4 / 2 / 1 */
.award{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px;
}

.award > div{
  width:calc(25% - 8px);   /* 4 columns */
}

.award img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 980px){
  .award > div{
    width:calc(50% - 8px); /* 2 columns */
  }
}

@media (max-width: 767px){
  .award > div{
    width:100%;           /* 1 column */
  }
}

/* =========================================================
   8) FOOTER
   ========================================================= */
/* ===== FOOTER (Flex, no floats) ===== */
.footer{
  background:#252525;
  width:100%;
  padding:14px 20px;
  margin-top:20px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  height:80px;
}

.footer p{
  margin:0;
  font-size:14px;
  line-height:1.4;
}

.footer p a{
  text-decoration:none;
}

.footer .social-media{
  display:flex;
  align-items:center;
}

.footer .social-media ul{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
}

.footer .social-media ul li{
  margin:0; /* remove float spacing */
}

/* Responsive: stack on mobile */
@media (max-width:767px){
  .footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* =========================================================
   9) CONTENT PAGES
   ========================================================= */
.content-page { padding: 0 20px; }

.content-page p {
  line-height: 22px;
  margin-top: 15px;
}

.content-page .page-title {
  font-size: 22px;
  font-weight: 700;
  width: 100%;
  margin-bottom: 15px;
  border-bottom: 1px solid #fff;
  padding-bottom: 15px;
}

.content-page ul li {
  margin-left: 20px;
  margin-top: 10px;
  list-style: square;
  letter-spacing: 1px;
}

.content-page .about-page ul li {
  font-weight: 700;
  color: #b91920;
}

.content-page em {
  font-style: italic;
  font-weight: 700;
  letter-spacing: 1px;
}

.site-content p {
  padding: 0 0 15px;
  line-height: 22px;
}

/* =========================================================
   10) NEWS
   ========================================================= */
.news-main,
.news-box { width: 100%; float: left; }

.news-main .news-box { border-bottom: 1px solid #595959; padding-bottom: 20px; margin-top: 20px; }

.news-main .news-box .news-image {
  float: left;
  width: 20%;
  border: 1px solid #595959;
}

.news-content {
  width: 80%;
  float: right;
  padding-left: 30px;
}

.news-content h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}

.news-content p { line-height: 22px; }
.news-content span { font-size: 15px; float: right; }

.pagination {
  float: left;
  width: 100%;
  margin: 25px 0 0;
  text-align: right;
}

.pagination span {
  background: #b91920;
  padding: 5px 10px;
  border-radius: 5px;
}

.pagination a {
  padding: 5px 8px;
  border-radius: 5px;
  margin-left: 10px;
}

/* =========================================================
   11) CONTACT PAGE
   ========================================================= */
.contact-page-content { float: left; width: 100%; margin-top: 5px; }

.contact-page-content h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}

.contact-page-content .address { float: left; width: 50%; }

@media (max-width: 767px) {
  .contact-page-content .address { width: 100%; margin-bottom: 20px; }
  .contact-page-content img { width: auto; }
}

/* =========================================================
   12) MEDIA PAGE
   ========================================================= */
.media-page .title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 10px;
  margin-top: 10px;
  float: left;
  width: 100%;
  color: #b91920;
}

.media-page ul { float: left; width: 100%; margin-top: 20px; }

.content-page .media-page li {
  float: left;
  width: 100%;
  list-style: none;
  font-weight: normal;
  padding-bottom: 25px;
}

.media-page li .img {
  float: left;
  padding: 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.media-page li .content { float: left; padding: 20px; }

/* =========================================================
   13) CAST & CREW
   ========================================================= */
.cast-crew { width: 100%; float: left; }

.cast-crew .castone {
  float: left;
  width: 31%;
  background: rgba(144, 41, 32, 0.1);
  margin-right: 20px;
  padding: 20px 10px;
  margin-top: 20px;
}

.cast-crew .castone ul li {
  border-bottom: 1px solid rgba(144, 41, 32, 0.3);
  padding-bottom: 10px;
}

.cast-crew .castone ul li a { text-decoration: none; }

.cast-crew .cast-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 10px;
  margin-top: 30px;
  float: left;
  width: 100%;
  color: #fff;
}

.cast-crew .starring { width: 100%; float: left; }

.cast-crew .starring .images-box { float: left; width: 25%; padding: 10px; }

.cast-crew .starring .images-box .image {
  width: 100%;
  display: block;
  border: 1px solid #ccc;
  padding: 10px;
}

.cast-crew .starring .images-box .image img { width: 100%; display: block; }

.cast-crew .starring .images-box .image .title-name { padding: 10px 0 0; }

.cast-crew .starring .images-box .image .title-name p {
  width: 100%;
  margin-top: 0;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.cast-crew .starring .images-box .image .title-name p span { font-size: 15px; }

@media (max-width: 950px) {
  .cast-crew .castone { width: 45%; }
}

@media (max-width: 768px) {
  .cast-crew .castone { width: 100%; margin-right: 0; }
  .cast-crew .starring .images-box { width: 45%; }
}

/* =========================================================
   14) DIRECTOR PAGE
   ========================================================= */
.director h2 {
  font-weight: 700;
  font-size: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
  color: #b91920;
}

.director-images {
  float: left;
  width: 100%;
  margin: 25px 0;
}

.director-images .images { float: left; width: 47%; }
.director-images .images.two { float: right; }

.director-images .images img {
  display: block;
  float: right;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px;
}

.director-images .images.two img { float: left; }

@media (max-width: 768px) {
  .director-images .images { width: 100%; text-align: center; }
  .director-images .images img,
  .director-images .images.two img { float: none; margin-top: 10px; display: inline-block; }
}

/* comp card */
.content-page .media-page.comp.card ul li {
  float: left;
  width: 33%;
  padding: 25px;
  margin: 0;
}
.content-page .media-page.comp.card ul li img { width: 100%; }

@media (max-width: 768px) {
  .content-page .media-page.comp.card ul li { width: 50%; }
}

/* =========================================================
   15) SEARCH
   ========================================================= */
.search-field {
  margin-left: 10px;
  padding-left: 10px;
  height: 30px;
  color: #000;
  border: none;
}

.search-submit {
  background: #fff;
  padding: 0 10px 3px;
  line-height: 27px;
  color: #000;
  cursor: pointer;
  margin-top: 10px;
}

.search-submit:hover { background: #ccc; }


@media (max-width: 767px){
  .awards-section{
    flex-direction: column;
    gap: 10px;
  }
  .awards-section > div{ width:100%; }
  .awards-section img{ width:100%; height:auto; }
}
.main-navigation .menu-item-has-children > a:after{
  content: "▾";
  position:absolute;
  right:0.625em;
  top:0.65em;
}

.main-navigation ul ul li {
		background-color: #b91920;
		border: none;
		border-radius: 50px !important;
		margin-top: 2px;
}
.main-navigation li {
	border-top: 0px solid #d1d1d1;
	position: relative;
}
.main-navigation ul ul{
   border-bottom: 0px solid #d1d1d1; 
}

.media-page.comp.card .compcards-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  width:100%;
  margin-top:20px;
  float:none !important;
  clear:both;
}

.media-page.comp.card .compcard-item{
  display:block;
  float:none !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:10px;
  overflow:hidden;
}

.media-page.comp.card .compcard-item img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

/* Tablet: 2 columns */
@media (max-width: 980px){
  .media-page.comp.card .compcards-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column */
@media (max-width: 767px){
  .media-page.comp.card .compcards-grid{
    grid-template-columns:1fr;
  }
}