/*===========================
     16. DEPARTMENT css 
===========================*/


.department-page{
    @media #{$md}{
        padding-top: 70px;
        padding-bottom: 100px;
    }
    @media #{$xs}{
        padding-top: 50px;
        padding-bottom: 80px;
    }
}



.single-department{
    border: 5px solid rgba(72, 127, 255, 0.1);
    padding: 30px 15px;
    @include transition(0.3s);
    
    & .department-icon{
        & i{
            width: 115px;
            height: 115px;
            line-height: 115px;
            text-align: center;
            background-color: #ecf2ff;
            color: $theme-color;
            font-size: 60px;
            border-radius: 50%;
        }
    }
    
    & .department-content{
        padding-top: 35px;
        
        & .department-title{
            & a{
                font-size: 24px;
                font-weight: 600;
                color: $heading-color;
                margin-bottom: 15px;
                @include transition(0.3s);
                
                &:hover{
                    color: $theme-color;
                }
            }
        }
        & .text{
            margin-bottom: 25px;
        }
        & .main-btn{
            border-radius: 50px;
            border: 2px solid rgba(72, 127, 255, 0.2);
            
            & i{
                margin-left: 5px;
            }
        }
    }
    
    &:hover{
        border-color: $white;
        @include box-shadow (0px 0px 16px 0px rgba(72,127,255,0.21));
    }
}