@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	
  --color-02: #001822;
  --font-primary: "Montserrat", sans-serif;
}


.gallery{
	    padding-top: 100px;
	    padding-inline: 5vw;
	    color: #fff;
        background-color: var(--color-02);
}

h2{
 font-size: clamp(1.35rem, 3vw, 42px);
 font-weight: 400;
 line-height: 1;
 color: #fff;
}
h6.title {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: inline-grid;
}
h6.title.for_darkbg .overlays_title {
    background: var(--color-02);
}
h6.title .overlays_title {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9;
}
h6.title.for_darkbg .txt {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
h6.title .txt {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 15px 6px 30px;
    border-radius: 100px;
    background: rgb(0 24 34 / 10%);
    position: relative;
    z-index: 3;
}

h6.title.for_darkbg .txt:before {
    background: #fff;
}

h6.title .txt:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}
section.gallery .sec-01{
	margin-block:3rem;
	padding:0;
	border-radius: 20px;
border: 1px solid #009284;
background: var(--Gradient, linear-gradient(222deg, #001822 18.7%, #009284 81.3%));
	
}
section.gallery .sec-01 h4 {
    width: fit-content;
/*    border-bottom: 0.5px solid #ffffff84;*/
    font-size: clamp(1.2rem, 2vw, 30px);
    margin:2rem auto 1rem;
	text-align:center;
	letter-spacing:1px;
}

section.gallery .sec-01 ul{
	gap:24px;
	margin-top:2rem;
}

	section.gallery .sec-01 .nav-pills .nav-link {
  border-radius: 100px;
  border: 1px solid #fff;
  padding: 6px 14px;
  font-size: 12px;
  color: #DEF0EF;
  font-weight: 500;
  transition: all 0.4s;
  background: transparent;
}

section.gallery .sec-01 .nav-pills .nav-link.active {
  background-color: #009284;
  border: none;
  color: #fff;
}

section.gallery .sec-01 .tab-pane {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0.5rem 0 3rem;
  transition: opacity 0.4s ease;
}


section.gallery .sec-01 .cards-wrapper{
	width:100%;
	display:flex;
	justify-content:center;
    flex-wrap:wrap;
	gap:30px;
	padding:0.5rem 0 3rem;
	transition: all 0.4s;
}

section.gallery .sec-01 .cards-wrapper:not(.active){
	display:none;
}

section.gallery .sec-01 .cards-wrapper .cards{
    width: 480px;
    height: 280px;
/*	border:1px solid white;*/
	border-radius:14px;
	overflow:hidden;
}

section.gallery .cards a{color: var(--color-13);border-radius: 15px;overflow: hidden;display: inline-block;position: relative;}
section.gallery .cards a:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-02);opacity:.5;z-index:2;transition:all 500ms ease-in-out;}
section.gallery .cards a:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background: url("../patterns/pattern-dots-white-video.png") repeat-x bottom center;z-index:4;transition:all 500ms ease-in-out;}
section.gallery .cards a video{width:100%;display: block;object-fit: cover;transform: scale(1);transition: all 500ms ease-in-out;}
section.gallery .cards a .video_details{z-index: 9;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);gap: 15px;display: flex;align-items: center;flex-direction: column;}
section.gallery .cards a .video_details .play{width: 60px;height: 60px;display: inline-block;background: var(--color-01);border-radius: 100px;overflow: hidden;position: relative;}
section.gallery .cards a .video_details .play:before,
section.gallery .cards a .video_details .play:after{content:"";width: 0px;height: 0px;margin-left: 9px;position: absolute;top: 50%;left: 50%;border: 12px solid transparent;border-left: 18px solid var(--color-11);transform: translate(-50%,-50%);transition:all 500ms ease-in-out;}
section.gallery .cards a .video_details .play:before{transform:translate(-50%,-50%) scale(0);border-left-color: var(--color-13);z-index: 9;transition:all 500ms ease-in-out;}
section.gallery .cards a .video_details .play:after{;transform:translate(-50%,-50%) scale(1);transition:all 500ms ease-in-out;}
section.gallery .cards a .title{color: #ffffff;position: absolute;bottom: 30px;left: 40px;z-index: 9;display: flex;justify-content: flex-start;flex-direction: column;align-items: flex-start;}
section.gallery .cards a .title h4{color: var(--color-01);font-size: 18px;font-weight: 600;}
section.gallery .cards a .title p{font-size: 14px;text-align: left;margin-bottom: 0px;}

section.gallery .cards a:hover .video_details .play{background:var(--color-12);transition:all 500ms ease-in-out}
section.gallery .cards a:hover .video_details .play:before{transform:translate(-50%,-50%) scale(1);transition:all 500ms ease-in-out;}
section.gallery .cards a:hover .video_details .play:after{transform: translate(80%,-50%) scale(6);transition:all 500ms ease-in-out;}

section.gallery .cards a:hover{transition:all 500ms ease-in-out;}
section.gallery .cards a:hover:before{opacity:0.2;transition:all 500ms ease-in-out;}
section.gallery .cards a:hover:after{top:100%;transition:all 500ms ease-in-out;}
section.gallery .cards a:hover video{transform: scale(1.1);transition: all 500ms ease-in-out;}

@media (max-width:768px){
	section.gallery .sec-01 h4 {
    margin: 2rem auto 1.5rem;
}
}
@media (max-width:576px){
	 .gallery {
        padding-top: 7vw;
    }
	
}
@media (max-width:400px){
	

section.gallery .sec-01 ul {
    gap: 10px;
	padding:0 5px;
}
	section.gallery .sec-01 .nav-pills .nav-link {font-size: 10px;}
	
	section.gallery .sec-01 .cards-wrapper {
		padding:0 10px 30px;
		gap:20px;
	}
	section.gallery .sec-01 .cards-wrapper .cards{
		width:100%;
		height:auto;
		aspect-ratio:16 / 10;
	}
	section.gallery .sec-01 .cards-wrapper .cards img{
		width:100%;
		height:100%;
		object-fit: cover;
	}
}