section.banner {position: relative;padding: 0;}
section h2{ font-size: 38px; font-weight: 700;color: #000000;line-height: 1; margin-bottom: 30px;text-align: center;}
.banner-content {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);text-align: center; max-width: 100%;}
.yellow-button {font-weight: 600;font-size: 14px;background-color: var(--yellowbg);color: var(--black);transition: all 0.4s ease-out;padding: 20px 74px;text-transform: uppercase;}
.yellow-button:hover{color: #fff;background-color: var(--black);}
section.banner .banner-content h1{font-size: 65px; line-height: 1; font-weight: 700;color: #fff;}

section.crewsinfo{padding-top: 120px;}
section.crewsinfo h2{font-size: 38px; line-height: 1; font-weight: 700;color: #000;margin-bottom: 50px;}
section.crewsinfo .crews-content{max-width: 1366px; width: 100%; margin: 0 auto;margin-bottom: 60px; column-gap: 24px;align-items: center;} 
section.crewsinfo .crews-content .right {background-color: rgba(255, 214, 0, 0.05);width:calc(100% - 416px);padding: 30px;border-radius: 20px;}
section.crewsinfo .crews-content .right .inner-content{max-width: 802px; width:100%;}
section.crewsinfo .crews-content .right .inner-content h3{font-size: 20px; line-height: 1.2; font-weight: 600;}
section.crewsinfo .crews-content .right .inner-content ul li{font-size: 16px; line-height: 1.625; font-weight: 300;}
section.crewsinfo .crews-content .right .inner-content ul{padding-left: 25px;}
section.crewsinfo .crews-content .left img {width: 386px; height: auto; border-radius: 10px;-webkit-filter: grayscale(100%); filter: grayscale(100%);transition: 0.3s all;}
section.crewsinfo .crews-content .left img:hover{-webkit-filter: grayscale(0); filter: grayscale(0);}

section.crewsinfo .crews-content.yellow-border .right{background-color: transparent;border: 1px solid rgba(255, 214, 0, 1); width:861px; padding: 30px; border-radius:20px;}
section.crewsinfo .crews-content.yellow-border .right .inner-content{max-width: 703px; width: 100%; margin-left:95px;}
section.crewsinfo .crews-content.yellow-border .left {width: 481px; height: auto; border-radius: 10px;}
section.crewsinfo .crews-content.yellow-border .left img{width: 100%; height: auto; border-radius: 10px;}
section.crewsinfo .crews-content.item-1 .right{min-height: 282px;}
section.crewsinfo .crews-content.item-2 .right{min-height: 282px;}
section.crewsinfo .crews-content.item-4 .right, section.crewsinfo .crews-content.item-7 .right{min-height: 272px;}
section.crewsinfo .crews-content.item-5 .right{min-height: 298px;}
section.crewsinfo .crews-content.item-6 .right{min-height: 246px;}
@media screen and (max-width: 1366px){
    section.crewsinfo .crews-content.yellow-border .right{ border-radius:0 20px 20px 0;}
    section.crewsinfo .crews-content.yellow-border .left img{border-radius: 10px 0 0 10px;}
    section.crewsinfo .crews-content .right{border-radius: 20px 0 0 20px;}
    section.crewsinfo .crews-content .left img {  border-radius: 0px;}
}
@media screen and (max-width: 1280px){
    section.crewsinfo .crews-content.yellow-border .right .inner-content{margin-left: 65px;}
}
@media screen and (max-width: 1024px){
   
    section h2{font-size: 34px;}
    section.banner .banner-content h1{font-size: 55px;} 
    section.crewsinfo { padding-top: 80px; }
    section.crewsinfo .crews-content .right{padding: 20px;}
    section.crewsinfo .crews-content.yellow-border .right{padding: 20px;}
    section.crewsinfo .crews-content.yellow-border .right .inner-content { margin-left: 0;
    }
}
@media screen and (max-width: 991px){
    section.crewsinfo {
        padding-top: 60px;
        padding-bottom: 0;
    }
    section.crewsinfo .crews-content{display: block !important; width: 90%; margin-bottom: 50px;}
    section.crewsinfo .crews-content .left { width: 100%; text-align: center; margin-bottom: 25px; }
    section.crewsinfo .crews-content .left img { width: auto; height: auto; border-radius: 10px; }
    section.crewsinfo .crews-content .right { width: 100%; padding: 20px; border-radius: 10px;  } 
    section.crewsinfo .crews-content.yellow-border .left{ width: 100%; text-align: center; margin-bottom: 25px;}
    section.crewsinfo .crews-content.yellow-border .left img { border-radius: 10px; width: auto;height: auto; }
    section.crewsinfo .crews-content.yellow-border .right .inner-content { margin-left: 0;}
    section.crewsinfo .crews-content.yellow-border .right { border-radius: 20px; width: 100%; }
    
    
}
@media screen and (max-width: 767px){
    section.banner .banner-content h1{font-size: 45px;}
    section h2 {font-size: 30px;}
    section.banner img{min-height: 240px; object-fit: cover; object-position: center;}
    
}