/* =============================
GENERAL
============================= */

h1,
h2,
h3,
p {
    padding: 0;
    margin: 0;
}

.arrowButton {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
}

.container-fluid {
    background: #000000;
}

.container {
    padding: 0;
}

.container-fluid {
    padding-right: 16px;
    padding-left: 16px;
}


/* =============================
NAVIGATION
============================= */

.navbar {
    background: #000;
    height: 104px;
}

.navbar button {
    padding: 0;
}

.navbar ul li a {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 0 !important;
}

.nav-link:hover {
    color: rgb(96, 132, 209);
}

.navbar .clotingTypeList li {
    margin-right: 35px;
}

.navbar .clotingTypeList li:nth-child(0) {
    margin: 0px;
}

.navbar .accountProfile .profileName {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.navbar .accountProfile .viewProfile {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

.navbar .accountProfile img {
    width: 32px;
    height: 32px;
}

.shopingCartItemNumber {
    border-radius: 100px;
    background: #F95738;
    width: 14px;
    height: 14px;
    top: 0;
    right: -4px;
}

.shopingCartItemNumber p {
    color: #FFF;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px;
    font-weight: 400;
}

.accountProfile {
    gap: 12px;
}

.navbar-toggler {
    border: none;
    background: transparent;
    fill: #FFF;
}

.shopingCart {
    margin-right: 3em;
}

.heart {
    margin-right: 24px;
}

/* =============================
HEADER
============================= */

.headerBody {
    height: 100%;
}

.header .container-fluid {
    height: 900px;
}

.header .headerInside {
    height: 100%;
    max-width: 676px;
}

.headerText .headerBiggerParagraph {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.9px;
    line-height: 100%;
}

.headerText h1 {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 72px;
    font-weight: 700;
    margin: 8px 0px;
    width: 352px;
    line-height: 100%;
}

.headerText .headerSmallerParagraph {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.6px;
}

form {
    margin-top: 48px;
}

form .formWrapper {
    height: 62px;
    width: 85%;
    position: relative;
}

form input {
    border-radius: 100px;
    background: #161616;
    border: none;
    padding: 16px 24px;
    height: 100%;
    width: 100%;
}

form input::placeholder {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 400;
}

form button {
    border-radius: 33px;
    background: #FFF;
    box-shadow: 2px 2px 0px 0px rgba(69, 63, 63, 0.13) inset;
    border: none;
    height: 80%;
    width: 140px;
    position: absolute;
    right: 6px;
    top: 10%;
    padding: 0;
}

form button .insideButtonText {
    gap: 8px;
}

form button .insideButtonText p {
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.1px;
    text-transform: uppercase;
}

.header .heroPhoto {
    background-image: url('images/headerPhoto.png');
    background-size: cover;
}

.header .heroPhotoLaptop {
    height: 900px;
    width: 600px;
    right: 166px;
    background-position: bottom;
}

.header .heroPhotoPhone {
    height: 500px;
    width: 100%;
    background-position: bottom;
}

.headerBottom {
    margin-bottom: 33px;
}

.headerBottomLeft {
    gap: 20px;
}

.headerBottomLeft p {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 400;
}

.headerBottomRight {
    gap: 36px;
}

.carouselActive {
    width: 14px;
    height: 14px;
    background: #423496;
    border-radius: 100px;
}

.carouselNotActive {
    width: 10px;
    height: 10px;
    background: #2B2B2B;
    border-radius: 100px;
}

.headerBottomRightCircles {
    gap: 8px;
}

/* =============================
CATEGORIES CAROUSEL
============================= */

.categoriesSection {
    padding: 100px 0px;
}

.buttonsBox {
    margin-left: 102px;
    margin-right: 250px;
    bottom: 0;
    right: 0;
}

.categoriesCards {
    margin-right: 424px;
}

/* =============================
CATEGORIES CAROUSEL ONE CARD
============================= */

.categoriesOneCard {
    min-width: 446px;
    height: 570px;
    margin-left: 48px
}

.categoriesSection .photo1 {
    background: linear-gradient(180deg, rgba(1, 1, 1, 0.26) 0%, #010101 100%), url('images/categories1.png');
}

.categoriesSection .photo2 {
    background: linear-gradient(180deg, rgba(1, 1, 1, 0.26) 0%, #010101 100%), url('images/categories2.png');
}

.categoriesSection .photo3 {
    background: linear-gradient(180deg, rgba(1, 1, 1, 0.26) 0%, #010101 100%), url('images/categories3.png');
}

.categoriesSection .photo4 {
    background: linear-gradient(180deg, rgba(1, 1, 1, 0.26) 0%, #010101 100%), url('images/categories4.png');
}

.categoriesSection .cardPhoto {
    height: 100%;
    background-size: cover;
    background-position: center;
}

.categoriesOneCard .cardText {
    padding: 48px 32px;
    bottom: 0;
    left: 0;
}

.categoriesOneCard .cardText h3 {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.9px;
}

.categoriesOneCard .cardText p {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* =============================
BUY SECTION
============================= */

.buySection .container-fluid {
    padding-top: 132px;
    padding-bottom: 132px;
}

.buySection .titleSection {
    gap: 20px;
}

.buySection .titleSection .titleSectionLeft h2 {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 100%;

}

.buySection .titleSection .titleSectionLeft p {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 100%;
}

.buySection .titleSection .titleSectionLeft .titleSectionLeftBottom {
    gap: 8px;
}

.buySection .titleSection .titleSectionRight {
    max-width: 870px;
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.buySection .moreButton {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    border-radius: 33px;
    background: #1B1B1B;
    padding: 8px 48px;
    border: none;
    margin: 48px 0px;
    right: 0;
}

/* =============================
BUY SECTION ONE CARD
============================= */

.album .newInTag {
    color: #FFF;
    background: #423496;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2px;
    padding: 12px 24px;
    bottom: 25px;
    left: 0;
    text-transform: uppercase;
}

.itemImage img {
    top: 16px;
    right: 16px;
}

.newInTag {
    color: #FFF;
    background: #423496;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2px;
    padding: 12px 24px;
    bottom: 25px;
    left: 0;
    text-transform: uppercase;
}

.album .card {
    border: none;
    height: 748px;
    border-radius: 0px;
}

.buySection .album .item1Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item1.png');
}

.buySection .album .item2Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item2.png');
}

.buySection .album .item3Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item3.png');
}

.buySection .album .item4Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item4.png');
}

.buySection .album .item5Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item5.png');
}

.buySection .album .item6Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item6.png');
}

.buySection .album .item7Image {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('images/products/item7.png');
}

.buySection .album .itemImage {
    height: 656px;
    background-size: cover;
    background-position: center;
}

.buySection .album .card .cardBodyButton {
    display: flex;
    align-items: center;
    justify-content: center;
}

.buySection .album .card .cardBodyButton button {
    font-family: 'Ubuntu';
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    border-radius: 30px;
    border: none;
    background: #FFF;
    border-radius: 48px;
    box-shadow: 0px 17px 33px 0px rgba(255, 255, 255, 0.20);
    width: 85%;
    padding: 14px 0px;
}

.card-body {
    background: #000;
    padding: 8px;
    padding-top: 16px;
    height: 92px;
}

.card-body p {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 100%;
}

.cardBodyLeft {
    height: 100%;
    justify-content: space-between;
}

.cardBodyLeft .itemName {
    font-size: 40px;
}

.cardBodyLeft .itemPrice {
    font-size: 24px;
}

.cardBodyLeft .reducedPrice {
    color: #5F5F5F;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: line-through;
}

.card-body .cardBodyRight {
    gap: 15px;
}

.card-body .salePrice {
    gap: 16px;
}

.card-body .cardBodyRightReview {
    gap: 8px;
}

.card-body .cardBodyRightReview p {
    font-size: 16px;
}

.card-body .cardBodyRightColors {
    gap: 9px;
}

.card-body .cardBodyRightColors .color {
    width: 20px;
    height: 20px;
    border-radius: 100px;
}

.card1 .cardBodyRightColors .color1 {
    background: #000;
    border: 1px solid #fff;
}

.card1 .cardBodyRightColors .color2 {
    background: #512A1E;
}


.card1 .cardBodyRightColors .color3 {
    background: #E5E5E5;
}

.card2 .cardBodyRightColors .color1 {
    background: #CB988F;
    border: 1px solid #fff;
}

.card2 .cardBodyRightColors .color2 {
    background: #4C4B90;
}


.card2 .cardBodyRightColors .color3 {
    background: #2C2C2C;
}

.card3 .cardBodyRightColors .color1 {
    background: #000;
    border: 1px solid #fff;
}

.card3 .cardBodyRightColors .color2 {
    background: #C92976;
}


.card3 .cardBodyRightColors .color3 {
    background: #D7B606;
}

.card3 .cardBodyRightColors .color4 {
    background: #E5E5E5;
}

.card4 .cardBodyRightColors .color1 {
    background: #563B34;
    border: 1px solid #fff;
}

.card4 .cardBodyRightColors .color2 {
    background: #2A282A;
}

.card5 .cardBodyRightColors .color1 {
    background: #000;
    border: 1px solid #fff;
}

.card5 .cardBodyRightColors .color2 {
    background: #512A1E;
}

.card5 .cardBodyRightColors .color3 {
    background: #E5E5E5;
}

.card5 .cardBodyRightColors .color4 {
    background: #4C4B90;
}

.card5 .cardBodyRightColors .color5 {
    background: #EB1616;
}

.card5 .cardBodyRightColors .color6 {
    background: #EB127A;
}

.card6 .cardBodyRightColors .color1 {
    background: #6E8BC5;
    border: 1px solid #fff;
}

.card6 .cardBodyRightColors .color2 {
    background: #474659;
}

.card7 .cardBodyRightColors .color1 {
    background: #BF95A8;
    border: 1px solid #fff;
}

.card7 .cardBodyRightColors .color2 {
    background: #262F6D;
}

.card7 .cardBodyRightColors .color3 {
    background: #34535B;
}

.card7 .cardBodyRightColors .color4 {
    background: #F8A0A7;
}

.addToCart button {
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    border: none;
    border-radius: 30px;
    background: #FFF;
    padding: 14px;
    width: 100%;
}

/* =============================
INFORMATION 1
============================= */

.information1 .container-fluid {
    padding-right: 0;
}

.information1 .text {
    height: 100%;
}

.information1Image {
    height: 684px;
}

.information1 h1 {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 170px;
    font-weight: 700;
    text-transform: capitalize;
    max-width: 720px;
}

.information1 p {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 100%;
}

.information1 .information1Image .image1 {
    width: 698.995px;
    height: 388.249px;
    border-radius: 100px;
    background: linear-gradient(245deg, #A73B27 22.43%, rgba(98, 129, 41, 0.51) 59.21%, rgba(25, 202, 43, 0.00) 76.17%);
    background-blend-mode: multiply;
    filter: blur(45px);
    right: 484px;
    bottom: 125px;
}

.information1 .information1Image .image2 {
    width: 406px;
    height: 406px;
    background: rgba(173, 124, 237, 0.50);
    filter: blur(74px);
    border-radius: 406px;
    right: 0;
    bottom: 0;
}

.information1 .information1Image .image3 {
    width: 386px;
    height: 324px;
    border-radius: 406px;
    background: rgba(201, 41, 118, 0.38);
    filter: blur(74px);
    right: 330px;
    bottom: 208px;
}

.information1 .information1Image .image4 {
    background: linear-gradient(131deg, rgba(0, 0, 0, 0.00) 51.29%, rgba(0, 0, 0, 0.48) 67.67%, rgba(0, 0, 0, 0.70) 85.25%), url('images/information1-1.png');
    width: 761px;
    height: 100%;
    background-size: cover;
    right: 0;
    bottom: 0;
}

.sectionLine {
    height: 5px;
    width: 100%;
    background: #5F5F5F;
}

/* =============================
INFORMATION 2
============================= */

.information2 .container-fluid {
    overflow: visible !important;
    padding-top: 58px;
    padding-bottom: 64px;
}

.information2 .container-fluid .container {
    height: 100%;
}

.information2 .text {
    height: 100%;
    width: 619px;
    gap: 32px;
}

.information2Image {
    height: 579px;
}

.information2 .information2Image .image1 {
    background: url('images/information2.png');
    width: 772px;
    height: 100%;
    background-size: cover;
    right: 0;
    bottom: 0;
}

.information2 .information2Image .image2 {
    width: 306px;
    height: 285px;
    border-radius: 100px;
    background: linear-gradient(252deg, #EE5A3D 34.35%, rgba(246, 222, 137, 0.65) 83.18%);
    background-blend-mode: multiply;
    filter: blur(62px);
    right: 333px;
    bottom: 166px;
}

.information2 h2 {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 64px;
}

.information2 .information2paragraph {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.information2 .information2Section {
    gap: 8px
}

.information2 .information2Section .information2SectionLine {
    background: #5F5F5F;
    height: 5px;
    width: 224px;
}

.information2 .information2Section p {
    color: #5F5F5F;
    font-family: 'Ubuntu', sans-serif;
    font-size: 40px;
    font-weight: 700;
    white-space: nowrap;
}

.information2 .text a {
    color: #000;
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    border-radius: 30px;
    background: #FFF;
    text-decoration: none;
    box-shadow: 0px 17px 33px 0px rgba(255, 255, 255, 0.20);
    padding: 14px 60px;
    width: 245px;
}

.sectionLineProfessional {
    height: 5px;
    width: 100%;
    background: #5F5F5F;
}

/* =============================
FOOTER
============================= */

footer h5 {
    color: #FFF;
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 24px;
}

footer ul {
    gap: 32px;
}


footer ul li a {
    color: #5F5F5F !important;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px;
    padding: 0 !important;
}

.footer .container-fluid {
    padding-top: 100px;
    padding-bottom: 100px;
}

.footer .footerLine {
    background: #5F5F5F;
    height: 1px;
    width: 100%;
    margin-bottom: 83px;
}

.socialMediaFooter {
    margin-top: 32px;
}



/* =============================
CUSTOM EXTRA EXTRA EXTRA LARGE
============================= */

@media only screen and (min-width: 1600px) {

    .container {
        max-width: 1420px
    }
}

@media only screen and (max-width: 1600px) {

    /* HEADER */

    .header .heroPhotoLaptop {
        right: 90px;
    }

}

/* =============================
EXTRA EXTRA LARGE LAPTOP RESPONSIVE (XXL)
============================= */

@media only screen and (max-width: 1400px) {

    /* HEADER */

    .header .heroPhotoLaptop {
        right: 0px;
    }

    .header .headerInside {
        max-width: 583px;
    }

    .header .heroPhotoLaptop {
        height: 860px;
    }

    /* BUY SECTION */

    .buySection .album .itemImage {
        height: 556px;
    }

    .card-body .cardBodyRightReview {
        gap: 3px;
    }

    /* ONE CARD */

    .album .card {
        height: 648px;
    }

    /* INFORMATION2 */

    .information2 .information2Image .image1 {
        background: url('images/information2.png');
        width: 600px;
        height: 100%;
        background-size: cover;
        background-position: center;
        right: 0;
        bottom: 0;
    }

    .information2 .information2Image .image2 {
        right: 230px;
        bottom: 166px;
    }

}

/* =============================
EXTRA LARGE LAPTOP RESPONSIVE (XL)
============================= */

@media only screen and (max-width: 1200px) {

    /* HEADER */

    .header .headerInside {
        max-width: 424px;
    }

    form .formWrapper {
        width: 100%;
    }

    /* BUY SECTION */

    .buySection .album .itemImage {
        height: 456px;
    }

    .buySection .titleSection .titleSectionRight {
        max-width: 670px;
    }

    .card-body .cardBodyLeft .itemName {
        font-size: 30px;
    }

    .card-body .cardBodyRightReview {
        gap: 1px;
    }

    .card-body .cardBodyLeft .itemPrice {
        font-size: 16px;
    }

    .card-body .cardBodyLeft .reducedPrice {
        font-size: 14px;
    }

    /* ONE CARD */

    .album .card {
        height: 548px;
    }

}

/* =============================
SMALL LAPTOP RESPONSIVE (LG)
============================= */

@media only screen and (max-width: 991px) {
    /* NAVBAR */

    .navbar {
        height: 76px;
    }

    .header .heroPhotoPhone .headerBottomRightCircles {
        bottom: 54px;
        right: 50%;
        transform: translate(50%, 50%);
    }

    /* HEADER */

    form {
        margin-top: 32px;
        margin-bottom: 60px;
    }

    .headerBody {
        height: auto;
    }

    .header .container-fluid {
        height: auto;
    }

    .header .heroPhoto {
        background-image: url('images/headerPhotoPhone.png');
        background-size: cover;
        background-position: top;
    }

    .headerText h1 {
        width: auto;
    }

    form button {
        width: 94px;
    }

    form button .insideButtonText {
        gap: 5px;
    }

    .categoriesCards {
        margin-right: 0;
    }

    .categoriesOneCard {
        min-width: 220px;
        height: 426px;
    }

    .cardText h3 {
        font-size: 26.888px;
        letter-spacing: -0.672px;
    }

    .cardText p {
        font-size: 14.938px;
        letter-spacing: -0.373px;
    }

    /* BUY SECTION */

    .buySection .container-fluid {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .buySection .titleSection {
        gap: 0;
    }

    .buySection .titleSection .titleSectionLeft h2 {
        font-size: 32px;
        line-height: 64px;
    }

    .buySection .titleSection .titleSectionLeft p {
        font-size: 24px;
    }

    .buySection .titleSection .titleSectionRight {
        margin: 32px 0px;
    }

    .buySection .moreButton {
        margin-top: 0px;
        margin-bottom: 43px;
    }

    .buySection .titleSection .titleSectionLeft .sectionLine {
        height: 3px;
        width: 33px;
        background: #5F5F5F;
    }

    .buySection .titleSection .titleSectionLeft .sectionLineProfessional {
        height: 3px;
        width: 124px;
        background: #5F5F5F;
    }

    .buySection .album .itemImage {
        height: 356px;
    }

    .album .newInTag {
        color: #FFF;
        background: #423496;
        font-family: 'Ubuntu', sans-serif;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.2px;
        padding: 8px 12px;
        bottom: 16px;
        left: 0;
        text-transform: uppercase;
    }

    .card-body .cardBodyRightReview p {
        font-size: 11px;
    }

    .card-body .cardBodyRightReview img {
        height: 11px;
        width: 11px;
    }

    .card-body .cardBodyRight {
        gap: 10px;
    }

    .card-body {
        height: auto;
        gap: 10px;
    }

    .card-body .cardBodyLeft {
        gap: 8px;
    }

    .card-body .cardBodyRightReview {
        gap: 5px;
    }

    .itemImage img {
        top: 8px;
        right: 8px;
    }

    .categoriesSection {
        padding: 52px 0px;
        overflow: hidden;
    }

    .card-body .cardBodyRightColors {
        gap: 5px;
    }

    .card-body .cardBodyRightColors .color {
        width: 15px;
        height: 15px;
    }

    .categoriesCards {
        margin-right: -150px;
    }

    /* ONE CARD */

    .album .card {
        height: auto;
    }

    /* INFORMATION1 */

    .information1 .container-fluid {
        height: 363px;
    }

    .information1Image {
        height: 100%;
    }

    .information1 h1 {
        font-size: 66.938px;
        margin-top: 16px;
        max-width: 284px;
    }

    .information1 p {
        font-size: 14.175px;
    }

    .information1 .information1Image .image1 {
        width: 309.092px;
        height: 176.104px;
        border-radius: 100px;
        background: linear-gradient(251deg, #A73B27 22.43%, rgb(85 125 10 / 81%) 59.21%, rgba(25, 202, 43, 0.00) 76.17%);
        background-blend-mode: multiply;
        filter: blur(28.375px);
        bottom: 60px;
        right: 148px;

    }

    .information1 .information1Image .image2 {
        width: 159.863px;
        height: 159.863px;

    }

    .information1 .information1Image .image3 {
        fill: rgba(201, 41, 118, 0.38);
        filter: blur(29.13749885559082px);
        width: 159.863px;
        height: 159.863px;
        right: 59px;
        bottom: 120px;

    }

    .information1 .information1Image .image4 {
        width: 315.644px;
        height: 319.35px;
        z-index: 2;
    }

    /* INFORMATION2 */

    .information2 h2 {
        font-size: 32px;
    }

    .information2 .information2Section p {
        font-size: 24px;
    }

    .information2phone {
        width: 100%;
        height: 353px;
    }

    .information2phone .image1phone {
        background: url('images/information2.png');
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        bottom: 0;
    }

    .information2phone .image2phone {
        background: linear-gradient(252deg, #EE5A3D 34.35%, rgba(246, 222, 137, 0.65) 83.18%);
        border-radius: 100px;
        background-blend-mode: multiply;
        filter: blur(39px);
        width: 200px;
        height: 200px;
        bottom: 67px;
    }

    .information2 .container-fluid .container {
        height: auto;
    }

    .information2Image {
        height: auto;
    }

    .information2 .text {
        width: auto;
    }

    .information2 .information2Section .information2SectionLine {
        height: 3px;
        width: 70px;
    }

}


/* =============================
TABLET RESPONSIVE (MD)
============================= */

@media only screen and (max-width: 768px) {

    .header .heroPhotoPhone {
        height: 500px;
    }

    .headerText h1 {
        font-size: 40px;
    }

    .headerText .headerBiggerParagraph {
        font-size: 24px;
    }

    .headerText .headerSmallerParagraph {
        font-size: 20px;
    }

    /* BUY SECTION */

    .card-body .cardBodyLeft .itemName {
        font-size: 24px;
    }

    .card-body .cardBodyLeft .itemPrice {
        font-size: 16px;
    }

    /* FOOTER */

    footer h5 {
        margin-top: 48px;
    }

    footer ul {
        gap: 24px;
    }

    .footer .container-fluid {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .footer .footerLine {
        margin-bottom: 0;
    }

}

/* =============================
PHONE RESPONSIVE (SM)
============================= */


@media only screen and (max-width: 576px) {
    /* NAVBAR */

    .shopingCart {
        margin-right: 1em;
    }

    /* HEADER */

    form input {
        padding: 16px 16px;
    }

    form input::placeholder {
        font-size: 16px;
    }

    .header .heroPhotoPhone {
        height: 335px;
    }

    /* BUY SECTION */

    .buySection .album .itemImage {
        height: 256px;
    }

    .card-body .cardBodyRightReview {
        gap: 4px;
    }

    /* INFORMATION1 */

    .information1 .container-fluid {
        height: 363px;
    }

    .information1 .information1Image .image1 {
        width: 309.092px;
        height: 176.104px;
        bottom: 60px;
        right: 0;
    }

    .information1 .information1Image .image2 {
        width: 159.863px;
        height: 159.863px;

    }

    .information1 .information1Image .image3 {
        width: 159.863px;
        height: 159.863px;
        right: 0px;
        bottom: 120px;
    }

    .information1 .information1Image .image4 {
        width: 244.644px;
        height: 231.35px;
        z-index: 2;
    }

}

@media only screen and (min-width: 991px) {

    .buySection .album .card:hover .item1Image {
        background: url('images/products/item1.png');
    }

    .buySection .album .card:hover .item2Image {
        background: url('images/products/item2.png');
    }

    .buySection .album .card:hover .item3Image {
        background: url('images/products/item3.png');
    }

    .buySection .album .card:hover .item4Image {
        background: url('images/products/item4.png');
    }

    .buySection .album .card:hover .item5Image {
        background: url('images/products/item5.png');
    }

    .buySection .album .card:hover .item6Image {
        background: url('images/products/item6.png');
    }

    .buySection .album .card:hover .item7Image {
        background: url('images/products/item7.png');
    }

    .buySection .album .card:hover .itemImage {
        background-size: cover;
        background-position: center;
    }

    .buySection .album .card:hover .cardBodyText {
        display: none !important;
    }

    .buySection .album .card:hover .cardBodyButtonOutside {
        display: block !important;
        width: 100%;
        height: 114px;
        background: black;
    }

    .buySection .album .card:hover .newInTag {
        display: none !important;
    }

    .buySection .album .card:hover {
        position: relative;
        overflow: hidden;
    }

    .buySection .album .card:hover .itemImage {
        overflow: hidden;
    }
}