*{
box-sizing:border-box;
margin:0px;
font-family:'Poppins',sans-serif;

}

/* For mobile phones */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;

    }
    .header {
        flex-direction: column;
    }
    nav ul {
        flex-direction: column;
    }
    nav ul li {
        margin-bottom: 10px;
    }
}

/* For tablets */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* For desktops */
@media only screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}


/* For mobile phones */
@media  (max-width: 600px) {
    body {
        font-size: 14px;
    }
    .header {
        flex-direction: column;
    }
    nav ul {
        flex-direction: column;
    }
    nav ul li {
        margin-bottom: 10px;
    }
}

/* For tablets */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* For desktops */
@media only screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}


body{
background-color:#d2c0bd;

}

nav {
    
    background-color: #242526;
    width: 100%;
    height: 60px; /* Adjust the height as needed */
    position: sticky; /* Makes the navbar sticky */
    top: 0; /* Sticks the navbar to the top */
    z-index: 1000; /* Ensures the navbar stays above other content */
    

}

@media (max-width:600px){ /*for udjusting the screen of the nav bar  */
nav ul li a{
height:auto;
display: flex;
position:relative;

}
}

@media (max-width:600px){  /*for udjusting the screen  of the nav */
nav {
height:auto;
display: flex;
position:relative;

}
}

nav ul {
list-style:none;
margin: 0;
padding:0;
}

nav ul li{
display:inline-block;
position:relative;

}
nav ul li a {
text-decoration:none;
display:block;
padding:10px 20px;
color:#fff;
font-weight:600;
}

nav ul li a:hover{
background-color:#343536;
color:orangered;
width:fit-content;
height: auto;
border-radius:5px;
}
nav ul li ul {
display:none;
position:absolute;
background-color:#242526;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0,1);
border:1px content '\F1736';
border-radius:5px;



}
nav ul li:hover ul {
display:block;
transition: all 0,6 ease;
z-index: 1000;
}

@media (max-width:950px){
nav ul li:hover ul{
left:20px;
}
}

nav ul li ul li {
display:block;
white-space:nowrap;
width:auto;
}

nav ul li ul li a{
display:block;
padding:10px 20px;
text-decoration: none;
color:#fff;
transition: background-color 0,3s;
font-weight:600;
}


nav ul li ul li a:hover{
background-color:#343536 ;
color:rgba(255, 29, 0);
width:auto;

/* paragraph styling*/
}

  p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em; /* This is equivalent to 14px if the base font size is 16px */
}

 
.header {
    display: flex;
    align-items:center; 
    justify-content: center;
    background-image: linear-gradient(to bottom, #18A3B7, #1E536E, #18A3B7);
    height: 40vh;
    max-width: 89%;
    padding: 0px 30px;
    margin: auto;
    color: #fff; /* Ensures text is readable */
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;

}

@media (max-height:500px){
.header{
height: auto;
}
}

  #sas{
  color:rgb(236, 90, 90);
  }

  #tech{
  color:blue;
  }

  .holding{
  padding:px;
  }


.main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Adjust the gap between the divs as needed */
    max-width: 10vw!important;
    padding: 2,5% 5%!important;
    flex-direction: colunm;
    max-width:90%;
    position:static;
    
}
@media(max-width:960px) {
.main{
grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}
}



  


.AMT, .DSIWR, .SP, .CCTV, .ET, .GN, .FA, .SP, .EES{
    background-color: #f2dedc;
    border: 1px solid #DF968C;
    border-radius: 10px;
    padding: 20px;
    margin-left:20%; /* margin from the left */
    display: flex;
    flex-direction: column;
    font-size: 1em;
    justify-content: space-between;
    width:28vw; /*width of the div in viewport  which is cannot change with brownser*/
    height:auto;
    
}
@media(max-width:600px){
.AMT, .DSIWR, .SP, .CCTV, .ET, .GN, .FA, .SP, .EES{
  background-color: #f2dedc;
    border: 1px solid #DF968C;
    border-radius: 10px;
    padding: 20px;
    margin-left:30px ; /* margin from the left */
  
    width:auto; /* changes the size of the container automatically */

    height:auto;
}
}

.AMT img, .DSIWR img, .SP img, .CCTV img, .ET img, .GN img, .FA img, .SP img, .EES img {
    width: 100%;
    height: 15vh;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

@media(max-width:600px){

}
.DSIWR{
  background-color:#f2dedc;
   border: 1px solid #DF968C;
  border-radius:10px;
  }


.EES{
background-image: url()
}










footer  {
    background-color: #242526;
    width: 100%;
    padding: 20px 0;
    color: #fff;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     height: auto;
}
footer .container {
display:flex;
justify-content: space-evenly;

}
footer .container li{
list-style: none;
font-size:0.7em;
padding:12px 20px;
margin:0;
}
footer .container li  h4{
font-weight:600;
}

footer p {
    margin: 0;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.875em; /* Standard smaller size */
    transition: color 0.3s;
}

footer p a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

footer p a:hover {
    color: orangered;
}


button{
background-color: rgb(32, 32, 204);
color:#fff;
border-radius:6px ;
font-weight:bold;
}

button:hover{
background-color:#522B5B ;
transition: all 0,5s ease;
}

 footer #foot{
position:sticky;
}
  /* ABOUT US  style */

  
 .about-us{
 position: fixed;
  background-color:#242526;
 top:40px;
 max-width:90;
 height: 100vh;
 left:20px;
 cursor :auto;
 overflow-y: auto;
 word-wrap:break-word;
 text-overflow: ellipsis;
 z-index: 1000;
 }
.about-us .content {
    
    color:#fff;
    padding: 7px ;
    margin: auto;
   font-size: 0,2em;
    padding-bottom:40px;
   
}
.about-us .content:focus{
outline:none;
}

 @media (max-width:600px) {
  .about-us{
 display: flex;
 width:90%;
 left:5%;
 }
    
 }



.about-us .content ol li{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
}
.about-us .content h3{
color:#c1b2b2;
font-size:15px;
}





/* main container stylingv*/
.main-container {
 
    align-items:center; 
    justify-content: center;
    background-color:#242526;
    height: auto;
    max-width: 70%;
    padding: 0px 30px;
    margin: auto;
    color: #fff; /* Ensures text is readable */



}
.main-container img{ /* customising the images on the page */
width:50%;
height:auto;
}

#logo{
width:200px;
height:auto;
align-items: center;

}

@media  (max-width: 600px){
#logo{
align-items: center;


}
}


@media  (max-width: 600px){
 #typing-effect {

display:none;

}
}