/* ----------------------------------------------------------------
MT500 CSS
-----------------------------------------------------------------*/
.imgRound{border-radius: 20px; overflow: hidden; position:relative; background-color: #f0f0f0;}
.narrow-text { max-width: 700px; margin: 0 auto;  }
body#Pro-AV.mt500 #wrapper{background:url("../images-aver/products/mt500/banner-bg.jpg") right top no-repeat; background-size:100% auto;}
body#Pro-AV.mt500 .banner .overSub .prod {bottom:0px; left:100%; width:1000px;}

/* feature-1/AI-Driven Auto Switching ******************************/

body#Pro-AV.mt500 .auto-switching-caption {display: none !important;}
body#Pro-AV.mt500 #auto-switching-section .text-center-wrapper { text-align: center; margin-bottom: 15px; }

/* Slider Feature - 3 gif */
body#Pro-AV.mt500 #auto-switch .feature {
    padding: 50px 15px;
	box-sizing: border-box;
    transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1);
    opacity: 0.4;
    transform: scale(0.85);
}

body#Pro-AV.mt500 #auto-switch .feature img {border-radius: 20px;}/* round corner*/
body#Pro-AV.mt500 #auto-switch .slick-center {opacity: 1;transform: scale(1.05); }

/* --- Sider Bar --- */
body#Pro-AV.mt500 .custom-dots {
    width: 100%;
    margin-top: 40px; 
}

body#Pro-AV.mt500 .custom-dots ul.slick-dots {
    display: flex !important; 
    list-style: none !important; 
    justify-content: center !important; 
    padding: 0 !important; 
    margin: 0 !important;
    gap: 20px; 
}

body#Pro-AV.mt500 .custom-dots ul.slick-dots li {
    flex: 1;         
    max-width: 250px;  
    height: auto;     
    margin: 0;
    cursor: pointer;
    background: transparent !important; 
}
/* Image ease speed */
body#Pro-AV.mt500 .dot-progress-wrapper .progress-bar {
    display: block;
    width: 100%;
    height: 4px; 
    background: #ccc; 
    border-radius: 2px;
    transition: all 0.3s ease;
}

body#Pro-AV.mt500 .custom-dots ul.slick-dots li.slick-active .progress-bar {
    background: #e60012; /* AVer Red */
}

/* Text when inactive */
body#Pro-AV.mt500 .dot-progress-wrapper .progress-text {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: #666; 
    transition: all 0.4s ease;
}

/* when text is active it turns to bold */
body#Pro-AV.mt500 .custom-dots ul.slick-dots li.slick-active .progress-text {
    color: #e60012;
    font-weight: 700;
}

body#Pro-AV.mt500 .custom-dots ul.slick-dots li button {
    display: none !important;
}

body#Pro-AV.mt500 #auto-switching-section .scroll-reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: opacity 1.2s ease, transform 1.2s ease; 
}
body#Pro-AV.mt500 #auto-switching-section .scroll-reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}


/* --- Slider  --- */
body#Pro-AV.mt500 #auto-switch.slick-slider { position: relative; display: block; box-sizing: border-box; }

body#Pro-AV.mt500 #auto-switch .slick-list {
    position: relative;
    display: block;
    overflow: hidden; 
    margin: 0;
    padding: 0;
}

body#Pro-AV.mt500 #auto-switch .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex; /* image align direction */
    align-items: center;
}

body#Pro-AV.mt500 #auto-switch .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    outline: none;
}

body#Pro-AV.mt500 #auto-switch.slick-initialized .slick-slide { display: block; } 

/* --- Slider Caption --- */
body#Pro-AV.mt500 #auto-switch .feature {
    transition: all 0.6s ease;
    opacity: 0.4;
    transform: scale(0.85);
}

body#Pro-AV.mt500 #auto-switch .slick-center {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Slider Caption detail --- */
body#Pro-AV.mt500 #auto-switch-details {max-width: 800px;margin: 30px auto 0; min-height: 80px; }

body#Pro-AV.mt500 .detail-item { display: none; font-size: 14px; line-height: 1.6; color: #666; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; transform: translateY(10px); }

body#Pro-AV.mt500 .detail-item.active { display: block; }

@keyframes quickFade {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* feature-2/Dual Independent 4K Outputs ******************************/
body#Pro-AV.mt500 .imgRound img {width:100%; height:100%; object-fit:cover;}
body#Pro-AV.mt500 #dual-4k-outputs .scrolling-text-section {padding: 10px 0; background: #fff;}

body#Pro-AV.mt500 #dual-4k-outputs .text-wrapper {padding-right: 15%; }
/* Text scroll effect */
body#Pro-AV.mt500 .scroll-reveal {opacity: 0;transform: translateY(40px);transition: opacity 1.2s cubic-bezier(0.15, 0.85, 0.35, 1), transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1);will-change: transform, opacity;}
body#Pro-AV.mt500 .scroll-reveal.active {opacity: 1; transform: translateY(0);}


/* feature-3/Operator-Free Production ******************************/
body#Pro-AV.mt500 .imgRound img {width:100%; height:100%; object-fit: cover;}
body#Pro-AV.mt500 .scrolling-text-section #operator-free {padding: 160px 0; background: #fff;}

body#Pro-AV.mt500 #operator-free .text-wrapper {padding-right: 5%; padding-left: 15%; }
/* Text scroll effect */
body#Pro-AV.mt500 .scroll-reveal {opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.15, 0.85, 0.35, 1), transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1); will-change: transform, opacity;}
body#Pro-AV.mt500 .scroll-reveal.active {opacity: 1; transform: translateY(0); }


/* feature-4/AV-over-IP Integration  ******************************/
body#Pro-AV.mt500 .av-over-ip{background:#fff url("../images-aver/products/mt500/fea-av-over-ip-integration-bg.jpg") center top no-repeat; background-size:cover; }
body#Pro-AV.mt500 .feaTxt{ width: 65%; padding: 100px 40px 35px 40px; text-align:center; }
body#Pro-AV .mt500 .feaTxt h2{ margin-bottom: 17px; line-height: 1; }
body#Pro-AV #av-over-ip .feaTxt.scroll-reveal {opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.15, 0.85, 0.35, 1), transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1); will-change: transform, opacity; }
body#Pro-AV #av-over-ip .feaTxt.scroll-reveal.active {opacity: 1; transform: translateY(0); }
body#Pro-AV #av-over-ip .feaTxt h2 {margin-top: 0; }

/* feature-5/Scalable Multi-Camera Support  ******************************/
/* 1. Section Padding */
body#Pro-AV.mt500 #multi-camera-support.scrolling-text-section {padding: 20px 0 !important; background: #fff;}

/* 2. Text Center */
body#Pro-AV.mt500 #multi-camera-support .text-center-wrapper {text-align: center;margin-bottom: 60px; /*Space between text and image*/}


/* 5. Scrolling Effect */
body#Pro-AV.mt500 #multi-camera-support .scroll-reveal {opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.15, 0.85, 0.35, 1), transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1); }
body#Pro-AV.mt500 #multi-camera-support .scroll-reveal.active {opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------*/
@media (min-width: 4001px) {

	
}
@media (min-width: 2001px) and (max-width: 4000px) {

}

@media (min-width: 2000px) {

}

@media (min-width: 1200px) and (max-width: 1840px) {


	
}

@media (max-width:1680px) {


}

@media (max-width:1440px) {


    
}


@media (max-width: 1199px) {

	

}

@media (max-width:1024px) {

	
}


@media (min-width: 992px) and (max-width: 1199px) {

	
}


@media (max-width: 991px) {

    
}


@media (min-width: 768px) and (max-width: 991px) {

body#Pro-AV.mt500 .fea .imgRound, 
body#Pro-AV.mt500 .fea .imgRound-auto {
        height: auto; 
        max-height: none;
        margin-bottom: 0 ;
		overflow: hidden;}
}
	
	
body#Pro-AV.mt500 #av-over-ip .feaDemo img {
        width: 55%;
        height: auto;
    }

body#Pro-AV.mt500 .cont {padding-left: 10px;
    }

	
@media (max-width: 767px) {

	
}


@media (min-width: 576px) and (max-width: 767px) {


}

@media (max-width: 575px) {

body#Pro-AV.mt500 #wrapper{background-image:url("../images-aver/products/mt500/banner-bg-sm.jpg"); background-position: right top; background-repeat: no-repeat; background-size: auto 600px;}
body#Pro-AV.mt500 .banner{background:none;}
body#Pro-AV.mt500 .banner .overSub .prod { margin: 0 auto; padding-top: 50px; padding-bottom: 0px; bottom: 0px; left: 0; right: 0; width: 85%;}
    
.mobile-round-20 {border-radius: 20px; overflow: hidden; display: block;}
.mobile-round-20 img {display: block; width: 100%; height: auto;}
.mobile-container {padding-left: 20px; padding-right: 20px; margin-top: 50px;}

body#Pro-AV.mt500 #av-over-ip .feaTxt.divcenter {text-align: left;
        padding: 0 0px;  /* text aligns with other feature text */
        margin-left: 0;  
        margin-right: 0;
        width: 100% ;   
        max-width: none;
        
        /* remove text scroll animation */
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
    }

body#Pro-AV.mt500 #av-over-ip.av-over-ip {padding-top: 10px ;  margin-top: 50px ; }

body#Pro-AV.mt500 #av-over-ip .feaDemo img { width: 85% ; height: auto; display: block; margin: 0 auto; }

}

