@charset "UTF-8";
/* CSS Document */



header.masthead {
  
    /* background-image: url("../assets/img/mtk_bg_1100.jpg");*/
    background-size: cover;
    opacity: 1;
    color:#35589a;
    /*padding-bottom: 61.5rem;*/
    padding-top: 8rem;
    padding-bottom: 0.5rem;
    
  
}

.masthead-subheading{
   text-shadow: 1px 0.2px 1px #000;
    padding-top: 5%;
    
}
#mainNav {

    background-color: #00020f;
}

header.masthead .masthead-heading{
    font-size: 5rem;
    padding-top: 15%;
    line-height: 6rem;
}

/*.py-4{
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem;
    } 
.min-vh-100{
    min-height: 67vmin;
}*/

.card-M{
    vertical-align: middle!important;
    margin-top: 28%!important;
    
    
    
}
.card{
    border:none!important;
}
#mainNav .navbar-brand img {
  height: 2.7rem;
}


#mainNav.navbar-shrink {
    
    background-color: #00020f;
  }

#mainNav.navbar-shrink .navbar-brand img {
    height: 2.7rem;
  }

iframe{
    min-height: 40rem!important;
}

.portfolio-modal .modal-content{
    padding-top: 3rem;
    padding-bottom: 4rem;
}
.portfolio-modal .close-modal{
    width: 2rem;
   
}

.vpic{
        height: auto;
        width: 95%!important;
        padding-top: 2%;
    padding-left: 5%;
    
        vertical-align:inherit;
        
    }
    
    .qpic{
        height: auto;
        width: 33%!important;
        padding-top: 10px;
        margin: auto;
    padding-left: 3%!important;
        
    }
.dropdown-menu[data-bs-popper]
{
    left:-70px;
}

.sag{
    right: 0px!important;}

button{
    background-color: #f99813!important;
     border-radius: 0.7rem;
    font-family: sans-serif;
    padding: 0.8rem;
}

.vh-100{
    height:80vh;  }

/*
@media (min-width: 992px){
    
    iframe{
        height: 30rem!important;
        min-width: 42rem!important;
    }
    .portfolio-modal .modal-content{
        padding-top: 1rem!important;
        padding-bottom: 0rem!important;
        line-height: 0rem!important;
    }
    
    .btn-xl{
        margin-top: 1rem!important;
    }
    
    .portfolio-modal .close-modal{
        
        width: 1.8rem!important;
    }
}




*/
.name{
    color: #F99813   ;
    font-size: 2.5rem;
}
.layer{
    background-color: transparent!important;
}

@media (max-width: 991px){
    
    
    .vpic{
        height: auto;
        width: 95%!important;
        padding-top: 2%;
    padding-left: 5%;
    
        vertical-align:inherit;
        
    }
    
    .qpic{
        height: auto;
        width: 33%!important;
        padding-top: 10px;
        margin: auto;
    padding-left: 3%!important;
        
    }
    
    iframe{
        height: 38rem!important;
        min-width: 42rem!important;
    }
    .portfolio-modal .modal-content{
        padding-top: 2rem;
        padding-bottom: 0rem;
        line-height: 0rem;
    }
    
    .btn-xl{
        margin-top: 1rem!important;
    }
    .vh-100{
        height:80vh;
}

      }
@media (max-width: 810px){
    
    
   /* header.masthead{
        background-image: url("../assets/img/mtk_bg_768.jpg");
        background: cover;
        
    }
    #mainNav.navbar-shrink .navbar-brand img {
        height: 4rem;
    }
    #mainNav {

    background-color: #fc9918;
}
    */
.vpic{
        height: auto;
        width: 45%!important;
        padding: 3% 0 3% 4%;
    
    
        vertical-align:inherit;
        
    }
    .qpic{
        height: auto;
        width: 49%!important;
        margin: auto;
        padding: 3% 0 3% 4%;
    }
    
    iframe{
        height: 29rem!important;
        min-width: 31rem!important;
    }
    .portfolio-modal .modal-content{
        padding-top: 4rem;
        padding-bottom: 1rem;
        line-height: 0rem;
    }
    
    .portfolio-modal .close-modal{
        
        width: 1.8rem!important;
    }
    .btn-xl{
        margin-top: 1rem!important;
    }
    
    h1{
        font-size: 20px;
    }
    
    h3{
        font-size: 18px;
    }
    h5{
        font-size: 15px;
    }
    .card-M{
        margin-top: 7px!important;
        
    }
    .card{
        border: none;
        
    }
    
    .card-M{
        padding-top: 40%;
    }
    .vh-100{
        height:80vh;
}
      }
@media (max-width: 768px) {
  header.masthead {
   /* padding-top: 53rem;
    padding-bottom: 12.5rem;*/
    background-size: cover;
  }
  header.masthead .masthead-subheading {
    font-size: 2.25rem;
    font-style: italic;
    line-height: 2.25rem;
    margin-bottom: 2rem;
  }
  header.masthead .masthead-heading {
    font-size: 3.5rem;
    font-weight: 700;
      text-shadow: -1px 0 black, 0 2px black, 1px 0 black, 0 -1px black;
    line-height: 4.5rem;
    margin-bottom: 4rem;
  }
    section#contact{
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
    
    .vh-100{
        height:80vh;
     }
        }
@media (max-width: 576px){
 
    .dropdown-menu.show{
        margin-right: 1rem;
    }
    
.vpic{
        height: auto;
        width: 56%!important;
        margin: auto;
        padding: 3% 0 3% 4%;
        
    }
    
    .qpic{
        height: auto;
        width: 58%!important;
        padding-top: 10px;
        margin: auto;
    padding-left: 3%!important;
        
    }
    header.masthead{
       /* background-image: url("../assets/img/mtk_bg_720.jpg");*/
        background: cover;
        /*padding-top: 19rem;
        padding-bottom: 35rem;*/
        
    }
    header.masthead .masthead-heading{
    font-size: 3rem;
    padding-top: 5%;
    line-height: 4rem;
}
    #mainNav.navbar-shrink .navbar-brand img {
    height: 2.4rem;
        padding-left: 2rem;
  }
    
    .portfolio-modal .modal-content{
        padding-top: 2rem;
        padding-bottom: 1rem;
        line-height: 0rem;
    }
    
    iframe{
        height: 32rem!important;
        min-width: 19rem!important;
    }
    .portfolio-modal .modal-content h2, .portfolio-modal .modal-content .h2{
        
        font-size: 1.7rem;
        line-height: 2rem;
    }
    .min-vh-100{
        
        min-height: 120!important;
    }
    .btn-xl{
        margin-top: 1rem;
    }
    
    .portfolio-modal .close-modal{
        width: 5px;
    }
    h1{
        font-size: 20px;
    }
    
    h3{
        font-size: 18px;
    }
    h5{
        font-size: 15px;
    }
    .card-M{
        margin-top: 7px!important;
        padding-top: 1%;
        
    }
    .card{
        border: none;
    }
    .vh-100{
        height:80vh;
    }

}