body{
    background-color:rgba(0, 0, 0, 0.932);
    
}
body {
    color: white;
    font-size: 25px;

    
}

.left{
    width: fit-content;
    text-align: center;
    background-color: white;
    color:white;
    font-style: italic;
    
}

.right{
    
        background-color:white;
        border-radius: 120px;
        
        
    }
      
       
.right li{
       
    height: 10px; 
    list-style: none;
    float: left;
    margin-right: 0px;
    margin-left: 75px;
    font-style: italic;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 20px ;
    box-shadow: 0px 0px 8px 0px white;
    font-size: 22px;
    
    }
    .right a {
     color: white;
    text-decoration: none;
    }
    
    .right li a:hover{
        color: grey;
        font-size: 20px;

    }
.pic{
    align-items: center;
    background: url(../images/comp.jpg) no-repeat center fixed;
    width: 100%;
    height: 500px;
    padding: 10px ;
    margin: 60px auto;
    box-shadow: 0px 0px 10px 2px white;
}



.div1{
    width: 1000px;
    height: 200px;
    margin: auto;
    padding: 10px ;
    margin: 30px auto;
    box-shadow: 0px 0px 10px 2px white;
    color: white;
    font-size: 18px;
}
.div1_left{
    width: 330px;
    height: 200px;
    float: left;
    text-align: center;
    color: white;
    font-style: italic;


    
}
.div1_middle{
    width: 330px;
    height: 200px;
    float: left;
    text-align: center;
    color: white;
    font-style: italic;

}
    
.div1_right{
    width: 330px;
    height: 200px;
    float: left;
    text-align: center;
    color: white;
    font-style: italic;

   
}
.tag{
text-align: center;
    color: white;
    font-size: larger;
}

.about{
    background-color: white;
    color: black;
    text-align: center;
    font-size: 18px;
}

.textarea{
    resize: none;
}

.contact{
    background-color: white;
    color: black;
    font-size: 18px;
}

.para{
    background-color: white;
    color: black;
    width: 1090px;
    height: 950px;
    margin: auto;
}

.left_div{
    width: 500px;
    height: 400px;
    background-color: white;
    float: left;
}


.middle_div{
    width: 90px;
    height: 400px;
    background-color: white;
    float: left;
}



.right_div{
    width: 500px;
    height: 400px;
    background-color: white;
    float: left;
}


.div2{
    width: 980px;
    height: 180px;
    margin: auto;
    padding: 10px ;
    margin: 60px auto;
    box-shadow: 0px 0px 10px 2px white;
    color: white;
    font-size: 18px;
}
.div2_left{
    width: 310px;
    height: 180px;
    float: left;
    text-align: center;
    color: white;
    font-style: italic;


    
}
.div2_middle{
    width: 310px;
    height: 180px;
    float: left;
    text-align: center;
    color: white;
    font-style: italic;

}
    
.div2_right{
    width: 310px;
    height: 180px;
    float: left;
    text-align: center;
    color: white;
    font-style: italic;
}
.contactus{
    background-color: white;
    color: black;
    text-align: center;
    font-size: 18px;
    background: url(../images/comp.jpg ) no-repeat center fixed;
}

.div3{
    width: 800px;
    height: 350px;
    margin: auto;
    padding: 10px ;
    margin: 60px auto;
    box-shadow: 0px 0px 8px 2px white;
    color: black;
    background-color: white;
    
    
}
.div3_left{
    width: 400px;
    height: 300px;
    float: left;
    text-align: center;
    color: black;
   
}

.div3_right{
    width: 400px;
    height: 300px;
    float: left;
    text-align: center;
    color: black;
    

}

.icon-bar {
    width: 65px; 
    height: 65px;
    background-color:grey; 
    float: left ;
  }
  
  .icon-bar a {
    display: block; /* Make the links appear below each other instead of side-by-side */
    text-align: center; 
    padding: 16px; 
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; 
    font-size: 34px; 
  }
  
  .icon-bar a:hover {
    background-color: #000; 
  }
  
  .active {
    background-color: #4CAF50; 
  }


  form{
    background: url(../images/comp.jpg);
    width: 500px;
    border-radius: 25px;
    height: 400px;
    padding: 25px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    margin: 50px auto 50px;

}

form h1{
    color: black;
    text-align: center;
    font-size: 22px;
}

label{
    color: black;
    font-weight: bold;
    padding-bottom: 5px;
    padding-top: 15px;
    display: inline-block;
}

input,textarea{
    box-sizing: border-box;
    width: 450px;
    height: 30px;
    padding-left: 5px;
    font-family: Arial, Helvetica, sans-serif;
}

textarea{
    height: 50px;
}

#buttons-row{
    display: flex;
    justify-content: space-evenly;
}

button{
    flex-grow: 1;
    width: 125px;
    margin: 25px; 
    border:none;
    border-radius: 15px;
    height: 35px;
    font-size: 20px;
}

button#send{
    background-color: rgb(211, 59, 59);
    color: white;
}

button#reset{
    background-color: rgb(253, 253, 54);
    color: black;
}

.slider{
    
    
    background-color:grey ;
    height: 400px;
    width: 800px;
    align-items: center;
}


@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

img { max-width: 100%; height: auto; }

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}