@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

a {
    text-decoration: none !important;
}

:root {
    --blue: rgb(255, 204, 0);
    --darkblue: rgb(1, 1, 44);
    --shadow: rgb(226, 226, 226);
    --green: rgb(43, 24, 166);
    
}

body,
html {
    background-color: rgb(241, 241, 241) !important;
}
.bg-lights{
    background-color: white !important;
}
h1,
h2,
h3 {
    font-weight: bolder !important;
    color: var(--green) !important;
}
.cards h5{
    color: var(--green) !important;
}
.products h3 {
    color: var(--blue);
}

.about-heading h1 span {
    color: var(--darkblue) !important;
}

.bg-infos {
    background-color: var(--darkblue) !important;
}
.dropdown:hover .dropdown-menu{
    display: block  !important;
}

.nav-top-icon {
    /* font-size: 20px; */
    background-color: var(--blue);
    border-radius: 50px;
    padding: 4px;
    color: white;
}

.nav-link {
    /* color: white !important; */
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    border-bottom: 2px solid var(--blue);
    color: var(--darkblue) !important;
}

.nav-item .active {
    color: var(--blue) !important;
}

.navbar-toggler {
    border-radius: 0px;
    border: none !important;
    /* color: white !important; */
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.dropdown-menu {
    /* background-color: var(--blue) !important; */
    border-radius: 0px !important;
}

/* .dropdown-item {
    color: white !important;
} */
.dropdown-item.active{
    background-color: #fff !important;
}

.dropdown-item:hover {
    background-color: var(--blue) !important;
    color: white !important;
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 0px !important;
}
img{
    object-fit: cover;
}
.home {
    background-image: url(../images/white-1.jpg) !important;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.home h1 {
    letter-spacing: 1px;
}

/* .bg-color {
    background-image: url(../images/hard-disk.JPEG);
    background-color: rgba(255, 255, 255, 0.623) !important;
    background-blend-mode: multiply;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;

} */

p {
    text-align: justify;
}

.line {
    /* background-color: transparent; */
    border-bottom: 2px solid var(--blue);
    width: 100px;
    /* margin: auto; */
}

.btn {
    border: 2px solid var(--green) !important;
    background-color: var(--green) !important;
    letter-spacing: 3px;
    font-weight: 900 !important;
    border-radius: 0px !important;
    color: var(--blue) !important;
    font-weight: 500;
}

.img-zoom {
    transition: .5s;
}

.img-zoom:hover {
    transform: scale(1.1);
}

.products img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
.products .position-absolute{
    transition: 1s all;
    display: none !important;
    transition: .5s;
    /* top: 150px; */
  
}
/* .products .position-relative:hover .position-absolute{
    background-color: rgba(36, 36, 36, 0.705) !important;
    height: 100%;
     
    display: block !important;
} */
.card {
    border-radius: 0px !important;
    background-color: transparent !important;

}

.line-img {
    margin: auto;
    width: 70px;
    height: 2px;
    background-color: var(--blue);
}

.btn-h:hover .cart-btn {
    display: block !important;
}

.btn-h .cart-btn {
    bottom: 0 !important;
    display: none !important;
    transition: .5s;
    background-color: rgba(36, 36, 36, 0.705) !important;
}
.lap-access{
    /* height: 250px !important; */
    width: 100% !important;
    object-fit: cover;
    background-position: center;
}

.Accessories {
    /* background-image: url(../images/accessories-bg.jpg); */
    background-color: var(--green) !important;
    /* background-blend-mode: multiply; */
    width: 100%;
    height: 100%;
    color: white !important;
    /* opacity: .7; */
    background-attachment: fixed;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}

.about {
    background-image: url(../images/keybord.jpg);
    background-color: rgba(231, 227, 227, 0.568);
    background-blend-mode: multiply;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
}

.gallery {
    background-image: url(../images/gallery-bg.jpg);
    background-color: rgba(235, 232, 232, 0.75);
    background-blend-mode: multiply;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
}

.Gallery img {
    height: 250px !important;
    width: 100% !important;
}

.contact {
    background-image: url(../images/desktop-img-02.jpg);
    background-color: rgba(238, 236, 236, 0.734);
    background-blend-mode: multiply;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}

input {
    border-radius: 0px !important;
}

input:focus {
    box-shadow: none !important;
    border: 1px solid var(--blue) !important;
}

label {
    color: var(--blue) !important;
}

textarea {
    border: 2px solid rgb(231, 230, 230) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
}

textarea:focus {
    border: 2px solid var(--blue) !important;

}

.cont-btn {
    border: 2px solid var(--blue);
    background-color: var(--blue);
    color: white !important;
}

.cont-btn:hover {
    background-color: white;
    color: var(--blue) !important;
    font-weight: 900;
}

.contact-addres {
    background-color: var(--darkblue) !important;
}

.bg-images {
    /* min-height: 100vh; */
    background-image: url(../images/white-2.jpg);
    /* background-color: rgb(71, 71, 71); */
    /* background-blend-mode: multiply; */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}




.footer {
    background-color: var(--darkblue) !important;
}

.footer-logo-content {
    background-color: white;
}

.footer-icon {
    background-color: var(--blue);
    padding: 5px;
    border-radius: 50px;
}

.bg-whatsapp {
    background-color: var(--blue);
}










.bg-att img {
    background-attachment: fixed;
}

.main-cards .cards {
    display: flex;
    height: 100% !important;
}

.main-cards h5 {
    color: var(--blue);

}

@media(max-width:768px) {
    .main-cards h5 {
        /* color: var(--blue);  */
        font-size: 16px;
    }

    .main-cards p {
        /* color: var(--blue);  */
        font-size: 11px;
    }
}

.main-cards .row .col-md-6 .cards {
    position: relative;
    overflow: hidden;
    transition: .5s;
    border-top: 2px solid var(--blue);
    border-left: 2px solid var(--blue);
    background-color: white !important;
}

.main-cards .row .col-md-6 .cards::before {
    position: absolute;
    content: "";
    width: 200px;
    height: 100px;
    bottom: -70px;
    right: -70px;
    background-color: var(--blue);
    transform: rotate(-45deg);
    transition: .5s;
}

.main-cards .row .col-md-6 .cards:hover::before {
    position: absolute;
    content: "";
    width: 200px;
    height: 100px;
    bottom: -100px;
    right: -100px;
    background-color: var(--blue);
    transform: rotate(-45deg);

}

.card-imgs .cards img {
    width: 100%;
    height: 250px;
}

.card-imgs h5 {
    color: var(--blue);
}

.card-imgs .cards {
    border-bottom: 2px solid var(--blue);
}


.modal .mb-3 div{
    padding: 20px ;
    display: flex;
    height: 100%;
}
.modal img{
    /* padding: 20px !important; */
    /* position: relative; */
    height: 250px !important;
    width: 100%;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
.modal .col-sm-12{
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    /* width: 100%;
    height: 100% !important; */
    /* background-color: gray !important; */

}
.card{
    border: 2px solid rgb(199, 199, 199);
    box-shadow: 0px 0px 10px rgb(158, 158, 158);

}
.modal h5{
    background-color: var(--green);
    color: white !important;
    /* position: absolute; */
    /* bottom: 0px !important; */
    padding: 5px;
    /* display: flex; */
 
    /* display: table-cell; */
    /* vertical-align: bottom; */
    /* border: 1px solid #f00; */
    /* height: 100px; */
    /* width: 100px; */
}
/* .modal .mb-3 div {
    padding: 10px !important;
    display: flex;
    height: 100%;
} */
.btn-close{
    box-shadow: none !important;
    background-color: transparent !important;
}