*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.container{
    width: 100%;
    height: auto;
    border: 1px solid;
    margin: auto;
    border: none;
}


.coll-1{
    background-color: aliceblue;
    width: 100%;
    height: 100px;
    border: 1px solid;
    border: none;
    box-shadow: 0px 0px 10px 0px;
}

.coll-2{
    width: 30%;
    height: 100px;
    border: 1px solid;
    float: left;
    border: none;
}

.coll-2-1{
    width: 100%;
    height: 100px;
    border: 1px solid;
    float: left;
    text-decoration: none;
    border: none;
    color: rgb(0, 6, 11);
}

.coll-2-2{
    width: 50%;
    height: 100px;
    border: 1px solid;
    float: left;
    border: none;
}

.coll-2-3{
    width: 81%;
    height: 100px;
    padding: 10px;
}

.coll-2-4{
    width: 100%;
    height: auto;
    font-weight: 1000;
    font-size: 24px;
    color: green;
    font-style: italic;
    line-height: 30px;
    align-content: center;
    margin-top: 5px;
}




.coll-3{
    width: 70%;
    height: 100px;
    border: 1px solid;
    float: left;
     border: none;
     align-content: center;
     padding: 10px;
}

.coll-3-0{
    width: 80%;
    height: 40px;
    border: 1px solid;
    align-content: center;
    float: left;
    margin-bottom: 10px;
    border: none;
}

.coll-3-1{
    background: linear-gradient(to right, #438dcc, #337fbb);
    width: 20%;
    height: 40px;
    border: 1px solid;
    align-content: center;
    float: left;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700;
    display: block;
    color: white;
    text-decoration: none;
}

.alint{
    text-decoration: none;
    color: white;
}
.coll-3-2{
    background: linear-gradient(to right, #438dcc, #337fbb);
    width: 100%;
    height: 30px;
    display: flex;     
}

.coll-3-3{
    flex: 1;                  
    display: flex;
    justify-content: center;   
    align-items: center;       
    text-decoration: none;
    color: white;
    font-size: 15px;
}

.coll-3-3:hover{
    background-color: rgb(203, 202, 132);
    color: black;
}

.coll-3-1:hover a{
    color: black;
    background-color: rgb(203, 202, 132);
    padding: 9px 27px;
}


/*Slider*/

.slider{
    background-color: #cbcbc8;
    width: 100%;
    height: 400px;
    border: 1px solid;
    border: none;
}

.left-slider{
    width: 30%;
    height: 100%;
    border: 1px solid;
    float: left;
    border: none;
}

.up-slider{
    width: 100%;
    height: 50%;
    border: 1px solid;
    border: none;
}
.down-slider{
    width: 100%;
    height: 50%;
    border: 1px solid;
    border: none;
}
.imgalint{
    width: 100%;
    height: 100%;
    padding: 6px;
    display: block;
}

.slider-container {
    width: 70%;
    overflow: hidden; /* Hides images outside the box */
    position: relative;
}

.right-slider{
    width: 100%;
    height: 100%;
    border: 1px solid;
    float: left;
    border: none;
    display: flex;
    transition: transform 0.5s ease-in-out;
}


.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #fff;
  font-size: 20px;
  font-family: monospace;
  color: #310404;
    font-weight: 500;
    animation: 
    typing 8s steps(40) infinite alternate,
    blink 0.8s infinite;
}

/* Typing */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Cursor blink */
@keyframes blink {
  50% { border-color: transparent }
}





.row {
  display: flex;
  width: 99%;
  height: auto;
  gap: 10px;
  margin-top: 10px;
  padding: 5px;
  margin: auto;
  margin-top: 20px;
}

legend{
background: linear-gradient(to right, #438dcc, #337fbb);
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  padding:6px 30px;
  color: #010005;
  margin-top: 5px;
  border: 1px solid;
  align-content: center;
  font-style: italic;
  border-color: #eeeeee;
  color: white;
}

.row-3{
  display: flex;
  width: 99%;
  height: auto;
  margin-top: 10px;
  padding: 10px;
  margin: auto;
  margin-top: 20px;
}

.pro-box{
    background: linear-gradient(to right,  #f2f5f7, #c7dcef);
    width: 20%;
    height: 450px;
    float: left;
    align-content: center;
    border: 1px solid;
    border: none;
}
.pro-box-1{
    background: linear-gradient(to right, #c7dcef, #f2f5f7);
    width: 80%;
    height: auto;
    justify-content: center;
    text-align: justify;
    padding-left: 30px;
    padding-right: 60px;
    font-size: 18px;
    line-height: 30px;
    float: left;
    border: 1px solid;
    border: none;
}

.row-card{
    width: 100%;
    border: 1px solid;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;     
    gap: 10px;                 
    padding: 10px;
    border: none;
}

.card{
    background: #337fbb;
    width: 19%;
    height: 40px;
    border: 1px solid;
    border-radius: 10px;
    border: none;
    text-align: center;
    align-content: center;
    color: white;
    font-weight: 700;
}



.card a{
    text-decoration: none;
    color: white;
    display: block;
    text-align: center;
    line-height: 40px;
}

.card:hover{
    background: #f5c542;
    transition: 0.3s;
}

.card:hover a{
    color: black;
}


h3{
    color: green;
    font-size: 25px;
    font-style: italic;
    text-decoration: underline;
}

.coll-img{
    width: 90%;
    height: 160px;
    border: none;
    padding-left: 15px;
}
.row-work{
  display: flex;
  width: 100%;
  height: auto;
  gap: 5px;
  padding: 5px;
  margin-top: 20px;
}

.worker-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;     
    gap: 10px;                 
    padding: 10px;
    border: none;
}

.worker{
    background: #337fbb;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    overflow: hidden;
}

.worker img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: 0.3s;
}

.worker:hover{
    background: #f5c542;
}

.worker img:hover{
    transform: scale(1.05);
}

/* 🔥 Modal */
.modal{
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    text-align: center;
}

.modal-content{
    margin-top: 5%;
    max-width: 100%;
    max-height: 80%;
    border-radius: 10px;
}

.close{
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}















.address {
    background-color: #283343;
    width: 100%;
    height: auto;
    color: white;
    padding: 10px;
    box-sizing: border-box; /* Crucial: includes padding/border in the width */
    display: flex;          /* Activates Flexbox */
    justify-content: space-between; /* Puts equal space between boxes */
    gap: 10px;              /* Defines the exact gap between boxes */
}

/* You can target all three at once since they share the same style */
.left-add, .mid-add, .right-add {
    flex: 1;                /* Makes all three take up equal width */
    height: 100%;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 50px;
    border: none;
    font-size: 13px;
}

.add-head{
    width: 100%;
    height: 35px;
    border: 1px solid white;
    align-content: center;
    font-weight: 700;
    border: none;
}

.add-text{
    width: 100%;
    height: 20px;
    border: 1px solid white;
    align-content: center;
    margin-top: 5px;
    border: none;
}

.addalint{
    text-decoration: none;
    border: none;
    color: white;
}

.addalint:hover{
    text-decoration: underline;
}



.link{
    line-height: 20px;
    text-decoration: none;
    text-align: left;
    margin-left: 10px;
    color: rgb(247, 244, 244);
}

.link:hover{
        color: rgb(255, 239, 9);
}