/*Header-Section*/
#header{transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
#header.shrink{background-color: rgba(242, 242, 242, 0.6);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);padding: 12px 25px;}

#header .logo a img{width: 200px;height: auto;object-fit: contain;object-position: center;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
#header.shrink .logo a img{width: 125px;}

.about-section{height: 100vh;}

/*Case-Study-Style*/
.case_study_section{padding-top: 50px;padding-bottom: 105px;}

.tile{height: 275px;background-size: cover;position: relative;cursor: pointer;transition: all 0.4s ease-out;overflow: hidden;color: #ffffff;}
.tile img{width:100%;height:100%;object-fit: contain;object-position: center;position:absolute;top:0;left:0;z-index:0;transition: all 0.4s ease-out;}
.tile a{text-decoration: none;color: #ffffff;}

.text{position: absolute;padding: 0 30px;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;top: 6%;}
.tile h2{text-align: center;font-size: 28px;font-weight: 300;margin-bottom: 0;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.animate-text{opacity: 0;transition: all 0.6s ease-in-out;}

.tile:hover{transform: scale(1.05);}
.tile:hover .animate-text{transform: translateX(0);opacity: 1;}
.tile:hover span{opacity:1;transform: translateY(0px);}

.dots span:nth-child(1){transition-delay: 0.05s;}
.dots span:nth-child(2){transition-delay: 0.1s;}
.dots span:nth-child(3){transition-delay: 0.15s;}

/*Case-Study-Inner-Page*/
.case_study_content{width: 100%;padding-top: 175px;}

.cs_page_title{text-align: center;padding-bottom: 25px;border-bottom: 2px solid #000000;}
.cs_page_title h1{max-width: 100%;font-size: 36px;font-weight: 600;margin: 0;color: #000000;}
.cs_page_title p{max-width: 100%;font-size: 18px;font-weight: 400;margin: 15px 0;color: rgba(0, 0, 0, .6);}
.cs_page_title p span{font-size: 20px;font-weight: 500;color: #000000;}

.portfolio_1 a img{display: block;width: 100%;height: auto;}

.footer_section{width: 100%;height: auto;}
.footer{width: 100%;text-align: right;}

/*Responsive-Css*/
@media only screen and (max-width: 1530px)
{
    .case_study_section{padding-top: 0;padding-bottom: 75px;}
}

@media only screen and (max-width: 1399px)
{
    .tile h2{font-size: 24px;}
}

@media only screen and (max-width: 1199px)
{
    #header .logo a img{width: 150px;}

    .case_study_content{padding-top: 140px;}
    .case_study_section{padding-bottom: 50px;}
    .tile h2{font-size: 28px;}
}

@media (max-width: 1000px) {
    .wrap{flex-direction: column;width: 400px;}
}

@media only screen and (max-width: 991px)
{
    .tile{height: 250px;}
    .tile h2{font-size: 24px;}

    .floating-icon{width: 50px;height: 50px;}

    .cs_page_title h1{font-size: 28px;}
    .cs_page_title p{font-size: 16px;}
    .cs_page_title p span{font-size: 18px;}
}

@media only screen and (max-width: 767px)
{
    #header .logo a img{width: 125px;}
    #header.shrink .logo a img{width: 100px;}

    .case_study_content{padding-top: 125px;}
    .case_study_section{padding-top: 25px;}
    .tile{height: 275px;}
    .tile h2{font-size: 30px;}

    .cs_page_title, .cs_page_title p{text-align: left;}
}

@media only screen and (max-width: 575px)
{
    .tile h2{font-size: 28px;}

    .floating-icon{width: 30px;height: 30px;}
    .floating-icon i{font-size: 16px;}

    .cs_page_title h1{font-size: 24px;}
    .cs_page_title p{font-size: 14px;}
    .cs_page_title p span{font-size: 16px;}
}

@media only screen and (max-width: 479px)
{
    #header .logo a img{width: 100px;height: 60px;}
    #header.shrink .logo a img{width: 100px;}

    .case_study_content{padding-top: 100px;}
    .case_study_section{padding-top: 0;}

    .tile{height: 250px;}
    .tile h2{font-size: 24px;}
}

@media only screen and (max-width: 400px)
{
    .tile{height: 200px;}
    .tile h2{font-size: 22px;}
}