* {
        margin: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;


    }

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

    @font-face {
      font-family: "ClashDisplay";
      src: url("ClashDisplay-Variable.ttf") format("truetype");
      font-weight: 100 700;
      font-style: normal;
    }

#navOpenIcon {
    content: url("../images/logo.svg"); /* Default image */
    transition: opacity 0.3s ease-in-out;
}

#navOpenIcon:hover {
    content: url("../images/logo-hover.svg"); /* Hover image */
}


.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:15%;
  width:70%;
  height:70%;
  z-index: 10;

}



/* Style for navigation*/
     * {
      margin: 0;
      padding: 0;
      box-sizing: content-box;
    }


    /* Header Styles */

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10%;
      position: fixed;
      width: 80%;
      top: 0;
      z-index: 1000;
         transform: translateZ(0);
       
    }

    
 header.scrolled {
      background-color:#FFE714;
    }
header.active {
  background-color: #B70000; /* Background color when logo.svg is clicked */
}

    header .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

    header .nav-trigger img,
    header .nav-trigger .close-icon {
      width: 70px;
      cursor: pointer;
    }

    header .nav-trigger .close-icon {
      font-size: 5rem;
      display: none;
      color: #fff;
    }
 
   
    /* Full-Page Navigation */
    .nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #B70000;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      transform: translateY(-100%);
      transition: transform 0.3s ease-in-out;
      padding-left: 10%;
      padding-top: 50px;
       z-index: 999;
    }

    .nav-overlay.active {
      transform: translateY(0);
    }

    .nav-overlay .nav-header {
      position: absolute;
      top: 20px;
      left: 10%;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .nav-overlay ul {
      list-style: none;
      text-align: left;
      width: 100%;
    }

    .nav-overlay ul li {
      margin: 20px 0;
    }

    .nav-overlay ul li a {
      font-size: 5vw;
      font-family: "ClashDisplay", sans-serif;
      text-transform: uppercase;
      font-weight: 700;
      line-height: 4vw;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s;
    }

    .nav-overlay ul li a:hover {
      color: #000;
    }


















body
{
padding:0;
margin: 0px auto;
background-color: #FFE714;
padding-top: 10vh;

 }


h1
  { text-transform:uppercase;
font-family: "ClashDisplay" ;
font-size:5vw;
font-weight: 700;
color:#B70000;
line-height:5vw ;

  }



h1.small
{font-size: 3vw;
 line-height:3vw ; 
 color: #000;}

  h1.smallred
  {
font-size:3vw;
line-height:3vw ;
    
  }

.menu li
  { text-transform:uppercase;
font-family: "ClashDisplay" ;
font-size:2rem;
font-weight: 700;
color:#B70000;
margin:0 0 20px 0;

  }

h2
  {
font-family: "ClashDisplay" ;
font-size:2.5rem;
font-weight: 700;
color:#B70000;
margin:0 0 1.5rem 0;


  }


h3, p strong
  {  
    font-family: "ClashDisplay";
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:2rem;
  font-style: normal;
  color:#B70000;
  }

h4
  {  
    font-family: "ClashDisplay";
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:1.6rem;
  font-style: normal;
  color:#B70000;
  margin-bottom: 1rem;
  }

h5
  {  
    font-family: "ClashDisplay";
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:1.3rem;
  font-style: normal;
  color:#B70000;
  
  }

p strong
{font-size: 1.2rem;}

p strong a
{text-decoration: none;
color:#B70000;}

p strong a:hover
{
  background-color: #B70000;
color:#fff;}

p.copwht
{color:#fff;
text-shadow: 0px 0px 3px #0005;}

figcaption
{ color:#000;
font-family: "bitter";
font-size.8em;
font-style: italic;
 }


li a {
  position: relative;
  text-decoration: none;
  color: #000;
  margin: 0 0 -10px 0;
}

li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #000;
    bottom: 0;
    left: 2;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .5s ease-in-out;
  }

li a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
 background-color:  #B70000;

}


.white
  {
color:#fff;
text-shadow: 0px 0px 5px #0003;
font-size:.7em;
  }


#heading
{
  min-width:55%; width:55%; max-width:55%;
margin-left: 20%; 
margin-right: 20%;
padding-top: 5vw;

}
  
#header
{
padding:20px 10% 0 10%; 

}

#header2
{width:80%;
padding:0 10% 0 10%;
max-width: 80%

     
   margin: 0px auto; 
}



  #container
  {width:100%;
   min-height:95vh; height:95vh; max-height:95vh;
    padding:0;
   margin: 0 100px 0 0 auto; 
}

   #container2
  {width:85%;
padding:0 8% 0 7%;
  margin: 0 0 5% 0;  
} 

   #container-serv
  {width:100;
    float: left;
      padding:0 10% 0 10%;
   margin: 0  auto; 

}

#footer
{width:80%;
  float: left;
  margin:2% 0 0 0;
  padding: 5% 10% 3% 10%;
  background-image: url(../images/footer-pattern.svg);
  background-repeat: repeat-x;

}

#footer-left
{float:left;
width:50%;
font-family: "ClashDisplay" ;
font-size:1rem;
font-weight: bold;
color:#B70000;
}

#footer-right
{float:left;
width:50%;
font-family: "ClashDisplay" ;
font-size:1.2rem;
text-align: right;
font-weight: normal;
color:#B70000;
}

#footer-right a
{text-decoration: none;
color:#B70000;
padding:0 0 0 20px;
}

#footer-right a.mail 
{color: #fff;
  padding: 5px 15px 5px 15px;
  margin-left: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  transition-duration: 0.4s;
    background-color: #bf0000;
   border-radius: 25px;
  font-family: "ClashDisplay";

}


#footer-right a.mail:hover 
{
    background-color: #000;
    color:#fff;
    text-decoration: none;


}


#footer-right a:hover
{text-decoration: underline;
color:#000;
}

#social
{padding: 2rem 0 0 0;
float:right;
text-align: left;}


.linkedin
{background-image: url(../images/linked-off.svg);
  background-position: top;
  float: right;
  background-repeat: no-repeat;
}

.linkedin:hover
{background-image: url(../images/linkedin-on.svg);

}

.picturejockey
{background-image: url(../images/pjockey-off.svg);
  background-position: top;
  float: right;
  background-repeat: no-repeat;
}

.picturejockey:hover
{background-image: url(../images/pjockey-on.svg);

}
.instagram
{background-image: url(../images/insta-off.svg);
  background-position: top;
  float: right;
  background-repeat: no-repeat;
}

.instagram:hover
{background-image: url(../images/insta-on.svg);

}

.medium
{background-image: url(../images/medium-off.svg);
  background-position: top;
  float: right;
  background-repeat: no-repeat;
}

.medium:hover
{background-image: url(../images/medium-on.svg);

}

.behance
{background-image: url(../images/behance-off.svg);
  background-position: top;
  float: right;
  background-repeat: no-repeat;
}

.behance:hover
{background-image: url(../images/behance-on.svg);

}


#bottom-quote
{float: left;
text-transform: uppercase;
align-content: center;
color: #fff;
 letter-spacing: .12rem;
 text-align: center;
 font-size: .8rem;
 font-family: "ClashDisplay";
width: 100%;
margin:0 ;
text-shadow: 0px 0px 3px #0003;



}





.copyright
{margin:0 0 0 4.8vw;}
.fimg
{width: 25vw;}


  #quote
  {width:100%;
   min-height:100vh; height:100vh; max-height:100vh;
    padding:0;
   margin: 0 100px 0 0 auto; 
   overflow: hidden;
   left: -80px;
}

.imgquote
{max-width: 100vw;}



.badge
{background-color: #fff;
float: left;
color:#b70000;
font-family: "ClashDisplay" ;
font-size:1rem;
font-weight:600;
padding: 5px 10px;
border-radius: 5px;
margin:0 10px 10px 0;
white-space: nowrap;
}


p, #copy ul, ul
 {color:#000;
  font-family: "bitter", serif;
  font-optical-sizing: auto;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: normal;
  margin:0 0 2rem 0;
  line-height: 1.5em;

}


p.subhead
{font-size: 1.8rem;
 font-family: "ibm plex sans", serif;
  font-weight: 700;
line-height: 1.8rem;
  z-index: 10;
  position: relative;
}

#workquote, #workquotesml
{color:#000;
  font-size: 1.6rem;
 font-family: "bitter", serif;
  font-weight: 700;
line-height: 1.8rem;
padding:20px;
background:#fff;
border-radius: 10px;
margin:0 0 2rem 0;
box-shadow:  5px 5px 0px rgba(0,0,0,0.1);
}
#workquotesml
{ font-size: 1.2rem;
 font-family: "bitter", serif;
  font-weight: 500;
  
width: 80%;}


.quothead
{font-size: .85rem;
text-transform: uppercase;
margin: 0 0 5rem 0;
color:#B70000;}



p.big
{font-size: 1.6rem;
 font-family: "ibm plex sans", serif;
  font-weight: 700;

}

.outer
{width:100%;
float: left;
;}

.left
{width: 110px;
  float: left;
}

.right
{width:600px;
  float: left;
}


/*buttons*/
.button {
  
  padding: 10px 20px 10px 20px;
 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size:1.2rem;
  margin: 2px;
  color: #bf0000; 
  border: 1px solid #D8C209;
  border-radius: 25px;
  background-color: #ECD60E;
  font-family: "ClashDisplay";
}

.button:hover {
  background-color: #bf0000;
  color: white;
  cursor: pointer;
}

.buttonsml {
  
  padding: 5px 10px ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: .9rem;
  margin: 2px;
  transition-duration: 0.4s;
  color: #bf0000; 
  border: 1px solid #D8C209;
  border-radius: 25px;
  background-color: #ECD60E;
  font-family: "ClashDisplay";
}

.buttonsml:hover {
  background-color: #bf0000;
  color: white;
  cursor: pointer;
}




/*buttons*/


/*secondary nav*/
#mySidenav a {
  position: fixed;
  
  transition: 0.8s;
  padding: 15px;

  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 5px 0 0 5px ;
  text-align:left;
  font-family: "ClashDisplay" ;
font-size:1.2rem;
font-weight: semibold;
color:#B70000;


}

img.nav
{vertical-align: middle;
  padding:0 20px 0 0;


}

#mySidenav a:hover {
  right: 0;
}

#about {
  top: 30%;
  width:320px;
  right: -270px;
  
}

#blog {
  top: 40%;
    width: 280px;
    right: -230px;
}

#projects {
  top: 50%;
    width: 220px;
    right: -170px;
}

#advisory {
  top: 60%;
    width: 270px;
    right: -220px;
}
/*secondary nav end*/

/* style for scrolling div*/
div.scroll {
            margin: 4px, 4px;
            padding: 4px;
            width: 85vw;
                      overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }

        img.vision
        {max-width:1250px;}

/* end style for scrolling div*/



/*style for services divs*/

#fourth
{float: left;
width:20%;
padding:0 2% 0 2%;

}

#fourth-middle
{float: left;
width:20%;
padding:6% 2% 0 2%;
}

#third
{float: left;
width:29%;
padding:0 2% 0 2%;

}

#third-middle
{float: left;
width:29%;
padding:6% 2% 0 2%;
}


#botnav
{float: left;
width: 70%;
margin: 3% 15% 1% 15%;
border-top: 1px solid #D8C209;
padding: 20px 0 20px 0;
font-size: 1.1rem;
 font-family: "bitter", serif;
}

#botnav h4
{font-family: "ClashDisplay"
color:#B70000;
font-size: 1.3rem;
margin: 0;}

#botnav a, p a
{color:#B70000;
text-decoration: none;}

#botnav a:hover, p a:hover
{color:#B70000;
text-decoration: underline;}

#botnav h5
{font-family: "ClashDisplay"
color:#B70000;
text-transform: uppercase;
font-size: 1rem;
margin: 0 0 1rem 0;}


#botleft
{width:40%;
float: left;
padding:0 10% 0 0;

}

#botright
{width:40%;
float: left;
padding:0 0 0 10%;
  text-align: right;}




/*end style for services divs*/



/*style for loader animation divs*/

@keyframes slideInBottom {
        0% {
          transform: translateY(50%);
        }
        100% {
          transform: translateY(0);
        }
      }

#third, #third-middle, 
{animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation: fadeIn 5s;
        animation-delay: 0s;
        animation-name: slideInBottom;
        animation-timeline: scroll(y);
}








 @keyframes slideInLeft {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }

      #heading-big {
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation: fadeIn 2s;
        animation-delay: 0s;
        animation-name: slideInLeft;
       }



#copy
{ 
    animation: fadeInAnimation ease 5s;
            animation-iteration-count: 1;

            animation-fill-mode: forwards;
            z-index: 10;
            position: relative;

}

  @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }







/*end style for loader animation divs*/


img.small
{max-width: 90%;}

@media (max-width: 600px) {

	/* 633px grid (88x6 col, 21x5 gut; 88+21+88+21+88+21+88+21+88+21+88) */
  #container
  {
   min-height:55vh; height:auto; max-height:auto;


    }

#heading
{margin-top: 10vh;}




    #header2
{width:100%;
padding:0;

}
#heading
{
  min-width:80%; width:80%; max-width:80%;
border-color: #000000;

margin-left: 10%;
padding-top: 8vw;

}

h2
{font-size: 2rem;}


h1
  { text-transform:uppercase;
font-family: "ClashDisplay" ;
font-size:8vw;
font-weight: bold;
color:#B70000;
line-height:8vw ;
padding: 0 0 2vw 0;
  }



  h1.smallred
  {
font-size:5vw;
line-height:1vw ;

    
  }

h1.small
{font-size: 5vw;
 line-height:3vw ; 
 color: #000;
padding: 0 0 2vw 0;}


p.copwht
{color:#000;
text-shadow:none;}


#third, #third-middle, #fourth, #fourth-middle
{float: left;
width:80%;
padding:0 10% 20% 10%;
}

#footer

{width:92%;
padding-left: 4%;
padding-right: 4%;}

#footer-left, #footer-right
{width:100%; }

.fimg
{width: 75vw;}

#footer-right
{
font-size: .8rem;
text-align: center;
padding:40px 0 0 0px;

}








#botnav
{float: left;
width: 80%;
margin: 3% 10% 1% 10%;
border-top: 1px solid #D8C209;
}



#botleft
{width:90%;
float: left;
padding:0 10% 10% 0;


}

#botright
{width:90%;
  border-top: 1px solid #D8C209;
float: left;
padding:10% 10% 0 0;
  text-align: left;



}


#social
{float: left;
text-align: center;
width: 80%;

}

.copyright
{margin:0 0 0 15vw;}

}

#container-serv
  {
   min-height:100vh; height:150vh; max-height:200vh;
} 


}




/* This is the code for font*/