@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*      { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}


:root {

    /*Colors*/

   --white-color: #fff;

   --dark-color : #252525;

   --primary-color : #220901;

   --secondary-color : #621708;

   --medium-gray-color : #ccc;

   --grey-white-color: #F2F0EF;


   /*Font Size*/

  --font-size-small : 0.9rem;

  --font-size-normal : 1rem;

  --font-size-medium : 1.12rem;

  --font-size-large : 1.5rem;

  --font-size-xl : 2rem;

  --font-size-xxl: 2.3rem;


  /*Font Weight*/

  --font-weight-normal: 400;

  --font-weight-medium: 500;

  --font-weight-semibold: 600;

  --font-weight-bold: 700;


  /*Border Radius*/

  --border-radius-small: 8px;

  --border-radius-medium: 30px;

  --border-radius-circle: 50%;


  /*Site max width */

  --site-max-width: 1300px;

}

/*Styling the whole site*/


ul{
    list-style: none;
}


a{
    text-decoration: none;
}


button{
    cursor: pointer;
    border: none;
    background: none;
}


img{
    width: 100%;
}


.section-content{
    margin: 0 auto;
    padding: 0 20px;
    max-width: var(--site-max-width);
}


/*Styling the navbar and header section*/


header{
    position: fixed;
    width: 100%;
    z-index: 5;
    background: var(--secondary-color) ;
}


header .navbar {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
}


.navbar .nav-logo .logo-text {
    color: var(--grey-white-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}


.navbar .nav-menu{
    display: flex;
    gap : 10px;
}


.navbar .nav-menu .nav-link {

    padding: 10px 18px;
    color: var(--grey-white-color);
    font-size: var(--font-size-medium);
    border-radius: var(--border-radius-medium);
    transition: 0.3s ease;

} 

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    cursor: pointer;
    list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary span {
    margin-left: 6px;
    font-size: var(--font-size-small);
}

.nav-dropdown[open] summary,
.nav-dropdown summary:hover,
.nav-dropdown summary:focus-visible,
.dropdown-link:hover,
.dropdown-link:focus-visible {
    background: var(--primary-color);
    outline: none;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 8px;
    border-radius: var(--border-radius-small);
    background: var(--secondary-color);
    box-shadow: 0 8px 18px rgb(0 0 0 / 20%);
}

.dropdown-link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--border-radius-medium);
    color: var(--grey-white-color);
    font-size: var(--font-size-medium);
    transition: 0.3s ease;
}
/*Styling the hero section  */

.hero-section{
    min-height: 100vh;
    background-color: var(--primary-color);
}

.hero-section .section-content{
    display: flex;
    align-items: center;
    min-height: 100vh;
    color: var(--grey-white-color);
    justify-content: space-between;
}

.hero-section .hero-details .title{
    font-size: var(--font-size-xxl);
    color: var(--grey-white-color);
    font-family: "Oswald", sans-serif;
}

.hero-section .hero-details .subtitle {
    margin-top: 8px;
    max-width: 70%;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);

}

.hero-section .hero-details .description{
    max-width: 70%;
    margin: 24px 0 40px;
    font-size: var(--font-size-medium);
}