.cva-body{padding: 1.7rem; background-color: #ffc000;height: 125px;}

.sidenav2 {
	color: #fff;
	max-width: 320px;
	height: 100%;
	/* 100% Full-height */
	/* width: 0; */
	/* 0 width - change this with JavaScript */
	position: fixed;
	/* Stay in place */
	z-index: 9999;
	/* Stay on top */
	top: 0;
	right: -360px;
	/* background-color: #f0f0f0; */
	background-color: #232629;
	/* Black*/
	overflow-x: hidden;
	/* Disable horizontal scroll */
	padding-top: 60px;
	/* Place content 60px from the top */
	transition: 0.5s;
	/* 0.5 second transition effect to slide in the sidenav */
	box-shadow: 0 0 35px rgba(0, 0, 0, 0.25);
}

.sidenav2 a {
	/*    padding: 8px 8px 8px 32px;*/
	text-decoration: none;
	/*    font-size: 25px;*/
	color: #818181;
	/*
    display: block;
    transition: 0.3s
*/
}

/* Position and style the close button (top right corner) */
.sidenav2 .closebtn2 {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

.deler-para
{width: 90%; float: left; padding:0 20px;}



#toTop {
  display: none;        /* Hidden by default */
  position: fixed;      /* Fixed position */
  bottom: 20px;         /* Distance from bottom */
  right: 30px;          /* Distance from right */
  z-index: 99;          /* Sit on top of everything */
  padding: 15px;
  background-color:#000;
  color: white;
  border-radius: 50%;
  cursor: pointer;
	width:51px;
	font-size:26px;
    height:51px;
    padding: 0 0 0 0;
}

#toTop:hover {
	background:#ffc000; border:#000 solid 1px; color:#000;
}

.pl-5, .px-5 {
    padding-left:1rem !important;
	
}


.aftermarket-text-3 p{font-family: 'Roboto Condensed';  font-size:21px; color:#000; font-weight: bold; text-transform: none; margin:0; padding:0;}



.next-gen-excavators-main{display:block;}
.next-gen-excavators-main-1{display:none;}

.next-gen-excavators-new{display:block;}
.next-gen-excavators-new-1{display:none;}


.slide-video-1{width: 100%; margin: 3% 0 1% 0;}
.slide-video-1 video{width: 100%; margin: 5% 0 5% 0;}







/* Master Playlist Wrapper Box */
.video-playlist-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  background: #000;
}

/* Hide Radio Selectors */
.video-playlist-container input[type="radio"] {
  display: none;
}

/* Base Video Elements hidden by default */
.main-video-view {
  width: 100%;
  display: none;
}

/* Responsive 16:9 Screen Ratio Layout math */
.aspect-ratio-box {
position: relative;
    padding-bottom: 72%;
    height: 0;
}

.aspect-ratio-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Bottom Horizontal Track Bar Container */
.thumbnails-navbar {
  display: flex;
  gap: 4px;
  background: #000;
  padding-top: 4px;
	width: 1280px;
}

/* Card Button Formatting Rules */
.thumb-btn {
  flex: 1;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: 2px solid #222;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text Visibility Tint Mask Layer */
.thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 29, 51, 0.82); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  text-align: center;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

/* Golden Accent Subheaders */
.thumb-sub {
  font-size: 0.62rem;
  color: #fbbf24; 
  font-family: sans-serif;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* Main Heading Title Fonts */
.thumb-title {
  font-size: 0.75rem;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Hover Interface Feedback Actions */
.thumb-btn:hover {
  border-color: #555;
}

.thumb-btn:hover .thumb-overlay {
  background: rgba(11, 29, 51, 0.55);
}

/* CSS Selection Router Triggers */
#vid-1:checked ~ .main-video-view:nth-of-type(1),
#vid-2:checked ~ .main-video-view:nth-of-type(2),
#vid-3:checked ~ .main-video-view:nth-of-type(3),
#vid-4:checked ~ .main-video-view:nth-of-type(4),
#vid-5:checked ~ .main-video-view:nth-of-type(5) {
  display: block;
}

/* Selected Button Glowing Yellow Border Effects */
#vid-1:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(1),
#vid-2:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(2),
#vid-3:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(3),
#vid-4:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(4),
#vid-5:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(5) {
  border-color: #fbbf24; 
}

#vid-1:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(1) .thumb-overlay,
#vid-2:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(2) .thumb-overlay,
#vid-3:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(3) .thumb-overlay,
#vid-4:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(4) .thumb-overlay,
#vid-5:checked ~ .thumbnails-navbar .thumb-btn:nth-of-type(5) .thumb-overlay {
  background: rgba(30, 58, 138, 0.4); 
}



.aspect-ratio-box { width:1280px;margin: 0 auto;}
.aspect-ratio-box video {width: 100%; margin: 0 auto;}



.vision-nav-main{ position: relative; top:51%; width: 100%; background: #fff; text-align: center; border-top:#333 solid 1px; border-bottom:#333 solid 1px; padding: 20px 0 20px;}
.vision-nav { width: 100%;  }
.vision-nav a { color: #000; padding: 15px; text-decoration: none; display: inline-block; font-family: 'Roboto Condensed';  font-size:19px;}
.vision-nav a:hover { color: #ffc50b;}


.vision-link-main{width:100%; background-color:#f8f8f8; padding: 3% 0 3% 0;}
.vision-link-main-1{width:100%; }
.vision-parts { width: 100%;float: left;margin: 0 0 0 0;}
.gap-vision{margin:18% 0 0 0;}
.gap-vision-2{margin:22% 0 0 0;}
.gap-vision-3{margin:35% 0 0 0;}

.vision-button-bc1 {
    width:auto;
    background-color:#ffcc00;
    padding: 10px 20px;
    font-family: 'Roboto Condensed';
    color: #000;
    font-size: 21px;
    border-radius: 8px;
    border: #ffcc00 solid 1px;
    margin: 5% 3px 2% 14px;
    float: left;
}
.vision-button-bc1:hover { background-color: #000; color:#fff; border: #000 solid 1px;}


.vision-list{width:100%;}
.vision-list ul{list-style: none; margin:0; padding:0;}
.vision-list li{line-height: 27px; list-style:none;}


.vision-underline-2 {
    border-bottom: 6px solid #ffcd11;
    width: 4%;
    margin:3.7% 0 3% 0;
    float: left;
    position: absolute;
}

.vision-underline-3 {
    border-bottom: 6px solid #ffcd11;
    width: 4%;
    margin:3% 0 3% 16px;
    float: left;
    position: absolute;
}
.vision-text-2-new{margin: 0 0 0 16px;}

.vision-text p {
    color: #000;
    margin: 1% 0 1% 0;
}


/* accordion css start here */

/* Container styling */
.accordion-container {
  font-family: Arial, sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid #d3d3d3;
}

/* Remove default browser arrow from summary */
.accordion-item summary::-webkit-details-marker {
  display: none;
}
.accordion-item summary {
  list-style: none;
	border-bottom: #ccc solid 1px;
}

/* Individual Accordion Row */
.accordion-item {
  border-bottom: 1px solid #d3d3d3;
}

/* Header style styling */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-size: 16px;
	font-family: 'Noto Sans';
  font-weight: bold;
  color: #000000;
  cursor: pointer;
  user-select: none;
}

/* Custom circular arrow icon matching the image */
.accordion-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid #000000;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Chevron arrow inside the circle */
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Rotate the arrow upward when open */
.accordion-item[open] .accordion-icon {
  transform: rotate(180deg);
}

/* Content Area styling */
.accordion-content {
  padding: 0 0 20px 0;
  color: #333333;
  font-size: 15px;
  line-height: 1.6;
}

/* Content List styling matching the list style in the image */
.accordion-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.accordion-content li {
  padding: 4px 0;
	font-family: 'Noto Sans';
}
/* accordion css end here */





/*
 .container {
            width: 100%;
            max-width: 1000px;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
*/

        .section {
            padding: 24px 32px;
			background-color:#f7f7f7;
        }

        .grid-3-col {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 16px;
            column-gap: 40px;
        }

        .item {
            font-size: 15px;
            color: #1a1a1a;
            line-height: 1.4;
        }

        .divider-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 32px;
            background-color: #ffffff;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 600;
            font-size: 16px;
            color: #000000;
            cursor: pointer;
        }

        .toggle-icon {
            width: 20px;
            height: 20px;
            border: 1px solid #8c8c8c;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .toggle-icon::before {
            content: '';
            width: 6px;
            height: 6px;
            border-left: 2px solid #555555;
            border-top: 2px solid #555555;
            transform: rotate(45deg);
            margin-top: 2px;
        }

        .bottom-section {
            background-color: #fafafa;
        }


.visionlink-main {
    width: 100%;
    float: left;
	background: linear-gradient(to bottom, #464646, #000000);
    padding: 0px;
    text-align: center;
}

.visionlink-button-1 {
    width:100%;
    background-color: #000;
    padding: 10px 20px;
    font-family: 'Roboto Condensed';
    color: #fff;
    font-size: 21px;
    border-radius: 8px;
    border: #000 solid 1px;
    margin: 5% 0 2% 0;
    float: right;
}

.visionlink-button-1:hover {
    background-color: #ffff;;
}

.vision-text-top{margin: 2% 0 0 16px; padding:0;}
.vision-text-top-1{margin: 0 0 10px 16px; padding:0;}


.viso-text-2 {margin: 2% 0 0 0;}
.viso-text-2 h1 {
    font-family: 'Roboto Condensed';
    font-size: 35px;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}




.vison-pro-main{display:block;}
.vison-pro-main-1{display:none;}










@media only screen and (max-width:1440px) and (min-width:1366px) {}

@media only screen and (max-width:1366px) and (min-width:1280px) {}

@media only screen and (max-width:1280px) and (min-width:1024px) {}

@media only screen and (max-width:1024px) and (min-width:991px) {
	
}


@media (min-width: 800px) and (max-width: 1280px) {
	
}




@media (min-width: 768px) and (max-width: 991px) { 

}



	

@media only screen and (max-width:640px) and (min-width:480px) 
{

	
}


@media only screen and (max-width:480px) and (min-width:320px) {
	
.aspect-ratio-box{width:100%;}
.thumbnails-navbar{width:100%;}
.thumb-overlay img{width: 100%;}
.aspect-ratio-box {padding-bottom: 56%;}
.visionlink-main img{width: 100%;}
.gap-vision-3{ margin: 0 0 0 0;}
.vision-text p {padding: 0 20px;}
.vision-list li{padding: 0 20px;}
.accordion-container{padding: 0 20px;}
.gap-vision-2 {margin: 7% 0 0 0;}
.gap-vision {margin: 5% 0 0 0;}
.video-playlist-container{margin: 5% 0 0 0;}
.viso-text-2 h1{margin: 0 0 0 4%;font-size:28px;}
.vision-underline-2 { border-bottom: 6px solid #ffcd11;width: 14%; margin: 21.7% 0 3% 5%; float: left;position: absolute; }
	
	

.vison-pro-main{display:none;}
.vison-pro-main-1{display:block;}
	
}