html {
  scroll-behavior: smooth;
}
#title{
 /* overlay */
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
    url('abcd.jpg');
    background-repeat: no-repeat,;
    background-position: right center;
    background-size: cover; 
    /* ---- */
    display:block;
    left:100;
    top: 100;
    width:100%;
    max-width: 100%;
    height:auto;
    color: #000;
}
body{
    font-family: 'Open Sans', sans-serif;
}
h1{
    font-family: 'Open sans';
    font-weight: bold;
    font-size:400%;
    padding: 10% 10.5% 0% 10%;
    color: white;
    letter-spacing:2px;
    line-height: 1.2;
}
h2{
    font-weight: bold;
    line-height: 1.5;
    padding:5% 20% 0;
}
h3{
    font-weight: bold;
}
.description{
    color: white;
    padding:0 20% 5% 10%;
    word-wrap: break-word;
}
.container-fluid{
    padding:15% 10% 0 15%;
}
.navbar{
    padding:1% 2%;
    background-color: #000;
}
.nav-item{
    
    margin:0 30px 0 30px;
    font-weight: bold;
}
.navbar-brand{
    font-weight: bold;
    color:white;
}
.nav-item{
    text-align: center;
}
.bn{
    padding: 3% 10%;   
}
#bn{
    border-radius: 50px;
    padding: 12px 40px;
    margin:2% 6% 3% 0;
}
#features{
    padding: 7% 20%;
}
.ic{
    text-align: center;
}
.mm{
    text-align: center;
    padding:0 5% 5% 5%;
    color:#8f8f8f;
}
.icon{
    padding:10%;
    color:rgb(82, 80, 80);
    /* animation */
    transition: transform .2s; 
}
.icon:hover{
    color:#000;
    /* animation zoom effect */
    transform: scale(1.5);
}
#testimonials{
    text-align:center;
    background-color: #000;
    color:#fff;
}
.corousel-item{
    padding:5% 50% 0;
}
.test-img{
    border-radius: 50%;
    width:7%;
    margin:1% 2% 0;
}
#press{
    text-align:center;
    background-color: #000;
    padding:0;
    margin: 0;
}
.review{
    width:20%;
    padding:0 5%;
}
#team{
    text-align: center;
    margin-bottom: 5%;
}
h5{
    font-weight: bold;
}
#contact{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
    url('ocean.jpg');
    background-repeat: no-repeat, repeat;
    background-position: right center;
    background-size: cover;  
}
.con{
    width: 50%;
    margin: auto 25%;
    text-align: center;
}
#bio{
    border-radius: 50px;
    padding: 12px 40px;
    margin: 5%;
}
#footer{
    background-color: #000;
    color: #fff;
    text-align: center;
}
pre{
    color: #fff;
    margin-bottom: 0;
    padding:20px;
}
#con{
    font-size: 350%;
    font-weight: bold;
}
#btn3{
    border-radius:50px;
}
.contactcard{
    border-radius: 10px;
    background-color:rgba(0, 0, 0, 0.3);
    width:25%;
    align-content: center;
    padding: 100%,100%;
    display: block;
    position: relative;
    left:38%;
}
.contact-content{
    padding: 60px,80px,60px,80px;
    /* margin-top: 40px; */
    text-align: center;  
}
.too{
    margin:5px;
    color:rgba(0, 0, 0, 0.6);
}
.tee{
    margin:10px;
}
.download{
    text-decoration: none;
    color: white;
  }
@media (max-width:629px) {
    h1#header{
        font-size:300%;
        padding: 25% 10% 10% 0%;
        text-align: center;
    }
    img#optionalstuff{
       display: none;
    }
    div.bn{
        padding: 3% 15%; 
    }
    p.description{
        padding: 5% 10% 5% 10%;
    }
    h1#con{
        padding: 10% 10% 1% 4%;
    }
     img.review{
        width: 25%;
        padding: 2% 1%;
    }
    h2{
        font-size:1.4rem;
    }
    div.contactcard{
        width: 90%;
        left:5%;
    }
    img.card-img-top{
        width:45%;
        margin:20px auto;
    }
   
}