* {
    
    box-sizing: border-box;
    list-style: none;
}

/* GENERAL */

body {
    color: #282828;
    font-family: Inter, sans-serif;
    padding: 0;
    margin: 0;
}

header {
    padding-bottom: 24px;
    font-weight: 600;
}

.header-info {
    max-width: 375px;
    padding: 16px 16px;
}

.header-info .info {
    margin-bottom: 32px;
}

.header-info .brand {
    text-transform: uppercase;
    font-weight: 600;
}

.header-content .header-image img {
    width: 100%;
}

p {
    font-weight: 400;
}

.product-card p, 
footer p, 
footer li  {
    color: #5F6980;
}


.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-content .title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.6px;
    margin-top: 0;
}

header p {
    line-height: 26px;
}

footer p {
    font-size: 14px;
    line-height: 22px;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    height: 46px;
    padding: 8px 20px;
    margin: 4px 0;
    border-bottom: 1px;
    position: sticky;
    top: 0%;
    z-index: 1;
}

header nav .nav-logo {
    cursor: pointer;
}
.nav-logo img {
    height: 18px;
}
.footer-logo img {
    height: 36px;
}
header nav .nav-buttons,
.nav-others {
    display: none;
}

.brands-section {
    padding: 40px 16px;
}

/* Navigation Dots with pure HTML,CSS for the sake of the task :) */
.nav-dots ul {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16px;
}

.nav-dots ul li {
    cursor: pointer;
}

.nav-dots .dot {
    padding: 4px;
    margin: 0 8px;
    border-radius: 100px;
    background-color:#D0D5DD;
}

.nav-dots .circle {
    border: 2px solid black;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    position: relative;
}

.nav-dots .circle .inner-dot {
    background-color: #282828;
    border: 2px solid black;
    border-radius: 100px;
    padding: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav-dots .dot:hover {
    background-color: #282828;
}


/* Arrow-Left and Arrow-Right */

.header-arrow-left, 
.header-arrow-right, 
.brands-arrow-left, 
.brands-arrow-right {
    display: none;
}

/* Brands Section */
.brands-section .brands-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    height: 272px;
    padding: 0;
}

.brands-container li {
    height:80px;
}

.products-grid-section, 
.banner-section {
    padding: 24px 16px;
}

/* Products-Grid-Section */
.products-grid-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px 0;
}


.product-card img {
    width: 100%;
}
.product-card .product-title {
    text-align: center;  
    line-height: 10px;
}

footer {
    padding: 48px 16px 24px 16px;
    background-color: #F9FAFB;
}

/* Banner Buttons */
.details-btn {
    font-size: 18px;
    cursor: pointer;
    padding: 3px 0;
}

.details-btn.black {
    border-bottom: 1px solid black;   
}
.details-btn.white {
    border-bottom: 1px solid white;   
}

/* Second Banner Section */
.banner-section .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 375px;
    color: #FFFFFF;
}
.banner {
    background: url(/images/products/product-image-1.png);
    background-position: center;
    background-size: cover;
}
.banner .title {
    font-size: 34px;
}
.banner-content {
    width: 295px;
}
.banner-content .responsive-info::after {
    content: "Phosfluor escently engage worldwide with web-enabled technology.";
    font-size: 14px;
}

/* Hamburger Menu */
.hamburger-menu {
    border-bottom: 2px solid #282828;
    border-top: 2px solid #282828;
    padding: 4px;
    width: 22px;
    cursor: pointer;
}

/* Footer */

.footer-content {
    display: flex;
    flex-direction: column;
}

.footer-title-container{
width: 343px;
}

.footer-links ul  {
    border-top: 1px solid #D0D5DD;
}

.footer-links ul li {
    display: none;
}

.footer-links h3 {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer; 
}

h3 .arrow-down img {
    width: 14px;
    margin: 7px;
    
}

footer .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 24px;
}
.languanges {
    display: flex;
    justify-content: center;
}
.languanges button {
   font-size: 14px;
   cursor: pointer;
   border: none;
   background-color: transparent;
   font-weight: 600;
   color: #282828;
   margin-right:15px;
}

.languanges .flag img {
    width: 25px;
}

.social-desktop {
    display: none;
}

.social-mobile {
    text-align: center;
    margin-top: 16px;
}

.social-mobile a,.social-desktop a  {
    border: 2px solid #FFFFFF;
    margin: 0 5px;
    border-radius: 100px;
    padding: 10px;
    width: 36px;
    background-color: #FFFFFF;
    cursor: pointer;
}

.social-mobile .copyright {
    margin-top: 18px;
    padding: 8px 0;
}

/* For Desktop */
@media (min-width:780px) {
    .brands-wrapper {
        position: relative;
    }
    /* Arrows */
    .header-arrow-left, 
    .header-arrow-right, 
    .brands-arrow-left, 
    .brands-arrow-right {
        position: absolute;
        background: none;
        border: none;
        cursor: pointer;
        display: block; 
    }


    .header-arrow-left {
        left: 0%;
    }
    .header-arrow-right {
        right: 0%;
    }

    .brands-arrow-left {
        top: 40%;
        bottom: 50%;
        left: 0%;
    }

    .brands-arrow-right {
        top: 40%;
        bottom: 50%;
        right: 0%;
    }
    /* Footer */

   .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 24px;
    margin-bottom: 2rem;
   }
   .footer-title-container {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
   }
   .social-desktop{
    display: block;
   }

   .footer-links-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 14px;
   }

    .footer-links .arrow-down {
        display: none;
    }
    .footer-links ul {
        border-top: none;
        padding: 0;
    }
    .footer-links ul li {
        display: flex;
        margin:16px 0;
        cursor: pointer;
    }

    .footer-links h3 {
        cursor:default;
    }

    
    footer .wrapper {
        flex-direction: row-reverse;
        justify-content: space-between;
        border-top: 1px solid #D0D5DD;
        padding: 16px;
    }

    .social-mobile  {
        display: none;
    }
    
    /* Header */
    header nav {
        height: 68px;
    }
    header nav .nav-buttons,.nav-others {
        display: flex;
    }
    
    .nav-logo img {
        height: 24px;
    }
    .footer-logo img {
        height: 26px;
    }
    header p {
        font-size:18px;
        line-height: 30px;
    }

    .header-content {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #F9FAFB;
    }

    .header-content .header-info {
        margin-left: auto;
        margin-right: auto;
        max-width: 488px;
        padding:0 24px;
        
    }
    .header-info .brand {
        font-size: 14px;
    }
    .header-info .info {
        font-size: 18px;
        line-height: 30px;
        letter-spacing: 0px;
        margin-bottom: 24px;
    }
    .header-info .title {
        font-size: 54px;
        line-height: 62px;
        letter-spacing: -1px;
    }

    .brands-section .nav-dots {
        display: none;
    }

    .nav-buttons li {
        margin: 0 24px;
        cursor: pointer;
        text-align: center;
    }

    .nav-buttons li .arrow-down {
        margin-left: 5px;
    }

    .nav-others a {
        cursor: pointer;
        margin:0 12px;
    }

    /* Banner Buttons */

    .details-btn {
        font-size: 18px;
        line-height: 32px;
        letter-spacing: -0.4px;
    }
    
   /* Hamburger Menu is hidden */ 

    .hamburger-menu {
        display: none;
    }

    /* Brands */

    .brands-section {
        padding: 52px;
    }
   
    .brands-section .brands-container {
        flex-direction: row;
        border-top: 1px solid #D0D5DD;
        border-bottom: 1px solid #D0D5DD;
        height: 192px;
    }   
    
    .brands-container li {
        height:80px;
        padding:0 24px;
    }

    /* Product Grid Section */


    .products-grid-section {
        flex-direction: row;
        gap: 32px;
        padding: 52px;
    }
   
    .product-title h2 {
        font-size: 20px;
    }
    .product-title p {
        font-size: 14px;
    }
    
    /* Second Banner Section */
    
    .banner-section {
        height: 494px;
    }

    .banner-content {
        width: 450px;
    }

    .banner-content .title {
        font-size: 42px;
    }

    .banner-section {
        padding: 52px;
    }
    
    .banner-section .responsive-info::after {
        content: "Phosfluor escently engage worldwide methodologies with web-enabled process-centric technology.";
        font-size: 18px;
    }
    
    .banner-section .banner {

        max-width: 1336px;
        margin-left: auto;
        margin-right: auto;
    }
    
  
}