html {
    
}

body {
    font-family: "Poppins", sans-serif;
    background: #FFF;
}
    
.container {
    max-width: 1526px;
    margin: 0px auto;
    padding: 0px 15px;
}

h1, p {
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

h2 {
    margin: 0;
}

#mail {
    display: none;
}

.button {
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;

    border-radius: 40px;
    background: #CB1166;
    transition: all 0.3s ease;
}
.button:hover {
    background: #A50E56;
}

input[type="text"], input[type="email"] {
    display: flex;
    padding: 12px 24px;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.20);

    color: #E8E8E8;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

input[type="text"]::placeholder, 
input[type="email"]::placeholder {
    color: #E8E8E8;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

button[type="submit"] {
    display: flex;
    padding: 12px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 12px;
    background: #FFF;
    border: 0;
    cursor: pointer;
}
button[type="submit"] span {
    color: #640882 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

button[type="submit"]:hover {
    background: #CB1166;
}
button[type="submit"]:hover span {
    color: #FFF !important;
}

button[type="submit"].loading { pointer-events: none; }
button[type="submit"].loading span { display: none; }
button[type="submit"].loading img { display: none; }
button[type="submit"].loading .loader { display: block; }

.tag {
    display: flex;
    padding: 9px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #CB1166;
}

/** LOADER ***/

.loader {
    display: none;
    position: relative;
    width: 68px;
    height: 24px;
    margin: 0 auto;
}

.circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite;
}

.circle:nth-child(1) {
    background: #E91E63;
    left: 0;
    animation-delay: 0s;
}

.circle:nth-child(2) {
    background: #00BCD4;
    left: 12px;
    animation-delay: 0.1s;
}

.circle:nth-child(3) {
    background: #4CAF50;
    left: 24px;
    animation-delay: 0.2s;
}

.circle:nth-child(4) {
    background: #FFEB3B;
    left: 36px;
    animation-delay: 0.3s;
}

.circle:nth-child(5) {
    background: #9C27B0;
    left: 48px;
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-10px) scale(1.1);
    }
}

/** HEADER **/
header {
    padding-top: 15px;
    padding-bottom: 17px;
}

/** HERO BANNER **/
#hero {
    background: url(../img/banner-hero.jpg) no-repeat 0 0 transparent;
    background-size: cover;
    width: 100%;
    height: 700px;
}

#hero .container { 
    display: flex; 
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

#hero .hero-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    max-width: 680px;
}
#hero .hero-left h1 {
    color: #FFF;
    font-size: 56px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 2.24px;
}
#hero .hero-left p {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 32px;
}

#hero .hero-right .hero-right-content {
    display: flex;
    /* width: 386px; */
    /* height: 376px; */
    padding: 32px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 32px;

    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(50px);
}
#hero .hero-right .hero-right-content span {
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
}

#hero .hero-right .hero-right-content form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#hero .hero-right .hero-right-content form input[type="text"],
#hero .hero-right .hero-right-content form input[type="email"] {
    min-width: 322px;
}

/** COLLECTIONS **/
#collections {
    padding: 80px 0;
    width: 100%;
}
#collections .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#collections h2 {
    color: #2D3142;
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 120%;
}
#collections .collections-list {
    margin-top: 48px;
}
#collections .collection {
    width: 365px;
    height: 365px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    line-height: normal;
}
#collections .collection-1 { background: url('../img/card-1.png') no-repeat 0 0 transparent }
#collections .collection-2 { background: url('../img/card-2.png') no-repeat 0 0 transparent }
#collections .collection-3 { background: url('../img/card-3.png') no-repeat 0 0 transparent }
#collections .collection-4 { background: url('../img/card-4.png') no-repeat 0 0 transparent }
#collections .owl-dots {
    display: flex;
    height: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    gap: 8px;
}
#collections .owl-dots .owl-dot {
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: #CECECE;
}
#collections .owl-dots .owl-dot.active { background: #CB1166; }
#collections a {
    margin-top: 48px;
}

/** SUPPLIER **/
#supplier {
    padding: 80px 0;
    width: 100%;
    background: #F5F5F5;
}
#supplier .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#supplier h2 {
    color: #2D3142;
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 120%;
}
#supplier ul {
    margin: 48px 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 32px;
}
#supplier li {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 490px;
    width: 100%;
    padding: 32px;
    height: auto;
    border-radius: 24px;
    background-size: cover !important;
}
#supplier li.card-1 { background: url(../img/card-shirt.png) no-repeat 0 0 transparent; }
#supplier li.card-2 { background: url(../img/card-tag.png) no-repeat 0 0 transparent; }
#supplier li.card-3 { background: url(../img/card-graphic.png) no-repeat 0 0 transparent; }
#supplier li span {
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}
#supplier li p{
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

/** INSTITUTIONAL **/
#institutional {
    padding: 80px 0;
    width: 100%;
}
#institutional .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
}
#institutional #institutional-left img {
    width: 100%;
}
#institutional #institutional-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    max-width: 742px;
    width: 100%;
}
#institutional #institutional-right h2 {
    color: #2D3142;
    font-size: 48px;
    font-weight: 700;
    line-height: 100%;
}
#institutional #institutional-right p {
    color: #4a4f65;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

/** SHOPKEEPER **/
#shopkeeper {
    padding: 80px 0;
    width: 100%;
}
#shopkeeper .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}
#shopkeeper h2 {
    color: #2D3142;
    font-size: 48px;
    font-weight: 700;
    line-height: 120%;
}
#shopkeeper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    justify-content: center;
    gap: 32px;
    width: 100%;
}
#shopkeeper li {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 490px;
    width: auto;
    padding: 32px;
    height: auto;
    min-height: 232px;
    background-size: cover !important;
    border-radius: 24px;
}
#shopkeeper li.card-1 { background: url(../img/card-choose-1.png) no-repeat 0 0 transparent; }
#shopkeeper li.card-2 { background: url(../img/card-choose-2.png) no-repeat 0 0 transparent; }
#shopkeeper li.card-3 { background: url(../img/card-choose-3.png) no-repeat 0 0 transparent; }
#shopkeeper li.card-4 { background: url(../img/card-choose-4.png) no-repeat 0 0 transparent; }
#shopkeeper li.card-5 { background: url(../img/card-choose-5.png) no-repeat 0 0 transparent; }
#shopkeeper li span {
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-top: 6px;
}
#shopkeeper li p{
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

/** CONTACT **/
#contact {
    padding: 135.5px 0;
    width: 100%;
    background: url("../img/bg-form.jpg") no-repeat 0 0 transparent;
    background-size: cover;
}
#contact .container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    justify-content: center;
}
#contact h2 {
    color: #FFF;
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: 0.48px;
    max-width: 686px;
}
#contact .contact-form {
    display: flex;
    width: 656px;
    padding: 48px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 32px;

    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(80px);
}
#contact .contact-form h3 {
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    width: 100%;
}

#contact .contact-form form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#contact .contact-form form .two-fields {
    display: flex;
    gap: 16px;
}
#contact .contact-form form .two-fields input { width: 50%; }

/** FOOTER **/
footer {
    padding: 48px 0;
}
footer .footer-content {
    display: flex;
    align-items: flex-start;
    gap: 300px;
}
footer .footer-content .footer-general {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
footer .footer-content .footer-general ul {
    display: flex;
    gap: 16px;
}
footer .footer-content .footer-general a {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: rgba(203, 17, 102, 0.10);
}
footer .footer-content .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}
footer .footer-content .footer-contact span {
    color: #2D3142;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}
footer .footer-content .footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}
footer .footer-content .footer-contact ul a {
    color: #4B5563;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
footer .footer-content .footer-contact ul a:hover { color: #CB1166; }
footer .footer-content .footer-address {
    display: flex;
    gap: 66px;
}
footer .footer-content .footer-address-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}   
footer .footer-content .footer-address-content span {
    color: #2D3142;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}
footer .footer-content .footer-address-content p {
    color: #4B5563;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}
footer hr {
    margin-top: 40px;
    margin-bottom: 32px;
    height: 1px;
    background: #000;
    opacity: 0.1;
}
footer .copy {
    color: #4B5563;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    width: 100%;
}

@media (max-width: 1600px) {
    #collections .collections-list .collection {
        width: auto;
    }
}

@media (max-width: 1450px) {
    footer .footer-content {
        justify-content: space-between;
        padding: 0 30px;
        gap: unset;
    }
}

@media (max-width: 1024px) {
    #hero .hero-left h1 {
        font-size: 40px;
        line-height: 100%;
    }
}