*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;

}
:root{
    --bg-color: rgb(5,178,180);
    --hover-gradiant-bg-clr : linear-gradient(161deg, rgba(5,178,180,1) 49%, rgba(0,91,255,0.9641106442577031) 100%);
    --color-deep-pink: #1f9aff;
    --font-style: 'Poppins', sans-serif;
    --regular-font-clr: #1f1f25;
    --color-heading: #1f1f25;
    --color-border: #e9e9e9;
    --border-width: 2px;
}


.portfolio-banner{
width:100%;
height:80vh;
position:relative;
background:url('../images1/webdesign-link.jpg') no-repeat ;
background-size:cover;
background-position: center;
}



 .portfolio-titel-cont{
  display:flex;
  justify-content: center;
  align-items:center;
  text-align:center;
}

 .portfolio-titel-cont h1{
    position: absolute;
    color:#fff;
    top:50%;
    transform:translateY(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: 72px;
    font-weight: bolder;
   
}


.main-pSec{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    width: 85%;
    margin:auto;
    padding: 4rem 1.5rem 4rem 1.5rem;
}

.main-pSec .hdr-ttl{
    font-size: 60px;
    margin-bottom: 4rem;
    font-family: var(--font-style);
}

.box-set1,
.box-set2, .box-set3{
    margin-bottom: 2rem;
}



.box-set1, .box-set2, .box-set3, .box-set4{
    /* border: 1px solid black; */
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.box{
   
    width:50%;
    height:300px;
    border-radius:10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: .3s;
    border-radius: .4rem;
    cursor: pointer;
    text-align: center;
    justify-content: center; 
}

.box:hover h1{
    font-size:40px;
    transition: .3s;

}

.box2:hover img{
    transform: scale(1.045);  
    box-shadow: 0px 0px 29px -1px rgba(204,202,204,1);
    object-fit: cover;
    border-radius: .4rem;
}
.box:hover img{
    transform: scale(1.045);  
    box-shadow: 0px 0px 29px -1px rgba(204,202,204,1);
    object-fit: cover;
    border-radius: .4rem;
}

.box:hover img{
    transform: scale(1.045);  
    box-shadow: 0px 0px 29px -1px rgba(204,202,204,1);
    object-fit: cover;
    border-radius: .4rem;
}
.box:hover img{
    transform: scale(1.045);  
    box-shadow: 0px 0px 29px -1px rgba(204,202,204,1);
    object-fit: cover;
    border-radius: .4rem;
}


.box h1{
   top: 50%;
   transform:translateY(-50%);
   font-size: 45px;
   font-family: var(--font-style);
   position: absolute;
   color:#fff;
   transition: .3s;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.box img{
    width: 100%;
    height: 100%;
    transition: .3s;
    position:relative;
     object-fit: cover;
    border-radius: .4rem;
}