.info{
    background: #c9c1ac;
}

body{
    margin :0; padding: 0; font-family: 'Josefin Sans', sans-serif;
 color: rgb(66, 66, 31);
 background: url(../img/background1.jpeg)center/cover fixed no-repeat;
}
.primary-color{
    color: #d3325f;
}

.info h2 {
    word-spacing: 0.6rem;
}

.info a {
    transition: color 2s ease-in-out;
}
.info a :hover{
    color: #242424;
}

/* ################################################## */

#header {
    min-height: calc(100vh - 94px) ;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../img/aif.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}

.height-90{
    min-height: calc(100vh - 94px) ;
}

.banner h1{
    border-top: 6px dotted #c9c1ac;
    border-bottom: 6px dotted #c9c1ac;
    animation: fromLeft;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes fromLeft{
    0%{
        transform: translate(-100px);
        opacity: 0;
    }
     50%{
         transform: translateX(30px);
     }
    100%{
        transform: translate(0);
    }
}

.main-btn{
    color: #d3325f;
    font-size: 2rem;
    border:2px solid #d3326f ;
    transition: all ls ease-in-out;
}

.main-btn:hover{
    color : #242424;
    border:2px solid #c9c1ac;
    background: #c9c1ac;
}

.prabir-btn{
    animation: fromRight ;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}


@keyframes fromRight{
    0%{
        transform: translate(100px);
        opacity: 0;
    }
     50%{
         transform: translateX(-30px);
     }
    100%{
        transform: translate(0);
    }
}


.header-link{
    display: inline-block;
    position: absolute;
    bottom: 5%;
    left:50%;
    background: #c9c1ac;
    border-radius: 10px;
    transition: all 2s ease;
    animation : fromButton ;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.header-link:hover {
    color: #242424;
}


@keyframes fromBottom{
    0%{
        transform: translate(-10px);
    }
    50%{
        transform: translate(10px);
    }
    100%{
        transform: translate(-10px);
    }
}

/* ###############  Navbar ##################### */
.navbar{
    background: #c9c1ac;
    padding:20px 20px ;
    transition: all ls ease;
}
.navbar-background{
    padding: 5px 20px;
}
.navbar-brand{
    font-size:30px;
    transition: all 2s ease;
}
.navbar-brand:hover {
    color: #242424;
}
.nav-link{
    color:#242424;
    text-decoration: none;
    transition: all 2s ease;
    font-size:23px;
}
.nav-link:hover{
    color:#d33;
}

.nav-btn{
    background: transparent;
    color:#d333;
    border: 2px solid #d33;
    font-size: 23px;
    transition: all 2s ease;
}
.nav-btn:hover{
    color:#242424;
    border:2px dotted #3b5998;
    transform: rotate(10deg);
}

.toggler-btn{
    border:2px dotted #d33;
    padding: 5px;
    transition: all 3s ease;
}
.bar{
    width: 30px;
    height: 3px;
    margin: 5px;
    background: #d33;
    transition: all 0.5s ease;
}
.change .bar1{
    transform: rotate(-45deg) translate(-5px,6px);
}

.change .bar2{
    opacity: 0;
}
.change .bar3{
    transform: rotate(45deg) translate(-5px,-8px);
}





/* ###############  Menu Item  ############################### */
.item-container {
    position: relative ;
    /* for the link */
    overflow:hidden ;
    background: linear-gradient(grb(0,0,0), rgb(0,0,0));
    transition: all 2s ease;
}

.item-img{
    transition: all 2s ease;
}
.item-container:hover .item-img{
    transform: scale(1.2);
    opacity: 0.5;
}
.item-link{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    color: #d3325f;
    font-size: 2rem;
    border-top:3px solid #d3325f; 
    border-bottom:3px solid #d3325f ;
    transition: all 2s ease;
    opacity: 0;
}
.item-container:hover .item-link{
    opacity: 1;
}

.item-link:hover{
color:#c9c1ac;
border:3px solid #c9c1ac ;
background: #c9c1ac;
color:#242424;
}

.item-container:hover{
    outline:10px dotted white;
    outline-offset: -0.8rem;
}



/*#################### About################## */

.about-pictures{
    position: relative;
}

.about-image{
    position: absolute;
    width: 215px;
    transition: all 2s ease;
    opacity:0.9;
}
.img-1{
    left:0%;
    top:0%;
}
.img-2{
    left:20%;
    top: 20%;
    z-index: 10;
}
.img-3{
    left:40%;
    top: 45%;
    z-index: 20;
}
.img-4{
    left:40%;
    top: 0%;
    
}
.img-5{
    left:0%;
    top: 45%;
    
}

.img21{
    left:0%;
    top:20%;
    width:370px;
}


.about-images.img-4{
    outline:10px solid white;
    outline-offset: 0.8rem;
    transform: scale(1.3) rotate(20deg);
    z-index: 30;
    opacity: 1;
}



.about-image:hover{
    outline:10px solid white;
    outline-offset: 0.8rem;
    transform: scale(1.3) rotate(20deg);
    z-index: 30;
    opacity: 1;
}

.about-pictures:hover .about-image:not(:hover){
    opacity:0.5;
}

/* ################ review section ################## */

.review-item{
    background:rgba(255,255,255,0.7);
    clip-path:polygon(5% 0,100% 0,90% 100%, 0 100%)
}

.review-img{
    width: 250px;
}

.team-icons a{
    color:#3b5998;
    transition: all 2s ease-in-out;

}

.team-icons a:hover{
    color: #242424;
    transform: rotateY(-5px);
}

/* ################   Contact ####################### */
.height-60 {
    min-height:60vh;
}

#contact .card{
    background: rgba(0,0,0,0.5);
    transition: all 2s ease;
}

#contact .card:hover{
    background: rgba(0,0,0,0.8);
}

#contact .card-header{
    color: #d332;
}

#contact .input-group-text{
    background: #d332;
    border-color: #d33;
    color: #242424;
}

#contact .card input{
    color:#606060;
}

#contact .card input::placeholder{
    columns: #606060;
}
.contact-btn{
    color:#d3325f;
    border-color: #d33;
    background: transparent;
    transition: all 2s ease-in-out;
}
.contact-btn:hover {
    background:#c9c1ac;
    color:#d332;
    border-color: #c9c1ac;
}

/* footer */

#back-to-top{
    background: #c9c1ac;
    border-radius: 10px;
    display: inline-block;
}
.scrollTop {
    position: fixed;
    bottom: 70px ;
    right: 10px;
}