*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-image: linear-gradient(to right, rgb(255, 231, 97), rgb(191, 250, 96), rgb(168, 242, 245)); */
    
}
.bosscontainer{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* background-image: linear-gradient(to right, rgb(255, 231, 97), rgb(191, 250, 96), rgb(168, 242, 245)); */
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    display: grid;
    align-content: start;
    background-image: linear-gradient(to right, rgb(49, 45, 23), rgb(49, 56, 37), rgb(2, 30, 31));
}
.box{
    border: 2px solid black;
    border-radius: 28px;
    /* border-radius: 15px; */
    /* top-left-and-bottom-right | top-right-and-bottom-left */
    /* border-radius: 15px 5%; */
    /* border-top-right-radius: 40px; */
    /* border-bottom-left-radius: 40px; */
    width: 600px;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px;
    /* display: block; */
    
}
.img2{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid black;
}
ul{
    display: flex;
    flex-direction: row;
    gap: 10px;
    list-style-type: none;
}
.Name{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 600px;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 28px;
}
section{
    display :flex ;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.anchor{
    text-decoration: none;
    color: rgb(121, 118, 118)

}
.anchor:hover{
    color: blue;
}
#Contact{
    width: 5.8rem;
    height: 1.6rem;
    background: rgb(99, 99, 238);
    transition: all 0.26s linear 0s;
}
#Contact:hover {
    transform:perspective(100px) translateZ(10px);
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    box-shadow: 6px 6px 10px black;
} 
/* .bigimgani{
    width: 700px;
    height: 400px;
    background: 1px solid black;
}                 */
.bigimg1{
    width: 450px;
    height: 300px;
    /* margin-top: 50px; */
    /* padding-right: 10px; */
    border-radius: 20px;
    /* border: 1px solid black; */
    transition: all 0.26s linear 0s;
    box-sizing: border-box;
    position: relative;

}
.bigimg1:hover {
    transform:scale(1.1)
    /* background-color: rgb(0, 0, 0); */
    /* color: rgb(255, 255, 255); */
    /* box-shadow: 6px 6px 10px black; */
}                 
.bossbox{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.bigimg{
    display: flex;
    gap: 0;
}
@media (max-width:1229px) {
    .bigimg{ 
        flex-direction: column;
    }
}
.card1{
    width: 240px;
    height: 340px;
    border: 1px solid black;
    background-color: white;
    border-radius: 10px;
    box-sizing: border-box;
    gap: 30px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.cards{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    /* display: grid; */
    /* grid-column: 1fr, 1fr, 1fr; */
    gap: 90px;
    padding: 40px;
    flex-wrap: wrap;
    justify-content: center;
    text-decoration: none;
   background-image: linear-gradient(to right, rgb(49, 45, 23), rgb(49, 56, 37), rgb(2, 30, 31));
}
.cardimg{
    width: 150px;
    height: 140px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    display: flex;
    margin-left: 30px;
}
#cardimg{
    width: 220px;
    height: 140px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    margin-left: 10px;
}
.content1{
    padding-left: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    /* padding-right: 10px; */
    /* color: rgb(216, 215, 215); */
     animation: slideFromLeft 1s ease forwards;
    opacity: 0;
    width: 780px ;
    height: 429px;
}
@media (max-width:1229px) {
    .content1{ 
        /* height: 100%; */
        width: auto;
        height: auto;
    }
}
@keyframes slideFromLeft {

    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
    
}
#awatch{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* font-weight: bold; */
    font-size: 30px;
    color: rgb(216, 215, 215);
    display: flex;
    width: auto;
}
@media (max-width:621px) {
    #awatch{
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* font-weight: bold; */
    font-size: 30px;
    color: rgb(216, 215, 215);
    display: flex;
    flex-direction: column;
    width: fit-content;
    }
}
.h1div{
    font-family: monospace;
    border-right: 2px solid black;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 4s infinite ,
    cursor .4s step-end infinite alternate;
    animation-direction: alternate;
    /* animation-delay: 0.3s; */
}
@keyframes cursor{
    50%{
background-color: transparent;

    }
}
@keyframes typing{
    from{
        width: 0;
    }
}
#h1whatis{
    color: black;
    font-weight: bold;
    font-size: 45.452px;
}

#footer1{
    color: white;
    font-size: 32.452px;
    animation: slidefromLeft 1s ease forwards;
    opacity: 0;
}
@keyframes slidefromLeft {

    0% {
        opacity: 0;
        transform: translateX(-200%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.footer1{
    display: flex;
    align-items: end;
    justify-content: start;
}
.aofbigimg{
    width: 500px;
    height: 300px;
}
.bigimgani{
    width: 450px;
    height: 300px;
    margin-top: 50px;
    /* padding-right: 10px; */
    border-radius: 20px;
    /* position: absolute; */
    overflow: hidden;
    object-fit: cover;
    /* object-position: center; */
}
.namewatch{
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
    color: #000;
    display: flex;
    justify-content: center;
}
.priceofwatch{
    font-size: 20px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    color: #000;
}
.nameofwatch{
    display: flex;
    gap: 16px;
    flex-direction: column;
}
#parawatch{
    font-size: 20px;
    font-weight: 30px;
    text-decoration: none;
    color: #000;
}
.parawatch{
    display:flex;
    margin-left: 17px;
}
#anchorofcard1{
    text-decoration: none;
}