/* ****************************************************************
                __________COMMON STYLES__________
****************************************************************** */

/* =============Imported Font=============  */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Work Sans', sans-serif;
}

/* ============= CSS Variables=============  */
:root{
    --color-primary:#131313;
    --color-secondary:#424242;
    --color-tertiary:#727272;
    --orange-color:#ff900e;
    --border-color:#e7891ccc;
    --header-bg:#ff900e1a;
    --footer-bg:#fae1c3ad;
}

.container{
    width: 80%;
    margin: 0 auto;
    padding: 3rem 0;
}

a{
    color: var(--color-secondary);
}

.btn-primary{
    border: none;
    background-color: var(--orange-color);
    color: #fff;
    padding: 15px 20px;
    font-weight: bold;
    letter-spacing: .5px;
    border-radius: 5px;
    transition: all .3s ease;
    border: 2px solid transparent;
}
.btn-primary:hover{
    background-color:rgba(255, 255, 255, 0.671);
    color: var(--orange-color);
    border: 2px solid var(--border-color);
}
/* ****************************************************************
             __________HEADER STYLES__________
****************************************************************** */
header{
    background-color: var(--header-bg);
}
.header__wrapper{
    width: 80%;
    margin: 0 auto;
}
/* =============Nav Bar Styles=============  */
nav{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 1.9rem 0;
}
.nav-logo{
    width: 60%;
}
.nav-logo > h2{
    font-weight: 800;
    font-size: 1.8rem;
}
.nav-link{
    width: 40%;
}
.nav-link > ul{
    display: flex;
    justify-content: space-evenly;
}

.nav-link > ul > li > a{
    background: transparent;
    padding: 10px 15px;
    border-radius: 5px;
    color: var(--color-secondary);
    transition: all .3s ease;
}

.nav-link > ul > li > a:hover{
    background: var(--orange-color);
    color: #fff;
}

/* =============Hero Section Styles=============  */
.hero_area_wrapper{
    text-align: center;
}
.web-header{
    font-size: 2rem;
    line-height: 60px;
}
.web-intro-text{
    padding: 1rem 3rem 1.5rem;
    line-height: 1.4rem;
    color: var(--color-tertiary);
}
.top-banner{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
}
.top-banner > img{
    width: 100%;
}

/* ****************************************************************
            __________EXPLORE SECTION STYLES__________
****************************************************************** */
.explore__section{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

.team_img_wrapper{
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.team_image > img{
    width: 100%;
}
.explore-info{
    width: 50%;
}


.explore-info > h2{
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.3rem;
}
.light-color{
    font-weight: normal;
    color: var(--color-tertiary);
}
.diff-color{
    color: #ff8c08;
}
.explore-info > p{
    margin: .1rem 0;
    line-height: 1.4rem;
    color: var(--color-tertiary);
}

/* ****************************************************************
         __________FEATURE SECTION STYLES__________
****************************************************************** */

.feature-section{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.feature-info{
    width: 45%;
}
.feature-info > h2{
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.3rem;
    border-left: 4px solid var(--border-color);
    padding-left: 10px;
    margin-top: 2rem;
}
.feature-info > p{
    margin: 1rem 0;
    line-height: 1.4rem;
    color: var(--color-tertiary);
}
.feature-list{
    padding-left: 1.5rem;
}

.feature-list > article{
    margin: 2rem 0;
}
.feature-list > article > h3{
   color: var(--color-primary);
}
.feature-list > article > p{
    color: var(--color-tertiary);
    margin-top: 10px;
    font-size: 14px;
}
.feature_img{
    width: 45%;
}
.feature_img > img{
    width: 100%;
}

.experience-icon{
    background-color: var(--orange-color);
    position: relative;
    top: -85px;
    left: -95px;
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    padding: 2rem;
    border-radius: 6px;
    font-weight: bold;
    color: #fff;
}
.experience-icon > p{
    font-size: 1rem;
    font-weight: normal;
}
/* ****************************************************************
           __________FACTS SECTION STYLES__________
****************************************************************** */
.facts-section > h2{
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.3rem;
}

.facts-section > p{
    margin: 1rem 0 3rem;
    line-height: 1.2rem;
    color: var(--color-tertiary);
}

.our-facts{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
    margin-top: 5rem;
}

.facts-item{
    border: 1px solid var(--border-color);
    width: 17%;
    padding: 2rem 0;
    border-radius: 5px;
    transition: all .4s ease;
}
.facts-item > h3{
    font-size: 1.5rem;
    margin:8px 0;
    color: var(--color-secondary);
}

.facts-item > p{
    color: var(--color-tertiary);
}
.facts-item:hover{
    border: 1px solid var(--orange-color);
    box-shadow: 1px 1px 10px 1px #ff8c0867, -1px -1px 10px 1px #ff8c085b ;
    transform: scale(1.2);
    
}
.facts-item:hover > img{
    filter: drop-shadow(4px 4px 1px #272727b9);
    transform: scale(1.15);
}
/* ****************************************************************
         __________SPONSORS SECTION STYLE__________
****************************************************************** */
.sponsor-section{
    text-align: center;
    margin: 5rem auto;
}

.sponsor-section > h2{
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.3rem;
}

.sponsor-section > p{
    margin: 1rem 0 3rem;
    line-height: 1.2rem;
    color: var(--color-tertiary);
}
.sponsor-img-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sponsor-img{
    width: 15%;
}
.sponsor-img > img{
    width: 80%;
    filter: grayscale(1);
}

/* ****************************************************************
                __________LOCATION STYLES__________
****************************************************************** */
.location-section{
    text-align: center;
    margin: 0 auto;
}
.location-section > h2{
    margin: 3rem 0;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.3rem;
}
.locaton-map{
    width: 80%;
    margin: 0 auto;
    
}
.locaton-map > iframe{
    border-radius: 10px;
    border: 4px solid var(--orange-color);
}
/* ****************************************************************
                __________FOOTER STYLES__________
****************************************************************** */
footer{
    width: 80%;
    margin: 0 auto 3rem;
    padding: 2rem 0;
    text-align: center;
    color: var(--color-secondary);
    background-color: var(--footer-bg);
    border-radius: 10px;
}
/* ****************************************************************
                __________MEDIA QUIRES__________
****************************************************************** */

/* =============For Small Devices=============  */

@media only screen and (max-width:576px){

    .container{
        width: 90%;
        padding: 2rem 0 1rem;
    }
    .header__wrapper{
    width: 100%;
    

}
    nav{
        flex-direction: column;
        padding: 0;
        align-items: center;
        justify-content: center;
     }
     .nav-logo{
        width: 100%;
    }
    .nav-logo > h2{
        font-size: 1.5rem;
        text-align: center;
        padding-top: 20px;
    }
        .nav-link{
        width: 100%;
    }
    .nav-link > ul{
        flex-direction: column;
        align-items: center;
        margin: 20px auto;
        gap: 20px;
    }

    /* =====Hero Section Styles====  */

    .web-header{
        font-size:1.05rem;
        line-height: 1.8rem;
    }
    .web-intro-text{
        padding: 1rem 0;
        line-height: 1.3rem;
        text-align: justify;
    }
    .top-banner{
        width: 90%;
    }

    /* =====Explore Section Styles====  */
    .explore__section{
    width: 100%;
    flex-direction: column;
    flex: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
   }

    .team_img_wrapper{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .team_image > img{
        width: 100%;
    }
    .explore-info{
        width: 100%;
    }

    .explore-info > h2{
        font-size: 1.6rem;
    }

    /* =====Feature Section Styles====  */
    .feature-section{
        flex-wrap: wrap;
        flex-direction: column;
        
    }
    .feature-info{
        width: 100%;
    }
    .feature_img{
        width: 100%;
    }
    .feature-list{
        padding-left: 1rem;
    }
    .experience-icon{
        top: -45px;
        left: 25%;
        font-size: 1.25rem;
        padding: 1rem;

    }
    /* =====Fact Section Styles====  */
    .our-facts{
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        gap: 1.5rem;
        margin-top: 5rem;
    }
    
    .facts-item{
        width: 75%;
        padding: 2rem 0;
        
    }
    .facts-item > h3{
        font-size: 1.5rem;
        margin:4px 0;
    }
    .facts-item:hover{
        transform: scale(1.1);
        
    }
/* =====Sponsor Section Styles====  */
    .sponsor-section{
    margin: 3rem auto;
}

.sponsor-section > h2{
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.3rem;
}

.sponsor-section > p{
    margin: 1rem 0 3rem;
    padding: 0 .5rem;
}
.sponsor-img-wrapper{
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2rem;
}
.sponsor-img{
    width: 90%;
}
.sponsor-img > img{
    width: 50%;
}
/* =====Map Section Styles====  */
.location-section > h2{
    margin: 2rem 0;
}
.locaton-map{
    width: 95%;
    margin: 0 auto;
    
}
.locaton-map > iframe{
    border: 2px solid var(--orange-color);
    height: 200px;
}
/* =====Footer Section Styles====  */
footer{
    width: 90%;
    margin: 0 auto .5rem;
    padding: 1rem 0;
    border-radius: 10px;
}
}

/* ==============For Medium Devices============  */

@media only screen and (min-width:577px) and (max-width:992px){
    .header__wrapper{
        width: 90%;
        
    }
    nav{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 1rem 0;
     }
     .nav-logo{
         width: 50%;
     }

     .nav-link{
         width: 50%;
     }
     .nav-link > ul > li > a{
        padding: 5px 8px;
    }
    
    /* =============Hero Section Styles=============  */

    .web-header{
        font-size:1.05rem;
        line-height: 1.8rem;
    }
    .web-intro-text{
        padding: 1rem 0;
        line-height: 1.3rem;
    }
    .top-banner{
        width: 90%;
    }

     /* =====Explore Section Styles====  */
    .explore__section{
    width: 100%;
    
   }
    /* =====Feature Section Styles====  */
    .feature-section{
        flex-wrap: wrap;   
    }
    .feature-info{
        width: 100%;
    }
    .feature_img{
        width: 90%;
        margin: 0 auto;
    }
    .feature-list{
        padding-left: 1rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .experience-icon{
        top: -60px;
        left: 25%;
        font-size: 1.5rem;
        padding: 2rem 7rem;

    }
     /* =====Fact Section Styles====  */
     .our-facts{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 5rem;
    }
    
    .facts-item{
        width: 45%;
        padding: 2rem 0;
        
    }
    .facts-item:hover{
        transform: scale(1.1);
        
    }

    /* =====Sponsor Section Styles====  */
    .sponsor-section{
    margin: 3rem auto;
    }
    .sponsor-img-wrapper{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        text-align: center;
    }
    .sponsor-img{
        width: 20%;
    }
    .sponsor-img > img{
        width: 65%;
    }

}