/*General Styling */
html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

body{
    background-color: #F8F9FA;
    font-family:  'Inter' !important;
}
p{
    font-family:  'Inter' !important;
    text-align: center;
    font-size: 1.5rem;
}

a {
    text-decoration: none;
}

h1{
    font-family: 'Ubuntu' !important;
    text-align: center !important;
}

h2{
    font-family:'Ubuntu' !important;
    text-align: center;
    font-size: 3rem;
    font-weight: 800;
}

/*Styling Navigation Bar*/
.navbar-nav-2{
    width: 32% !important;
    display: flex !important;
    flex-direction: row;
    margin: 1% 0 !important;
}

.nav-item{
    margin: 0 2.5% !important;
    width: 21% !important;
    font-size: 1.25rem !important;
    list-style-type: none;
}

.nav-item .active{
    color: #8DD8F7 !important;
}


/*Styling Slideshow*/
.slideshow{
    background-image: url(../image/Background-HALISOK-Blue.png);
    background-repeat: none;
    background-size: cover;

    width: 100%;
    height: 80vh;

    justify-content: center !important;
    align-content: center !important;
}

.slideshow img{
    width: 30% !important;
}

.center {
    display: block;
    margin: auto !important;
    width: 60%;
  }

.slideshow p{
    color: white !important;
}

.slogan{
    background-color:  white;
    padding: 0.5%;
    margin: 2% auto !important;
    width: 50%;
    border-radius: 10px;   
}

.slogan h1{
    color: #004B90;
    font-size: 2.75rem !important;
    text-align: center;
    font-weight: bolder;
    margin-bottom: 0 !important;
}

/*Styling main content*/
/*styling parallax scrolling*/

.parallax-2{
    margin: 5% auto;
}

.parallax-2 p{
    width: 75% !important;
    margin: 0 auto !important;
}

.parallax-text{
    color: #004B90;
    padding: 3% !important;
    font-weight: 900 !important;
    font-size: 2.9rem;
    background-image: url('../image/Background-HALISOK-white.png') !important;

    /*parallax effect*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-3{
    width: 95% !important;
    margin: 5% auto !important;
    display: flex !important;
}


.main-background-2{
    background-image: url(../image/Background-HALISOK-Light_Blue.png);
    background-size: cover;

    width: 35%;
    float: left;
    align-content: center !important;
    margin: 0 auto !important;
}

.main-background-2 h1{
    color: #222C3F;
    text-align: center;
    font-size: 3.5rem;
    font-weight: bolder !important;
}

.main-text-2{
    width: auto;
}

.main-text-2 ul li{
    list-style-type: none;
    display: flex;
    padding: 2.5% 0 !important;
    align-items: center !important;
}

.main-text-2 li img{
    width: 100px !important;
    height: 100px !important;
}

.main-text-2 li p{
    width: 70% !important;
    text-align: left;
}

/*design footer*/
.footer{
    background-color: gainsboro;
    width: 100%;
    margin-bottom: 0.5% !important;
    display: flex;
    padding: 0.4% !important;
}

.footer p, .footer ul{
    margin-bottom: 0 !important;
}

.footer .navbar-nav-footer{
    width: 25%;
    display: flex !important;
}

.navbar-nav-footer .nav-item{
    font-size: 1.1rem !important;
    list-style-type: none;
}

.footer .copyright{
    width: 50%;
    font-size: 1.1rem !important;
}

.footer .contactUS{
    display: flex;
}

.footer .contactUS p{
    font-size: 1.1rem !important;
}

.footer .contactUS a i{
    font-size: 20px !important;
}

/*small-laptops*/
@media only screen and (max-width: 1686px) {
    p{
        font-size: 1rem !important;
    }
    
    /*This code could be deleted*/
    h2{
        font-size: 1.25rem;
        font-weight: 800;
    }
    
    .slogan h1{
        font-size: 2.25rem !important;
    }

    .slideshow{
        height: 70vh !important;
    }
    .slideshow img{
        width: 25% !important;
    }
    
    /*Navigation*/
    /*Styling Navigation Bar*/
    .navbar-nav{
        width: 40% !important;
    }

    .nav-item{
        width: 21%;
        font-size: 1rem !important;
        margin: 0 1.5% !important; padding: 0;
    }

    .navbar img{
        width: 17.5% !important;
    }

    .parallax-text{
        font-size: 2.1rem;
    }

    .main-background-2 h1{
        font-size: 2.5rem !important;
        padding: 0 5%;
    }

    .main-text-2{
        width: 60% !important;
    }

   /*design footer*/
  
    .footer .navbar-nav-footer{
        width: 36%;
        margin: 0;
        margin-right: 1.5%;
    }

    .footer .nav-item{
        font-size: 1rem !important;
    }

    .footer .copyright{
        width: 26% !important;
        font-size: 1rem !important;
    }

    .footer .contactUS p{
        font-size: 1rem !important;
    }

    .footer .contactUs a i{
        font-size: 16px !important;
    }

}
  
/*ipad version - horizontal*/
@media only screen and (max-width: 1200px) {
    /*This code could be deleted*/
    h2{
        font-size: 1.5rem;
        font-weight: 800;
    }

    .center {
        width: 65%;
    }

    .slideshow{
       height: 70vh !important;
    }
    
    .slogan h1{
        font-size: 2.15rem !important;
    }
    
    /*Navigation*/
    /*Styling Navigation Bar*/
    .navbar-nav{
        width: 50% !important;
    }
    /*styling parallax scrolling*/
    .parallax-text{
        font-size: 1.8rem;
    }

    .main-text-2 li img{
        width: 70px !important;
        height: 70px !important;
    }

   /*design footer*/
    .footer .navbar-nav-footer{
        padding: 0; margin: 0;
        width: 37.5%;
    }

    .footer .nav-item, .footer .contactUS p{
        font-size: 0.9rem !important;
    }

    .footer .copyright{
        width: 25% !important;
        font-size: 0.9rem !important;
    }
    
    .footer .contactUS a i{
        font-size: 16px !important;
    }
    
  }

/*ipad version - vertical */
@media only screen and (max-width: 890px) {
    .slideshow {
       height: 55vh !important;
    }

    .center {
        width: 75%;
    }

    p{
        font-size: 0.85rem !important;
    }
    
    /*Navigation*/
    /*Styling Navigation Bar*/
    .navbar-nav{
        width: 55% !important;
        display: flex;
        flex-direction: row;
    }

    .nav-item{
        font-size: 0.9rem !important;
    }

    .navbar img{
        width: 25% !important;
    }

    /*styling parallax scrolling*/
    .parallax-text{
        padding: 5% 2.5% !important;
        font-size: 2rem;
    }

    /*design footer*/
    .footer{
        background-color: gainsboro;
        width: 100%;
        display: inline-block;
        padding: 0.5% 5% !important;
        text-align: center !important;
    }

    .footer .navbar-nav-footer{
        width: 100% !important;
        display: flex !important;
        text-align: center;
        padding: 0; margin: 0;
    }

    .footer .copyright{
        margin: auto !important;
        width: 100% !important;
    }


    .footer .contactUS{
        width: 100% !important;
        justify-content: center !important;
    }

  }

/*phone size*/
@media only screen and (min-width: 260px) and (max-width: 680px) {
    .slideshow{
        height: 60vh !important;
    }
    
    .slideshow p{
        font-size: 0.85rem !important;
    }

    p{
        font-size: 0.85rem !important;
    }

    .slideshow img {
        width: 55% !important;
    }

    .slogan{
        width: 85%;
        margin: 4% auto !important;
    }

    .slogan h1{
        font-size: 1.5rem !important;
        padding: 1.5% 0;
    }

    .center{
        width: 82.5%;
    }
    /*Navigation*/
    /*Styling Navigation Bar*/

    .navbar-nav-2{
        display: none !important;
    }

    .navbar-nav{
        width: 100% !important;
        display: flex;
        flex-direction: column;
        position: inherit !important;
    }

    .nav-item{
        width: 24% !important;
        font-size: 1rem !important;
        margin: 1% 0 !important;
    }

    .navbar img{
        width: 40% !important;
    }

    .navbar-toggler{
        border: none !important;
        color: transparent !important;
    }

    /*styling parallax scrolling*/

    .parallax-2{
        margin: 10% auto;
    }
    
    .parallax-2 p{
        font-size: 0.9rem !important;
    }

    .parallax-text{
        padding: 7.5% 2.5% !important;
        font-size: 1.3rem;
    }

    .parallax-3{
        display: block !important;
    }

    .main-background-2{
        background-image: url(../image/Background-HALISOK-Light_Blue.png);

        background-size: cover;
        width: 95% !important;
        margin: 1% auto !important;
        height: auto !important;
        padding: 5% 2.5% !important;
        float: none !important;
    }

    .main-text-2{
        width: 92.5% !important;
        margin: 1% auto !important;
    }

    .main-text-2 ul{
        margin: 0;
        padding: 0;
    }

    .main-text-2 li img{
        width: 85px !important;
        height: 85px !important;
        margin: 5% 0;
    }

    .main-text-2 li p{
        text-align: left;
        font-size: 0.9rem !important;
    }

    /*design footer*/
    .footer .copyright{
        width: 100% !important;
    }

    .footer .nav-item{
        font-size: 0.8rem !important;
    }

    .footer .copyright{
        font-size: 0.8rem !important;
    }

   
    .footer .contactUS{
        width: 100% !important;
        justify-content: center !important;
    }

    .footer .contactUS p{
        font-size: 0.8rem !important;
    }

    
    .footer .contactUS p i{
        font-size: 0.8rem !important;
        margin: 0 !important;
        
    }
  }