/*Less than 576px*/

@font-face {
  font-family: poppinsExtralight;
  src: url("../fonts/Poppins/Poppins-ExtraLight.ttf");
}

@font-face {
  font-family: poppinsLight;
  src: url("../fonts/Poppins/Poppins-Light.ttf");
}

@font-face {
  font-family: poppinsRegular;
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
}

@font-face {
  font-family: poppinsMedium;
  src: url("../fonts/Poppins/Poppins-Medium.ttf");
}

html{
	font-size: 12px !important;
	--scroll-behavior: smooth;
  	scroll-behavior: smooth;
}

body{
	font-family: poppinsLight !important;
	background: #222222 !important;
}

button:focus{
	outline: none !important;
}

/*Navbar*/

.navbarStyle{
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}

.navbar-toggler{
	padding: 0 !important;
}

.overallPaddingLR{
	padding: .5rem 3rem !important;
}

.navLinkStyle{
	color: #cccccc;
	text-decoration: none !important;
}

.navLinkStyle:hover{
	color: #1ADCBC;
}

.navLinkStyle:active{
	color: #1ADCBC;
	font-family: poppinsRegular;
}

.behanceLogoColor{
	color: #1A67FC;	
}

.socialLogoNavbar{
	font-size: 1.4rem;
}

.dribbbleLogoColor{
	color: #EA5E93;
}

.navbarActiveOption{
	color: #1ADCBC;
	font-family: poppinsMedium;
}

/*Filter navbar*/

.filterNavbarStyle{
	background: #080808f0;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	font-family: poppinsLight;
	font-size: .8rem;
	padding-top: 1.8rem;
	padding-bottom: 1.8rem;
}

.filterNavLinkStyle{
	margin-left: .5rem;
	margin-right: .5rem; 
	text-align: center;
	width: 12rem;
	background: #00000000;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border: 1px solid #c4c4c4;
	border-radius: 5rem;
	color: #c4c4c4;
	text-decoration: none;
	padding-top: .7rem !important;
	padding-bottom: .7rem !important;
	cursor: pointer;
}

.filterNavLinkStyle:hover{
	color: #000000;
	background: #c4c4c4;
}

.filterNavbarActiveOption{
	color: #000000;
	background: #c4c4c4;
	font-family: poppinsMedium;
}

#filterNavbarSelectedOption, #filterNavbarSelectedOptionCV{
	font-size: 1rem;
	padding-top: .9rem !important;
	padding-bottom: .9rem !important;
}

#filterNavbarChevronStyle{
	color: #000000;
	font-size: .8rem;
}

/*Toast message*/

.toast{
    position: fixed;
    bottom: 0;
    left: 16px;
    z-index: 10;
}

.toast-header{
    background-color: #c1e7ff !important;
    font-family: poppinsRegular !important;
    color: #000000 !important;
}

.toast-body{
    background-color: #FCFCFC !important;
    font-family: poppinsRegular !important;
    color: #464646 !important;
    border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px);
}

/*Cards*/

#viewAllCards, #viewUXCaseStudies, #viewWebDesigns, #viewAppDesigns, #viewMicrointeractions, #viewIntroduction{
	padding-top: 14rem !important;
}

.card-columns {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
}

.card-columns .card{
	margin-top: .2rem;
	margin-bottom: 1.25rem !important;
	margin-right: .2rem;
	margin-left: .2rem;
}

.card{
	background-color: #080808 !important;
	border: none !important;
	box-shadow: 5px 5px 20px #0000004D;
}

.card-title{
	font-family: poppinsMedium;
	font-size: 1.5rem;
	color: #ffffff;
}

.card-subtitle{
	font-size: 1.2rem;
	color: #FF7E7E;
}

.card-text{
	font-size: 1rem;
	color: #cccccc;
	font-family: poppinsExtralight;
}

.viewBtn{
	border-radius: 5rem !important;
	background-color: #00B799 !important;
	font-family: poppinsMedium !important;
	font-size: 1rem !important;
	color: #ffffff !important;
	padding: .5rem 1.85rem !important;
}

.viewBtn:hover{
	background: linear-gradient(150deg, #00B799, #1ADCBC, #FF7E7E, #FF5252);
	background-size: 400% 400%;
	-webkit-animation: gradientAnimation 3s ease infinite;
    -moz-animation: gradientAnimation 3s ease infinite;
    -o-animation: gradientAnimation 3s ease infinite;
    animation: gradientAnimation 3s ease infinite;
}

.card-footer{
	background: linear-gradient(90deg, #00B799, #1ADCBC, #FF7E7E, #FF5252);
	padding: .25rem !important;
	background-size: 400% 400%;
	-webkit-animation: gradientAnimation 5s ease infinite;
    -moz-animation: gradientAnimation 5s ease infinite;
    -o-animation: gradientAnimation 5s ease infinite;
    animation: gradientAnimation 5s ease infinite;
}


/*Footer*/

.footer{
	background-color: #000000;
	color: #ffffff;
}

.footer h5{
	font-family: poppinsMedium;
	font-size: 1.4rem;
}

#footerContentLeft a{
	font-family: poppinsExtralight;
	color: #c4c4c4 !important;
	font-size: .8rem;
	text-decoration: none;
}

#footerContentLeft a:hover{
	color: #1ADCBC !important;
}

#footerContentMiddle{
	font-size: 1.2rem;
}

.instaLogoColor{
	background: linear-gradient(47deg, #FEDA75 0%, #FA7E1E 26%, #D62976 53%, #962FBF 77%, #4F5BD5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.linkedinLogoColor{
	color: #0088CA;
}

#footerContentRight{
	font-family: poppinsExtralight;
	color: #c4c4c4 !important;
	font-size: .7rem;
}


/*CV*/

.borderGradient{
	background: linear-gradient(150deg, #00B799, #1ADCBC, #FF7E7E, #FF5252);
	box-shadow: 5px 5px 20px #0000004D;
	background-size: 400% 400%;
	-webkit-animation: gradientAnimation 5s ease infinite;
    -moz-animation: gradientAnimation 5s ease infinite;
    -o-animation: gradientAnimation 5s ease infinite;
    animation: gradientAnimation 5s ease infinite;
}

.cvTextBodyBg{
	margin-left: .3rem;
	background: #080808;
}

.cvTextHeadingIcons{
	width: 2rem;
}

.cvTextHeadingText{
	color: #1ADCBC;
	font-family: poppinsMedium;
	font-size: 1.25rem;
}

.cvTextSubheading{
	font-family: poppinsRegular;
	color: #ffffff;
	font-size: 1.1rem;
}

.cvTextDesignation{
	font-family: poppinsExtralight;
	color: #c4c4c4;
	font-size: 1rem;
	border-top: .2rem solid #1ADCBC;
}

.cvTextSocialText{
	font-family: poppinsExtralight;
	color: #c4c4c4;
	font-size: .9rem;
}

.cvTextBodyText{
	color: #c4c4c4;
	font-size: 1rem;
}

.cvDarkBg{
	background: #080808;
	box-shadow: 5px 5px 20px #0000004D;
}

.p4rem{
	padding: 3rem !important;
}

#myJourney .p4rem, #captured .p4rem{
    padding: 2rem !important;
}

.cvSkillsIcons{
	height: 1.8rem;
}

.cvSeekIcons{
	width: 9rem;
}

.cvCoralText{
	color: #FF7E7E;
	font-size: 1rem;
}

.cvCoralCircle{
	color: #FF7E7E;
	font-size: .5rem;
}

.cvYearLeftMargin{
	margin-left: 0;
}

/*Contact*/

#contactGradientBg{
	margin: 7rem 2rem 0 2rem;
	background: linear-gradient(120deg, #00B799, #1ADCBC, #FF7E7E, #FF5252);
	padding: .6rem;
	background-size: 400% 400%;
	-webkit-animation: gradientAnimation 6s ease infinite;
    -moz-animation: gradientAnimation 6s ease infinite;
    -o-animation: gradientAnimation 6s ease infinite;
    animation: gradientAnimation 6s ease infinite;
}

@-webkit-keyframes gradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes gradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradientAnimation { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.remoteWorkImg{
	box-shadow: 5px 5px 20px #0000004D;
	z-index: 10;
	background-image: none;
}

.marginTop5rem{
	margin-top: 5rem;
}

.contactRightSec{
	padding: 3rem 2rem !important;
}

.contactRightSec h5{
	color: #ffffff;
	font-family: poppinsMedium;
	font-size: 1.3rem;
	line-height: 1.4;
}

.contactInput{
  	background: #222222;
}

.contactRightSec input, .contactRightSec textarea{
	outline: none;
  	border: none;
  	background: #222222;
  	color: #ffffff;
}

.contactRightSec label{
	font-size: .8rem;
	color: #8c8c8c;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #585858;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #585858;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #585858;
}

/*Who am I*/

#myIntro{
	margin-top: 8rem; 
}

#wmiIntroHey{
	font-family: poppinsMedium;
	font-size: 1.4rem;
	color: #ffffff;
}

.wmiHeadings{
	font-family: poppinsRegular;
	font-size: 1.2rem;
	color: #ffffff;
}

.wmiText{
	color: #c4c4c4;
	font-size: 1rem;
}

.deepikaImg{
	background-image: none;
}

.wmiIntroRSPadding{
	padding: 3rem !important;
}

.wmiIntroTextPadding{
	padding: 3rem 2rem !important;
}

div:focus{
	outline: none;
}

.wmiIntroLinks{
    text-decoration: none;
    color: #c4c4c4 !important;
}

.wmiIntroLinks:hover{
    color: #1ADCBC !important;
}

/*Small devices (landscape phones, 576px and up)*/
@media only screen and (min-width: 576px) { 

	.overallPaddingLR{
		padding: .5rem 5rem !important;
	}

	.card-columns {
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-count: 2 !important;
    }

    .card-columns .card{
		margin-top: .2rem;
		margin-bottom: 1.25rem !important;
		margin-right: 1.25rem;
		margin-left: .2rem;
	}

	#contactGradientBg{
		margin: 7rem 5rem 0 5rem;
	}

	.wmiIntroRSPadding{
		padding: 4rem !important;
	}
	
	.p4rem{
    	padding: 4rem !important;
    }   
    
    .wmiIntroTextPadding{
    	padding: 4rem !important;
    }

}

/*Medium devices (tablets, 768px and up)*/
@media only screen and (min-width: 768px) {

	html{
		font-size: 14px !important;
	}

	.overallPaddingLR{
		padding: .5rem 5rem !important;
	}

	.navLinkStyle{
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.behanceLogoPR{
		padding-right: .4rem !important;
	}
	.dribbbleLogoPL{
		padding-left: .4rem !important;
	}

	.filterNavLinkStyle{
		width: 9rem;
	}

	.cvSeekIcons{
		width: 7rem;
	}

	.cvYearLeftMargin{
		margin-right: 12rem;
	}

	.contactRightSec{
		padding: 4rem 6rem !important;
	}

	.contactRightSec h5{
		font-size: 1.4rem;
	}

}

/*Large devices (desktops, 992px and up)*/
@media only screen and (min-width: 992px) {

	html{
		font-size: 16px !important;
	}

	.navLinkStyle{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	.behanceLogoPR{
		padding-right: .7rem !important;
	}
	.dribbbleLogoPL{
		padding-left: .7rem !important;
	}

	.card-title{
		font-size: 1.2rem;
	}

	.card-subtitle{
		font-size: .9rem;
	}

	.card-text{
		font-size: .8rem;
	}

	.card-columns {
        -webkit-column-count: 3 !important;
        -moz-column-count: 3 !important;
        column-count: 3 !important;
    }

    .viewBtn{
		font-size: 1rem !important;
		padding: .3rem 1.4rem !important;
	}

	.card-footer{
		padding: .17rem !important;
	}

	.cvSeekIcons{
		width: 8rem;
	}

	#contactGradientBg{
		margin: 7rem 3rem 0 3rem;
	}

	.remoteWorkImg{
		background-image: url("../img/contact/remoteWork_deepika.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.deepikaImg{
		background-image: url("../img/wmi/deepika.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.wmiIntroRSPadding{
		padding: 1.5rem !important;
	}

	.wmiIntroTextPadding{
		padding: 3rem !important;
	}

}

/*Extra large devices (large desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {

	.card-title{
		font-size: 1.3rem;
	}

	.card-subtitle{
		font-size: 1.1rem;
	}

	.card-text{
		font-size: .8rem;
	}

	.viewBtn{
		font-size: 1rem !important;
		padding: .5rem 1.85rem !important;
	}

	.card-footer{
		padding: .2rem !important;
	}

	.cvSeekIcons{
		width: 9rem;
	}

	#contactGradientBg{
		margin: 7rem 8rem 0 8rem;
	}

	.wmiIntroRSPadding{
		padding: 2rem !important;
	}

	.wmiIntroTextPadding{
		padding: 4rem !important;
	}
}

@media only screen and (min-width: 1500px) {
    .overallPaddingLR{
		padding: .5rem 10rem !important;
	}
    
	#contactGradientBg{
		margin: 7rem 15rem 0 15rem;
	}

	.wmiIntroRSPadding{
		padding: 4rem !important;
	}
}

@media only screen and (min-width: 1900px) {
    .overallPaddingLR{
		padding: .5rem 14rem !important;
	}
}

@media only screen and (min-width: 1900px) {
    .overallPaddingLR{
		padding: .5rem 18rem !important;
	}

	html{
		font-size: 18px !important;
	}
}