@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
	scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6,a,button {
	font-family: "Lexend Deca", Sans-serif;
	color: #272C2E;
}
p,span {
	font-family: 'Inter', sans-serif;
	color: #3B3B3B;
}


/* code start */

body {
    background: url(images/download.svg), rgba(0, 0, 0, .02);
    backdrop-filter: blur(20px);
    z-index: -1;
}
main {
    display: flex;
    justify-content: center
}
.main-body {
    width: 650px;
    background: #fff;
    margin: 50px 0;
    box-shadow: 0 0 20px -5px #999;
    z-index: 1000;
}
.top-picture img {
    width: 100%;
}
.dhl-text {
    padding: 30px 90px;
    background-color: #D32F2F;
}
.dhl-text h3 {
    font-size: 23px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #fff;
    color: #fff;
}
.dhl-text p {
    color: #ffffffaf;
    font-weight: 400;
}
.social-icon-wrapper {
    padding: 18px 90px;
    display: block;
    border-bottom: 1px solid #ddd;
}
.single-social-icon {
    display: flex;
    align-items: center;
    grid-gap: 10px;
}
.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(1) .single-social-icon .social-icon {
    background-color: #616568;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(2) .single-social-icon .social-icon {
    background-color: #00000015;
    border: 1px solid #ddd;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(2) .single-social-icon .social-icon i {
    color: #333;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(3) .single-social-icon .social-icon {
    background-color: #F43939;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(4) .single-social-icon .social-icon {
    background-color: #3B5998;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(5) .single-social-icon .social-icon {
    background-color: #0077B5;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(6) .single-social-icon .social-icon {
    background-color: #E1306C;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(7) .single-social-icon .social-icon {
    background-color: #000;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(8) .single-social-icon .social-icon {
    background-color: #BD081C;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(9) .single-social-icon .social-icon {
    background-color: #1DA1F2;
}
.full-icon-wrapper .social-icon-wrapper:nth-child(10) .single-social-icon .social-icon {
    background-color: #CD201F;
}
.social-icon i {
    font-size: 25px;
    color: #fff;
}
.icon-name-link p {
    color: #000;
    font-weight: 500;
}
.icon-name-link span {
    color: #777;
    font-size: 14px;
}
.btn {
    text-align: center;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    padding: 20px 30px;
    margin: 30px 90px 60px 90px;
    box-shadow: 0 5px 10px 5px #ddd;
    transition: .3s;
}
.btn:hover {
    box-shadow: 0 20px 10px 5px #ddd;
}
.btn i {
    font-size: 22px;
    margin-right: 10px;
}

@media only screen and (max-width:700px) {
    .main-body {
        width: 100%;
        margin: 30px;
    }
    .dhl-text {
        padding: 30px 40px;
    }
    .social-icon-wrapper {
        padding: 18px 40px;
    }
    .btn {
        margin: 40px;
    }
}