@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@400;500;700&display=swap');






/****** GENERAL OVERVIEW  - VARIABLES ******/

:root {

    /* FONT SIZE */
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-medium: 18px;
    --font-size-large: 26px;
    --font-size-x-large: 32px;

    /* BACKGROUND - COLORS */
    --main-color: rgb(90, 4, 4);
    --third-color: rgba(20, 20, 20);
    --second-color: rgba(255, 255, 255, 0.548);

    /* FONT-COLORS */
    --color-one: #ccc; /* white - ish */
    --color-two: #eee; /* white */
    --color-three: rgb(7, 195, 241); /* cyan */
    --color-four: rgba(90, 4, 4, .7); /* brown */

    /* SPACING - PADDING - MARGIN */
    --x-small-space: 8px;
    --small-space: 12px;
    --normal-space: 22px;
    --medium-space: 26px;
    --big-space: 32px;
    --x-big-space: 44px;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0; 
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--second-color);
}


/****** TYPOGRAPHY - COLORS - LINKS - LISTS - BUTTONS *****/

/* TEXT */ 

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-one);
}

a {
    text-decoration: none;
    color: var(--color-four);
}

/* Big title */
h1, .big-title {
    font-size: var(--font-size-large);
}

/* Medium Title */
h2, h3, .text p, .text button {
    font-size: var(--font-size-medium);
}

/* Small Title */
h4, h5, h6, .prev, .next {
    font-size: var(--font-size-normal);
    font-weight: 500;
}

/* Capitalize */
h1, h2, h3, h4, h5, h6, .nav-link, .prev, .next, .text button, .text p{
    text-transform: capitalize;  
    color: var(--color-two);
}

strong {
    color: #ff9677;
    text-transform: capitalize;
}

/* Responsive Font-sizes */
@media only screen and (min-width: 800px) {
    body{
        font-size: var(--font-size-normal);
    }
    h1, .big-title {
        font-size: var(--font-size-x-large);
    }
    h2, h3, .text p, .text button {
        font-size: var(--font-size-large);
    }
    h4, h5, h6, .nav-link, .prev, .next {
        font-size: var(--font-size-medium);
    }
}

/** List ***/
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/****** LAYOUT - COMPONENTS - SMALL DETAILS ******/

/** STYLE CLASSES **/

.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.row {
    flex-direction: row;
}

/* center element / container - horizontal */
.center {
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* center element / container - vertical */
.middle {
    vertical-align: middle;
    align-items: center;
    align-self: center;
}

/* Icon & nav-link padding - **normal-padding** */
.normal-padding {
    padding: 8px 15px;
}

/** TRANSITIONS **/
a, .nav-bar, .mySides img{
    transition: all .4s ease-in-out;
}

/* Backgrounds */
header, .text, .about-us {
    background-color: var(--main-color);
}

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

header {
    position: fixed;
    top: 0;
    justify-content: space-between;
    width: 100%;
    padding: 0 var(--normal-space);
    height: 100px;
    transition: all .6s cubic-bezier(0.75, 0.82, 0.165, 1);
    z-index: 2;
    border-bottom: 1px solid #797575;
    user-select: none;
    -webkit-user-select: none;
}

/* ======= NAV BAR =========*/
.nav-bar {
    max-width: 600px;
}

/* NAV LIST & LINK */
.nav-list{
    justify-content: space-around;
}

.nav-link {
    display: block;
}

.nav-link:hover {
    color: var(--color-three); /*cyan*/
}

/* LOGO CONTAINER */
.logo {
    height: 100px;
    width: 100px;
}

/* LOGO IMG */
.logo img {
    width: 100%;
    height: 100%;
}

/* ======== Main ============ */
main {
    margin-top: 100px;
}

/* ========== Slideshow container =========*/
.slideshow-container {
    margin: auto;
    max-width: 1000px;
    position: relative;
  }

  img {
    background-color:rgb(94, 90, 90);
  }

  .mySlides {
    display: none;
  }

  .mySlides:hover img{
   opacity: .95;
   
  }
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: var(--normal-space);
    font-weight: bold;
    font-size: 16px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .text {
    opacity: .75;
    color: var(--color-two);
    padding: var(--normal-space) calc(var(--normal-space) * 1.5);
    position: absolute;
    bottom: 10px;
    width: 100%;
    font-weight: 600;
    display: grid;
    grid-template-columns: auto auto auto;
    line-height: 1.2;
    letter-spacing: 1px;
  }

  .text p {
    grid-column: span 2;
  }

  @media  screen and (max-width: 750px) {
    .slideshow-container {
        height: 75vh;
    }
   .mySlides {
    height: 100%;
    
   }
   .mySlides img {
    height: 100%;
    object-fit: cover;
   }
   .text {
    padding: 1rem;
   }
  }


  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--color-one);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  /** ABOUT - US & STRUCTURE **/

  /* ======== About us ========*/
    .about-us {
        margin-top: var(--medium-space);
        color: var(--color-one);
    }

    .brown {
        background-color: rgb(97, 4, 4);
        padding: 44px 0;
        margin: 44px 0;
    }

    /* ======= Contact ======= */
    .contact-us {
        
        position: fixed;
        right: 5px;
        top: 75%;
        transform: translateY(-50%);
    }

    .contact {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        margin: .25rem .25rem;
    }

    .contact i{
        display: block;
        font-size: 1.5rem;
        border-radius: 50%;
        background: black;
        padding: .5rem .9rem;
        transition: all 500ms;
        color: white;
        opacity: .5;
    }
    
    .contact i:hover{
        opacity:1;
        transform: rotate(360deg);
    }

   .contact p {
        font-size: 10px;
        background: rgba(0, 0, 0, 0.716);
        border-radius: 1rem 0 0 1rem;
        transition: all ease-in 500ms;
        opacity: 0;
        transition-delay: 100ms;
    }

    /* ============ Footer ============*/

    footer {
        background-color: rgb(90, 4, 4);
        color:rgba(218, 213, 213, 0.75);
        padding: 22px;
        text-align: center;
        font-size: 14px;
        margin: 0;
    }

    /* Animate on scroll */

    .hidden {
        opacity: 0;
        transform: translateX(-100%);
        transition: all 1.25s;
    }
    .show {
        opacity: 1;
        transform: translateX(0);
    }
    .criteria:nth-of-type(2) {
        transition-delay: 200ms;
    }

    .criteria:nth-of-type(3) {
        transition-delay: 400ms;
    }
    .criteria:nth-of-type(4) {
        transition-delay: 600ms;
    }

    @media (prefers-reduced-motion) {
        .hidden {
            transition: none;
        }
    }