/*------ SECTION 1A - INDEX & ABOUT US PAGE - GENERAL CONTAINER ------*/
*{
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}



html,body{
max-width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}

main{
width:100vw;
height:100vh;
background-color: #fff;
}



/*--- SECTION 1B - VERTICAL LINE & HORIZONTAL LINE DIVIDERS ---*/

.vertical-line{
height:200px;
width:4px;
background-color: #fff;
display:inline-block;
vertical-align:top;
}
  
.horizontal-line{
width:80%;
height:2px;
background:#b1b04e;
margin:0 auto;
}
  
/*--- SECTION 1C - TRADEMARK SYMBOL WHITE & NAVY ---*/
.sup-trademark-wht{
color:#fff;
font-size:10px;
}
.sup-trademark-navy{
color:navy;
font-size:10px;
}
  

/*---- SECTION 8 - PARAGRAPH CONTAINER ----*/
.para-cont {
  width:80%;
  text-align:center;
  margin:0 auto;
  color:#11244c;
  }
  h1{
  font-size:24px;
  font-weight:800;
  background-color: none;
  color:#11244c;
  }
  h3{
  font-size:18px;
  line-height:30px;
  font-weight:600;
  color:#11244c;
  }

  @media (max-width: 400px){
    h1{
    font-size:20px;
    font-weight:800;
    }
  }




  
/*--- CSS COLORS CONTAINER -----
DARK NAVY - background:#11244c;
OLIVE GREEN - background:#b1b04e;
LIME GREEN - background:#a3cb88;

transition:1s;
border-radius:16px;
box-shadow:6px 6px 10px #aeaeae;
}
.testimony-box-one:hover{
transform:scale(1.3);
z-index:2;
}

border-radius:10px;
box-shadow:6px 6px 6px #c1c1c1;
transition:0.3s;
}
.webdev-box-image:hover{
opacity:0.5;
}
----------------------*/



















/*---- SECTION 10A - HEADER / NAVBAR CONTAINER 
----- SECTION 10B - SIDEBAR CONTAINER / MEDIA QUERY ----*/

nav{
background-color: #11244c;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
z-index:100;
}
.nav-logo{
height:26px;
margin-right: auto;
}

@media (max-width: 400px){
  .nav-logo{
    height:26px;
    width:130px;
  }
}

nav ul{
width:80%;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
margin:0 auto;
}

nav li{
height:50px;
}

nav a{
height:100%;
font-size:14px;
font-weight: bold;
padding: 0px 20px;
text-decoration: none;
display: flex;
align-items: center;
color:#fff;
}
nav a:hover{
color: #cfcc17;
}
nav li:first-child{
margin-right:auto;
}

.menu-open{
height:16px;
opacity: 0.9;
margin-left:30px;
}
.menu-close{
height:20px;
opacity: 0.9;
}





/*------ SECTION 10C - SIDEBAR CONTAINER ------*/

.sidebar{
position:fixed;
top:0px;
right:0px;
height:100vh;
width:240px;
z-index: 100;
background-color: rgba(17, 36, 76, 0.8);
backdrop-filter: blur(10px);
box-shadow: -10 0 10px rgba(0, 0, 0, 0.1);
display:block;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.sidebar li{
  width:100%;
  padding:0px 0px 0px 20px;/*LEFT SIDE RESIZING ON SIDEBAR*/
}
.sidebar a{
  width:100%;
}
.menu-button{
  display: none;
}



.sidebar-info{
width:100%;
font-size:16px;
color:#fff;
background-color: rgba(17, 36, 76, 0.8);
margin-top:14px;
padding:10px 30px 10px 30px;
color:#fff;
display:none;
line-height: 20px;
word-spacing:2px;
}




/*------ SECTION 10D - MEDIA QUERY CONTAINER ------*/

@media (min-width: 800px){
body{
width:100%;
}
}


@media (max-width: 800px){
.hideOnMobile{
  display: none;
}
.menu-button{
  display: block;
}
}

@media (max-width: 500px){
  body{
    width:100%;
  }
}

@media (max-width: 400px){
.sidebar{
width: 50%;
}
}

@media (max-width: 400px){
.sidebar-info{
  display:block;
}
.sidebar li{
  width:100%;
  padding:0px 0px 0px 10px;
}

.sidebar-info{
 padding:10px 30px 10px 26px;
}
}


/*------ SECTION 14 - BANNER CONTAINER ------*/

.banner-container{
  width:100%;
}
.banner{
width:100%;
margin: 0 auto;
display:block;
}




/*--- SECTION 16 - NAVY INFO BAR CONTAINER (BELOW BANNER) ---*/
.info-bar-container p{
font-size:14px;
font-weight:600;
color:#fff;
background:#11244c;
text-align: center;
padding:12px;
letter-spacing:1px;
margin-top:-4px;
}

.span-sect-two-bar-contact{
font-size:16px;
font-weight:bold;
color: #cfcc17;
transition:0.3s;
}
  
.span-sect-two-bar-contact:hover{
font-size:16px;
font-weight:bold;
color: #fff;
transform:scale(1.0);
}



/*-------- SECTION 18 / 19 - INTRO PARAGRAPH CONTAINER --------*/




/*-------- SECTION 20 - APPAREL / GRAPHIC DESIGN VIDEO ON YOUTUBE --------*/
.app-graph-des-video-container{
width:80%;
margin:0px auto;
background:none;
text-align:center;
}

.app-graph-des-video a{
margin:0px auto;
}

.button-app-graph-des-video{
padding:14px 80px;
font-size:18px;
font-weight:bold;
border-radius:10px;
background:#11244c;
border:none;
color:#fff;
transition:1s;
box-shadow: 3px 3px 6px #aeaeae;
}

.button-app-graph-des-video:hover{
background-color:#b1b04e;
color:#11244c;
transform:scale(1.2);
}









/*----- SECTION 30 - GRAPHIC PROJECT CAROUSEL INDEX PAGE ----*/ 

.graphic-project-carousel-cont{
  width:100%;
 
  background-color:#fff;
  margin:0 auto;
  }
  .graphic-project-carousel-inner-cont{
  width:80%;
  
  background:none;
  margin:0 auto;
  }

  
  @keyframes graphic-projects {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-100%);
  }
  }
  
  .graphic-projects{
  overflow:hidden;
  padding:6px 10px;
  background-color:#fff;
  white-space:nowrap;
  position:relative;
  }
  
  .graphic-projects:before,
  .graphic-projects:after{
  position:absolute;
  top:0;
  width:150px;
  height:100%;
  content:"";
  z-index:2;
  }
  
  .graphic-projects:before{
  left:0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
  }
  
  .graphic-projects:after{
  right:0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  }
  
  .graphic-projects:hover .graphic-projects-slide{
  animation-play-state: paused;
  }
  
  .graphic-projects-slide{
  display:inline-block;
  animation: 20s slide infinite linear;
  }
  
  .graphic-projects-slide img{
  height:70px;
  margin:0 14px;
  }
  
  
  




 /*---- SECTION 36 - CLIENT REFERENCES - GRID -----*/
  
.client-reference-container{
width:100%;
margin:0 auto;
background-color:none;
text-align: center;
}


 /*----  CLIENT REFERENCES BOX - 1 2 3 4 -----*/
.client-box{
width:260px;
display: inline-block;
background-color:#f1f1f1;
margin:20px 30px 20px 30px;

border-radius:8px;
padding: 10px 8px;
transition:1s;
border-radius: 8px;
box-shadow: 6px 6px 10px #d3d1d1;
}
.client-box:hover{
  transform:scale(1.4);
  z-index:2;
 }

 .client-picture-container{
  width:64px;
  display: inline-block;
  vertical-align: top;
 }


.client-picture{
width:60px;
padding:2px;
background-color: #fff;
border:solid 2px #b1b04e;
border-radius:30px;
}

.client-info-container{
display:inline-block;
margin-left:10px;
}
.client-name,
.client-rating{
font-weight:bold;
font-size:16px;
}
.client-comment{
font-size:12px; 
}
 





/*----- SECTION 50 - ABOUT US PAGE BEGINS ----*/


/*--- SECTION 60 - ARTWISE500 - DESIGN CATEGORIES ---*/

.design-category-container{
background-color: #fff;
width:100%;
margin:0 auto;
text-align:center;
}

.design-category-cont{
background-color: #fff;
width:80%;
margin:0 auto;
text-align:center;
}

.design-category-box{
background:#f1f1f1;
width:260px;
display:inline-block;

margin:20px 20px 20px 20px;
text-align:center;
border-radius: 8px;
padding:16px 0;
font-size:15px;
line-height:20px;
font-weight:600;
color:#11244c;

transition:1s;
border-radius: 16px;
box-shadow: 6px 6px 10px #aeaeae;
}

.design-category-box:hover{
transform:scale(1.3);
z-index:2;
}

@media (max-width: 400px){
  .design-category-box{
  margin:20px 0px 20px 0px;
  }
}





/*---- SECTION S64 - ARTWISE500 - DESIGN PORTFOLIO CATEGORIES ---*/
/*---- SECTION S64 - PORTFOLIO - PROJECT CAROUSEL ---*/
.logo-carousel-cont{
  width:100%;
  height:auto;
  background:#fff;
  text-align:center;
  }
  
  .logo-carousel-cont-inner{
  width:80%;
  height:auto 0;
  background:#fff;
  margin:0 auto;
  }
  
  .logos-container{
  background:#f2f2f2;
  }
  
  @keyframes slide {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-100%);
  }
  }
  
  .logos{
  overflow:hidden;
  padding:10px 0;
  background:#fff;
  white-space: nowrap;
  position:relative;
  }
  
  .logos:before,
  .logos:after{
  position:absolute;
  top:0;
  width:130px;
  height:100%;
  content: "";
  z-index:2;
  }
  
  .logos:before{
  left:0;
  background:linear-gradient(to left, rgba(255, 355, 255, 0), #fff);
  }
  
  .logos:after{
  right:0;
  background:linear-gradient(to right, rgba(255, 355, 255, 0), #fff);
  }
  
  .logos:hover .logos-slide{
  animation-play-state: paused;
  }
  
  .logos-slide{
  display:inline-block;
  animation: 30s slide infinite linear;
  }
  
  .logos-slide img{
  width:240px;
  height:240px;
  margin:0 14px;
  border-radius:10px;
  box-shadow:6px 6px 6px #c1c1c1; 
  }
  
  
  

/*------ HELPFUL CODES ------------------- 
CSS COLORS CONTAINER ---------------------
DARK NAVY - background:#11244c;
OLIVE GREEN - background:#b1b04e;
LIME GREEN - background:#a3cb88;
-----------------------------------------*/

/*------ HOVER TO ENLARGE IMAGE -----------
transition: 0.5s ease;
}
.banner:hover{
transform: scale(1.2);
}-----------------------------------------*/







/*------ SECTION 290 - BAR ABOVE FOOTER ------*/

.container-bar-above-footer{
  width:100%;
  margin:0 auto;
  background:#b1b04e;
  }
  .container-bar{
  background:#b1b04e;
  height:0 auto;
  text-align:center;
  }
  
  .bar-paragraph{
  width:80%;
  font-size:18px;
  color:#11244c;
  font-weight:bold;
  padding-top:12px;
  padding-bottom:7px;
  margin:0 auto;
  }

/*----- SECTION 300 - FOOTER ----*/

footer{
width:100%;
background-color: none;
text-align: center;
}

.footer-paragraph-header{
  width:80%;
  font-size:22px;
  font-weight:bold;
  color:#fff;
  margin:20px auto;
  padding:0px 0px 20px 0px;
  }

/*---- SECTION 300 - FOOTER NAVBAR BEGINS ----*/

.footer-navigation-bar-container{
  width:100%;
  background-color: none;
  
}

.footer-navigation-bar{
  width:80%;
  margin:0px auto;
  background-color: none;
  }
  
  .footer-navigation-bar ul{
  display:flex;
  justify-content:space-around;
  }
  
  .footer-navigation-bar li{
  list-style:none;
  margin:0px auto;
  }
  
  .footer-navigation-bar a{
  color:#fff;
  text-decoration:none;
  letter-spacing:2px;
  font-weight:bold;
  font-size:14px;
  }
  
  .footer-navigation-bar a:hover{
  color:#b1b04e;
  }

/*------ SECTION 300 - FOOTER NAVIGATION AT MEDIA QUERY -----*/
@media (max-width: 800px){
.footer-navigation-bar{
background-color: none;
display:block;
margin-top:-30px;

}

.footer-navigation-bar ul{
  width:40%;
  margin:0 auto;
display: inline-block;

}
.footer-navigation-bar a{
display:flex;
justify-content: center;
align-items: center;
margin:20px auto;
}
}




/*------ SECTION 300 - FOOTER CONTAINER -----*/
.footer-box-container{
width:0px auto;
}
  
/*------ SECTION 300 - FOOTER BOX ONE -----*/

.footer-boxone{
width:300px;
background-color:none;
display:inline-block;
vertical-align:top;
margin:14px 40px;
}
  
  .footer-para p{
  width:70%;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  padding:10px 0px 0px 0px;
  display: block;
  margin:6px auto;
  text-align:center;
  }
  

.footer-logo{
width:280px;
display: block;
margin:auto;
text-align:center;
cursor: pointer;
border-radius:10px;
transition:1s;
}


    .btp-footer-boxone{
      color:#fff;
      font-size:12px;
      font-weight:bold;
      margin-top:6px;
      }
      
      .footer-logo:hover{
       transform:scale(1.2);
       z-index:2;
      }

      @media (max-width: 800px){
      .footer-boxone{
      margin:30px auto;
      display:block;
      width:auto;
      }
      }

      @media (max-width: 400px){
      .footer-logo{
      width:220px;
      }
      }


     

  
  /*-----  SECTION 300 - FOOTER BOX TWO -----*/
  
  .box-two-para-description{
  width:70%;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  padding:10px 0px 0px 0px;
  display: block;
  margin:auto;
  text-align:center;
  }
  
  .span-two-para-contact{
  font-size:16px;
  font-weight:bold;
  color:#fff;
  transition:0.3s;
  }
  
  .span-two-para-contact:hover{
  font-size:16px;
  font-weight:bold;
  color:#b1b04e;
  transform:scale(1.0);
  z-index:2;
  }
  
  
  /*----- SECTION 300 - FOOTER BOX THREE ------*/
  
  .boxone-para-description{
  color:#fff;
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
  }
  
  .social-media{
  width:34px;
  margin:2px 6px;
  cursor:pointer;
  transition:0.3s;
  }
  
  .social-media:hover{
  opacity:0.5;
  }
  
  .copy-notice{
  color:#fff;
  font-size:14px;
  padding:0px 28px 0px 28px;
  }