@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap'); /*log name use    */
@import url('https://fonts.googleapis.com/css2?family=Ga+Maamli&display=swap');      /*services name    */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    /* font-family: "Kaushan Script", cursive; */
    scroll-behavior: smooth;

}
::-webkit-scrollbar{
    width: 0;
    scroll-behavior: smooth;
}
main #servicename{
    /* font-family: "Ga Maamli", serif; */
    /* font-family: "Kaushan Script", cursive; */
    font-size: 2rem;
    margin-top: 1.5rem;
}
#chatbox{
    display: none;
}
body{
    /* background-color: rgb(252, 251, 251); */
    background-color: #F1EDEE;

}
#fixed{
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1.2vw;
    z-index: 90;
}
#fixed #chat{
    width: 5vw;
    height: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.5vw;
    color: white;
    border: 4px solid white;
    z-index: 99;
    background-color:#FF8811;
    box-shadow: 0px 0px .2vw 0px black;
}
#fixed .message{
    width: max-content;
    height:4.5rem;
    display: flex;
    align-items: center;
    gap: 1vw;
    padding: 1rem 1rem;
    color:black;
    box-shadow: 0px 0px 1px 0px black;
    position: absolute;
    top: -100px;
    border-radius: .5rem;
    background-color: rgba(255, 255, 255, 0.214);
    backdrop-filter: blur(5px);
    animation: popup ease 3s infinite;
    animation-delay: 3s;
}
.undermessage{
    overflow: hidden;
    margin-top: 150%;
    margin-right: -200%;
    transition: all 5s ease;
    transform: scale(0);
}
#fixed .message p{
    width:fit-content;
    line-height: 22px;
}
#fixed .message i , #messageExit{
    font-size: x-large;
}
@keyframes popup {
    10%{
        scale: 1;
    }
    50%{
        scale: .8;
    }
    
}
                           /* chatbox design */
#fixed #chatbox{
    width: 325px;
    height: 450px;
    bottom: 0px;
    right: 0px;
    display: none;
    flex-direction: column;
    background-color:white;
    border-radius: 1.5vw;
    bottom: 0;
}

.mesLeft, .reqRight{
    width: 70%;
    font-size: 1.1rem;    
    color: black;
    word-wrap: break-word;
    border-radius: 0 .7rem .7rem;
    padding: .5rem .7rem ;
    background-color:whitesmoke;
    display: inline-block;
    box-shadow:0 0 0px .5px black;
    margin: .3rem 0;
}
.reqRight{
    border-radius: .7rem .7rem 0 .7rem ;
    float: right;
}
#fixed #chatbox #head{ 
    width: 100%;
    display: flex;
    border-radius: 1.2rem 1.2rem 0 0;
    background-color: #FF8811;
    justify-content: space-between;
    padding: .7vw;
    

}
#fixed #chatbox #profile{
    width: 4vw;
    height: 4vw;
    overflow: hidden;
    border-radius: 50%;
    background-color: white;
}
#fixed #chatbox #chatproces{
    width: 100%;
    height: 72%;
    overflow-Y: scroll;
    /* background-color:rgb(255, 255, 255); */
    background-color: white;
    border-radius: 1rem 1rem 0 0;
    padding: .7vw;
}

#fixed #chatbox  #bottom{
    height: 8%;
    border: 1px solid black;
    border-radius:.9rem;
    min-height: 42px;
    margin: 0rem .5rem;
    display:grid;
    border: solid 1px #777;
    grid-template-columns: 70% 30%;
    background-image: linear-gradient(white 50%, #FF8811 30%);
}

#fixed #chatbox #bottom input{
    font-size: 1.2rem;
    padding-left: .5rem;
    outline: none;
    border: none;
    border-right:none ;
    background-color: white;
    border: solid 1px white;

    border-radius: .8rem  0 .8rem  .8rem;

}
#fixed #chatbox #bottom button{
    background-color: #FF8811;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border-radius:.8rem;
    border: none;
    
}
#fixed #chatbox #bottom button:active{
    font-size: 1rem;
}
#fixed #chatbox #bottom button i:active{
    font-size: 1rem;
}
#fixed #chatbox  #bottom i{
    font-size:1.2rem;
    margin-left: .2rem;
    transform: rotate(-40deg);

}
header{
    width: 100%;
    min-height:5vw;
    display: flex;
    justify-content:space-between;
    align-items:center;
    padding:0 6vw;
    /* background-color: #EEF4D4; */
    background-color: white;
    /* backdrop-filter: blur(5px); */
    /* background: linear-gradient(111.5deg, rgb(228, 247, 255) 21.9%, rgb(255, 216, 194) 92.2%); */
    top:0px;
    position: fixed;
    box-shadow: 0px 0px 4px 0px ;
    z-index: 90;
}
header nav #aboutser, #careerdown, #contdown{
    display: none;

}
header #serach{
    width: 17rem;
    height: 2.2rem;
    padding: 0px .5vw ;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

header #serach input{
    font-size: 1.1rem;
    position: relative;
    outline: 0;
    background-color: transparent;
    border: none;

}

header #serach #searchbtn{
    width: 40px;
    height: 40px;
    padding:.5vw .6vw ;
    right: -1px;
    display: flex;
    /* text-align: center; */
    justify-content: center;
    align-items: center;
    /* background-color: black; */
    color: black;
    position: absolute;
    border: none;
    z-index: 100;
    outline: none;
    border-top-right-radius: .5vw;
    border-bottom-right-radius: .5vw;
    font-size: x-large;
    background-color: #F1EDEE;
    top: -3px;
       
}

header nav ul{
    width: max-content;
    height: 100%;
    display: flex;
    /* gap: 2rem; */
    list-style: none;
    margin-top: -10px;

}
header .logo img{
    width: 10vw;
    margin-top: .4rem;
}
header nav li a{
    width: 100%;
    padding: 2vw 2.2vw;
    list-style: none;
    font-size:1.3rem;
    color: black;
    /* background-color: #FF8811; */
    text-decoration: none;
    text-transform: capitalize;
    /* padding-bottom: 1.4rem; */

}
header nav a #service{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
header nav #service i{
    transform: rotate(90deg);
}
header nav li:hover a{
    text-decoration: underline #FF8811;
}
header nav #service:hover #aboutser{
    width: 86%;
    z-index: -1;
    /* max-height: 300px; */
    position: absolute;
    left: 0px;
    margin: 1.7vw 6vw;
    right: -6vw;
    background-color:white;
    /* border-end-end-radius: 1vw; */
    /* border-end-start-radius: 1vw; */
    display: flex;
    flex-wrap: wrap;
    gap: .05vw;
}
header nav  #aboutser .ser a{
    width: 28.5vw;    
    height:9rem;
    display: flex;
    overflow: hidden;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    border:0.1vw solid black
}
header nav  #aboutser .ser .icon{
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
header nav  #aboutser .ser .description{
    width: 70%;
    display: flex;
    flex-direction: column;
    color: black;
    gap: .5vw;
}
header nav  #aboutser .ser .description p{
    font-weight: 400;
    font-size: smaller;
}
header nav  #aboutser .ser .icon img{
    width: 4vw;
    align-self: center;
    object-fit: cover;
    /* background-color: lightblue; */
}
header nav  #aboutser .ser:hover.ser{
    background-color: #FF8811;
}

header nav #career a{
    position: relative;
}
header nav #career:hover #careerdown{
    width: fit-content;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin: 50% auto;
    margin-top: 1.6%;
    overflow: hidden;
    background-color: white;
    border-radius:0 0 .5rem .5rem ;
}
header nav #career #careerdown a{
    text-decoration: none;
    padding: 1rem 3rem;
    font-size: 1rem;

}
header nav #careerdown a:hover, #contdown a:hover{
    background-color: #FF8811;
}
header nav #career i, .contact i{
    transform: rotate(90deg);
}
header nav .contact:hover #contdown{
    width: fit-content;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin: 50% auto;
    margin-top: 1.6%;
    overflow: hidden;
    background-color: white;
    border-radius:0 0 .5rem .5rem ;
}
header nav #contdown a{
    display: flex;
    gap: .5rem;
    text-decoration: none;
    align-items: center;
    padding: 1rem 2rem;
    font-size: 1rem;


}
header nav #contdown a img{
    height: 1.5rem;
}
header #menu{
    display: none;
    position: relative;
    text-transform: capitalize;
    padding: 0rem .3rem;
    background-color: white;
    font-size: 1.5rem;
    
}
header #menu i{
    margin-top: 5px;
}
header #menu #cros{
    display: none;
    margin-left: 18px;
}
#sec-1{
    width: 100%;
    min-height: 250px;
    max-height: 80vh;
    background-position: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* color: #FF8811; */
    color: #FF8811;
    justify-content: center;
}

#sec-1 #content{
    width: 100%;
    height: calc(450px);
    position: relative;
    overflow: hidden;
    
}
#sec-1 #content img{
    width: 100%;
    height: 190%;
    object-fit: cover;
    position: relative;
    filter: brightness(75%);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#sec-1 #content #data1{
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: fit-content;
    position: absolute;
    padding:0 6vw;
    z-index: 80;
    color: black;
    margin-top: 8rem;
    

}
#data1 a{
    width: max-content;
}
#sec-1 #content #data1 h1{
    font-size:3vw;
    /* color: white; */

}
#sec-1 #content #data1 h1 span{
    color: #FF8811;
    font-size: 3vw;
}
#sec-1 #content #data1 p{
    line-height: 28px;
    font-size: larger;
    font-weight: 300;
    /* color: rgb(31, 31, 31); */
    color: white;
}
#sec-1 .content{
    /* margin-top: 15vw; */
    align-self: center;
    text-align: center;
}
#sec-1 .content #most{
    margin: 1rem 0 2.5rem;
}
#sec-1 .content p{
    margin: 1.5rem 0rem ;
    /* color:rgb(156, 156, 156); */
    color: white;
    text-transform: capitalize;
    line-height: 28px;
}
#sec-1 .content h1 span{
    width: 200px;
    height: 90px;
    margin: 5vw 1rem 0rem;
    /* max-width: 40vw; */
    /* background-color: white; */
    border: 1.5rem solid white;
    border-radius: 2rem;
}
#sec-1 .content h1{
    font-size: 12vw;
    display: flex;
    justify-content: center;
    align-self:center ;
    margin-top: -2.2rem;
}
#sec-1 .content h2{
    font-size: 3.5vw;
}
#sec-1 .content h2 span{
    color: white;
}
#sec-1 a{
    padding:.7vw 1.5vw;
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    color: white;
    border: none;
    border-radius: 2rem ;
    /* background-color: white; */
    border: 1px solid white;
    /* margin-top: 1rem; */
}
#sec-1 a:hover{
    background-color: white;
    color: black;

}

                        /* main  */
main{
    width: 100%;
    padding:0rem 6vw;

}
#sec-1 #fixed{
    position: fixed;
    right: 1vw;
    bottom: 1vw;
}
#sec-1 #fixed img{
    width: 7vw;
}

                                /* work card */
main #work{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 15px;
    justify-content: space-evenly;
    grid-column: 1rem;
    padding: 1rem 0;
    margin: 1rem 0;
}
@keyframes height {
    from{
        opacity: 0;
        scale: 0;
    }
    to{
        opacity: 1;
        scale: 1;
    }
    
}
main #work  .wcard #back{
    width: 100%;
    height: 9rem;
    border-radius: .2vw;
    font-size: 2vw;
    color: white;
    position: relative;
    border-top-left-radius: 1.3rem ;
    border-top-right-radius: 1.3rem;
    background-color: transparent;
    overflow: hidden;
}
main #work  .wcard #back::after{
    position: absolute;
    content: '';
    width: 80%;
    height: 100%;
    left: 0;
    top: 0;
    border-top-left-radius: 1.3rem ;
    border-top-right-radius: 1.3rem;
    background-color: #081F36;
    transform: skew(-50deg);


}
main #work  .wcard #back::before{
    position: absolute;
    content: '';
    width: 45%;
    height: 100%;
    left: 0;
    top: 0;
    border-top-left-radius: 1.3rem ;
    border-top-right-radius: 1.3rem;
    background-color: #081F36;
}
main #work  .wcard .data{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 1vw;
    background-color: white;
    padding: .5rem  0 1rem;
    border-bottom-left-radius: 1.3rem;
    border-bottom-right-radius: 1.3rem;
}
main #work  .wcard .data ul li{
    width: 90%;
    list-style: none;
    margin:1rem 1.5rem;
    display: flex;
    align-items: flex-start;
    


    /* font-size: 1.3vw; */

}
main #work  .wcard .data ul li span{
    width: 88%;
    display: inline-block;
    text-align: left;
    /* background-color: #FF8811; */
    margin-left: .5rem;
    line-height: 22px;
}
main #work  .wcard .data h1 span,sup{
    font-size:large;
    color: black;
}
main #work  .wcard p{
    z-index: 20;
    color: white;
    top: 1rem;
    left: 2rem;
    text-transform: capitalize;
    position: absolute;

}
main #work  .wcard #price{
    font-size: 2.7rem;
    position: absolute;
    right: 0px;
    bottom: .2rem;
    z-index: 30;
    color: white;
}
main #work  .workcard1{
    background-image: linear-gradient( #FDC484, #FD5802 );
}
main #work  .workcard2{
    background-image: linear-gradient(#61B3FF, #0723DE);
}
main #work  .workcard3{
    background-image: linear-gradient(#FC6739, #FDC484);
}

main #work  .wcard{
    width: 23rem;
    min-height: 23vw;
    background-color: white;
    box-shadow: 0px 0px 1px 0px;
    display: flex;
    padding: .3rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 1.5rem;
    /* animation: height linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 30%; */
}   
main #work  .wcard:hover{
    box-shadow: 0px 0px 5px 0px ;
}

                                                    /* Faq */
main .faq{
    width: 100%;
    min-height: 125px;
    height: fit-content;
    padding: .5rem 0;
    display: flex;
    gap: .7rem;
    flex-direction: column;
}
main .faq .accordian{
    width: 100%;
    display: flex;
    gap: .7rem;
    flex-direction: column;
    border-radius: 1rem;
    padding: 1rem 2rem;
    box-shadow: 0px 0px 0px .2px;
    background-color: white;
}
main .faq .accordian .question{
    display: flex;
    justify-content: space-between;
    align-items: center;


}
main .faq .accordian .question .minimaiz{
    font-size: 1.8rem;
    color: black;
    padding: .1rem .7rem;
    transform: rotate(90deg);
    border-radius: .5rem;
}
main .faq .accordian .question .minimaiz.active{
    transform: rotate(270deg);
}
main .faq .accordian .answer{
    display: flex;
    flex-direction: column;
    gap: .7rem;
    max-height: 0;
    overflow: hidden;
}
main .faq .accordian .answer.active{
    max-height: fit-content;
}
main .faq .accordian .answer ol{
    margin-left: 2rem;
    line-height: 1.7rem;
}

                                           
@media screen and (min-width:0px) and (max-width:480px) {
    header{
        padding: .3rem 4vw;
    }
    #fixed{
        gap: .6rem;
    }
    #fixed #chat{
        width: 15vw;
        height: 15vw;
        font-size: 1.7rem;
        bottom: 3vw;
        margin-right: .5rem;
        margin-bottom: 1rem;

    }
    .undermessage{
        margin-top: 150%;
        margin-right:-170%;
    }
                         /* chatbox design */
     #fixed #chatbox{
        width: 320px;
        border-radius: 1.2rem;
    }
    #fixed #chatbox #head{ 
        padding: .6rem;
    }
    #fixed #chatbox #profile{
        width: 14vw;
        height: 14vw;
        overflow: hidden;
        border-radius: 50%;
    }
    #fixed #chatbox #chatproces {
        padding: .6rem .5rem ;
    }
    #sec-1{
        width: 100%;
        height:fit-content;
    }
    main{
        width: 100%;
        padding: 0rem 4vw;
        height:fit-content;
    }
    #sec-1 #content{
        max-height: 260px;
    }
    #sec-1 #content img{
        width: 110%;
        height:130%;
        margin-top: 3rem;
        position: relative;
        object-fit: cover;
        filter: brightness(80%);
    }
    #sec-1 #content #data1{
        width: 78%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: fit-content;
        position: absolute;
        padding:5vw;
        z-index: 80;
        color: black;
        margin-top: 15vw;    
    }
    #sec-1 #content #data1 h1{
        font-size: 5.3vw;
    }
    #sec-1 #content #data1 h1 span{
        font-size: 5.3vw;
    }
    #sec-1 #content #data1 p{
        line-height: 19px;
        font-size:4vw;
        font-weight: 300;
        /* color: rgb(31, 31, 31); */
        color: white;
    }
    #sec-1 #content a{
        padding:1.8vw 4vw;
        font-size: 4.5vw;
        cursor: pointer;
        text-decoration: none;
        color: white;
        border: none;
        /* border-radius: 2rem ; */
        /* background-color: white; */
        border: 1px solid white;
        /* margin-top: 1rem; */
    }
    #fixed #chatbox #chatproces {
        border-top-left-radius: 5vw;
        border-top-right-radius: 5vw;
    }
    #sec-1 #fixed img{
        width: 13vw;
        height: 13vw;
        margin-right: 1vw;
        z-index: 98;
    }
    #fixed #chatbox #chatproces #inp {
        width: 100%;
        height: 11vw;
    }
    header #menu{
        display: block;
        position: relative;
    }
    header #menu i{
        font-size: 2rem;
    }
    header nav #navbar{
        width: 100%;
        height: 0px;
        position: absolute;
        top:105%;
        left: 0;
        right: 0;
        overflow: hidden;
        flex-direction: column;
        background-color: white;
        /* border-top: 1px solid black; */
        background-color: white ;
        backdrop-filter: blur(15px);
        transition: height 1s linear;
    }
    header #navbar li{
        width: fit-content;
        padding: 20px;
    }
    
    
    header nav ul li a{
        /* width: 100%; */
        padding: 20px;
    
    }
    header nav #service, #career, .contact{
        position: relative;
    }
    
    header nav #service:hover #aboutser {
        width: 200%;
        height: fit-content;
        flex-direction: column;
        top: -105%;
        left: 75%;
        position: absolute;
    }
    
    header nav ul li #aboutser .ser {
        width: 100%;
    }
    header nav #service:hover .ser {
        background-color: transparent;
    }
    header nav #service:hover i, #career:hover i,.contact:hover i{
        transform: rotate(0deg);
    }
    header nav ul li #aboutser .ser .icon, header nav ul li #aboutser .ser p{
        display: none;

    }
    header nav #aboutser .ser a{
        width: 100%;
        height: auto;
        border: none;
        text-align: left;
        font-size: large;
    }
    header nav #career:hover #careerdown{
        position: absolute;
        width: 200%;
        height: fit-content;
        flex-direction: column;
        top: -0%;
        left: 90%;
    }
    header nav .contact:hover #contdown{
        position: absolute;
        width: 200%;
        height: fit-content;
        flex-direction: column;
        top: -0%;
        left: 90%;
    }
    header .logo img{
        width: 18vw;
        margin-top: .4rem;
        
    }
    header #serach{
        width: 12rem;
        padding: 1.5vw;
        overflow: hidden;
    }

    header #serach input{
        width:89%;
        font-size: 1rem;

    }
    header #serach #searchbtn i{
        padding: 20% 0;
    }
    /* work */
    main #work {
        height: fit-content;
        row-gap: 1rem;
    }
   
    main #work .workcard2, main #work .workcard3{
        animation: height  linear;
        animation-timeline: view() ;
        animation-range: entry 0%  cover 30%;
    }
    main #work .wcard #back {
        font-size: x-large;
        padding: .2rem 2rem;
    }
    main #work .wcard .data h1 {
        font-size: 9vw;
    }

    main .faq #faq{
        height: fit-content;
        padding: .4rem .8rem ;
    }
   
                                            

}
                                                    /* tablet screen */
@media screen and (min-width:481px) and (max-width:767px) {
    header, main{
        padding: .2rem 4vw;
    }
    /* sec-1 */
    #sec-1{
        height: fit-content;
        /* margin-top: 2rem; */
    }
    /* chat */
    #fixed #chat {
        width: 9vw;
        height: 9vw;
        font-size: x-large;
    }
    #fixed #chatbox{
        height: 62vw;
    }
    #fixed #chatbox #profile{
        width: 8vw;
        height: 8vw;
    }
    #fixed #chatbox #chatproces #bottom form {
        height: fit-content;
        bottom: 15vw;        

    }
    #fixed #chatbox #chatproces #bottom button {
        width: 35px;
        height: 35px;
        margin: .1rem;
    }
    #sec-1 #fixed img{
        /* width: 8vw; */
        margin-right: 1vw;
    }
    header #menu{
        display: block;
    }
    
    header {
        padding: .5rem 4vw;
        justify-content: space-between;
    }
   
    header nav #navbar{
        width: 100%;
        height: 0px;
        position: absolute;
        top:110%;
        left: 0;
        right: 0;
        overflow: hidden;
        flex-direction: column;
        background-color: white;
        /* border-top: 1px solid black; */
        background-color: white ;
        backdrop-filter: blur(15px);
        transition: height 1s linear;
    }
    header #navbar li {
        width: fit-content;
        padding: 20px;

    }
    header nav ul li a{
        /* width: 100%; */
        padding: 20px;
    
    }
    header nav #service{
        position: relative;
    }
    header nav #service:hover #aboutser {
        width: 200%;
        height: fit-content;
        flex-direction: column;
        top: -200%;
        left: 95%;
        position: absolute;
    }
    header nav ul li #aboutser .ser {
        width: 100%;
    }
    header nav #service:hover .ser {
        background-color: transparent;
    }
    header nav #service:hover i{
        transform: rotate(0deg);
    }
    header nav ul li #aboutser .ser .icon, header nav ul li #aboutser .ser p{
        display: none;

    }
    header nav #aboutser .ser a{
        width: 100%;
        height: auto;
        border: none;
        text-align: left;
        font-size: large;
    }
    #sec-1 #content #data1 h1 ,#sec-1 #content #data1 h1 span{
        font-size:5vw;
    }
    #sec-1 #content #data1{
        width: 85%;
        margin-top: 10vw;

    }
    #sec-1 #content #data1 p{
        font-size: 3vw;
    }
    #sec-1 #content #data1 a{
        padding: 1.3vw 3vw;
        font-size: 1.2rem;
    }
                                                /* cards */
    main #work .wcard {
        height:max-content;
    }
    main #work .wcard #back {
        font-size: 3.3vw;
    }
    main #work .wcard .data ul li {
        padding: .5rem;
    }

    main #work .wcard .data h1 {
        font-size: 8vw;
    }
    
                                  
}

@media screen and (min-width:768px) and (max-width:991px) {
    header, main{
        padding: .3rem 4vw;
    }
    header nav  #aboutser .sercard6 .description{
        margin-top: 3rem;
    }
    #sec-1 {
        width: 100%;
        height: fit-content;
    }
    #sec-1 #content{
        height: calc(350px);

    }
    .undermessage{
        margin-top: 200%;
        margin-right: -260%;
    }
  
                                /* card */
    #card{
        width: 100%;
        height: fit-content;
    }
                                    
}