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

body {
    font-family: 'Inter', sans-serif;
    background: url(../images/Background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height:100vh;
    overflow-x:hidden;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:25px 15px;
    position:relative;
}

/* Background Glow */

body::before {
    content:'';
    position:fixed;
    width:450px;
    height:450px;
    border-radius:50%;
    left:-200px;
    top:25%;
    background: rgb(61 61 61 / 53%);
    filter:blur(120px);
    z-index: -1;
}

body::after {
    content:'';
    position:fixed;
    width:450px;
    height:450px;
    border-radius:50%;
    right:-200px;
    top:25%;
    background: rgb(61 61 61 / 53%);
    filter:blur(120px);
    z-index: -1;

}

/* Card */

.profile-card {
    width: 100%;
    max-width: 520px;
    border-radius: 38px;
    overflow: hidden;
    background: linear-gradient(to bottom, #FDAC00 0%, #FDAC00 30%, #ffffff 55%, #ffffff 100%);
    box-shadow: 0 20px 50px rgb(0 0 0 / 63%), 0 0 20px rgb(0 0 0 / 64%);
    animation: fadeUp .8s ease; 
}

/* Header */

.hero {
    min-height:290px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    transition: opacity .1s linear;
    will-change: transform, opacity;
}

.hero img {
    width: 280px;
    max-width: 70%;
}

.corner {
    position:absolute;
    color:#000;
    font-size:24px;
    font-weight:700;
}

.corner.one {
    top:90px;
    left:35px;
}

.corner.two {
    top:90px;
    right:35px;
}

.line {
    position:absolute;
    width:14px;
    height:4px;
    background:#000000;
    border-radius:10px;
}

.line.left {
    left:35px;
    bottom:70px;
}

.line.right {
    right:35px;
    bottom:70px;
}

/* Content */

.content {
    padding:0px 18px 30px;
    text-align:center;
    color:#000000;
}

.name {
    font-size:28px;
    font-weight:800;
}

.username {
    opacity:.9;
    margin-top:5px;
}

/* Social */

.socials {
    margin:20px 0;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.socials a {
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.socials a:hover {
    transform:translateY(-4px);
}

.fb{background:#1877f2;}
.ig{background:#e1306c;}
.tk{background:#fff;color: #000!important;}
.yt{background:#ff0000;}
.in{background:#0077b5;}
.sc{background:#24cc63;color:#ffffff!important;}
.web{background:#ff6f91;}
.tw{background:#000;}

.followers {
    font-weight:700;
    margin-bottom:20px;
}

/* Description */

.description {
    line-height:1.5;
    font-size:15px;
    max-width:420px;
    margin:auto;
    color: #000;
}

.description p {
    margin-bottom: 18px;
    font-size: 14px;
}

/* Connect Bar */

.connect-bar {
    background: #e7e7e7;
    border-radius: 40px;
    padding: 5px;
    margin-top:25px;
    display:flex;
    align-items:center;
}

.connect-bar input {
    flex:1;
    border:none;
    outline:none;
    padding:14px 16px;
    font-size:15px;
    border-radius: 15px 0px 0 15px;
    background-color: #e7e7e7;
}

.connect-btn{
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:30px;
    padding:12px 18px;
    cursor:pointer;
    background: #f1a504;
}

/* Contact Box */

.contact-box{
    margin-top:18px;
    background:rgb(0 0 0 / 8%);
    border-radius:20px;
    padding:25px;
    text-align:left;
    backdrop-filter:blur(10px);
}

.contact-item{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
    color: #000;
}

.contact-item:last-child{
    margin-bottom:0;
}

.contact-item i{
    width:20px;
}

.contact-item a{
    color: #000000;
    text-decoration:none;
    word-break:break-word;
}

/* Footer */

.footer{
    text-align:center;
    margin-top:30px;
    font-size:12px;
    opacity:.7;
}

.footer a{
    color:#fff;
}

/* Animation */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Mobile */

@media(max-width:600px){

.hero{
    min-height:280px;
}

.hero img{
    width:280px;
}

.name{
    font-size:24px;
}

.connect-bar{
    flex-direction:column;
    gap:8px;
    padding:10px;
    background: transparent;
}

.connect-btn{
    width:100%;
}
.socials a {
    width: 36px;
    height: 36px;
}
.socials {
    gap: 7px;
}
.connect-bar input {
    border-radius: 25px 25px 25px 25px;
    width: 100%;
}
.contact-item a {
    font-size: 14px;
}
.contact-box {
    padding: 15px;
}
}