* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: Arial, sans-serif;*/
    scroll-behavior: smooth;
}

#home_about_contents {
    /* display: flex;
    gap: 20px; */
    padding: 0 55px;
    /* background-color: rgb(245 245 245/1); */
    /* align-items: center; */
    text-align: start;
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    background: linear-gradient(90deg, rgb(11 23 81) 0%, rgb(10 29 121) 31%);
}

#home_about_contents .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding:30px;
}

#home_about_contents .parent .main_div{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 20px;
}

#home_about_contents h2 {
    font-family: Viga ;
    font-size: 35px;
    padding: 20px 0;
    color: #fecb00;
}

#home_about_contents p {
    font-size: 18px;
    margin-bottom: 26px;
    line-height: 22px;
    color: #fff;
    font-weight: 16px;
    letter-spacing: 0.5px;
}

#home_about_contents ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
}

#home_about_contents ul li {
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;
    margin: 5px 0;
}

#home_about_contents svg {
    color: rgb(234, 179, 8);
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

#home_about_contents div p{
    display:  inline-block;
}

.home_about_contents_right {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px;
}

.home_about_contents_right div {
    background: #0b1e7d;
    border: solid #f1ad0e 2px;
    padding: 24px;
    border-radius: 20px 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: transform 0.3s ease;
}

.home_about_contents_right div:hover{
    transform: scale(1.04);
    cursor: pointer;
}

.home_about_contents_right h3 {
    margin-bottom: 10px;
    color: #fecb00;
    font-size: 19px;
}

#home_about_contents .home_about_contents_right p{
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff;
}

#home_about_contents .icon_image{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;
    column-gap: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

#home_about_contents .icon_image strong{
    font-size: 20px;
}

#home_about_contents .icon_image p{
    margin: 0;
    font-size: 17px;
    display: block;
}

/* ============================ Placement Highlights ================== */

#placement_Highlights{
    background-color: rgb(245 245 245/1);
}

#placement_Highlights .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#placement_Highlights .parent h2{
    font-family: Viga ;
    font-size: 30px;
    margin: 30px;
    text-align: center;
    color: #0b1e7d;
}

#placement_Highlights .parent .Highlights{
    gap: 20px;
    width: 100%;
    display: grid;
    padding: 0 50px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 25px;
}

#placement_Highlights .parent .Highlights div{
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#placement_Highlights .parent .Highlights div p{
    font-size: 18px;
    margin: 10px 2px;
}

#placement_Highlights .parent .Highlights span{
    color: #e5c000;
    font-size: 40px;
    font-weight: 700;
}

/* =================== section_ai ================== */

#section_ai{
    background: linear-gradient(2deg, #011b7c 0%, rgb(9 23 85) 80%);
}

#section_ai .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    text-align: center;
}

#section_ai .parent h2{
    /*  font-family: Viga ; */
    font-size: 45px; 
    margin-bottom: 15px;
    /* color: #e0aa0c; */
    padding: 5px;
    text-align: center; 
    background: linear-gradient(0deg, rgb(187 151 39) 29%, rgb(249 245 146) 50%, rgb(215 167 41) 76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

#section_ai .parent .main_div{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#section_ai .parent img{
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: fill;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

#section_ai .parent .image_content{
    position: relative;
}

#section_ai .parent .image_content .robot{
    width: 60%;
    position: absolute;
    left: -10px;
    top: -15px;
    animation: moveSide 3s ease-in-out infinite;
}

#section_ai .parent .image_content .robot img{
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes moveSide {
    0% { transform: translateX(0); }
    50% { transform: translateX(-15px); } 
    100% { transform: translateX(0); } 
}

#section_ai .parent  h3{
    color: #0b1e7d;
    background: linear-gradient(0deg, rgb(187 151 39) 3%, rgb(249 245 146) 56%, rgb(215 167 41) 100%);
    display: inline-block;
    font-size: 23px;
    margin-bottom: 22px;
    padding: 10px 20px;
    border-radius: 20px 2px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#section_ai .parent .road_map{
    text-align: center;
}

#section_ai .parent .main_div .road_map ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin: 0 20px;
    padding: 0 10px;
    border: 2px solid #e5c000;
    border-radius: 20px;
    padding: 20px;
}

#section_ai .parent .main_div .road_map ul li {
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #fff;
    /* margin: 5px 10px */
}

#section_ai .parent .main_div .road_map svg {
    width: 22px;
    margin-right: 10px;
    color: #fecb00;
}

#section_ai .parent p{
    margin-top: 20px;
    font-size: 20px;
    color: #fff;
    padding: 20px;
}


/* ====================== fullstack =============== */

#section_fullstack{
    padding: 20px;
    background-color: rgb(245 245 245/1);
}

#section_fullstack .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
}

#section_fullstack .parent h2{
    font-family: Viga ;
    font-size: 35px;
    margin-bottom: 50px;
    text-align: start;
    color: #0b1e7d;
    padding: 5px;
}

#section_fullstack .parent .main_div{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#section_fullstack .parent .road_map{
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#section_fullstack .parent .road_map h3{
    color: #000;
    font-size: 22px;
    padding: 20px;
    margin-bottom: 12px;
}

#section_fullstack .parent .road_map li{
    list-style: none;
    display: flex;
    justify-content: start;
    margin-bottom: 20px;
}

#section_fullstack .parent .road_map span{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e5c000;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 17px;
    font-size: 20px;
    font-weight: 600;
}

#section_fullstack .parent .road_map div{
    margin-left: 20px;
}

#section_fullstack .parent .road_map div h4{
    font-size: 17px;
    margin-bottom: 6px;
}

#section_fullstack .parent .road_map div p{
    font-size: 17px;
    color: #656363;
    font-weight: 600;
}

#section_fullstack .parent img{
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: fill;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

/* ============================= Testing Section ======================= */

#testing_section{
    background: linear-gradient(90deg, rgb(11 23 81) 0%, rgb(10 29 121) 31%);
    /* height: 100vh; */
    width: 100%;
}

#testing_section .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 30px 0 30px;
}

#testing_section .parent h2{
    color: #fff;
    text-align: center;
    padding: 30px 0;
    font-size: 30px;
    margin-bottom: 20px;
}

#testing_section .parent span{
    color: #eec705;
    font-size: 50px;
}

#testing_section .parent .main_div{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#testing_section .parent .main_div img{
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: fill;
    height: 100%;
}

#testing_section .parent .main_div .testing_content{
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    text-align: center;
    /* background-color: #0b1e7d; */
}

#testing_section .parent .main_div .testing_content h4{
    color: #0b1e7d;
    background-color: #fecb00;
    display: inline-block;
    font-size: 23px;
    margin-bottom: 22px;
    padding: 10px;
    border-radius: 15px 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#testing_section .parent .main_div .testing_content ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin: 20px;
    padding: 10px;
}

#testing_section .parent .main_div .testing_content ul li {
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 19px;
    color: #fff;

}

#testing_section .parent .main_div .testing_content svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    color: #fecb00;
}

#testing_section .parent .text_content {
    color:  #fff;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0.3px;
    line-height: 23px;
    margin-top: 20px;
    padding-bottom: 50px;
}

#testing_section .parent .main_div .testing_content span{
    font-size: 25px;
}

.wave{
    position: absolute;
    bottom: 0;
}

/* ========================= devops_section ======================= */

#devops_section{
    width: 100%;
    background-color: #fff;
}

#devops_section .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 30px 0 30px;
}

#devops_section .parent h2{
    font-family: Viga ;
    color: #0b1e7d;
    text-align: center;
    padding: 0 30px;
    font-size: 35px;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

#devops_section .parent .main_div{
    display: grid;
    gap: 20px;
    padding-bottom: 50px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#devops_section .parent .main_div .left_content{
    background-color: #dededec7;
    border-radius: 10px;
    padding: 40px 20px 20px 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#devops_section .parent .main_div img{
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */
    background-size: cover;
    object-fit: fill;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#devops_section .parent .main_div h4{
    display: inline-block;
    font-size: 26px;
    padding: 10px 20px;
    border-radius: 0 50px 50px 0;
    margin-bottom: 10px;
    text-align: center;
    background-color: #d9126f;
    color: #fff;
    background: linear-gradient(90deg, rgb(217 18 111 / 45%) 0%, rgb(217 18 111) 10%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#devops_section .parent .main_div ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin:0 20px;
}

#devops_section .parent .main_div ul li{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #0b1e7d;
}
#devops_section .parent .main_div ul li svg{
    width: 25px;
    height: 25px;
    margin-right: 10px;
    color: #d9126f;
}



/* ================== section power BI ============== */

#section_power{
    width: 100%;
    /* background-color: #fff; */
    background: linear-gradient(94deg, rgb(238 234 233) 10%, rgb(246 244 245) 31%);
}

#section_power .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 30px 0 30px;
}

#section_power .parent h2{
    font-family: Viga ;
    color: #0b1e7d;
    text-align: center;
    padding: 0 30px;
    font-size: 35px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

#section_power .parent .main_div{
    display: grid;
    gap: 20px;
    padding: 0 20px 50px 20px ;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#section_power .parent .main_div img{
    width: 100%;
    background-size: cover;
    object-fit: fill;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

#section_power .parent .main_div .right_content ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin: 20px;
    padding: 10px;
}

#section_power .parent .main_div .right_content{
    padding: 10px;
    text-align: center;
}

#section_power .parent .main_div h4{
    font-size: 27px;
    padding: 10px 20px;
    background-color: #fecb00;
    margin-top: 30px;
    border-radius: 20px 5px 20px 5px;
    text-align: center;
    color: #0824b2;
    display: inline-block;
}

#section_power .parent .main_div .right_content ul li {
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #000;
}

#section_power .parent .main_div .right_content svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    color: #e0aa0c;
}


/* ========================== section_mission_vision =================== */

#section_mission_vision{
    /* background-color: #020c3d; */
    padding: 10px;
    background: linear-gradient(90deg, rgb(11 23 81) 0%, rgb(10 29 121) 31%);
}

#section_mission_vision .parent{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 30px 0 30px;
}

#section_mission_vision .parent h2{
    color: #fecb00;
    font-family: Viga ;
    text-align: center;
    font-size: 35px;
    margin: 20px;
    letter-spacing: 1px;
}

#section_mission_vision .parent .main_div{
    display: grid;
    gap: 30px;
    padding: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#section_mission_vision .parent .left_content,#section_mission_vision .parent .right_content{
    /* background-color: #09144a; */
    background: linear-gradient(90deg, rgb(13 29 105) 0%, rgb(10 29 121) 31%);
    padding: 30px;
    border-radius: 20px;
    border: solid 2px #e5c000;
    margin-bottom: 20px;
}

#section_mission_vision .parent .svg_div{
    color: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #e0aa0c;
    margin-bottom: 20px;
}

#section_mission_vision .parent .svg_div svg{
    width: 40px;
}

#section_mission_vision .parent .main_div h4{
    color: #fff;
    font-size: 25px;
    margin-bottom: 20px;
}

#section_mission_vision .parent .main_div p{
    color: #f4f4f4;
    font-size: 14px;
    margin-bottom: 20px;
}

#section_mission_vision .parent .main_div ul li {
    display: flex;
    align-items: center;
    font-size: 14px;
    list-style: none;
    color: #fff;
}

#section_mission_vision .parent .main_div ul li svg{
    color: #fecb00;
    height: 22px;
    margin-right: 20px;
}




 /* =============================== Media ============================ */

@media only screen and (min-width: 1200px) {
    #section_fullstack .parent .road_map{
        padding: 10px;
    }
}


@media only screen and (max-width: 1200px){

    #home_about_contents .parent {
        padding: 0;
    }
    .home_about_contents_right div{
        width: 100%;
    }
    #devops_section .parent .main_div {
        grid-template-columns: none;
    }
    #section_power .parent .main_div {
        grid-template-columns: none;
    }
    #section_fullstack .parent .main_div {
        grid-template-columns: none;
    }
}

@media only screen and (max-width: 1150px){
    #testing_section .parent .main_div .testing_content ul {
        margin: 0;
    }
}

@media only screen and (max-width: 1080px){
    #section_ai .parent .main_div {
        grid-template-columns: none;
    }
    #section_ai .parent .road_map {
        margin-top: 20px;
    }
    #section_ai .parent h3 {
        width: auto;
    }
    #testing_section .parent .main_div .testing_content ul{
        padding: 0;
        margin: 0;
    }  
    #testing_section .parent .main_div .testing_content {
        padding: 0;
    }  
}

@media only screen and (max-width: 1000px){

    #section_ai .parent h2 {
        font-size: 40px;
    }

    #testing_section .parent .main_div {
        display: block;
    }
    #home_about_contents .parent .main_div {
        grid-template-columns: none;
    }
    .text_content span{
        display: block;
        padding: 10px 0;
        font-size: 40px;
    }
}

@media only screen and (max-width: 900px){
    #testing_section .parent span {
        font-size: 40px;
    }
    #section_mission_vision .parent .main_div {
        grid-template-columns: none;
        padding: 0;
    }
    
}

@media only screen and (max-width: 750px){
    #testing_section .parent span {
        font-size: 30px;
    }
    #testing_section .parent h2 {
        font-size: 25px;
    }
}

@media only screen and (max-width: 700px){
    .home_about_contents_right {
       width: 100%;
       grid-template-columns: none;
    }

    .home_about_contents_right div{
        width: 100%;
    }

    #testing_section .parent .main_div{
        grid-template-columns: none;
    }

    #section_fullstack .parent .main_div {
        grid-template-columns: none;
    }
    #placement_Highlights .parent .Highlights {
        grid-template-columns: none;
    }
    #section_power .parent {
        padding: 0;
    }
    #section_power .parent .main_div {
        padding: 0;
    }
    #section_power .parent .main_div h4 {
        font-size: 24px;
        margin-top: 10px;
    }
    #section_mission_vision .parent h2 {
        margin: 0 0 20px 0;
        font-size: 25px;
    }
    
    #section_mission_vision .parent .main_div {
        gap:10px;
    }
    #section_power .parent h2 {
        font-size: 27px;
        margin-bottom: 0;
        padding: 20px 0;
    }

}

@media only screen and (max-width: 650px){
    #testing_section .parent .main_div .testing_content ul {
        margin: 0;
    }
    #section_power .parent .main_div .left_content {
        padding: 10px;
    }
}


@media only screen and (max-width: 600px){
    #section_ai .parent h2{
        font-size: 30px;
        margin-bottom: 20px;
    }

    #section_ai .parent {
        padding: 30px 0;
    }
    #section_fullstack .parent .road_map{
        padding: 10px;
    }
    #devops_section .parent h2 {
        padding: 20px 0;
        margin-bottom: 10px;
        font-size: 30px;
    }
    #home_about_contents h2 {
        font-size: 30px;
    }
    #home_about_contents ul{
        grid-template-columns: none;
        padding: 20px;
    }
    #section_fullstack .parent {
        padding: 0;
    }
    #section_fullstack .parent h2{
        margin-bottom: 30px;
        text-align: center;
        padding: 0;
        font-size: 30px;
    }
    #home_about_contents{
        padding: 20px;
    }
    #testing_section .parent .main_div .testing_content ul {
        grid-template-columns: none;
        padding: 0 30px;
    }
    #testing_section .parent .testing_span_h2{
        display: block;
    }
    #testing_section .parent h2{
        margin-bottom: 0;
    }
    #testing_section .parent p {
        font-size: 18px;
    }
    #devops_section .parent .main_div ul {
        grid-template-columns: none;
    }
    #section_power .parent .main_div .right_content ul {
        grid-template-columns: none;
    }
    #section_mission_vision .parent .left_content, #section_mission_vision .parent .right_content {
        padding: 15px;
    }
}

@media only screen and (max-width: 500px){
    #section_ai .parent .main_div .road_map ul {
        grid-template-columns: none;
        padding-left: 20px;
    }
}

@media only screen and (max-width: 450px){
    #home_about_contents h2 {
        font-size: 27px;
    }
    .home_about_contents_right div{
        padding: 10px;
    }
    #placement_Highlights .parent .Highlights {
        padding: 0 15px 20px;
    }
    #testing_section .parent {
        padding: 5px 0 ;
    }
    #devops_section .parent {
        padding: 0;
    }
    #section_power .parent .main_div h4 {
        font-size: 15px;
        margin-top: 0;
    }
    #section_power .parent .main_div .right_content ul{
        padding: 0;
        margin: 0;
    }
    #section_mission_vision .parent {
        padding: 0;
    }
    #section_mission_vision .parent h2 {
        padding: 20px 0px;
        margin-bottom: 0px;
        font-size: 27px;
    }
    #testing_section .parent span {
        font-size: 24px;
    }    

}

@media only screen and (max-width: 400px){
    #home_about_contents h2 {
        font-size: 33px;
    }
    #placement_Highlights .parent h2 {
        margin: 20px 0;
        font-size: 30px;
    }
    #section_fullstack {
        padding: 10px;
    }
    #section_fullstack .parent h2 {
        margin-bottom: 10px;
        text-align: center;
        padding: 20px 0;
        font-size: 26px;
    }
    #testing_section .parent .main_div .testing_content h4 {
        font-size: 20px;
    }
}

@media only screen and (max-width: 320px){
    #home_about_contents h2{
        font-size: 30px;
    }

    #home_about_contents p{
        font-size: 18px;
    }
}

/*video overlay*/

#video_playback_overlay{
            z-index: 3;
            background-color:rgba(0,0,0,0.75);
            /* opacity: 0.6; */
            width: 100vw;
            height: 100vh;
            /* display: flex; */
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
        }
        .video_close_button_overlay{
            color: rgb(255, 255, 255);
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            top: -15px;
            right: -15px;
            background-color: rgba(12, 6, 78, 0.884);
            width: 25px;
            height: 25px;
            border-radius:50%;
            cursor: pointer;
            border: 2px solid;
            opacity: 0.8;
        }
        /* #call_back_overlay{
            z-index: 4 !important;
        } */

        /* Video Section - start */
        .video-section {
        /* padding: 50px 20px; */
        /* background: linear-gradient(135deg, #b60ab9, #580684, #ff78c9); */
        color: white;
        }
        
        .video-gallery {
        max-width: 900px;
        margin: auto;
        }
        
        .main-video-wrapper {
        position: relative;
        /* padding-top: 56.25%; */
        background: #000;
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        }
        
        .main-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        }
        
        /* Navigation Arrows */
        .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: white;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 8px;
        border-radius: 20%;
        cursor: pointer;
        z-index: 10;
        user-select: none;
        width: 45px;
        }
        
        .arrow.left {
        left: 10px;
        }
        
        .arrow.right {
        right: 10px;
        }
        
        /* Thumbnail Row - Horizontal Scroll */
        .thumbnail-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin; /* Firefox */
        -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
        }
        
        .thumbnail-row::-webkit-scrollbar {
        height: 6px;
        }
        
        .thumbnail-row::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 10px;
        }
        
        .thumbnail-row img.thumb-img {
        width: 150px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        cursor: pointer;
        object-fit: cover;
        transition: transform 0.2s, outline 0.2s;
        }
        
        .thumbnail-row img.thumb-img:hover {
        transform: scale(1.05);
        }
        
        .active-thumb {
        outline: 4px solid #ffbb00;
        transform: scale(0.9);
        }
        
        .thumbnail-row {
            scroll-snap-type: x mandatory;
            scroll-padding: 10px;
        }
        
        .thumbnail-row img.thumb-img {
            scroll-snap-align: start;
        }
        
        /* Mobile Adjustments */
        @media (max-width: 600px) {
        .thumbnail-row img.thumb-img {
            width: 120px;
            height: 68px;
        }
        
        .thumbnail-row {
            scroll-snap-type: x mandatory;
            scroll-padding: 0px;
            gap: 0px;
        }
        
        .thumbnail-row img.thumb-img {
            scroll-snap-align: start;
        }
            .arrow {
            display: none;
        }
        .video-gallery{
            padding:0 30px;
        }
        }
        /* Video Section - end */

        .thumb-img {
            width: 100px;
            height: 60px;
            object-fit: cover;
            margin: 5px;
            cursor: pointer;
            border: 2px solid transparent;
            }
            .active-thumb {
            border-color: #007bff;
            }
            .main-video-wrapper {
            position: relative;
            }
            .arrow {
            position: absolute;
            top: 50%;
            font-size: 24px;
            background: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            cursor: pointer;
            z-index: 1;
            }
            .arrow.left { left: 0; }
            .arrow.right { right: 0; }

        #mainVideoContainer video {
            max-height: 50vh; /* or any fixed size like 600px */
            width: auto;
            margin: 0 auto;
            display: block;
            object-fit: contain; /* optional: keeps full video visible */
            background: black;
            }

        #mainVideoContainer {
            max-height: 50vh;
            aspect-ratio: 9 / 16;
            overflow: hidden;
            margin: 0 auto;
            background: black;
            display: flex;
            align-items: center;
            justify-content: center;
            }
        @media (max-width: 768px) {
            video {
                max-height: 50vh;
                width: 100%;
            }
            }


        
        @media (max-width: 768px) {
            #container_call_back {
                width: 80%;
                padding: 15px;
            }

            #container_call_back #call_back_form h3 {
                font-size: 28px;
            }

            #container_call_back #call_back_form h4 {
                font-size: 22px;
            }

            #container_call_back #call_back_form p {
                font-size: 16px;
            }

            #container_call_back #call_back_form input,
            #callback_button,
            #callback_button1 {
                font-size: 16px;
                padding: 10px;
            }

            #container_call_back #call_back_form label {
                font-size: 15px;
            }

            #mainVideoContainer {
                max-height: 60vh;
                width: 100%;
                aspect-ratio: 9 / 16;
            }

            #mainVideoContainer video {
                max-height: 60vh;
                width: 100%;
            }

            .thumbnail-row img.thumb-img {
                width: 100px;
                height: 60px;
            }

            .arrow {
                display: none;
            }

            .video-gallery {
                padding: 0 20px;
            }

            #callback_button,
            #callback_button1 {
                font-size: 18px;
            }
            }