@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:wght@200;300;400;500;600;700&display=swap');
/* 
font-family: 'Oswald', sans-serif; --> Main Titles
font-family: 'Poppins', sans-serif --> P tag
*/
::selection {
    background-color: #ff6863;
    color: #000;
}

#particles-js{height: 100vh;}

.home_ban{text-align:center; padding:0 7%; margin:25vh 5%;  z-index:1; position: absolute; width: 90%}
.home_ban h1{font-size:5rem; font-weight:600; color:#212121; letter-spacing:2px; font-family: 'Oswald', sans-serif; }
.home_ban p{font-size:1.8rem; font-weight:400; font-family: 'Poppins', sans-serif;}
.comp_feat div{display:none; font-size:1.8rem; font-family: 'Poppins', sans-serif; text-transform:uppercase; font-weight:500; color:#ff0901;}

@media screen and (max-device-width: 800px) {
#particles-js{height: 70vh; display:none;}
.home_ban{position:relative;}
}

.a1{font-family: 'Oswald', sans-serif; color: #000000; font-size: 2.4rem;}
.a1 span{color: #ff0901;}
.a2{font-family: 'Poppins', sans-serif; color: #4d4d4d; font-size: 1rem; text-decoration: none;}
.a3{font-family: 'Oswald', sans-serif; color: #ffffff; font-size: 2rem;}
.a4{font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 500; color: #424242; text-align: left;}
.a5{font-family: 'Oswald', sans-serif; color: #000000; font-size: 3rem; font-weight:400;}
.a5 span{font-weight: 600; display: block;}
.a6{font-family: 'Oswald', sans-serif; color: #000000; font-size: 20px; font-weight:400;}
.a7{font-family: 'Oswald', sans-serif; color: #000000; font-size: 16px; font-weight:400;}
.a8{font-family: 'Poppins', sans-serif; color: #737373; font-size: 14px;}
.a9{font-family: 'Oswald', sans-serif; color: #000000; font-size: 20px; font-weight:300; display: block;}
.a10{font-family: 'Poppins', sans-serif; color: #ffffff; font-size: 16px; text-decoration: none;}
.a11{font-family: 'Oswald', sans-serif; color: #000000; font-size: 1.5rem; font-weight:400;}
.a11>a{color:#ff0901; text-decoration:none;}

.title1{font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 400; color: #59585b; text-align: center;}
.title1 span{font-family: 'Poppins', sans-serif; display: block; font-size: 1.8rem; word-spacing: 2; padding: 5px 0; color: #ff0901;}
.title2{font-family: 'Oswald', sans-serif; font-size: 2.2rem; font-weight: 500; color: #59585b; text-align: left;}
.title2 span{font-family: 'Poppins', sans-serif; display: block; font-size: 14px; font-weight: 600; text-transform: uppercase; padding: 5px 0; color: #ff0901;}

.link1{background-color: #F4B433; padding: 15px 25px; margin-top: 15px; display: inline-block; text-transform: uppercase; transition: all 0.3s ease-in-out; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px; color: #000; text-decoration: none; border-radius: 4px;}
.link1:hover{background-color: #f5bb47; color: #000;}
.link2{transition: all 0.3s ease-in-out; font-weight: 600; font-size: 14px; color: #ff0901; text-decoration: none;}
.link2:hover{text-decoration: underline; color: #ff0901;}
.link2 span{color: #000000;}

.bg1{background-image: url(https://studiokrew.com/img/bg-rainy.webp); background-position: center; background-size: cover; height: auto; overflow: hidden; position: sticky;}
.bg2{padding: 12% 0; color: #fff; background:rgb(0,0,0,0.4);}
.bg3{height: auto; overflow: hidden; margin:5% 0;}
.bg4{margin-bottom: 10px;}

.main-nav{background-color:rgba(255,255,255,.1); z-index:10; position: absolute; width: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.main-nav-dark{background-color:rgba(0,0,0,.7); position: fixed; width: 100%; color: #ffffff; z-index: 2; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.main-nav-dark .navbar-toggler{background-color: rgba(255,255,255,.8);}
.main-nav a{font-family: 'Oswald', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing: 1px;}
.main-nav a.active{font-family: 'Oswald', sans-serif; color: #000000; font-weight:700; text-transform:uppercase;}
.main-nav a.dropdown-item{font-family: 'Oswald', sans-serif; color: #000000; font-weight:400; text-transform:uppercase;}
.main-nav-dark a{font-family: 'Oswald', sans-serif; color: #ffffff; font-weight:400; text-transform:uppercase; letter-spacing: 1px;transition: all 0.3s ease-in-out;}
.main-nav-dark a:hover{color:#ff0901;}
.main-nav-dark a.active{font-family: 'Oswald', sans-serif; color: #ff0901 !important; font-weight:700; text-transform:uppercase;}
.main-nav-dark a.dropdown-item{font-family: 'Oswald', sans-serif; color: #000000; font-weight:400; text-transform:uppercase;}
@media (min-width: 992px){
.navbar-expand-lg .navbar-collapse {position: absolute; right: 15px;}
}
@media screen and (max-device-width: 414px) {
   .main-nav a{font-size:1.4rem; margin: 10px 0;} 
}

.client-slider{height: auto; width: 100%;}
.client-slider .info{background-color: #ff6863; overflow: hidden;}
.client-slider .info div{margin: 15% 45px; color: #ffffff;}
.client-slider .logo{background-color: #f5f6fa; padding: 45px 0; overflow: hidden;}

.service-grid{height: auto; overflow: hidden; padding-top: 5px;}
.service-grid a{color:#59585b !important; font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 500; text-decoration: none; transition: all 0.3s ease-in-out;}
.service-grid a:hover{color:#ff0901 !important; transition: all 0.3s ease-in-out;}
.service-grid p{font-family: 'Poppins', sans-serif; color: #4d4d4d; font-size:14px;}
.service-grid p a{font-size:14px; text-decoration:none; color:#ff0901;}
.service-grid img{height: 70px; margin-bottom: 15px; display: block;}

.portfolio-grid-nav{text-align: center;}
.portfolio-grid-nav .nav-link.active{border:none; border-bottom: 4px solid #ff0901 !important; border:none; color: #ff0901;}
.portfolio-grid-nav .nav-link:hover{border:none; border-bottom: 4px solid #dee2e6 !important; border:none;}
.portfolio-grid-nav .nav-link{ border-bottom: 4px solid transparent !important; transition: all 0.3s ease-in-out; color: #000000; font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;}
.portfolio-grid{width: 100%; height: auto; padding: 25px 0;}
.portfolio-grid .portfolio-grid-container{width: 25%; height: 225px; float: left; background-repeat: no-repeat; background-position: center; background-size: cover;}
.portfolio-grid .portfolio-grid-container a{display: none; width: 100%; height: 100%; color: #ffffff; font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.1; padding: 150px 0 20px 20px; text-decoration: none; transition: all 2s ease-in-out; text-shadow: 0px 2px 4px rgba(0,0,0,0.3);}
.portfolio-grid .portfolio-grid-container:hover a{display:block; background-color: rgba(0,0,0,.4);}

@media screen and (max-device-width: 414px) {
.portfolio-grid .portfolio-grid-container{width: 100%; margin-bottom: 15px;}
.portfolio-grid .portfolio-grid-container a{display:block; background-color: rgba(0,0,0,.3); font-size: 28px;}
}
@media screen and (min-device-width: 415px) and (max-device-width: 820px) {
.portfolio-grid .portfolio-grid-container{width: 50%; margin-bottom: 15px;}
.portfolio-grid .portfolio-grid-container a{display:block; background-color: rgba(0,0,0,.3); font-size: 2.2rem;}
}
@media screen and (min-device-width: 821px) and (max-device-width: 1008px) {
.portfolio-grid .portfolio-grid-container{width: 33.33%;}
	}

.footer{background-image: url(https://studiokrew.com/img/hero-bg.webp); background-position: center; background-size: cover; background-repeat: no-repeat;}
.footer > div{padding: 5% 0; background:rgba(0,0,0,.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);}
.footer .list-unstyled li{font-size: 14px; font-family: 'Oswald', sans-serif; color: #ffffff; font-weight: 600; line-height: 1.4;}
.footer .list-unstyled li:first-child{margin:10px 0;}
.footer .list-unstyled li > a{font-size: 16px; font-family: 'Poppins', sans-serif; color: rgb(255,255,255,1); font-weight: 400; transition: all 0.1s ease-in-out; text-decoration: none;}
.footer .list-unstyled li > a:hover{color:rgb(255,255,255,1);}
.footer .list-unstyled:hover li > a{color:rgb(255,255,255,.7);}
.footer .list-unstyled:hover li > a:hover{color:rgb(255,255,255,1);}

.card-logo{background-position: center; background-size: cover; background-repeat: no-repeat; height: 100px; width: 60%;}

.bg404 {background-image: url(https://studiokrew.com/img/404.png);background-repeat: repeat-x; padding: 50px 0; margin: 10% 0; height: 233px;overflow: hidden;text-align: center;}

.contact-quick-modal{border-radius: 0px;}
.contact-quick-modal .modal-body{padding: 0px; overflow: hidden; margin: 0; flex-wrap: nowrap;}
.contact-quick-modal .modal-body .modal-image{background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%;}
.contact-quick-modal .modal-body .modal-image .overlay{background-color: rgb(0,0,0,0.4); background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 100%); width: 100%; height: 100%; padding:10% 3rem 20% 3rem;}
.contact-quick-modal .modal-body .modal-image h3{font-family: 'Oswald', sans-serif; color: #ffffff; font-weight: 600; font-size: 3.2rem;}
.contact-quick-modal .modal-body .modal-image p{font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 400; font-size: 1.8rem; margin-top: 2rem;}
.contact-quick-modal .modal-body .modal-form{padding: 3rem 2rem; height: auto;}
.contact-quick-modal .modal-body .modal-form h3{font-family: 'Oswald', sans-serif; color: #000000; font-weight: 600; font-size: 2.2rem;}
.contact-quick-modal .modal-footer{background-color: rgba(0,0,0,1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 0px; border:none; color:#ffffff; display: block;}
.contact-quick-modal .modal-footer h6{font-family: 'Oswald', sans-serif; color: #ffffff; font-weight: 600; font-size: 2.2rem; text-align: center;}
.contact-quick-modal .modal-footer h6 span{display:block; font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 400; font-size: 1.2rem;}
.contact-quick-modal .modal-footer button{display: none;}
@media screen and (max-device-width: 820px) {
.contact-quick-modal .modal-footer button{display: block;}
}

.typed-cursor{opacity: 1; font-weight: 100; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite;
}
@-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}