@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: 'PP Pangaia';
    src: url(/fonts/pp_pangaia/PPPangaia-Medium.otf);
    font-weight: normal;
}
@font-face {
    font-family: 'PP Pangaia';
    src: url(/fonts/pp_pangaia/PPPangaia-MediumItalic.otf);
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'PP Pangaia';
    src: url(/fonts/pp_pangaia/PPPangaia-Bold.otf);
    font-weight: bold;
}
@font-face {
    font-family: 'PP Pangaia';
    src: url(/fonts/pp_pangaia/PPPangaia-BoldItalic.otf);
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'PP Pangaia';
    src: url(/fonts/pp_pangaia/PPPangaia-Ultralight.otf);
    font-weight: lighter;
    font-style: italic;
}
@font-face {
    font-family: 'PP Pangaia';
    src: url(/fonts/pp_pangaia/PPPangaia-UltralightItalic.otf);
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Book';
    src: url(/fonts/gotham-book/Gotham-Book-Font.otf);
    font-weight: lighter;
    font-style: italic;
}



:root {
    --primaryColor: #682426;
    --secondaryColor: #A46647;
    --backgroundColor: #E2D7C3;

    --contentFontSize: 13;
    --baseFontFamily: 'PP Pangaia';
    --paragraphFontFamily: 'Gotham Book';
    --alternateHeadingFontFamily: 'Open Sans';

    --H1FontSize: 36;
}

/* BASE ELEMENTS STYLES */
h1 {
    font-family: var(--baseFontFamily), sans-serif;
    font-weight: lighter;
    font-size: var(--H1FontSize);
}
h2 {
    font-family: var(--baseFontFamily), sans-serif;
    color: var(--primaryColor);
    font-weight: lighter;
}

img {
    width: 100%;
    height: auto;
}
p {
    font-family: var(--paragraphFontFamily);
    font-size: var(--contentFontSize);
    font-weight: lighter;
    line-height: 23px;
}
a {
    text-decoration: underline;
    color: var(--primaryColor);
}
body.aldhafra {
    padding-inline: 20px;
    background-color: var(--backgroundColor);
    max-width: 1336px;
    margin: 0 auto;
}

/* FOOTER STYLES */
footer {
    padding-bottom: 5rem;
}

/* HEADER STYLES */
.main-header {
    padding: 2.5rem;
    text-align: center;
}
.main-header .header-logo img {
    max-width: 250px;
    margin: 0 auto;
}
.main-header h1 {
    text-align: center;
    color: var(--primaryColor);
}

/* HERO STYLES */
.section-hero .content {
    text-align: center;
    padding-block: 40px;
}
.section-hero .content h5 {
    font-family: var(--alternateHeadingFontFamily);
    text-transform: uppercase;
}
.section-hero .content p {
    margin: auto;
    text-align: center;
    max-width: 400px;
}

/* IMAGE CONTENT STYLES */
.section-img-content {
    text-align: center;
    padding: 0px 0 40px;
}
.section-img-content img {
    max-width: 400px;
}
.section-img-content h5 {
    font-family: var(--alternateHeadingFontFamily);
    text-transform: uppercase;
}
.section-img-content p {
    margin: 0 auto;
    max-width: 300px;
}

/* SOCAILS STYLES */
.social-container .feed {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
}
.social-container .icons {
    text-align: center;
    padding-bottom: 30px;
}
.social-container .icons img, 
.social-container .icons svg {
    max-width: 28px;
}
.social-container .icons svg {
    fill: var(--primaryColor);
    height: auto;
}
.social-container .icons img:nth-child(2) {
    padding-left: 15px;
    max-width: 15px;
}
@media(max-width: 767px) {
    .social-container .feed {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 475px) {
    .social-container .feed {
        grid-template-columns: repeat(1, 1fr);
    }
}