/* ---------------------------------- global ----------------------------- */
* 
{
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}
body
{
    font-family: sans-serif ;   
}
/* ================================ our framework ============================ */
.main_color
{
    color: #ff8b38  !important ;   
}
.main_bk
{
    background-color: #ff8b38 !important ;
}
.main_margin
{
    margin: 20px  0  ;
}
.main_btn
{
    width: 125px ;
    height: 50px ;
    color: #fff ;
    margin: 20px   0 ;
    font-size: 16px ;
    text-transform: capitalize ;
    background-color: transparent ;
    border: 2px solid rgb(230,229,230) ;
    transition: all 0.4s ease-in-out ;   
}
.text_center
{
    text-align: center !important ;
}
.block_center
{
    display: block  !important ;
    margin: 20px auto !important ;
}
/* ---------------- section and line_under_paragraph and image in center at small and extra small screen ---------------- */
@media ( min-width: 0px ) and ( max-width: 991px )
{
    .section_center_xs
    {
        text-align: center !important ;
    }
    /* ---------------- line under header , image of section ---------------- */
    .line_center_xs ,
    .img_center_xs
    {
        margin: 30px  auto  !important ;    
    }
}
.line_under_head
{
    display: block ;
    width: 70px ;
    height: 3px ;
    padding: 1px ;
    margin: 25px 0 ;
    background-color: rgb(230,229,230) ;
}
.upperCase
{
    text-transform: uppercase ;
}
.capitalize
{
    text-transform: capitalize ;
}
.section_padding
{
    padding: 50px 0  !important ;
}
/* ////////////////////////////////  navbar /////////////////////////////// */
.navbar-inverse
{
    padding: 5px 0 ;
/*    border: 2px solid #f00 ; */
}
.scrolled
{
    background-color: rgba(0,0,0,0.6);
    border: 0 ;
}
/* ---------------------- navbar : left part ---------------------- */
/* ========= brand name =========== */
.navbar-inverse .navbar-brand
{
    position: absolute ;
    color: #fff ;
    font-size: 35px ;
/*    border: 2px solid #ff0 ;    */
}
/* ====== brand name : span ======= */
.navbar-inverse .navbar-brand  .brandSpan
{
    color: rgb(234,149,80);
}
/* ---------------------- navbar : right part ---------------------- */
/* ========= links : ul ========= */
.navbar-inverse .navbar-nav    
{
/*    border: 2px solid #f0f ;         */
}
/* ========= links : <ul> <li> <a></a> </li> </ul> ========= */
.navbar-inverse .navbar-nav    >   li   a
{
    font-size: 17px ;
    transition: all 0.3s ease-in-out ;
/*    border: 2px solid #ff0 ;    */
}
/* ========= active link ========= */ 
.navbar-inverse .navbar-nav > .main_color > a       , 
.navbar-inverse .navbar-nav > .main_color > a:hover , 
.navbar-inverse .navbar-nav > .main_color > a:focus
{
    color: #ff8b38 ;
    background : none ;
}
.navbar-inverse .navbar-nav > li a:hover
{
    color: #ff8b38 ;   
}
/* ============ menubar icon ========= */
.navbar-inverse .navbar-toggle
{
/*    top: 10px ; */
/*    border: 2px solid #ff0 ;    */    
}
/* ************************************* navbar section ************************************ */
.header
{
    position: relative ;
    height: auto ; 
    background-image: url("../images/bk.jpeg");
    background-repeat: no-repeat ;
    background-size: cover ;
    background-position: center center ; 
    z-index: 555 ;
}

.header     .overlay
{   
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    background-color: rgba(0,0,0,0.6);
}
/*  vh = view height ظهر فيها حيث ال header هي الشاشة اللي ال viewPort معني ال
    viewPort يعني هيسيب مسافة من الاعلي تساوي ربع ال margin-top: 25vh في منتصف الصفحة حيث معني header بتاع ال row عشان اخلي كل المحتوي اللي في ال
      وهيسيب ربع المسافة من الاعلي وربع المسافة من الاسفل  viewPort واخد نصف ال row حيث ال
*/
.header     .centering-vh
{
    margin-top: 15vh ;
}
/* ================== left part : header info ================== */
.header     .headeLeftPartH1
{
    font-size: 55px ;
    color: rgb(230,229,230) ;
    margin-bottom: 20px ;
}
.header    .headeLeftPartPara
{
    color: rgb(230,229,230) ;
    font-size: 35px ;
    margin: 0 ;
}

.header    .headeLeftPartPara2
{
    color: rgb(230,229,230) ;
    font-size: 17px ;
    line-height: 1.5 ;
}
.header     button
{
    background-color: transparent ;
    border: 2px solid rgb(230,229,230) ;
    transition: all 0.4s ease-in-out ;
}
.header     button:hover
{
    border: 2px solid #ff8b38 !important ;
}
/* ================== right part : header form ================== */
.header     .headForm
{
    width: 360px ;
    height: auto ;
    margin-top: 60px !important;
    background-color: #fff ;
    border-radius: 5px ;
/*    border: 2px solid #ccc ; */
}
.header     .headForm   .formH2
{ 
    padding: 15px ;
    text-align: center ;
    font-size: 22px; 
    font-weight: bold ;
    background-color: #f5f5f5 ;
    color: #333 ;
    margin-top: 0 ;
    margin-bottom: 20px ; 
}
.header     .headForm     input
{
    display: block ; 
    width: 80% ;
    margin: 0  auto ;
    padding: 10px ;
    padding-left: 0 ;
    margin-bottom: 20px ;
    outline: 0 ;
    border: 0 ;
    border-bottom: 1px solid #ccc ; 
}
.header     .headForm     input::-webkit-input-placeholder
{
    text-transform: capitalize ;
    color: #ccc ;
}
.header     .headForm     input[ type=submit ]
{
    width: 100% ; 
    margin-top: 40px ;
    margin-bottom: 0 ;
    border: 0 ;
    padding: 15px ;
    font-size: 16px ;
    color: #fff ;
    transition: all  0.4s ease-in-out ;
}
.header     .headForm     input[ type=submit ]:hover
{
    color:  #ff8b38 ;      
    background-color: rgb(230,229,230) !important ;
}
/* --------------------------------- media query -------------------------- */
@media( min-width: 0px ) and ( max-width:991px)
{
    .header
    {
        padding: 20px 0 ;
        text-align: center ;
    }
    .header     .line_under_head
    {
        margin: 20px  auto ;
    }
    .header     .headeLeftPartPara
    {
        font-size: 25px ;
    }
}
/* ************************************* socialMedia section *********************************** */
.socialMedia
{
    overflow: hidden ;  
    padding: 10px ; 
    margin-bottom: 10px  ;
    background-color: #fff ;
    box-shadow:  -2px  -5px  21px  #000  ;
    -webkit-box-shadow:  -2px  -5px  21px  #000 ;
}
/* ============= left part : socialMedia info ============== */
.socialMedia    .socialInfo
{
/*    border: 2px solid #f00 ;    */
}
.socialMedia    .socialInfo     .socialInfoH4
{
    margin-bottom: 5px ;
    font-size: 25px ;
    font-weight: bold ;
}
.socialMedia    .socialInfo     .socialInfoPara
{
    font-size: 14px ;
    color: #a1a1a1 ;
    line-height: 1.8 ;
    margin: 0 ;
}
/* ============= right part : socialMedia icons ============== */
.socialMedia    .socialIcons
{
/*    border: 2px solid #00f ;    */
}
.socialMedia    .socialIcons    ul
{
    list-style: none ;
    margin: 0 ;
    padding: 0 ;
    margin-top: 15px ;
    text-align: right ;
}
.socialMedia    .socialIcons    ul      li
{
    display: inline-block ;
    margin: 20px  15px  ;
}
.socialMedia    .socialIcons    ul      li      a
{
    color: #ccc ;
}
.socialMedia    .socialIcons    ul      li      a       i
{
    font-size: 33px ;
    transition: all 0.3s ease-in-out ;
}
/* /////////// media query : socialMedia  header and links  /////////// */
@media( min-width: 0px ) and ( max-width:767px)
{
    .socialMedia
    {
        text-align: center ;
    }
    .socialMedia    .socialInfo     .socialInfoH4
    {
        font-size: 30px ;
        margin: 20px  0  ;
    }
    .socialMedia    .socialInfo     .socialInfoPara
    {
        font-size: 16px ;
        margin-top: 25px ;
    }
    .socialMedia    .socialIcons    ul
    {
        margin: 0 ;
        padding: 0 ;
        text-align: center ;
    }
    .socialMedia    .socialIcons    ul      li      a       i
    {
        font-size: 25px ;   
    }
}
@media( min-width: 768px ) and ( max-width:991px)
{
    .socialMedia
    {
        text-align: center ;
    }
    .socialMedia    .socialInfo     .socialInfoH4
    {
        font-size: 35px ;
        margin: 20px  0  ;
    }
    .socialMedia    .socialInfo     .socialInfoPara
    {
        font-size: 18px ;
        margin-top: 25px ;
    }
     .socialMedia    .socialIcons    ul
    {
        margin: 0 ;
        text-align: center ;
    }
}
.socialMedia    .socialIcons    ul      li      a       i.fa-facebook:hover
{
    color: #3b5998 ;
}
.socialMedia    .socialIcons    ul      li      a       i.fa-twitter:hover
{
    color: #1da1f2 ;
}
.socialMedia    .socialIcons    ul      li      a       i.fa-google-plus:hover
{
    color: rgb(221,35,38);
}
.socialMedia    .socialIcons    ul      li      a       i.fa-pinterest:hover
{
    color: #cc2127 ;
}
.socialMedia    .socialIcons    ul      li      a       i.fa-instagram:hover
{
    color: rgb(189,50,162);
}
.socialMedia    .socialIcons    ul      li      a       i.fa-stumbleupon:hover
{
    color: rgb(41,166,40);
}
.socialMedia    .socialIcons    ul      li      a       i.fa-rss:hover
{
    color: rgb(0,223,202);
}
/* ****************************************** tabs section ****************************************** */
.tabs
{
    background-color: #eee ;
/*    border: 2px solid #ff0 ;    */
}
/* ================= tabs column ================= */
.tabs   .tabsPart
{
    list-style: none ;
    padding: 15px  0 ;
/*    border: 2px solid #f0f ;    */
}
.tabs   .tabsPart   .tab
{
    display: block ;
    width: 100px ;
    height: 100px ;
    border-bottom: 2px solid #fff ;
    text-align: center ;
    line-height: 100px ;
    color: #fff ;
    background-color: #333 ;
    cursor: pointer ;
    font-weight: bold ;
    transition: all 0.2s ease-in-out ;
}
.tabs   .tabsPart   .tab:hover
{
    background-color: #ff8b33 ;
}
/* ================= tabs info ================= */
/* remove all tabsInfo except tab1Info */
/*  tab1 بتاع tabInfo ماعدا ال tabsInfo هيخفي كل ال */
.tabs  .tabsInfo    div:not(.tab1)
{
    display: none; 
}
/*  tab1 بتاع image ماعدا ال images هيخفي كل ال */
.tabs  .tabsImg    div:not(.tab1)
{
    display: none; 
}
.appearTabInfo 
{
    display: block ;
}
.tabs   .tabsInfo   .tabInfoH4
{
    font-size: 23px ;
    font-weight: bold ;
    margin: 0 ;
    margin-bottom: 30px ;
}
.tabs   .tabsInfo   .tabInfoPara
{
    color: #a1a1a1 ;
    line-height: 1.8 ;
    margin-bottom: 20px ;
}   
.tabs   .tabsInfo   button
{
    border: 1px  solid  #ff8b33 ; 
    transition: all 0.3s ease-in-out ;
}
.tabs   .tabsInfo   button:hover
{
    border: 1px  solid  #ccc ; 
    background-color: transparent   !important ;  
    color: #ff8b33 ;
}
/* ================= tabs image ================= */
.tabs   .tabsImg
{
    margin-top: 30px ;   
}
.tabs   .tabsImg    img
{
    width: 100% ;
}
@media(min-width:0px ) and ( max-width:980px )
{
    .tabs   .tabsPart   .tab
    {
        display: inline-block ;
        width: 100px ;
        height: 60px ;
        line-height: 60px ;
        margin-bottom: 10px  ; 
        margin-right: 5px ; 
    }
}
/* ************************************* sublist section ************************************* */
.sublist
{
    background-color: #fff ;
/*    border: 2px solid #ff0 ;    */
}
/* ============== left part : sublist image ============== */
.sublist    .sublistImg     img
{
    width: 85% ;    
    height: 300px ;
    margin-top: 40px  ; 
    margin-right: 15%;
    box-shadow:  5px   5px  15px #aaa ,
                -5px  -5px  15px #aaa ,
                -5px   5px  15px #aaa ,
                 5px  -5px  15px #aaa ;
}
/* ======================== right part : sublist info ===================  */
.sublist    .sublistInfo
{
/*    border: 2px solid #f0f ; */
}
/* =========  right part : sublist info row1 , row2 ========= */
.sublist    .sublistInfo   .sublistInfoRow
{
    margin: 10px  0 ;
/*    border: 2px solid #ff0 ; */
}
.sublist    .sublistInfo     .sublistInfoH4
{
    font-size: 25px ;
    font-weight: bold ;
}

.sublist    .sublistInfo    .sublistInfoPara
{
    font-size: 15px ;
    line-height: 1.8 ;
    color: #777 ;
}
/* ======================== sublist : row ========================== */
/* ----------- sublist : row : left part : icon --------- */
.sublist    .sublistInfo    .sublistInfoRow     i
{
    width: 50px ;
    height: 50px ;
    line-height: 50px ;
    text-align: center ;
    color: #ff8b33 ;
    background-color: #fff ;
    border-radius: 50% ;
    margin-top: 20px ;
    margin-bottom: 10px ;
    border: 2px solid  #ff8b33 ;    
}
/* ----------- sublist : row : right part : row info --------- */
.sublist    .sublistInfo    .sublistInfoRow     .sublistInfoRowInfo 
{
    /*    border: 2px solid #f00 ; */
}
.sublist    .sublistInfo    .sublistInfoRow     .sublistInfoRowInfo     .subInfoRowH4
{
    font-weight: bold ;
}
.sublist    .sublistInfo    .sublistInfoRow     .sublistInfoRowInfo     .subInfoRowPara
{
    line-height: 1.8 ;
}
/* ************************************* standard section ************************************* */
.standard
{
    background-color: #f4f4f4 ;
/*    border: 2px solid #ff0 ;    */
}
/* ======================== left part : sublist info ===================  */
.standard    .standardInfo
{
    margin-top: 10px  ; 
/*    border: 2px solid #0ff ;  */
}
.standard    .standardInfo     .standardInfoH4
{
    font-size: 25px ;
    font-weight: bold ;
/*    margin: 20px 0 ; */
}
.standard    .standardInfo    .standardInfoLine
{
    width: 90px ;
    height: 3px ;
    margin: 20px  0 ; 
    background-color: #ff8b33 ;
}   
.standard    .standardInfo    .standardInfoPara1    ,
.standard    .standardInfo    .standardInfoPara2
{
    font-size: 15px ;
    margin-bottom: 25px ;
    line-height: 1.8 ;
    color: #777 ;
/*    border: 2px solid #f0f ;  */
}
/* ============== right part : sublist image ============== */
.standard    .standardImg     img
{
    width: 85% ;    
    height: 300px ;
    margin-left: 15% ; 
    box-shadow:  5px   5px  15px #aaa ,
                -5px  -5px  15px #aaa ,
                -5px   5px  15px #aaa ,
                 5px  -5px  15px #aaa ;
/*    border: 2px solid #ff0 ;    */
}
@media(min-width:0px ) and ( max-width:980px )
{
    .standard
    {
        padding: 10px  0 ;
    }   
    .standard    .standardImg     img
    {
        margin-left: 0 ;
    }
}
/* ************************************* whyAwesome section ************************************* */
.whyAwesome
{
    text-align: center ;   
}
/* ============ whyAwesome header ============  */
.whyAwesome     .whyAwesomeH3
{
    font-size: 35px ;
    color: #444 ;
}
.whyAwesome     .whyAwesomeLine
{
    width: 60px ;
    height: 3px ;
    margin: 20px  auto ; 
}
.whyAwesome     .whyAwesomePara
{
    font-size: 16px ;
    color: #a9aaac ;
    margin-top: 30px  ; 
    margin-bottom: 50px  ; 
}
/* ================ whyAwesome body ===============  */
/*  ------- whyAwesome body : box ------- */ 
.whyAwesome     .whyAwesomeBody     .whyAwesomeBox
{
    margin-bottom: 50px ;
}
.whyAwesome     .whyAwesomeBody   .whyAwesomeBox    i
{
    width: 70px ;
    height: 70px ;
    line-height: 70px ;
    text-align: center ;
    color: #ff8b33 ;
    font-size: 35px ;
    border-radius: 50% ;
    margin: 10px  0 ;
    border: 2px solid #ff8b33 ;
}
.whyAwesome     .whyAwesomeBody   .whyAwesomeBox    .whyAwesomeBoxH4
{
    font-weight: bold ;
    margin: 20px  0 ;
    color: #444 ;
    font-size: 23px ;
}
.whyAwesome     .whyAwesomeBody   .whyAwesomeBox    .whyAwesomeBoxPara
{
    color: #a9aaac ;
    line-height: 1.6 ;
}
/* ************************************* priceOption section ************************************* */
.priceOption
{
    text-align: center ;  
    background-color: #f5f5f5 ;
}
/* ============ whyAwesome header ============ */
.priceOption    .priceOptionH3
{
    font-size: 35px ;
    color: #444 ;   
}   
.priceOption    .priceOptionLine
{
    width: 60px ;
    height: 3px ;
    margin: 20px  auto ; 
    background-color: #ff8b33 ;   
}
.priceOption    .priceOptionPara
{
    font-size: 16px ;
    color: #a9aaac ;
    margin-top: 30px  ; 
    margin-bottom: 50px  ; 
}
/* --------------------------- pricing table --------------------------- */
.priceOption    .priceTable
{
    background-color: #fff ;
    margin-bottom: 30px ;
/*    border: 2px solid #ff0 ;  */
}
/* -------------------- priceTable 1 , 2 ------------------- */
.priceOption    .priceTable1    ,
.priceOption    .priceTable3
{
    margin-top: 35px;  
}
/* ============ pricing table box header ============ */
.priceOption    .priceTable    .priceTableHead 
{
    padding: 10px 0  ;
    background-color: #333 ;
    color: #fff ;   
    border-bottom: 1px solid #fff ;
}
.priceOption    .priceTableHead     .tableHeadH4
{
    font-size: 20px ;
}
/* ============ price Table Body  ============ */
.priceOption    .priceTableBody  
{
    display: block ;
    border-bottom: 5px solid  #ff8b33 ; 
}
.priceOption    .priceOptionBody     .priceTableBodyPara1
{
    padding: 20px 0  ;
    margin: 0 ;
    background-color: #333 ;
    color: #fff ;
    font-size: 70px ;
    font-weight: bold ;
    border: 0 ;
}
/* ++++++ dolor sign span ++++++ */
.priceOption    .priceOptionBody     .priceTableBodyPara1   .currency
{
    font-size: 30px ;
}
.priceOption    .priceOptionBody     .priceTableBodyPara2
{
    padding: 0  ;
    padding-bottom: 10px ;
    margin: 0 ;
    background-color: #333 ;
    color: #adadad ;
    font-size: 15px ;
    font-style:  italic ;
    border: 0 ;
}
.priceOption      .priceTableBodyPara3
{
    color: #fff ;
    font-weight: bold ;
    font-size: 14px ;
    /* padding : top right bottom left :  padding-bottom فهعطيه خمسة بيكسل كمان عشان يكون مساوي لل border واخد خمسة بيكسل للtop لان ال*/
    padding: 5px 0px 10px 0px ;
}
/* ============ pricing table footer ============ */
.priceOption    .priceTableFooter
{
    padding: 0 ;
    margin: 0 ;
    list-style: none ;
}
.priceOption    .priceTableFooter   li
{
    display: block ;
    margin: 10px 0 ;
    padding: 10px  0 ;
    color: #bcbcbc ;
    border-bottom: 1px solid #f5f5f5 ;
}
/* ************************************* testimonials section ************************************* */
.test
{
/*    border: 2px solid #00f ; */
}
/* ============ whyAwesome header ============  */
.test     .testH3
{
    font-size: 35px ;
    color: #444 ;
    text-align: center ;
}
.test     .testLine
{
    width: 60px ;
    height: 3px ;
    margin: 20px  auto ; 
    background-color: #ff8b33 ;   
}
.test     .testPara
{
    font-size: 16px ;
    color: #a9aaac ;
    margin-top: 30px  ; 
    margin-bottom: 50px  ; 
    text-align: center ;
}
/* ================ test body ===============  */
/* ************* item 1 ************* */
.test    .item   
{
    margin-bottom: 25px ;   
/*    border: 2px solid #ff0 ;    */
}
/* //// row1 : team desc //// */
.test    .item      .teamDesc 
{
/*    border: 2px solid #f00 ;    */
    margin-bottom: 15px ;   
}
.test    .item      .teamDesc       .teamBoxPara
{
    display: block ;
    background-color: #f5f5f5 ;
    color: #333 ;
    line-height: 1.8 ;
    padding: 20px ;
    margin: 0 ;
    position: relative ;
}
/* ------------- arrow under paragrph ------------- */
.test    .item      .teamDesc       .teamBoxPara:after
{
    content: "";
    display: block ;
    width: 0 ;
    height: 0 ;
    border-style: solid ;
    border-width: 15px 15px 15px 15px ;
    border-color: #f5f5f5  transparent  transparent  transparent ;
    bottom: -28px  ;
    left: 18px ;
    z-index: 555 ;
    position: absolute ;
}
/* //// row2 : team image   /// */
.test    .item     .teamImg       img
{
    width: 75px ; 
    height: 75px ;
    border-radius: 50% ;
}
.test    .item      .teamPersonInfo
{
    margin-top: 10px ;  
/*    border: 2px solid #ff0 ;     */
}
.test    .item      .teamPersonInfo      span
{
    display: block ;
}
.test    .item      .teamPersonInfo      .personName
{
    font-weight: bold ;
    font-size: 20px ;
}
.test    .item      .teamPersonInfo     .personJob
{
    font-size: 15px ;
    color: #a1a1a1 ;
    margin-top: 5px ;   
}
/* -------------- carousel dots -------------- */
.owl-theme .owl-dots .owl-dot  span 
{
    transition: all 0.2s ease-in-out  !important ;
}
.owl-theme .owl-dots .owl-dot.active  span ,
.owl-theme .owl-dots .owl-dot:hover   span
{
    background-color: #ff8b33 !important ;
}
/* --------------------------------- media query ------------------------- */
@media( min-width:0px ) and (max-width:676px )
{
    .test     .testH3
    {
        font-size: 23px ;
    }
}
/* ************************************* stylish section ************************************* */
.stylish
{
    width: 100% ;
    height: 320px ; 
    overflow: hidden ;
    color: #fff; 
    background-image: url("../images/pexels-photo-1837605.jpeg");
    background-repeat: no-repeat ;
    background-size: cover ;
    background-position: center center ;
    background-attachment: fixed ;
    position: relative ;
}
.stylish     .overlay
{   
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    background-color: rgba(0,0,0,0.6);
}
.stylish    .stylishH3
{
    font-size: 35px ;
}
/*
.stylish    .line_under_head
{
    background-color: #fff ; 
}
*/
.stylish    .stylishPara
{
    font-size: 16px ;
    margin-top: 30px  ; 
    margin-bottom: 30px  ; 
}
.stylish        button
{
    border: 2px solid rgb(230,229,230) ;
    transition: all 0.4s ease-in-out ;   
}
.stylish        button:hover
{
    border: 2px solid #ff8b38 ;
}
/* ************************************* contactUs section ************************************* */
.contactUs
{
    text-align: center ;
}
/* ============ contactUs header ============  */
.contactUs      .contactUsH3
{
    font-size: 35px ;   
}
.contactUs      .contactUsLine
{
    width: 60px ;
    height: 3px ;
    margin: 20px  auto ; 
    background-color: #ff8b33 ; 
}
.contactUs       .contactUsPara
{
    font-size: 16px ;
    color: #a9aaac ;
    margin-top: 30px  ; 
    margin-bottom: 50px  ; 
    text-align: center ;
}
.contactUs  form     input  ,
.contactUs  form     textarea
{
    font-size: 15px ; 
    border-radius: 0 ;
    outline: 0 ;
    border: 0 ;
    box-shadow: none ;
    border-bottom: 1px solid #afafaf ;
}
.contactUs  form     input::-webkit-input-placeholder       ,
.contactUs  form     textarea::-webkit-input-placeholder
{
    text-transform: capitalize ;
    font-size: 15px ; 
}
.contactUs  form    input[ type="text" ]  ,
.contactUs  form    input[ type="email" ] 
{
    margin-bottom: 30px ;
}
.contactUs   form     textarea
{
    height: 198px ; 
}
.contactUs      button
{
    border: 0 ;
    transition: all 0.4s ease-in-out ;  
}
.contactUs      button:hover
{
    color: #ff8b38 ;
    background-color: rgb(240,239,240) !important ;
}
/* ************************************* footer section *********************************** */
.footer
{
    padding: 10px  0  ;
    overflow: hidden ;
    padding: 10px 0 ;
    background-color: #000 ;
    text-align: center ;
    color: #ccc ;
}
/* ============= left part : footer icons ============== */
.footer    .footerIcons
{
/*    border: 2px solid #00f ;    */
}
.footer    .footerIcons    ul
{
    list-style: none ;
    margin-top: 10px ;
}
.footer    .footerIcons    ul      li
{
    display: inline-block ;
    margin: 5px  15px  ;
}
.footer    .footerIcons    ul      li      a
{
    color: #ccc ;
    text-decoration: none ;
}
.footer    .footerIcons    ul      li      a       i
{
    font-size: 25px ;
    transition: all 0.3s ease-in-out ;
}
.footer    .footerIcons    ul      li      a       i.fa-facebook:hover
{
    color: #3b5998 ;
}
.footer    .footerIcons    ul      li      a       i.fa-twitter:hover
{
    color: #1da1f2 ;
}
.footer    .footerIcons    ul      li      a       i.fa-google-plus:hover
{
    color: rgb(221,35,38);
}
.footer    .footerIcons    ul      li      a       i.fa-pinterest:hover
{
    color: #cc2127 ;
}
.footer    .footerIcons    ul      li      a       i.fa-instagram:hover
{
    color: rgb(189,50,162);
}
.footer    .footerIcons    ul      li      a       i.fa-stumbleupon:hover
{
    color: rgb(41,166,40);
}
.footer    .footerIcons    ul      li      a       i.fa-rss:hover
{
    color: rgb(0,223,202);
}
/* ============= right part : footer info ============== */
.footer    .footerInfo
{
/*    border: 2px solid #f00 ;    */
}
.footer    .footerInfo  .footerPara
{
    text-transform: capitalize ;
    font-size: 18px ; 
    color: #a1a1a1 ;
}