/* Importing Fonts and Icons */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");

@import url("https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css");

@import url('https://cdn-uicons.flaticon.com/2.0.0/uicons-brands/css/uicons-brands.css');

/* Creating Media Queries */

@media screen and (min-width: 992px) {
    .header .save-contact {
        display: none !important;
    }
}

@media screen and (max-width: 600px) {
    /* Editing Header - Start */
	.header .profile {
        padding: 10px !important;
    }
    
    .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .save-contact {
        display: none !important;
    }

    /* Editing Header - End */

    /* Editing Cart Profile - Start */

    .card-started .profile {
		height: 710px !important;
	}

    .profile .social-links .save__text {
        padding: 5px 30px !important;
    }

    /* Editing Cart Profile - End */
    
    /* Editing Contact - Start */

    .contact-ch {
        grid-template-columns:
            repeat(3, auto) !important;
    }

    /* Editing Contact - End */

    /* Editing Bank - Start */

    .banks {
        grid-template-columns:
            repeat(2, auto) !important;
    }

    /* Editing Bank - End */

}

/* Styling Social Links - Start */

.social-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 10px 0px;
    transform: 
        scale(0.9)
        translateY(-15px);
}

.social-links > div {
    width: 120%;
    padding: 10px 20px;
    border-radius: 5px;    
    background-color: #292D31;
}

.social-links p {
    margin: 0;
    width: 90%;
}

.social-links i {
    color: #815E30;
}

.social__adress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Styling Social Links - End */

/* Styling Save Contact - Start */

.save-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.save-contact div {
    background-color: #815E30;
}

.save__text {
    border-radius: 5px;
    padding: 5px 50px;
}

.save__button {
    border-radius: 5px;
    padding: 5px 20px;
}

/* Styling Save Contact - End */

/* Styling Sidebar - Start */

.sidebar__qr-code > div {
    width: 250px;
    height: 250px;
    margin: auto;
    background-color: red;
    background: url("https://www.investopedia.com/thmb/hJrIBjjMBGfx0oa_bHAgZ9AWyn0=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/qr-code-bc94057f452f4806af70fd34540f72ad.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.sidebar__contact i {
    font-size: 16px !important;
}

.sidebar__contact a,
.sidebar__social-media a {
    color: #D1D5DB;
}

.sidebar__contact a:hover,
.sidebar__social-media a:hover {
    color: #D1D5DB;
}

.sidebar__contact,
.sidebar__social-media {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar__contact > div,
.sidebar__social-media > div {
    padding: 10px 20px;
    border-radius: 5px;
}

.sidebar__contact > div:hover,
.sidebar__social-media > div:hover {
    background-color: #374151;
}

/* Styling Sidebar - End */

/* Styling Bank - Start */

.banks {
    display: grid;
    grid-template-columns:
        repeat(4, auto);
    grid-template-rows: 
        repeat(4, auto);
    row-gap: 20px;    
    padding: 20px 0px;
}

.bank {
    text-align: center;
}

.bank:hover {
    cursor: pointer;
}

.bank img {
    width: 110px;
    height: 110px;
    border-radius: 5px;
}

.bank h4 {
    font-weight: 500;
    text-transform: none;
}

/* Styling Bank - End */

/* Styling Contact Channels - Start */

.contact-ch {
    display: grid;
    grid-template-columns:
        repeat(4, auto);
    grid-template-rows: 
        repeat(4, auto);
    row-gap: 40px;
    padding: 20px 0px;
}

.contact {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

.contact > div img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 7.5px;
}

.contact h4 {
    font-weight: 500;
    margin-top: 5px;
}

/* Styling Contact Channels - End */