/*
1-Common Styles
2-General Styles
3-Sections
   3.0-Header Section
   3.1-Home Section 
   3.2-About Section 
   3.3-Portfoilo Section 
   3.4-Service Section 
   3.5-Prices Section 
   3.6-Team Section 
   3.7-Blog page 
   3.8-Contact Section  
 */



/* 1-Common Styles */
/* 
container
overlay
opacity :hover
section header
section padding
hover effect (left to right) ->1
hover effect (top to bottom) ->2
*/



/* overlay */
/* overlay on home */

.container {
    width: 80%;
    margin: auto;   
}


.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);  /* red , green , blue , opacity*/

    /* background-color:#1c1d21; 
    opacity: .8; */
    /* background-color: rgb(35, 34, 34);
    opacity: .5; */

}

/* opacity */

.hover-opacity {
    transition: opacity .8s;
    /* bybt2a zhor el hover  , transition lw7dha bt5li kol 7aga tt3mlha transition */
}
.hover-opacity:hover {
    opacity: 0.8;
    
}


/* hover effect (left to right) ->1 $ hover effect (top to bottom) ->2   */
.ltr-effect  ,.tb-effect {
    position: relative;
}

.ltr-effect:after , .tb-effect::after {
    content: "";
    background-color:black;
    position: absolute;
  
   /* to full about-item  */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; 
    opacity: .9;
    z-index: -1; 
}




.ltr-effect:after {
    width:1%;
    transition:  width 0.5s;
    visibility: hidden;
}
.ltr-effect:hover:after{
   width: 100%;
   visibility: visible;
} 

.ltr-effect:hover .item-title {
    color:var(--wightColor);

}



.tb-effect::after {
    transition: height .5s , opacity .5s;
    height: 0;
}
 
 .tb-effect:hover::after {
    height: 100%;
 }


.Portfolio-item:hover .Portfolio-category ,
.Portfolio-item:hover .Portfolio-desc ,
.Portfolio-item:hover .a-Portfolio-item {
    top: 0;
    opacity: 1;
    visibility: visible;

}

.blog-item-content span ,.blog-content1-info span{
    margin-right: 10px;
}


/* -------------------------------------------------------------------------- */
/* 2-General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* mt5lesh el padding yzawd f width or el padding ya5od mn el width */
}


body {
    font-family: 'Varela Round', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Montserrat', sans-serif;
}

button {
    font-family: inherit;
}

.padding-section {
    padding: 120px 0;
}

.section-header {
    text-align: center;
}

.section-header .section-title {
  font-size: 35px;
  text-transform: capitalize;
  margin-bottom: 10px;
  font: bold;
}

.section-header .line {
    display: block;
    width: 40px;
    height: 4px;
    background-color: var(--mainColor);
    margin: 0 auto 70px;
    border-radius: 4px;

}

:root {
    --mainColor: #6195ff ;
    --grayDarkColor :#999;  
    --whiteGrayColor :#e8e8e8;
    --backgroundColor :#f9f9f9;
    --wightColor: #fff;
   
}

.float {
    overflow: hidden;
}