*{
    margin: 0;
    padding: 0;
    height: 100%;
}
@font-face {
    font-family: 'Blackhawk';
    src: url('../font/Blackhawk.otf');
}

@font-face {
    font-family: 'Ink Free';
    src: url('../font/Inkfree.ttf');
}

@font-face {
    font-family: 'Century Gothic';
    src: url('../font/GOTHIC.TTF');
}

@font-face {
    font-family: 'Bahnschrift';
    src: url('../font/bahnschrift.ttf');
}


html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

::selection{
    color: #eeeeee;
    background-color: orangered;
}

button:focus {
    outline:0;
}

#button {
    display: inline-block;
    background-color: orangered;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
    position: fixed;
    bottom: 100px;
    right: 30px;
    transition: background-color .3s,
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}



#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 50px;
    color: #fff;
}
#button:hover {
    cursor: pointer;
    background-color: #333;
}
#button:active {
    background-color: #555;
}
#button.show {
    opacity: 1;
    visibility: visible;
}

.mouse {

    display: block;
    position: absolute;
    margin: 0 auto;
    width: 26px;
    height: 46px;
    border-radius: 13px;
    border: 2px solid #FFFFFF;
    opacity: .2;
    bottom: 20px;
    left: 50%;
    margin-left: -13px;
}
.mouse span {
    display: block;
    margin: 6px auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid transparent;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name: scroll;
}

.nav{
    transition: all 0.5s ease;
    font-size: 15px;
    font-family: 'Bahnschrift', serif;
    font-weight: 100;
    width: 100%;
    z-index: 100;
    position: absolute;
    left: 0;
    letter-spacing: 2px;
    line-height: 70px;
    -webkit-transition-property: background-color, box-shadow, line-height, height;
    transition-property: background-color, box-shadow, line-height, height;
    -webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
    transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    height: 8%;
    background: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
}



.nav .brand {
    transition: background-image 0.5s ease;
    line-height: 100px;
    display: inline-block;
    float: left;
    margin-top: 14px;
    margin-right: 16px;
    margin-left: 80px;
    background-image: url(../img/thumb.png);
    width: 40px;
    height: 40px;
    background-size: cover;

}

.nav .brand a {
    color: #e33b00;
    text-decoration: none;
}


.nav ul {
    margin: 0;
    text-transform: uppercase;

}
.nav ul li {
    text-align: center;
    display: inline-block;
    list-style: none;
    padding: 15px 15px;
    cursor: pointer;
    line-height: 30px;
}
.nav ul li:hover a {
    font-weight: bold;
}


.nav ul li a{
    color: #eee;
    text-decoration: none;
}


.sticky  {
    position: fixed !important;
    top: 0;
    background-color: black;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#80000000',GradientType=1 );
    line-height: 30px;
    height: 60px;
}

.sticky .brand {
    transition: background-image 0.5s ease;
    line-height: 100px;
    display: inline-block;
    float: left;
    margin-top: 15px;
    margin-right: 18px;
    margin-left: 90px;
    background: url(../img/thumb.png);
    width: 30px;
    height: 30px;
    background-size: cover;
}
.sticky ul li a {
    color: #fff;
    transition: 0.2s ease 0s;
}

.sticky ul li:hover a {
    color: orangered;
    transition: 0.3s;
}


.menu {
    display: none;
}




@media (max-width: 600px) {



    .sticky .menu {
        top: 0;
    }
    .sticky .menu .hamburger {
        background: #6e7982;
    }
    .sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
        background: #6e7982;
    }

    .open.sticky .hamburger {
        background: transparent;
    }

    .open .hamburger {
        background-color: transparent;
    }
    .open .hamburger::before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .open .hamburger::after {
        -webkit-transform: rotate(-45deg) translate(2px, -2px);
        -ms-transform: rotate(-45deg) translate(2px, -2px);
        transform: rotate(-45deg) translate(2px, -2px);
    }
    .menu {
        display: block;
        outline: none;
        position: relative;
        line-height: 60px;
        float: left;
        left: 20px;
        top: 20px;
        width: 60px;
        height: 60px;
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        opacity: 0.7;
        -webkit-transition: opacity 150ms;
        transition: opacity 150ms;
    }
    .menu:hover {
        opacity: 1;
    }

    .hamburger,
    .hamburger::after,
    .hamburger::before {
        margin: 0 auto;
        display: block;
        width: 24px;
        height: 3px;
        line-height: 0;
        -webkit-transition: all 150ms;
        transition: all 150ms;
    }

    .hamburger::before {
        content: "";
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background: #fff;
    }

    .hamburger::after {
        content: "";
        -webkit-transform: rotate(-45deg) translate(2px, -2px);
        -ms-transform: rotate(-45deg) translate(2px, -2px);
        transform: rotate(-45deg) translate(2px, -2px);
        background: #fff;
    }

    .hamburger {
        background: #fff;
    }
    .hamburger::after {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
    .hamburger::before {
        -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    .navbar {
        -webkit-transition: -webkit-transform 150ms;
        transition: transform 150ms;
    }

    ul.navbar {
        -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        /* transform: translateY(-200%); */
        padding-left: 0;
    }
    ul.navbar li {
        line-height: calc((100vh - 60px) / 6);
        display: block;
    }

    .open .navbar {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .nav .brand {
        display: block;
        text-align: center;
        float: none;
        margin: 10% 10% 44% 46% ;
    }

    .sticky .brand {
        margin: 4% 4% 44% 46% ;
    }

    #nav {
        height: 100px;
    }
    #nav.open {
        height: auto;
        min-height: 100%;
    }
    #nav.sticky {
        height: 60px;
    }
    #nav .open.sticky {
        height: auto;
    }
}

#home{
    width: 100%;
    text-align: center;
    color: white;
    display: block;
    height: 100%;
    background-image: url("https://res.cloudinary.com/tahmid-rahman/image/upload/v1613139821/Upalabdhi/bg1_a2s9ov.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


#fb-root {
    height: 0;
}

.hero1{
    width: 100%;
    height: auto;
    font-family: 'Blackhawk', serif;
    color: white;
    text-align: center;
    position: absolute;
    letter-spacing: 6px;
    float: left;
    overflow: auto;
}


.caption1{
    width: 100%;
    height: 0;
    font-family: 'Bahnschrift', serif;
    position: absolute;
    color: #fcb753;
    text-align: center;
    text-shadow: 2px 2px #7f4a04;
}



#btn1{
    font-family: 'Bahnschrift', serif;
    font-weight: 100;
    text-align: center;
    color: white;
    border: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    position: relative;
    border-radius: 60px;
    transition: background 0.2s ease 0s;
    text-underline: none;
    padding: 0 2%;
}

#btn1:hover{
    background-color: orangered;
    transition: 0.3s;
}

#mission-vision{
    width: 100%;
    height: 500px;
    background-color:#fff;
    position: relative;
}

#hero-2{
    width: 46%;
    height: 500px;
    font-family: 'Bahnschrift', serif;
    color: orangered;
    position: relative;
    float: left;
}

#header1{
    position:relative;
    margin-left: 10%;
    float: left;
    text-align: center;
}



.text-1{
    float: left;
    overflow: auto;
}

.container-1 {
    width: 54%;
    height: 100%;
    float: right;
    background-image: url("https://res.cloudinary.com/tahmid-rahman/image/upload/v1613139565/Upalabdhi/bg3_e8i85j.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#projects{
    width: 100%;
}

#left{
    height: 100%;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

#child-1{
    width: 100%;
    background-color: black;
    background-image: url("../img/left.jpg");
    background-position: center;
    background-size: cover;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}


#child-1:hover {
    transform: scale(1.1);
}

.bg-1{
    width:100%;
    height: 20%;
    background-color: rgba(0, 0, 8, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
}

.align-1{
    font-size: 25px;
    color: #ffffff;
    font-family: 'Century Gothic', serif;
    text-align: center;
    padding: 6% 0;
}

#mid{
    height: 100%;
    background-image: url("../img/mid.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.container-2{
    width: 50%;
    height: 34.4%;
    margin: 35% 25%;
    background-color: black;
    position: relative;
    display: inline-block;
}

#right{
    height: 100%;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

#child-2{
    width: 100%;
    background-color: black;
    background-image: url("../img/right.jpg");
    background-position: center;
    background-size: cover;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#child-2:hover {
    transform: scale(1.1);
}


#profile{
    width: 100%;
    height: auto;
    display: block;
    padding: 4% 0;

}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 20rem;
    text-align: center;
    font-family: arial;
    margin-left: 4%;
    margin-right: 4%;
    margin-bottom: 5%;
    overflow: hidden;

    display: inline-block;
  /*  flex-direction: row;
    justify-content: space-around;*!*/

}

.title-1{
    margin-bottom: 2%;
    font-size: 3.4em;
    font-family: 'Bahnschrift', serif;
    font-weight: 800;
    text-align: center;
}

.title-2 {
    color: grey;
    font-size: 18px;
    margin: .6em;
}

.title-3{
    margin: 1em;
}



.btn-2 {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    transition: 0.5s;
}

.btn-2:hover{
    background-color: orangered;
    transition: 0.5s;

}

#find-us{
    width: 100%;
    height: 500px;
}

#foot{
    width: 100%;
    background-color: #0c0c0c;
    font-weight: bold;
    font-family: 'Century Gothic', serif;
    color: dimgrey;
    position: relative;
}

#inner{
    height: 0;
    position: absolute;
}

.bold{
    font-weight: bold;
    color: orangered;
}

#inner ul li{
    height: 8px;
    display: inline;
    float: left;
}

.power{
    width: 100%;
    height: 20px;
    position: absolute;
    text-align: center;
    overflow: hidden;
    display: inline-block;
}

.tr a{
    color: #e33b00;
    font-weight: bold;
    height: 20px;
}

.center{
    width: 100%;
    height: 20px;
    position: absolute;
    text-align: center;
    overflow: hidden;
    display: inline-block;
}

.icons{
    height: 50px;
    color: grey;
    position: relative;
    margin-right: 2%;
}

.icons a{
    color: grey;
}

i:hover{
    color: #e33b00; !important;
    transition: 0.3s; !important;
}

.connect{
    height: 0;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .hero1 {
        font-size: 60px;
        top: 42%;
        text-shadow: 2px 5px #7f4a04;
    }

    .caption1 {
        font-size: 15px;
        top: 56%;
    }

    #border1 {
        width: 20px;
        border-top: 1px solid #fff;
        height: 1px;
        top: 58%;
        left: 13%;
    }
    #border2 {
        width: 20px;
        border-top: 1px solid #fff;
        height: 1px;
        top: 58%;
        right: 13%;
    }
    #btn1 {
        top: 63%;
        width: auto;
        height: 30px;
        font-size: 15px;
    }

    #projects{
        height: 1000px;
    }

    #header1{
        height: 25px;
        margin-top: 15%;
        font-size: 18px;
    }

    .text-1{
        width: 90%;
        height: 395px;
        font-size: 11px;
        margin: 4% 10% 5% 10%;
        float: left;
    }

    #left{
        width: 100%;
        height: 333px;
        float: none;
        overflow: hidden;
        display:block;

    }

    #mid{
        width: 100%;
        height: 333px;
        float: none;
        overflow: hidden;
        display: block;

    }

    #right{
        width: 100%;
        height: 333px;
        float: none;
        overflow: hidden;
        display: block;

    }

    .connect{
        font-size: 11px;
    }

    #inner ul li{
        width: 80px;
        margin: 0 40px 0 0;
        float: left;
        display: block;
    }

    .bottom{
        position: relative;
        text-align: center;
    }

    #inner{
        left: 5%;
        top: 8%;
    }

    .icons{
        top: 8%;
        margin-left: 78%;
    }


    .space-2{
        font-size: 22px;
        margin-top: 20%;

    }

    #foot{
        height: 370px;
        font-size: 9px;
    }

    .power{
        top: 90%;
    }

    .center{
        top: 94%;
    }



}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .hero1 {
        font-size: 100px;
        top: 37%;
        text-shadow: 3px 5px #7f4a04;
    }

    .caption1 {
        font-size: 26px;
        top: 55.5%;
    }

    #border1 {
        width: 60px;
        border-top: 1px solid #fff;
        height: 1px;
        top: 58%;
        left: 12%;
    }
    #border2 {
        width: 60px;
        border-top: 1px solid #fff;
        height: 1px;
        top: 58%;
        right: 12%;
    }
    #btn1 {
        top: 63%;
        width: auto;
        height: 30px;
        font-size: 15px;
    }

    #projects{
        height: 1500px;
    }

    #left{
        width: 100%;
        height: 500px;
        float: none;
        overflow: hidden;
        display:block;
    }

    #mid{
        width: 100%;
        height: 500px;
        float: none;
        overflow: hidden;
        display:block;
    }

    #right{
        width: 100%;
        height: 500px;
        float: none;
        overflow: hidden;
        display:block;
    }


    #header1{
        height: 30px;
        margin-top: 15%;
        font-size: 30px;
    }

    .text-1{
        width: 95%;
        height: 395px;
        font-size: 14px;
        margin: 2% 10% 5% 10%;
        float: left;
    }

    .connect{
         font-size: 14px;
    }


    #inner ul li{
        width: 70px;
        margin: 0 30px 0 10px;
        float: left;
        display: block;
    }

    .bottom{
        position: relative;
        text-align: center;
    }

    #inner{
        left: 5%;
        top: 8%;
    }

    .icons{
        top: 65%;
        margin-left: 78%;
    }

    .space-2{
        font-size: 22px;
        margin-top: 20%;
    }

    #foot{
        height: 370px;
        font-size: 11px;
    }

    .power{
        top: 89%;
    }

    .center{
        top: 94%;
    }


}






/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .hero1 {
        font-size: 120px;
        top: 34%;
        text-shadow: 3px 5px #7f4a04;
    }

    .caption1 {
        font-size: 30px;
        top: 55.5%;
    }

    #border1 {
        width: 120px;
        border-top: 1px solid #fff;
        height: 2px;
        top: 58%;
        left: 12%;
    }
    #border2 {
        width: 120px;
        border-top: 1px solid #fff;
        height: 2px;
        top: 58%;
        right: 12%;
    }
    #btn1 {
        top: 64%;
        width: auto;
        height: 30px;
        font-size: 18px;
    }

    #inner{
        top: 10%;
    }

    .icons{
        top: 8%;
        margin-left: 78%;
    }


    .space-2{
        font-size: 20px;
        margin-left: 22%;
        margin-top: 4%;
    }

    #foot{
        height: 300px;
    }

    .power{
        top: 85%;
    }

    .center{
        top: 91%;
    }

}



/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .hero1 {
        font-size: 140px;
        top: 30%;
        text-shadow: 3px 5px #7f4a04;
    }

    .caption1 {
        font-size: 35px;
        top: 55.5%;
    }

    #border1 {
        width: 130px;
        border-top: 1px solid #fff;
        height: 2px;
        top: 58%;
        left: 15%;
    }
    #border2 {
        width: 130px;
        border-top: 1px solid #fff;
        height: 2px;
        top: 58%;
        right: 15%;
    }
    #btn1 {
        top: 65%;
        width: auto;
        height: 40px;
        font-size: 25px;
    }

    .connect{
        font-size: 13px;
        margin-top: -3%;
    }

    .icons{
        top: 10%;
        font-size: 20px;
        margin-left: 85%;

    }

    .space-2{
        margin-top: -3%;
        margin-left: 0;
    }

    .power{
        top: 85%;
    }

    .center{
        top: 91%;
    }


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    .hero1{
        font-size: 160px;
        letter-spacing: 6px;
        text-shadow: 8px 10px #7f4a04;
        top: 35%;
    }


    .caption1{
        font-size: 40px;
        top: 59%;
        text-shadow: 2px 2px #7f4a04;
    }

    #border1{
        width:150px;
        top: 62%;
        bottom: 38%;
        left: 21%;
    }

    #border2{
        width:150px;
        top: 62%;
        bottom: 38%;
        right: 21%;
    }

    #btn1{
        width: auto;
        height: 50px;
        font-size: 25px;
        top: 70%;
    }

    #projects{
        height: 400px;
    }

    #left{
        width: 33.33%;
        height: 100%;
        float: left;
        display: block;
        overflow: hidden;

    }

    #mid{
        width: 33.33%;
        height: 100%;
        float: left;
        display:block;
        overflow: hidden;
    }

    #right{
        width: 33.33%;
        height: 100%;
        float:left;
        display: block;
        overflow: hidden;
    }

    #header1{
        height: 35px;
        margin-top: 12%;
        font-size: 35px;

    }


    .text-1{
        width: 85%;
        height: 300px;
        font-size: 18px;
        margin: 2% 2% 10% 10%;
        float: left;
    }

    #foot{
        height: 250px;
        font-size: 11px;
    }

    #inner{
        top: 12%;
        left: 5%;
    }

    #inner ul li{
        width: 180px;
        margin: 0 40px 0 0;
        float: left;
    }

    .bottom{
        position: relative;
        text-align: center;
    }

    .icons{
        top: 10%;
        font-size: 20px;
        margin-left: 85%;

    }

    .space-2{
        margin-top: 0;
        margin-left: 0;
    }

    .connect{
        font-size: 15px;
    }

    .power{
        top: 85%;
    }

    .center{
        top: 91%;
    }

}