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

 body {
     margin: 0px;
     padding: 0px;
     font-family: "poppins";
     background-color: white;
     
 }

 * {
     box-sizing: border-box;
 }
.container {
    max-width: 1920px !important;
    width: 100% !important;
}
 html {
     font-size: 100%;
     overflow-x: hidden;
     scroll-behavior: smooth;
 }

 ul {
     list-style: none;
 }

 a {
     text-decoration: none;
 }

 nav {
    z-index: 100;
    width: 100%;
 }
 /* .navbar_1{
    width: 100%;
    box-shadow: 2px 2px 30px;
   

 } */

 .social-call {
     height: 40px;
     border: 2px solid black;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .social a {
     margin: 0px 5px;
     color: blue;
     font-size: 1rem;
 }

 .phone {
     color: black;
     margin-left: 30px;
     font-size: 0.9rem;
 }

 .social a:hover {
     color: chartreuse;
     transition: all ease 0.3s;
 }

 .navigation {
     display: flex;
     justify-content : space-around;
     align-items: center;
   
     overflow: hidden;
     background-color: #ffffff;
     border-bottom: 1.5px solid black ;
     
     
     
 }

 .menu {
     display: flex;
 }

 .menu li {
     position: relative;
     margin: 20px;
     display: flex;
     text-transform: capitalize;
     font-weight: 500;
 }

 .menu li a {
     color: black;
 }

 .right-menu {
     display: flex;
     align-items: center;
 }

 .right-menu span {
     margin: 0 10px;
     font-weight: 600;
     font-size: 15px;
 }

 .right-menu a {
     margin: 0px 10px;
     font-size: 1.2rem;
     color: rgba(0, 0, 0, 0.7);
 }

 .menu a:hover,
 .right-menu a:hover,
 .search-cancel:hover,
 .form-cancel:hover {
     color: red;
     transition: all ease 0.3s;
 }

 .logo img {
     width: 100%;
     max-width: 150px;

 }

 .sale-lable {
     width: 45px;
     height: 20px;
     background-color: black;
     color: white;
     font-weight: 400;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 0.7rem;
     text-transform: capitalize;
     position: absolute;
     top: -20px;
     right: -20px;
 }

 .sale-lable:after {
     content: '';
     width: 0px;
     height: 0px;
     border-bottom: 5px solid transparent;
     border-left: 3px solid transparent;
     border-top: 7px solid black;
     border-right: 5px solid transparent;
     position: absolute;
     left: 10%;
     top: 100%;
 }

 .fa-cart-shopping {
     position: relative;
 }

 .num-cart-product {
     position: absolute;
     top: -17px;
     right: -17px;
     width: 25px;
     height: 25px;
     font-size: 0.8rem;
     border-radius: 50%;
     background-color: black;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: 400;
 }

 .full-slider-box {
     width: 100%;
     height: 80vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }

 .f-slider-1 {
     background-image: url('banner.jpg');
 }

 .slider-text-container {
     /*width: 80%;*/
     height: 90%;
     display: flex;
     align-items: center;
     text-align: center;
 }

.f-slider-text {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}
 .f-slider-text p {
    font-weight: 600;
    color: black;
    font-size: 2rem;
    line-height: 55px;
    letter-spacing: 1px;
    font-style: italic;
 }

 .f-slider-text span {
     text-transform: capitalize;
     letter-spacing: 2px;
     font-weight: 700;
     color: white;
     font-size: 3rem;
 }

 .f-slider-btn {
     font-weight: 600;
     width: 300px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: black;
     background-color: white;
     text-transform: capitalize;
     letter-spacing: 2px;
     margin-top: 10px;
     border-radius: 50px;
 }

 .featured-heading {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .featured-heading h2,
 .arrival-heading strong {
     font-size: 1.5rem;
     color: black;
     letter-spacing: 1px;
     text-transform: capitalize;
     font-weight: 600;
     margin-top: 40px;
     padding: 5px 30px;
     border: 1px solid black;
     background-color: goldenrod;
 }

 .feature-box {
     width: 150px;
     height: 150px;
     border-radius: 0px 20px;
     overflow: hidden;
 }

 .feature-box a img {
     width: 90%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .item span {
     font-size: 1rem;
     font-weight: 600;
     margin: 5px;
     color: black;
 }

 .item {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }

 #autoWidth {
     display: flex;
     justify-content: center !important;
     margin: 10px auto 40px auto;
     flex-wrap: wrap;
 }

 .arrival-heading {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }

 .arrival-heading strong {
     color: white;
     background-color: orangered;
     font-weight: 500;
 }

 .arrival-heading p {
     color: black;
     margin: 10px;
     font-size: 0.9rem;
 }

.sidebar_1 h2 {
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 20px;
   
}
.sidebar_1 label {
    
   
    font-weight: 500;
   
}
.sidebar_1 .form-check {
    margin-bottom: 10px;
   
}
.sidebar_1 .card{
   padding: 20px 30px;
    height: 100vh;
}
 .product-container {
    height: 100%; 
    max-width: 1920px;
    width: 100%;
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 30px;
    
 }

 .product-box {
     display: flex;
    flex-grow: 0.1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-radius: 10px;
    height: 320px;
    width: 300px;
    margin: 0;
 }

 .product-img {
     width: 200px;
     height: 210px;
     margin: 20px;
     cursor: pointer;
     position: relative;
 }

 .product-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: center;
 }

 .product-details {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     padding: 10px 20px;
     border-top: 1px solid white;
 }

 .p-name {
     color: black;
 }

 .p-price {
     color: teal;
     font-size: 1.2rem;
     font-weight: 400;
 }

 .product-box:hover {
     box-shadow: 2px 2px 10px;
 }

 .add-cart {
     position: absolute;
     right: -50px;
     top: 10px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     background-color: black;
     box-shadow: 2px 2px 20px;
     display: none;
     animation: fade 0.3s;
 }

 .add-cart:hover {
     background-color: orange;
     transition: all ease 0.2s;
 }

 .product-box:hover .add-cart {
     display: flex;
 }

 .new-arrival {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .services {
     display: flex;
     width: 90%;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     margin: auto;
 }

 .services-box {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border: 1px solid black;
     min-width: 250px;
     padding: 20px;
     margin: 15px;
     flex-grow: 0.7;
 }

 .services-box i {
     color: burlywood;
     font-size: 2rem;
     margin: 15px;
 }

 .services-box span {
     color: black;
     font-weight: 600;
     letter-spacing: 0.5px;
     font-size: 1rem;
 }

 .services-box p {
     color: black;
     margin: 0px;
     font-size: 0.9rem;
 }

 footer {
     padding-top:40px;
     padding-bottom: 30px;
     border-top: 1px solid black;
     background-color: var(--dark);
     width: 100%;
 }

 .copyright {
     font-size: 0.9rem;
     color: black;
     letter-spacing: 1px;
 }

 .subscribe input {
     width: 230px;
     height: 30px;
     padding: 0px 10px;
     border: 1px solid black;
     outline: none;
     box-shadow: 2px 2px 10px black;
 }

 .subscribe input[type="submit"] {
     width: 120px;
     background-color: teal;
     color: white;
     margin: 0px 5px;
 }

 .fix-nav {
     width: 100%;
     position: fixed;
     top: 0px;
     left: 0px;
     background-color: white;
     box-shadow: 2px 2px 10px black;
     z-index: 102;
 }

 .toggle {
     display: none;
 }


 .mr-5 {
     margin-right: 5px;
 }



 /* media queries */

 @media (max-width: 1024px) {
     nav {
         position: relative;
     }

     .navigation {
         height: 80px;
     }

     .fix-nav {
         height: 80px;
     }

     .menu {
         position: absolute;
         top: 80px;
         left: 0px;
         background-color: white;
         border-bottom: 4px solid teal;
         width: 100%;
         padding: 0px;
         /*         margin: 0px;*/
         z-index: 102;
         flex-direction: column;
         /*         display: none;*/

         width: 250px;
         height: 100vh;
/*         position: fixed;*/
         margin-left: -300px;
         /*          background-color: #100901;*/
         transition: 0.5s;
     }

     .active-nav {
         margin-left: 0;
     }

     .fix-nav .menu {
         top: 80px;
     }

     .menu li {
         width: 100%;
         margin: 0px;
         padding: 0px;
     }

     .navigation .menu li a {
         width: 100%;
         height: 50px;
         display: flex;
         align-items: center;
         margin: 0px;
         padding: 25px;
         border: 1px solid black;
     }

     .toggle {
         display: block;
     }

     .toggle:before {
         content: '\f0c9';
         font-family: fontAwesome;
         line-height: 30px;
         z-index: 1;
         cursor: pointer;
     }

     .toggle.active:before {
         content: '\f00d';
     }

     .navigation.active .menu {
         display: block;
     }

     .full-slider-box {
         height: 45vh;
     }

     .f-slider-text span {
         font-size: 0.9rem;
     }

     .f-slider-text strong {
         font-size: 2rem;
         line-height: 40px;
     }

     .search-input {
         height: 60px;
     }

     .search-input input,
     .search-cancel {
         font-size: 1.4rem;
     }
 }

 @media(max-width: 767px) {
     .navigation {
         padding: 10px;
     }

     .slider-text-container {
         width: unset;
     }

     .f-slider-text strong {
         font-size: 1.2rem;
         line-height: 25px;
     }

     /*.full-slider-box {
         height: 30vh;
     }*/

     .f-slider-text span {
         font-size: 0.8rem;
     }

     .f-slider-text p {
         letter-spacing: 0;
         line-height: 1;
     }

     .f-slider-btn {
         width: 120px;
         height: 30px;
         font-size: 0.8rem;
     }

     .featured-heading h2 {
         font-size: 1.2rem;
     }

     .feature-box {
         width: 120px;
         height: 120px;
     }

     .new-arrival strong,
     .featured-heading strong {
         font-size: 1.2rem;
     }

     .new-arrival p,
     .featured-heading p {
         font-size: 0.8rem;
         text-align: center;
     }

     .services {
         width: 100%;
     }

     .services-box {
         width: 100%;
     }

     .sale-lable {
         right: 10px;
     }


     footer,
     footer .row {
         justify-content: unset;
     }

     .copyright {
         margin: 20px 0px;
         text-align: center;
     }

     .subscribe {
         width: 100%;
     }

     .subscribe form {
         flex-wrap: nowrap;
         display: flex;
         width: 100%;
     }

     .subscribe input {
         width: 100%;
         flex-grow: 1;
     }

     .login-form,
     .sign-up-form {
         width: 90%;
     }
 }


 


 /** Product details **/


 .small-container {
     max-width: 900px;
     margin: auto;
     padding-left: 25px;
     padding-right: 20px;
 }

 .row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-around;
 }

 .single-product {
     margin-top: 80px;
 }

 .small-img-row {
     display: flex;
     justify-content: space-around;
     margin-top: 20px;
 }

 .col-2 img {
     max-width: 100%;
     padding: 50px 0;
 }

 .small-img-col {
     flex-basis: 24%;
     cursor: pointer;
 }

 .single-product .row::before{
    content: unset;
 }

 .single-product .col-2 img {
     padding: 0;
 }



 .single-product .col-2 {
     padding: 20px;
 }

 .col-2 {
     flex-basis: 50%;
     min-width: 300px;
 }

 .col-2 h1 {
     font-size: 50px;
     line-height: 60px;
     margin: 25px 0;
 }

 .single-product select {
     display: block;
     padding: 10px;
     margin-top: 20px;
 }

 .signle-product h4 {
     margin: 20px;
     font-size: 22px;
     font-weight: 500;
     font-weight: bold;
 }

 .single-product input {
     width: 50px;
     height: 40px;
     padding-left: 10px;
     font-size: 20px;
     margin-right: 10px;
     border: 2px solid orangered;
 }

 input:focus {
     outline: none;
 }

 a {
     text-decoration: nine;
     color: #555;
 }

 .single-product .fa {
     color: orangered;
     margin-left: 10px;
 }

 p {
     color: #555;
 }

 .btn {
     display: inline-block;
     background: black;
     color: white;
     padding: 8px 30px;
     margin: 30px 0;
     border-radius: 30px;
     transition: background 0.5s;
 }

 .btn:hover {
     background: orange;
 }





 /** cart **/


 .cart-page {
     margin: 80px auto;
 }

 table {
     width: 100%;
     border-collapse: collapse;
 }

 .cart-info {
     display: flex;
     flex-wrap: wrap;
 }

 th {
     text-align: left;
     padding: 5px;
     color: white;
     background: black;
     font-weight: normal;
 }

 td {
     padding: 10px 5px;

 }

 td input {
     width: 40px;
     height: 30px;
     padding: 5px;
 }

 td a {
     color: orangered;
     font-size: 12px;
 }

 td img {
     width: 100px;
     height: 100px;
     margin-right: 10px;

 }


 .total-price {
     display: flex;
     justify-content: flex-end;
 }

 .total-price table {
     border-top: 3px solid black;
     width: 100%;
     max-width: 400px;
 }

 td:last-child {
     text-align: right;
 }

 th:last-child {
     text-align: right;
 }


















 .tab-style {
     font-size: 20px;
     width: 50%;
     background-color: #f2f2f2;
     text-align: center;


 }

 .nav-tabs>li>a {
     margin-right: 0px;
     color: grey;
 }



 .group2 {
     position: relative;
     margin-top: 16px;
 }

 .btn-block {
     margin-top: 20px;
     margin-bottom: 20px;
     font-size: 18px;
 }

 .nav-tabs>li.active>a,
 .nav-tabs>li.active>a:focus,
 .nav-tabs>li.active>a:hover {
     background-color: #e5ecf4;
     color: #4a89dc;
 }

 .login-shadow {
     -webkit-box-shadow: 5px -5px 6px 0px rgba(82, 82, 82, 0.52);
     -moz-box-shadow: 5px -5px 6px 0px rgba(82, 82, 82, 0.52);
     box-shadow: 5px -5px 6px 0px rgba(82, 82, 82, 0.52);
     z-index: 1;

 }

 .signup-shadow {
     -webkit-box-shadow: -5px 0px 6px 0px rgba(82, 82, 82, 0.52);
     -moz-box-shadow: -5px -5px 6px 0px rgba(82, 82, 82, 0.52);
     box-shadow: -5px 0px 6px 0px rgba(82, 82, 82, 0.52);

 }


 .modal-header {
     background-color: #e5ecf4;
 }

 .group {
     position: relative;
     margin-top: 30px;
 }


 .input {
     font-size: 18px;
     padding: 10px 10px 10px 5px;
     -webkit-appearance: none;
     display: block;
     background: none;
     color: #636363;
     width: 100%;
     border: none;
     border-radius: 0;
     border-bottom: 1px solid #757575;
 }

 .input:focus {
     outline: none;
 }


 /* Label */

 .label {
     color: #757575;
     font-size: 18px;
     font-weight: normal;
     position: absolute;
     pointer-events: none;
     left: -10px;
     top: 10px;
     transition: all 0.2s ease;
 }


 /* active */

 .input:focus~.label,
 .input.used~.label {
     top: -20px;
     transform: scale(.75);
     left: -15px;
     /* font-size: 14px; */
     color: #4a89dc;
 }


 /* Underline */

 .bar {
     position: relative;
     display: block;
     width: 100%;
 }

 .bar:before,
 .bar:after {
     content: '';
     height: 2px;
     width: 0;
     bottom: 1px;
     position: absolute;
     background: #4a89dc;
     transition: all 0.2s ease;
 }

 .bar:before {
     left: 50%;
 }

 .bar:after {
     right: 50%;
 }


 /* active */

 .input:focus~.bar:before,
 .input:focus~.bar:after {
     width: 50%;
 }


 /* Highlight */

 .highlight {
     position: absolute;
     height: 60%;
     width: 100px;
     top: 25%;
     left: 0;
     pointer-events: none;
     opacity: 0.5;
 }


 /* active */

 .input:focus~.highlight {
     animation: inputHighlighter 0.3s ease;
 }


 @media screen and (max-width: 767px) and (min-width: 576px) {
     .myModal {
         margin-left: 20%;
         margin-right: 20%;
     }

     #forgot-password {
         margin-left: 20%;
         margin-right: 20%;
     }
 }


 @media screen and (min-width: 768px) {

     .myModal .modal-dialog {
         width: 500px;
     }

     #forgot-password .modal-dialog {
         width: 500px;
     }

     .modal-body {
         padding-left: 50px;
         padding-right: 50px;
     }
 }


 .modal-body {
     background-image: url('http://res.cloudinary.com/rinma/image/upload/v1500489833/Airplane-flying-desktop-pictureproba2_rlcced.jpg');
     background-size: cover;
     z-index: 4;
 }

 em {
     display: none;
 }


 .checkout-button-div {
     text-align: center;
 }


 .checkout-button-div button {
     display: inline-block;
 }

 #billingAddressTab {
     width: 100% !important;
 }



 :root {
    --dark: #001D23;
    --orange: #FF6F0F;
    --white: #fff;
    --light: rgba(255, 255, 255, 0.5);
}




footer .container {
    width: 1380px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

footer .col-3 {
    width: 25%;
    float: left;
}

footer .col-6 {
    width: 50%;
    float: left;
}

footer .clearfix {
    clear: both;
}

footer .container-fluid {
    padding: 35px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

footer .logo {
    color: var(--orange);
}

footer btn-square {
    width: 38px;
    height: 38px;
}

footer .social {
    margin-top: 20px;
  
}

footer p {
    color: var(--light);
    font-family: system-ui !important;
    

}

footer p a {
    color: var(--white);
    text-decoration: none;
}
.add-to-cart i{
    margin-right: 6px;
}
footer .social-btn i {
    width: 38px;
    height: 38px;
    text-align: center;
    border: 2px solid var(--light);
    line-height: 40px;
    color: var(--light);
    border-radius: 5px;
}

footer .social-btn i:hover {
    color: var(--white);
    border: 1px solid var(--white);
    cursor: pointer;
}

footer h5 {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
}

footer .me-3 {
    margin-right: 1rem !important;
}

footer .btn-link {
    display: block;
    text-decoration: none;
    margin-bottom: 5px;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: system-ui !important;
    line-height: 28px;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;

}

footer .btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 10px;
}

footer .btn-link:hover {
    color: var(--white);
    letter-spacing: 1px;
    box-shadow: none;
}

footer .input {
    max-width: 280px;
    width: 100%;
    background-color: var(--white);
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
    position: relative;
    outline: none;
}

/*
.input:focus{
color: #787878;
background-color: white;
border-color: #ffb787;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(255,111,15,0.25);
}

.signbtn{
position: absolute;
right: 95px;
top: 7px;
padding: 10px 20px;
background-color: var(--orange);
color: var(--white);
border-radius: 5px;
border: 1px solid var(--orange);
font-size: 16px;
transition: .5s;
}
*/
footer .signbtn:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(217, 94, 13, 0.5);
}

footer .signbtn:hover {
    color: var(--orange);
    background: transparent;
}

footer .design {
    text-align: right;
}

footer .footb {
    float: right;
}

@media only screen and (max-width: 576px) {
    footer .btn-link {
        text-align: center;
    }
}

@media only screen and (max-width: 600px) {
    /*body {
 overflow: scroll;
}*/





    footer {
        width: 100%;
        height: auto;
        position: relative;
    }
}