@import url('../CSS/font.CSS');


html,body{
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
}
:root{

    /*-------theme color-------------------*/
    --text-gray:#3f4954;
    --text-light:#686666da;
    --bg-color:#0f0f0f;
    --white:#ffffff;
    --mid-night:#104f55;

    /*  gradient color*/

    --sky:linear-gradient(120deg,#a1c4fd 0%,#c2e9fb 100%);

    /*-------theme font family-------------*/
    --Abel :'Abel',cursive;
    --Anton :'Anton',cursive;
    --Josefin_Sans :'Josefin_Sans',cursive;
    --Lexend_Deca :'Lexend_Deca',cursive;
    --Livvic :'Livvic',cursive;
}

/*----global classes-----example-any where text in the body remove underline-----*/

a{
    text-decoration: none;      /* nav weatherman text under line removed */
    color:var(--text-gray);
}

.flex-row{                     /*  when open in mobile */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;          /* when open in mobile icons wrap in verticle line */   
}

ul{
    list-style-type: none; /* when using ul command in body remove  disc , bullet, circle etc. */ 
}

h1{
    font-family: var(--Abel);
    font-size: 2.5rem;
}

h2{
    font-family: var(--Abel);
    
}

h3{
    font-family: var(--Abel);
    font-size: 1.3rem;
}

button.btn{
    border: none;
    border-radius: 2rem;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-family: var(--Livvic);
    color:var(--sky);
    cursor: pointer;
    
}
span{
    font-family: var(--Abel);
}

/*-----x----global classes-----x------*/

/*---------slide show fade-----------*/


.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0.1s;
    animation-name: fade;
    animation-duration: 3.0s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .1} 
    to {opacity: 5}
  }
  
  @keyframes fade {
    from {opacity: .1} 
    to {opacity: 5}
  }

  /*-----xx----slide show fade----xx-------*/


/*--------------navbar-------------*/

.nav{
    background:white;
    margin-top: 0.8rem;
    padding: 0 2rem;
    height: 0rem;
    min-height: 10vh;
    overflow: hidden;
    transition:height 1s ease-in-out;

}

.nav .nav-menu{
    
    justify-content: space-between; /* space between main icon navigation bar , weatherman  button row social icons*/
}

.nav .toggle-collaps{
    position: absolute;
    top:0%;
    width: 88%;
    cursor: pointer;
    display: none;
}

.nav .toggle-collaps .toggle-icons{
    display:flex;
    justify-content:flex-end ;  /*  sandwich button placement left ,right*/
    padding: 1.7rem 0;

}

.nav .toggle-collaps .toggle-icons i{
    font-size: 1.4rem;
    color:var(--text-gray);
 }

 .collaps{
    height: 30rem;
    width: 9rem; 
 }

.nav .nav-items{                     /*  navigation row items */
    display:flex;
    margin: 0;
}

.nav .nav-items .nav-link{
    padding: 1.6rem 2rem;            /*  navigation buttons gap top/bottom1.6rem   and left/right3rem */   
    font-size: 1.1rem;
    position: relative;
                                     /*       font-family:var(--Abel); */
    font-size: 1.1rem;
}

.nav .nav-items .nav-link:hover{
    background-color: var(--mid-night);

}

.nav .nav-items .nav-link:hover a{
    color:var(--white);

}
.nav .nav-items .active {
    color:var(--white);
    background-color: var(--mid-night);

}

.nav .nav-brand a{                     /*  weatherman */ 
    font-size: 1.6rem;
    padding:1rem 0;
    display: block;
    font-family:var(--Abel);  
    font-size: 1.6rem;
  
}

.nav .social{
    padding:1.4rem 0;
}

.nav .social i{
    padding: 0 .8rem;
}

.nav .social i:hover{
    color:#a1c4cf;
}

/*------x--------navbar--{}----x-------*/

/*--------------main content-------------*/

/*-----------line----------------------*/

main .line01 {

    left: 0px; 
    margin-top: 5px; 
    width: auto; 
    height: 5px;
    background-color:#486C6F;

}

main .line02 {

    left: 0px; 
    margin-top: 2px; 
    width: auto; 
    height: 5px;
    background-color:#486C6F;

}


/*-------x----line------------x----------*/

/*--------------site title-------------*/
main .site-title{
    
padding-top: .3rem;
background-size: cover;
height: auto;
display: flex;
justify-content:center;
width:100%;
}

/*

main .site-title .site-background{

    padding-top: 10rem;
    text-align: center;
    color: var(--white);

}

main .site-title h1,h3{
    margin: 0.3rem;
}
main .site-title .btn{
    margin: 1.8rem;
    background:var(--white);
}
main .site-title .btn:hover{
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);

}                                       
*/
/*-------x-------site title-------x------*/


/*--------------blog carousel-------------*/
main.blog{
    
    background-repeat: no-repeat;
    background-position: right;
    height: 100vh;
    width: 100%;
    
}


main .blog .blog-post{
   padding-top: 6rem; 
}
main .blog-post .blog-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 80%;
    margin: 3rem 2rem;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);

}
main .blog-content .blog-title{
    padding: 0.7rem 0;
    
}
main .blog-content .blog-title h2{
    
    color: rgb(20, 182, 74);
    

}
/*-----btton carousel------------------*/

main .blog-content .btn-blog{   
    padding: .7rem 2rem;
    background:var(--mid-night);
    margin:.5rem;
}
main .blog-content .btn-blog a{   
    color: whitesmoke;
}
main .blog-content span{
    display: block;
    padding: .6rem .2rem;

}
section .container .owl-nav{
    position: absolute;
    top: 6%;
    margin: 0 auto;
    width: 100%;
    
}
.owl-nav .owl-prev .owl-nav-prev,
.owl-nav .owl-next .owl-nav-next{
    color: var(--text-gray);
    background: transparent;
    font-size: 2rem;

}



/*-------x-------blog carousel-------x------*/

/*-------x-------main content------x-------*/

/*------------------footer-----------------*/
footer.footer{
    height: 100%;
    background:var(--bg-color);
    position: relative;
    

} 
footer.footer .container{
    display: grid;
    grid-template-columns:repeat( 3, 2fr);

} 
footer.footer .container> div{
    flex-grow: 1;
    flex-basis: 0;
    padding: 3rem 2rem;
} 
footer.footer .container h2{
    color:var(--white);
    
}
footer.footer .container p{
    line-height: 1.5rem;
}


footer.footer .Services .form-element{
    background: black;
    display: inline-block;

}

footer.footer .Services .form-element input{
    padding: .5rem .7rem;
    border: none;
    background: transparent;
    color:var(--white);
    font-family: var(--Josefin_Sans);
    font-size: 1rem;
    width: 74%;
}

footer.footer .Services .form-element span{
    background: skyblue;
    padding: .5rem .7rem;
    cursor: pointer;
}
footer.footer .container p{
    color:rgb(204, 202, 202) ;
    font-family: var(--Abel);
    text-align: justify;
    padding-right: 5rem;
    
}
footer.footer .rights{
    justify-content: center;
    
}
footer.footer .rights h4{
    color:rgb(204, 202, 202) ;
    font-family: var(--Abel);
    letter-spacing: 0.1rem;
}


footer.footer .move-up{
    position: absolute;
    right:6%;
    top:50%;
}

footer.footer .move-up span{
    color:var(--mid-night);
}

footer.footer .move-up span:hover{
    color:var(--white);
    cursor: pointer;

}


/*---------x---------footer--------x---------*/


/*-----------viw port less than 1024px---------*/

@media only screen and (max-width:1024px){
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;
    }    
    .nav .toggle-collaps{
        display: initial;
    }
    footer.footer .container{
        grid-template-columns:repeat( 2, 1fr);
        
    }    
  
}

/*-----x------viw port less than 1024px----x-----*/


/*-----------viw port less than 750px---------*/

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

    .example1 h3 {
        font-size: 1.5rem;
        line-height: 30px;
    }
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;
    }    
    .nav .toggle-collaps{
        display: initial;
    }
    footer.footer .container{
        grid-template-columns:repeat( 1, 1fr);
        padding-top: 0rem;
        
    } 
    footer.footer{
        
        margin-top: 3rem;
        
    } 
     
  
}

/*-----x------viw port less than 750px----x-----*/

/*-----------viw port less than 520px---------*/

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

    
    footer.footer .rights{
        justify-content: center;
        font-size: .7rem!important;
    }
    nav .toggle-collaps{
        width: 80%!important;
        
    }
    
    main .slideshow-container{
        display: none;
        
    }

    main .line02{
        display:none;
    }

    footer.footer .rights h4{
        letter-spacing: 0.02rem;
    }

    
    
/*-------x----viw port less than 520px---x-----*/  

/*-----------viw port less than 320px---------*/

@media only screen and (max-width:320px){
    
    footer.footer .rights{
        justify-content: center;
        font-size: .6rem!important;
    }

    footer.footer .rights h4{
        letter-spacing: 0.01rem;
    }
    
    
    
/*-------x----viw port less than 320px---x-----*/  

}
}