body {
    width:100%;
    background-color:#1a2227;
    background-size:100%;
   
}

html{
    scroll-behavior: smooth;
}

.container-landing img {
    height:100vh;
    width:100vw;
}

.carousel-inner img{
    height:300px;
}



/*style the navigation bar*/

.navbar-inverse{
    width:100%;
    background-color:#1a2227;
    padding:none;
    border:none;
    margin: 0 auto;
}

.nav li{
    width:auto;
    color:#c6ccc8;
    font-size:20px;
    margin-right:35px;
    margin-top:50px;
    padding: 10px 0 10px 0;
}



.dropdown-menu{
    text-align:center;
    background-color:#1a2227;
    height:380px;
    width:120px;
    padding-top:60px;
    float:left;
    
}
/*.dropdown-item{*/
    .navbar-nav li{
    height:60px;
    color:#c6ccc8;
    font-size:20px;
    display:block;
}

.navbar-collapse .navbar-nav li a:hover{
    color:#fff;
    text-decoration:none;
    /*background-color:#1d1b1b;*/
}
.navbar-inverse:hover{
    padding-bottom:0px;
    cursor:pointer;
}
.logo{
    height:150px;
    width:130px;
    margin:16px;
    padding:0;
}

/*----------------------------body-------------------------*/
.container-contact{
    background-image: url("optimized_ink-cartridge.png");
    height:550px;
    width:auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity:0.9;
    color:#fff;
    font-size: 25px;
    line-height:45px;
    text-align:center;
    padding: 125px 0;
    margin-bottom:-120px;
}

.element{
    display:block;
    margin:auto;
    padding: 30px 0;
    height:300px;
    width:720px;
    background-color:rgba(0,0,0,0.5);
    border-radius:20px;
}

.phone{
    color:#fff;
    text-decoration:none;
}

.email{
    color:#fff;
    text-decoration:none;
}



.element a:hover{
    color:rgb(30, 228, 23);
    text-decoration:none;
}

.btn{
    height:40px;
    width:110px;
    color:#fff;
    background-color:rgb(54, 187, 49);
}

.btn:hover{
    background-color:rgb(30, 228, 23);
}

.btn a{
    color:#fff;
}

.btn a:hover{
    color:#fff;
}


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



.call-outs-container{
    text-align:left;
    height:320px;
    margin:20px auto;
    background-color:#1a2227;
    color:#fff;
    margin-bottom:20px;
    margin-top:120px;
}

.call-out{
    box-sizing:border-box;
    margin-bottom:20px;
    
}

.call-out img{
    height:200px;
    width:180px;
    padding:30px;
    margin-left:50px;
}

.call-out-1{
    box-sizing:border-box;
    margin-bottom:20px;
    flex-basis:30%;
    font-size:18px;
    margin-top:35px;
    line-height:2.0;
}

.call-out-2{
    box-sizing:border-box;
    margin-bottom:20px;
    flex-basis:30%;
    font-size:22px!important;
    margin-left:60px;
    margin-top:35px;
}

.call-out-1 .fas{
    color:rgb(155, 124, 77);
    font-size:22px;
}

.call-out-1 .far{
    color:rgb(155, 124, 77);
    font-size:18px;
}

.call-out-2 a:hover{
    text-decoration:none;
}
.facebook{
    font-size:22px!important;
}

.facebook a{
    font-size: 22px;
}

.budget-footer{
    font-size:22px!important;
    letter-spacing:0px;
}

.reserved{
    font-size:22px!important;
    letter-spacing:0px;
}

/*---------------------------------------i pad pro/ nest hub 1280px---------------------------*/
@media(max-width:1280px){
    body{
        height:4000px;
    }
    .element{
        height:400px;
        margin-top:-50px;
    }
    .footer{
        height:320px!important;
    }
}
/*---------------------------------------i pad pro/ nest hub 1024px---------------------------*/
@media(max-width:1024px){
    .element{
        height:400px;
        margin-top:-50px;
    }
    .footer{
        margin-left:-50px!important;
    }
}

/*--------------------------surface pro 7   912px----------------------------------------*/
@media(max-width:912px){
    .element{
        height:400px;
        margin-top:-40px;
    }
    .footer{
       height:1600px!important;
       background-color:#1a2227;
    }
    .call-out img{
        height:290px;
        width:250px;
        margin-left:70px;
        margin-top:100px;
    }
    .call-out-1{
        margin-left:100px!important;
    }
    .call-out-2{
        margin-left:100px!important;
    }
}
/*-----------------------------------------tablets--------------------------------------*/
/*---------------------i Pad Air 820px---------------------------------------*/
@media(max-width:820px){
    .element{
        height:400px;
        margin-top:-40px;
    }
    .footer{
        height:1400px!important;
    }
    .call-out-1{
        font-size:16px!important;
    }
    .call-out-2{
        font-size:16px!important;
    }
    .facebook{
        font-size:16px!important;
    }
    .budget-footer{
        font-size:16px!important;
    }
    .reserved{
        font-size:16px!important;
    }
}
/*-------------------------------i pad mini   768px---------------------------------------*/
@media(max-width:768px){
.footer{
   height:600px;
   background-color:#1a2227;
}
.element{
    height:400px;
}

.call-out img{
    margin-left:70px;
}

.call-out-1{
    margin-left:60px;
    font-size:16px!important;
}
.call-out-1{
    margin-left:60px;
    font-size:16px;
}
}
/*---------------------------------------surface duo 540px---------------------------------*/
@media(max-width:540px){
    body{
        width:540px!important
    }
    .navbar-nav{
        width:540px!important;
    }
    .responsive-iframe{
        width:520px!important;
    }
    .container-contact{
        width:540px!important;
    }
    .element{
        width:460px!important;
        height:380px;
        margin-top:-40px;
        margin-left:45px;
    }
    .call-outs-container{
        margin-left:120px!important;
    }
    
}



    /*---------------------------------------mobile phones---------------------------------*/ 
      @media(max-width:480px){
        body{
            width:414px!important;
        }
        .logo{
            height:60px;
            width:60px;
        }
        .responsive-iframe{
            margin-left:-20px;
        }
       .element{
            width:360px!important;
            margin-left:30px;
            font-size:16px;
        }
        .footer{
            height:1200px!important;
         }
        .call-out img{
            margin-left:10px;
        }
        .call-out-1{
            font-size:16px!important;
            margin-left:20px!important;
        }
        .call-out-2{
            margin-left:20px!important;
        }
        
        .facebook{
            font-size:16px!important;
        }
        .budget-footer{
            font-size:16px!important;
        }
        .reserved{
            font-size:16px!important;
        }


    }

    /*------------------------------------------pixel 2xl 411px-----------------------------------*/
    /*@media(max-width:411px){
        .responsive-iframe{
            margin-left:-10px;
        }
        .element{
            width:380px!important;
            margin-left:15px;
        }
    }*/

     /*------------------------------------------samsung galaxy s20 ultra 412px-----------------------------------*/
     /*@media(max-width:412px){
         body{
             width:600px!important;
         }
    
        .responsive-iframe{
            margin-left:-20px;
        }
        #eleMent{
            width:380px!important;
            margin-left:65px!important;
        }
        #footer-bottom{
            height:1200px!important;
        }
        .call-out-1{
            font-size:12px!important;
        }
        .facebook{
            font-size:12px!important;
        }
        .budget-footer{
            font-size:12px!important;
        }
        .reserved{
            font-size:12px!important;
        }
    }*/
       /*-------------------------------i phone 6/7/8 375px-------------------------*/
       /*@media(max-width:375px){
        body{
            width:385px!important;
        }
        .responsive-iframe{
            margin-left:-20px;
        }
        .element{
            margin-left:0px!important;
        }
        .footer{
            width:auto!important;
        }
        .call-out-1{
            margin-left:30px!important;
        }
        .call-out-2{
            margin-left:30px!important;
        }
    }*/
    /*-------------------------------i phone 5 se 320px------------------------*/
    /*@media(max-width:320px){
        body{
            width:320px!important;
        }
        .container-contact img{
            width:350px!important;
        }
        .element{
            width:270px!important;
             margin-left:50px!important;
        }
        .element p{
            width:270px!important;
            margin:auto;
        }
    }*/
    
    /*---------------------galaxy s5/moto g4 360px-------------------------------*/
    /*@media(max-width:360px){
        body{
            width:400px!important;
        }
        .container-contact{
            width:auto!important;
        }
        .element{
            width:320px!important;
            margin-left:40px!important;
            font-size:15px;
        }
    }*/

    /*------------------------i phone 5se 320px--------------------------------------*/
    /*@media(max-width:320px){
        .element{
            margin-left:20px!important;
        }
        .call-out .call-out-1 .call-out-2{
            margin-left:0px!important;
        }
    }*/
 
  /*-------------------------------Galaxy Fold   280px-------------------------------*/
    @media(max-width:280px){
        body{
            width:280px!important;
        }
        .logo{
            height:60px;
            width:60px;
        }
        .responsive-iframe{
            width:280px!important;
            margin-left:-15px;
        }
        .container-contact{
            width:280px!important;
        }
        #eleMent{
            width:240px!important;
            margin-left:20px!important;
        }
        .element p{
            width:240px!important;
        }
        .footer{
            height:800px!important;
        }
        .call-out img{
            margin-left:0px;
            height:190px;
            width:160px;
        }
        .call-out-1{
            font-size:10px!important;
            width:220px;
            margin-left:0px!important;
        }
        .call-out-2{
            width:220px;
            margin-left:0px!important;
            font-size:10px!important;
        }
        .budget-footer{
            font-size:10px!important;
        }
        .facebook{
            font-size:10px!important;
        }
        .reserved{
            font-size:10px!important;
        }
    }