/* CSS Document */

.new_portfolio ul{list-style-type: none; padding-left: 0px;}

.new_portfolio .home-sec-hero .img-container { height: 100vh; /*border: 1px solid black;*/ background-image: url("7-eleven-tri-color-bg.webp"); background-repeat: no-repeat; background-size: cover;  position: relative;}

.new_portfolio .home-sec-hero .img-container:nth-of-type(1)::before { content: ""; position: absolute;  width: 100%; height: 50%; background-color: #fff; top: 50%;  transform: translateY(-50%);}

.new_portfolio .home-sec-hero .img-container img {  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.new_portfolio .home-sec-hero .img-container img.bag { width: 40%;}


.new_portfolio .home-sec-01 img{height:100vh;width:100%;object-fit: contain;}
.new_portfolio .home-sec-01 .img-container{height:100vh; width:100%; /*border:1px solid black;*/ position: relative;}
.new_portfolio .home-sec-01 .img-container::before{ content: ""; position: absolute;  width: 100%; height: 50%; background-color: #0f7451; top: 50%;  transform: translateY(-50%); z-index:-1;}
.new_portfolio .home-sec-01 .img-container ul{width:100%; height:100%;  display: flex;}
.new_portfolio .home-sec-01 .img-container ul li{width:50%; height:100%; /*border:1px solid black;*/}
.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(2) {position: relative;}
.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(2) img{ width: 70%; height: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 24px; }

.new_portfolio .home-sec-01 .video-container{width:100%; height:100vh; display: flex;}
.new_portfolio .home-sec-01 .video-container video{width:100%; height:100%; object-fit: fill;}

.new_portfolio .home-sec-02 .container-fluid{padding:0px;}
.new_portfolio .home-sec-02 .main-row + img{height:100vh; object-fit: cover; width:100%;}
.new_portfolio .home-sec-02 .main-row .columns{height: 100vh;width:100%;/*border:1px solid black;*/padding: 6rem;background-image: url("7-eleven-tri-color-on-right-side.webp");background-repeat: no-repeat;background-size: 100% 100%;}
.new_portfolio .home-sec-02 .main-row .columns ul{display: flex; width: 100%; height:100%; gap:3rem;}
.new_portfolio .home-sec-02 .main-row .columns ul li{width:50%;height:100%;/*border:1px solid black;*/overflow: hidden;/* border-radius: 30px; */}
.new_portfolio .home-sec-02 .main-row .columns ul li img,
.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(2) img{width:100%;height:100%;object-fit: cover;border-radius: 10px;}

@media(max-width:1366px){
	.new_portfolio .home-sec-hero .img-container img.logo{width:50%;}
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(1)/*,
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(2)*/{ height: 80vh; padding-bottom: 0px;}
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(2) img { width: 90%; object-fit: fill;}
}
@media(max-width:1280px){
	.new_portfolio .home-sec-hero .img-container img.bag { width: 50%;}
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(1),
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(2){ height: 70vh;}
}
@media(max-width:992px){}
@media(max-width:768px){
	.new_portfolio .home-sec-hero .img-container,.new_portfolio .home-sec-01 .img-container { height: 50vh; }

	.new_portfolio .home-sec-01 img,.new_portfolio .home-sec-01 .video-container,
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(1)/*,
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(2),*/
	.new_portfolio .home-sec-02 .main-row .columns,
	.new_portfolio .home-sec-02 .main-row + img  { height: auto;}
	.new_portfolio .home-sec-02 .main-row .columns {padding:4rem;}
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(2) img { width: 80%; }
}
@media(max-width:576px){
	.new_portfolio .home-sec-hero .img-container{background-size: 100% 100%;}
	.new_portfolio .home-sec-hero .img-container:nth-of-type(1)::before{height: 30%; transform: translateY(-100%);}
	.new_portfolio .home-sec-hero .img-container img.logo {}
	.new_portfolio .home-sec-hero .img-container img {top:35%;}
	.new_portfolio .home-sec-hero .img-container img.bag { width: 60%; }
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(2) img {height:55%;}
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(1){position: relative;}
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(1) img{position: absolute;top: 50%;transform: translateY(-50%);height: 80%;}
		.new_portfolio .home-sec-02 .main-row .columns {padding:3rem;}
	.new_portfolio .home-sec-01 .img-container::before {height:40%;}
}
@media(max-width:480px){
	.new_portfolio .home-sec-hero .img-container img.bag { width: 70%;}
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(2) img { height: 49%; width: 88%; border-radius: 12px; object-fit: cover;}
	.new_portfolio .home-sec-01 .img-container ul li:nth-of-type(1) img {height:54%;}
	.new_portfolio .home-sec-01 .img-container::before { height: 25%;}
	.new_portfolio .home-sec-01 img.creative-shape {height: auto;}
	.new_portfolio .home-sec-02 .main-row .columns {padding-inline:2rem; padding-block:2rem;}
	.new_portfolio .home-sec-02 .main-row .columns:nth-of-type(1){height:100vh;}
	.new_portfolio .home-sec-02 .main-row .columns ul{flex-direction: column;}
	.new_portfolio .home-sec-02 .main-row .columns ul li {width: 100%;}
	.new_portfolio .home-sec-02 .main-row .columns ul li img, .new_portfolio .home-sec-02 .main-row .columns:nth-of-type(2) img,.new_portfolio .home-sec-02 .main-row .columns ul li{border-radius:20px;}
	.new_portfolio .home-sec-02 .main-row .columns ul {gap:2rem;}
}