@media screen and (max-width: 1440px) {
    :root{
        --55: 50px;
        --65: 60px
    }

    .hero{
        padding-top: 50px;
    }

    .mb-72 {
        margin-bottom: 40px;
    }

    .hero:after{
        top: 32%;
    }

    .py-140 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .py-120 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .vr-text{
        padding: 0 0 20px 15px;
        left: -50px;
    }

    .hero-team.hero:after {
        top: 52%;
    }
	
	.presskit-category{
        min-width: 350px;
    }
}

@media screen and (max-width: 1340px) {
    :root{
        --80: 72px;
    }

    .hero .h2{
        margin-right: -65px;
    }

    .grid > .grid-col-1 .team-member img, .grid > .grid-col-2 .team-member img{
        min-width: 300px;
        max-height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .team-member img{
        min-width: 160px;
        max-width: 160px;
        max-height: 150px;
    }

    .grid{
        min-height: 876px;
    }

    .grid:before{
        background: repeating-linear-gradient(transparent, transparent 149px, rgba(185, 185, 185, 0.1) 150px);
    }

    .grid-col-2 .team-member.aos-animate:after{
        height: 150px;
    }

    .meet-team .container:after{
        transform: rotate(-33.2deg);
    }
}

@media screen and (max-width: 1199px) {
    :root {
        --80: 64px;
        --65: 55px;
        --55: 45px;
        --18: 16px;
        --20: 18px;
        --35: 28px;
        --13: 12px;
        --24: 20px;
        --16: 14px;
        --45: 38px;
    }

    .px-80 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .px-50 {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero .h2{
        margin-right: 0;
    }

    .hero:before{
        left: -40px;
        right: -40px;
    }

    .hero:after{
        right: -40px;
    }

    .navbar-nav > li {
        margin-right: 28px;
    }

    .vr-text {
        padding: 0 0 15px 8px;
        left: -29px;
    }

    .spacer {
        min-height: 40px;
    }

    .py-140 {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .py-70 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .mb-50 {
        margin-bottom: 30px;
    }

    .team-member h3{
        margin-bottom: 8px;
    }

    .team-member img{
        margin-bottom: 20px;
    }

    .grid-col-1 .team-member img, .grid-col-2 .team-member img{
        margin-bottom: 16px;
    }

    .feature-card{
        padding: 20px 20px 0;
        min-height: 223px;
        font-size: 15px;
    }

    .feature-card h4{
        margin-bottom: 30px;
    }

    .feature-card h4:after{
        bottom: -15px;
    }

    .row.gap-50 {
        --bs-gutter-x: 25px;
        --bs-gutter-y: 25px;
    }

    .newsletter{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .footer-address{
        gap: 20px;
    }

    .footer-menu{
        gap: 10px 20px;
    }

    .footer-logo {
        margin-bottom: 38px;
    }

    .blog-author > img{
        width: 100px;
        height: 100px;
    }
}

@media screen and (max-width: 991px) {
    .navbar-nav a{
        font-size: 18px;
    }

    .navbar-brand img{
        max-width: 210px;
    }

    .navbar-nav > li{
        margin-right: 0;
        margin-top: 10px;
    }

    .navbar-collapse{
        background-color: var(--dark);
        padding: 20px 20px 40px;
        position: absolute;
        margin-top: 1px;
        width: 100%;
        z-index: 99;
        top: 100%;   
        left: 0;
    }

    a.croak-logo-nav {
        display: inline-block;
        margin-bottom: 20px;
    }

    .navbar .btn{
        width: 100%;
    }

    .hero{
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .mb-72 {
        margin-bottom: 25px;
    }

    .py-140 {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .our-team-content{
        position: relative;
        margin-right: 15px;
        margin-left: 15px;
        margin-top: -22%;
        transform: none;
        max-width: 100%;
        width: auto;
        left: 0;
        top: 0;
    }

    .our-team-content:before{
        box-shadow: none;
    }

    .grid:before{
        display: none;
    }

    .grid{
        justify-content: center;
        min-height: auto;
        flex-wrap: wrap;
        gap: 30px 20px;
        display: flex;
    }

    .grid > div{
        min-width: 150px;
        max-width: calc(50% - 10px);
    }

    .grid > .grid-col-1, .grid > .grid-col-2{
        width: calc(50% - 10px) !important;
        max-width: none !important;
    }

    .grid-col-1 img, .grid-col-2 img{
        min-width: auto !important;
    }

    .team-member img{
        max-height: none;
        max-width: 100%;
        min-width: auto;
    }

    .grid-col-5, .grid-col-6{
        left: 0;
    }

    .grid-col-2 .team-member:after{
        display: none;
    }

    .meet-team .container:after{
        display: none;
    }

    .py-120 {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .btn-circle{
        padding: 0;
        width: 130px;
    }

    .about .btn-circle{
        right: -60px;
    }

    footer .row + .row{
        margin-top: 42px;
    }

    .blog-content > img{
        margin: 24px 0;
    }

    .blog-author > img{
        width: 80px;
        height: 80px;
    }
	
	.presskit-area{
        flex-direction: column;
    }

    .game-fact-sheet-item{
        flex-wrap: wrap;
    }

    .game-fact-sheet{
        padding: 15px;
    }

    .logos-list div{
        height: 100px;
    }
}

@media screen and (max-width: 767px) {
    :root{
        --80: 38px;
        --65: 26px;
        --55: 26px;
        --18: 14px;
        --20: 15px;
        --24: 18px;
        --45: 25px;
    }

    body{
        line-height: 1.55;
    }

    .gap-50 {
        gap: 35px;
    }

    .btn{
        font-size: 15px;
        padding: 10px 20px;
        border-radius: 15px;
    }

    .vr-text{
        display: none;
    }

    .px-80 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero:before{
        right: -16px;
        left: -16px;
    }

    .hero:after{
        right: -16px;
        top: 48%;
    }

    .px-50 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero .corners-top, .hero .corners-bottom{
        height: 10px;
    }

    .hero .corners-top:before, .hero .corners-bottom:after, 
    .hero .corners-top:after, .hero .corners-bottom:before{
        width: 10px;
        height: 10px;
    }

    .hero .corners-top:before{
        border-width: 2px 0 0 2px;
    }
    
    .hero .corners-top:after{
        border-width: 2px 2px 0 0;
    }
    
    .hero .corners-bottom:before{
        border-width: 0 0 2px 2px;
    }
    
    .hero .corners-bottom:after{
        border-width: 0 2px 2px 0;
    }

    .border-mob-none .border-end, .border-mob-none .border-start{
        border: none !important;
    }

    .border-mob-none .corners-bottom, .border-mob-none .corners-top{
        display: none;
    }

    .content{
        font-weight: 400;
    }

    .mb-50 {
        margin-bottom: 30px;
    }

    .bg-cover{
        background: none !important;
    }

    .our-team-content{
        padding: 20px 10px;
    }

    .py-70{
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .border-bottom-none{
        border-bottom: none !important;
    }

    .footer-newsletter h5{
        font-size: 18px;
    }

    .hero-single h6{
        margin-bottom: 12px;
        padding-bottom: 0;
        border: none;
    }

    .blog-author{
        --gap: 16px;
    }

    .blog-author > img{
        width: 60px;
        height: 60px;
        border-width: 2px;
    }

    hr{
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 575px) {
    .grid-col-1, .grid-col-2{
        width: 100% !important;
    }
    
    .carousel button{
        width: 42px;
        height: 42px;
    }
    
    .carousel-control-prev {
        left: 12px;
    }
    
    .carousel-control-next {
        right: 12px;
    }

    .navbar-brand img {
        max-width: 125px;
    }
	
	.hero-btns{
		flex-direction: column;
		width: 100%;
	}
	
	.hero-btns > .btn{
		width: 100%;
		justify-content: center;
	}
}

@media screen and (max-width: 340px) {
    .navbar-brand img {
        max-width: 180px;
    }
}