@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sacramento&display=swap');
/*===============================Starting1=================================*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root {

        
        --background-color: #f9f9f9;
        --primary-color: #cc2127;
        --secondary-color: #015653;
        --third-color: #0062F6;
        --text-color-dark: #615C5C;
        --section-color: #FFFFFF;
        --card-color: #F1F1F1;

        --black-color: #000000;
        --text-color: #FFFFFF;
        --font-color: #797E90;
        --white-color: #fff;
    }
    body {
        font-family: "Poppins", sans-serif;
        transition: 0.5s all ease;
        background: var(--background-color);
        width: 100%;
    }
    html {
        scroll-behavior: smooth;
    }
    a{
        text-decoration: none;
        color: unset;
    }
    ul{
        list-style-type: none;
    }
    .container{
        width: 100%; 
    }
    .container-inner {
        position: relative;
        width: 2020px;
        margin: 0 auto;
    }
    .btn-primary{
        padding: 5px 40px;
        height: 55px;
        min-width: 200px;
        background: var(--primary-color);
        border-radius: 50px;
        font-size: 22px;
        outline: none;
        border: none;
        position: relative;
        z-index: 1;
    }
    .btn-secondary{
        padding: 5px 30px;
        height: 45px;
        min-width: 170px;
        background: var(--primary-color);
        border-radius: 50px;
        font-size: 18px;
        outline: none;
        border: none;
        position: relative;
        z-index: 1;
        margin-top: 30px;
    }
    .btn-primary,
    .btn-secondary{
        color: var(--text-color);
    }
    .heading1{
        font-size: 40px;
    }
    .sub-heading{
        font-size: 30px;
    }
    .paragraph{
        font-size: 16px;       
        opacity: 0.8;
    }
/*===============================Starting2=================================*/


/*===============================Navbar====================================*/
	#navbar{
		position: fixed;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 15px 0;
		transition: 0.5s;
		z-index: 999;
	}
	.navbar-logo img{
		width: 100px;
	}
	.navbar-link-list{
		display: flex;
		gap: 30px;
	}
	.navbar-link-item{
		position: relative;
		transition: 1s;
	}
	.navbar-link-item::after{
		content: "";
		position: absolute;
		height: 100%;
		width: 0%;
		left: 50%;
		border-bottom: none;
		border-bottom: 3px solid transparent;
		transition: 0.5s;
	}
	.navbar-link-item:hover::after{
		height: 100%;
		width: 50%;
		left: 30%;
		border-bottom: 3px solid var(--primary-color);
	}
	.navbar-link-anchor{
		position: relative;
		z-index: 1;
	}
	.navbar-social-icon i{
		font-size: 20px;
		margin-left: 10px;
		cursor: pointer;
	}
	.navbar-social-icon i:nth-child(1):hover{
		color: #3F51B5;
	}
	.navbar-social-icon i:nth-child(2):hover{
		color: #c32aa3;
	}
	.navbar-social-icon i:nth-child(3):hover{
		color: #0A66C2;
	}
/*===============================Navbar====================================*/


/*===============================Header====================================*/
	#header-sec{
		background: url('images/header-background.jpg');
		background-size: cover;
		background-position: center;
		height: 700px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header-content-container{

	}
	.header-subheading{
		font-size: 64px;
		font-family: "Sacramento", cursive;
		font-weight: 400;
		font-style: normal;
		line-height: 30px;
	}
	.header-title{
		font-size: 150px;
		line-height: 140px;
		font-family: "Poppins", sans-serif;
	  	font-weight: 500;
	}
	.header-title-underline{
		height: 30px;
		display: flex;
		justify-content: right;
	}
	.header-title-underline img{
		width: 300px;
		height: 20px;
	}
/*===============================Header====================================*/



/*===============================Scroll====================================*/
	#scroll-section{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 80px 0;
		background: var(--section-color);
	}
	.scroll-section-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		position: relative;
	}
	.scroll-section-content p{
		font-size: 24px;
	}
	.scroll-section-content img{
		top: 50px;
		position: absolute;
		animation: mouse-icon 0.7s infinite ease-in-out;
	}
	@keyframes mouse-icon{
		from{
			margin-top: 10px;
		}
		to{
			margin-top: 0px;
		}
	}
/*===============================Scroll====================================*/




/*===============================About=====================================*/
	#about-section{
		padding: 100px 150px 10px 150px;
		display: flex;
		justify-content: center;
		gap: 300px;
		background: var(--section-color);
	}
	.about-section-cards-container{
		display: flex;
		flex-direction: column;
		gap: 30px;
		margin: 0 auto;
	}
	.about-section-card{
		padding: 20px;
		width: 550px;
		height: 170px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 8px;	
		background: transparent;
		box-shadow:  0px 0px 10px 1px #d7d7d7;
	}
	.about-section-card-date{
		font-size: 48px;
		font-weight: 500;
		color: var(--primary-color);
	}
	.about-section-card-seprator-border{
		border: 2px solid red;
		width: 0;
		height: 30%;	
	}
	.about-section-content{
		margin: 0 auto;
	}
	.about-section-card-content p:nth-child(1){
		font-size: 16px;
		font-weight: 600;
	}
	.about-section-card-content p:nth-child(2){
		opacity: 0.5;
		font-size: 15px;
	}
	.about-section-content-container1{
		max-width: 600px;
	}
	.about-section-content-container1 h2{
		font-size: 40px;
		text-align: right;
		font-weight: normal;
	}
	.about-section-content-container1 h2 a{
		text-decoration: underline;
		color: var(--primary-color);
		font-weight: 600;
	}
	.about-section-content-container1 div{
		text-align: right;
		position: relative;
		margin-top: 45px;
		font-size: 16px;
		border-bottom: 2px solid rgba(0, 0, 0, 0.3);
		padding: 0 0 50px 0;
	}
	.about-section-content-container-title{
		font-size: 16px;
		text-align: right;
		position: absolute;
		left: -100px;
		top: 0px;
		font-weight: 600;
	}
	.about-section-content-container2{
		position: relative;
		padding: 50px 0;
	}
	.about-section-brands-img-container{
		display: grid;
		align-items: center;
		justify-content: center;
		grid-template-columns: auto auto auto auto;
		grid-row-gap: 20px;
		grid-column-gap: 20px;
	}
	.about-section-brand-logo{
		height: 135px;
		width: 135px;
		background: var(--card-color);
		border-radius: 5px;
	}
/*===============================About=====================================*/


/*===============================Portfolio=================================*/
	
	
	#portfolio-header-container{
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.brands-tags{
		position: sticky;
	 	position: -webkit-sticky;
	  	top: 90px;
	}
	.brands-tags-list{
		display: flex;
		gap: 30px;
		justify-content: center;
		flex-wrap: wrap;
		padding: 10px 50px;		
		background: var(--primary-color);
	}
	.brands-tags-list li{
		position: relative;
		color: whitesmoke;
		padding: 10px 25px;
		border-radius: 30px;
		transition: 0.3s;
	}
	.side-active,
	.brands-tags-list li:hover{
		background: white;
		color: var(--primary-color);
		font-weight: 700;
	}

	.brands-portfolio-img{
		border-top: 3px solid var(--primary-color);
		border-bottom: 3px solid var(--primary-color);
	}

	.brands-sidebar-list li.active a {
	    color: yellow; 
	    font-weight: bold; 
	}
/*===============================Portfolio=================================*/





@media only screen and (max-width: 1800px) {
  	.container-inner {
        width: 100%;
        overflow: hidden;
    }
    .brands-tags-list {
		padding: 15px 15px;
	}
	.brands-tags-list li{
		background: white;
		color: black;
		font-weight: 700;
	}
    
}
@media only screen and (max-width: 1500px) {
  	#about-section{
		padding: 50px 0;
		display: flex;
		gap: 150px;
	}
    
}
@media only screen and (max-width: 1350px) {
  	#about-section{
		padding: 50px 0;
		flex-direction: column-reverse;
		gap: 50px;
	}
    .about-section-content-container1{
		max-width: 800px;
	}
	.brands-tags-list{	
		gap: 10px;
		padding: 10px 10px;
	}
}
@media only screen and (max-width: 1000px) {
  	#about-section{
		padding: 50px 0px;
		gap: 50px;
	}
    .about-section-content-container1{
		max-width: 70%;
		margin: auto;
	}
	.header-subheading{
		font-size: 44px;
		line-height: 20px;
	}
	.header-title{
		font-size: 100px;
		line-height: 100px;
	}
	.header-title-underline img{
		width: 200px;
		height: 20px;
	}
}
@media only screen and (max-width: 700px) {
	#navbar{
		justify-content: space-between;
		padding: 30px 50px;
	}
	.navbar-logo img{
		width: 80px;
	}
	.navbar-link-list{
		display: none;
	}
  	#about-section{
		padding: 0px;
		gap: 50px;
	}
    .about-section-content-container1{
		max-width: 80%;
		margin: auto;
	}
	.header-subheading{
		font-size: 34px;
		line-height: 20px;
	}
	.header-title{
		font-size: 70px;
		line-height: 70px;
	}
	.header-title-underline img{
		width: 100px;
		height: 10px;
	}
	.about-section-content-container-title{
		position: absolute;
		left: 45%;
		top: -35px;
	}
	.scroll-section-content p{
		font-size: 16px;
	}
	.brands-tags{
		position: relative;
		top: 0;
	}
	.brands-tags-list{	
		background: unset;
		gap: 10px;
		padding: 30px 10px;
	}
	.brands-tags-list li{
		background: var(--primary-color);
		font-weight: normal;
		position: relative;
		color: whitesmoke;
		padding: 10px 25px;
		border-radius: 30px;
		transition: 0.3s;
	}
}
@media only screen and (max-width: 630px) {
	.about-section-cards-container{
		align-items: center;
		gap: 30px;
		width: 100%;
	}
  	.about-section-card{
		padding: 20px;
		width: 90%;
		height: 170px;
	}
	.about-section-brands-img-container{
		grid-row-gap: 20px;
		grid-column-gap: 20px;
	}
	.about-section-brand-logo{
		height: 105px;
		width: 105px;
		background: var(--card-color);
		border-radius: 5px;
	}
}
@media only screen and (max-width: 500px) {
	.about-section-cards-container{
		gap: 20px;
	}
  	.about-section-card{
		padding: 10px;
		width: 90%;
		height: 150px;
	}
	.about-section-brands-img-container{
		grid-row-gap: 10px;
		grid-column-gap: 10px;
	}
	.about-section-brand-logo{
		height: 80px;
		width: 80px;
		background: var(--card-color);
		border-radius: 5px;
	}
	.about-section-content-container1 div{
		margin-top: 45px;
		font-size: 14px;
	}
	.about-section-content-container1{
		max-width: 90%;
	}
	.scroll-section-content p{
		font-size: 14px;
	}
}
@media only screen and (max-width: 460px) {
	#about-section{
		padding: 50px 0;
	}
  	.about-section-card{
		padding: 10px;
		width: 70%;
		height: 100px;
	}
	.about-section-card-date{
		font-size: 30px;
	}
	.about-section-card-seprator-border{
		border: 1px solid red;
	}
	.about-section-card-content p:nth-child(1){
		font-size: 12px;
	}
	.about-section-card-content p:nth-child(2){
		font-size: 11px;
	}
	
}