style.css

*{
    padding:0;
    margin:0;

}

body{
    background-color: rgb(20, 18, 18);
}

#navbar{

    position:fixed;
    width: 100%;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    background-image: linear-gradient(#061C21,#197387);
    color:white;
    z-index: 2;
}

.whitebutton{
padding-bottom: 10px;
padding-top: 5px;;
width:100px;
height:30px;
cursor: pointer;
}

#main_img{

    width:100%;

    height:500px;
    background-image: url("CABLEIMG.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

#about_us_section{
    padding-top: 50px;
    height:500px;
    color: white;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    flex-direction: column;
}

.about_us_content_img{
    height:700px;
    width:600px;
    position: relative;
    bottom:140px;
}
h2 {
    font-size: 72px;
    background: -webkit-linear-gradient(#013743,#0b5464,#66E1FC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

#about_us_content{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    font-size: xx-large;
}

#choose{
    color: white;
    text-align: center;
    margin-bottom: 70px;
}

#choose_divs{

    display:flex;
    justify-content: space-evenly;
    

}

footer{
    padding-top: 20px;
    margin-top:30px;
    color:white;
    background-image: linear-gradient(#061C21,#197387);

}

a{
    text-decoration: none;
    color: white;
}

main{
    color:white;
}

.products{

    background-image: linear-gradient(#061C21,#197387);
    margin:10px;
    width:50%;
    position: relative;
    left: 23%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.products_section{

    
    justify-content: space-evenly;
    
}

#productbutton{
  
    padding-bottom: 10px;
padding-top: 5px;;
width:100px;
height:30px;
color: black;

}

#about_us_content_msg{

    width:40%;
    position: relative;
    bottom:150px;
    right:130px;
}


.blue_buttons{
    margin-top: 20px;
margin-left: 30px;
padding: 10px;
 
 background-image: linear-gradient(#061C21,#197387);
color:white;
border: none ;
border-radius: 10px;
height:50px;
width:100px;
margin: 20px;

}

.choose_div_block{
    margin:40px;
    width:300px;
    color: white;
}



footer{
    display: flex;
    justify-content: space-evenly;
    height:200px;
}

#foot_part1{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    right:100px;
}

#foot_part2{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

}

#mainofabout{
    padding-top:100px;
    text-align: center;
}

.product1{

    height:100%;
    width:50%;
    padding: 40px;;
}

.product_name{

    margin-right:100px;
}

#product_head{

    padding-top:100px;
    text-align: center;
}

#contact_us_head{

    padding-top: 100px;
    text-align: center;
}

#contact_us_main{
     padding-top: 50px;
     text-align: center;
    background-image: linear-gradient();
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height:300px;
}

.container{
    color:white;
}



/*slide show*/
.slideshow-container {
    max-width: 800px;
    position: relative;
    margin: auto;
    padding-top: 50px;
   z-index: -1;
}

.mySlides {
    display: none;
}

.mySlides img {
    width: 100%;
    height: auto;

}

.fade {
    animation: fade 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}


.message_about{
    position: relative;
    z-index: 0;
    padding: 40px;
    background-color: rgba(147, 147, 147, 0.8);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    top: 120px;
    overflow-y: auto;
    padding-top: 80px;
    margin-top: min(-80px);



}


.message_about h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: gold;
}

.message_about p {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: justify;
}
h2 {
    font-size: 50px;
    background: -webkit-linear-gradient(#013743,#0b5464,#66E1FC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;

}


/* director*/

#container_for_director {
    position: relative;
    width: 80%;
    margin: 40px;
}

.director-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 80%;
    background-size: cover;
    filter: brightness(0.5);
}

.message {
    position: relative;
    width: 80%;
    left:7%;
    z-index: 1;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    color: black;
}

.message h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.message p {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: justify;

}

#products_home_page_heading{

    background-image: url(ourproductmainimg.jpeg);
    background-size: cover;
    background-position-y: bottom;
    height:300px;
    color: white;
    font-size: 60px;
}


#our_product_button{

    position: relative;
    left:90%;
    top:-160px;
    height:100px;
    width:10px;
}

#productbutton{

    position: relative;
    bottom:100%;
    width:100px;
    right:280px;

    
}

#product_list{
    margin-left: 70px;
    margin-top:-70px;
    margin-bottom: 0%;
}

ul{
    list-style: none;
    font-size: x-large;
}

#product_home_page_msg{

    height:400px;
    width:300px;
    font-size: xx-large;
    position:relative;
    left:60%;
    top:-400px;
    margin-bottom: 0%;
}
#products_home_page{
    height:650px;
}

#products_home_page_subheading{
font-size: large;
width:300px;
position: relative;
left:10%;
}





/*flip*/

.card {
    position:relative;

    margin: 20px;
    left:25%;
    width: 600px;
    height: 300px;
    perspective: 1000px; /* This creates the 3D effect */
}

.inner-card {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hides the back of each face */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
}

.front {
    background-image: linear-gradient(#061C21,#197387);
}

.back {
    background-image: linear-gradient(#061C21,#197387);
    transform: rotateY(180deg); /* This makes the back face initially hidden */
}

/* This class rotates the card to show the back */
.inner-card.flipped {
    transform: rotateY(180deg);
}

.flipbutton {
    margin-top: 20px;
    margin-left: 30px;
    padding: 10px;
    font-size: 16px;
    width:60%;
    background-color: white;
    color: black;
    border: none;
    cursor: pointer;
}

.product1{

    width:200px;
    height:200px;
    padding-left: 20px;;
}

#card_flip_content{

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 20px;;
}

.price-chart{

    margin:20px;
    width:400px;
    height:150px;
}

/*chatbot*/
.chat-container_for_chatbot{
    background-image: url("img.png");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    height: 100vh;
    zoom: 2.0;
    width: 100vh;

}

.container_for_chatbot {
    width: 90%;
    max-width: 1200px;
    text-align: center;
    background-color: #12303c;
    border-radius: 10px;
    padding: 20px;
}


.logo {
    width: 100px;
    margin-right: 10px;
}



.chat-container_for_chatbot {
    /* max-width: 500px;
     margin: 0 auto;
     padding: 20px;
     background-color: #f0f0f0;
     border-radius: 10px;
     box-shadow: 0 4 10px rgba(0, 0, 0, 0.1);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    position: relative;
    width: 100%;
    height: 500px;
}

.chat-box_for_chatbot {
    background-color: rgba(23, 87, 72, 0.59);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 60%;
    height: 80%;
    max-height: 500px;
    overflow-y: auto;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;


}


.message_chatbot {
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px;
    text-align: left;
    color: #000000;
    overflow-y: auto;
    flex-grow: 1;
    box-shadow: #0b5464 0px 1px 1px;
    font-size: 18px;
    margin-bottom: 20px;
    max-height: 100px;

}

.user-message {
    text-align: right;
    color: #12303c;
    background-color: #197387;
    padding: 10px;
    max-width: 80%;


}

.bot-message {
    text-align: left;
    color: black;
    papdding:10px;
    max-width: 80%;

}

.input-container{
    width: 80%;
    padding: 10px;
    font-size:16px;
    border: 1 px solid #ccc;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#user-input[type="text"] {
    width: /*calc(100% - 80px)*/30%;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ffffff;
    flex-grow: 1;
    border-radius: 1px solid #ccc;
    box-shadow: #0b5464 0px 1px 1px;

}

button_chatbot {
    padding: 10px 20px;
    margin-left: 5px;
    width: 20%;
    font-size: 16px;
    background-color: #12303c;
    color: #fff;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box_shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;

}
button_chatbot:hover {
    background-color: black;
}
#send-button{
    background-color: #12303c;
    color: white;
}

#send-button:hover {
    background-color: #01374c;
    color: white;
}
#clear-button{
    background-color: #12303c;
    color: white;
}
#clear-button:hover {
    background-color: #01374c;
    color: white;

}

.chat-bot-title{
    font-family: "JetBrains Mono ExtraBold", sans-serif;
    font-weight: bold;
    font-size: 50px;
    color: white;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    top: 50px;
    z-index: 1;
}


#directors_name{
    position: relative;
    left:50%;
    top:400px;
    width:600px;
    font-size: xx-large;
    z-index: 2;
}