@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100;1,300;1,500;1,700&family=Rubik:wght@300;400;500;600&family=Rufina:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;600&family=Roboto:ital,wght@1,100;1,300;1,500;1,700&family=Rubik:wght@300;400;500;600&family=Rufina:wght@400;700&display=swap');
*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
            text-decoration: none;
            font-family: 'Roboto', sans-serif;
            font-family: 'Rubik', sans-serif;
            font-family: 'Rufina', serif;
}

body {
            background: #ffffff;
}

section {
            padding: 100px 8%;
}

img {
            width: 100%;
            height: auto;
}

header {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 30px 6%;
            align-items: center;
            border-bottom: 1px solid #ccc;
            background: #fffbfb;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 99999;
}

header .logo {
            font-size: 28px;
            color: #333;
            font-weight: bolder;
            transition: 0.5s all ease;
}
header .logo:hover {
            transform: scale(1.1);
            color: rgb(192, 80, 236);
}

header #navbar {
            display: flex;
}

header #navbar li a {
            padding: 0 15px;
            display: inline-block;
            color: #333;
            font-size: 20px;
            text-transform: capitalize;
            transition: 0.5s all ease;
}
header #navbar li a:hover {
            transform: scale(1.2);
            color: rgb(192, 80, 236);
}

header .icons a{
            display: inline-flex;
            padding: 0 15px;
            width: 37px;
            height: 37px;
            background: #000;
            color: #fff;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin: 8px;
            transition: 0.5s all ease;
            font-size: 20px; 
}
header .icons a:hover {
            transform: scale(1.1);
            color: rgb(31, 209, 75) !important;
}

header .icons #showName {
            background: transparent;
            color: #333;
            border: 1px solid #333;
            display: none;
}




/* =================Hero Banner Section Design========================= */


#hero {
            /* position: relative; */
            width: 100%;
            height: 100vh;
            background: #e3ffe6 url(../img/background.svg) no-repeat;
            background-size: cover;
            object-fit: cover;
}

#hero .hero-wrap{
            width: 100%;
            height: 100%;
            display: grid;
           grid-template-columns: repeat(2, 1fr);
           justify-content: space-between;
           align-items: center;
}

#hero .hero-wrap .hero-text h4{
            font-size: 20px;
}
#hero .hero-wrap .hero-text h1 {
            font-size: 35px;
            font-family: 'Rufina', serif;
            padding: 10px 0;
            font-weight: 700;
}
#hero .hero-wrap .hero-text p {
            margin: 10px 0;
            color: #473c3c;
}
#hero .hero-wrap .hero-text .btn {
            padding: 14px 20px;
            display: inline-block;
            background: #1b1a1a;
            color: #fff;
            border-radius: 20px ;
            margin: 20px 0;
            font-size: 20px;
            transition: 0.5s all ease;
}
#hero .hero-wrap .hero-text .btn:hover {
            transform: scale(1.1);
            color: rgb(76, 241, 103);
            letter-spacing: 1px;
            opacity: 0.7;
}







/* responsive design */

@media (max-width:991px) {
            header #navbar{
                        position: fixed;
                        top: 100px;
                        left: -100%;
                        flex-direction: column;
                        background: #333;
                        width: 100%;
                        height: 100vh;
                        color: #ccc;
                        text-align: center;
                        padding: 40px 0;
                        transition: 0.5s all ease;
            }
            header #navbar li a {
                        color: #fff;
                        padding: 20px 0;
            }
            header .icons #showName {
                        display: inline-flex;
            }

            header #navbar.toggle-nav{
                        left: 0;
            }  
            
    
}
@media (max-width:576px){
            #hero .hero-wrap {
                        margin: 60px 0;
                        grid-template-columns: 1fr;
                        text-align: center;
            }
}

@media (max-width:480px) {
            header .icons a {
                        width: 37px;
                        height: 37px;
                        margin: 8px;
                        font-size: 20px;    
            }
            #hero .hero-wrap {
                        margin: 60px 0; 
                        padding: 30px 0;     
            }
            #hero .hero-wrap .hero-text .btn {
                        font-size: 15px;
                      
            }

            #hero .hero-wrap .hero-text h1 {
                        font-size: 28px;
                        
            }
            #hero .hero-wrap .hero-text  h4{
                        font-size: 18px;
            }
}


/* ================service part design===================== */

#main-service{
            width: 100%;
            height: 100%;
            margin: 10px 0;           
}
#main-service h2 {
            font-size: 30px;
            font-family: 'Rufina', serif;
            color: #9b23ca;
}


.service {
            width: 100%;
            height: auto;
            display: grid;
            grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
            gap: 1.5rem;
            margin: 50px 0;
           
            

           
}
.items {
            width: 100%;
            height: auto;
            border-radius: 10px;
            overflow: hidden;
}
.items .img-thumb img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            margin: 10px 0;
            /* border-radius: 20px; */
            box-shadow: -3px -4px 21px -9px rgba(59, 238, 140, 0.90);
            
                  
}
#main-service .service .items .service-contects h3 {
            font-size: 20px;
           margin: 10px 0;
}
#main-service .service .items .service-contects h5{
            font-size: 15px;
} 
#main-service .service .items .service-contects .button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
}
#main-service .service .items .service-contects .button .price a {
            color: red;
            border: 1px solid red;
            display: inline-block;
            padding: 4px 13px;
            border-radius: 10px;
            font-size: 20px;
            transition: 0.5s all ease;
}
#main-service .service .items .service-contects .button .price a:hover{
            letter-spacing: 2px;
            background: #C050EC;
            color: #FFFBFB;
}
#main-service .service .items .service-contects .button .rating a i{
            font-size: 20px;
            color: red;
}
#main-service .service .items .service-contects .button .rating a i:hover{
            color: green;
}


/* ===================second part Design ===================*/

#feadback {
       width: 100%;
       height: auto;

}
#feadback .feadback-container{
           background: no-repeat  url(../img/footer.png);
           object-fit: cover;
           width: 100%;
           height: 500px;
           background-size: cover;
           background-position: cover;

}

h5, h3 , h2 {
       font-family: 'Mukta', sans-serif;
}

#feadback .feadback-container .feadback-items .all-text a img{
            width: 250px;
            height: auto;
            margin-top: 80px;
            padding: 0px 10px;
            
}
#feadback .feadback-container .feadback-items .all-text h1{
            padding: 18px 13px;  
            font-size: 35px;  
}
#feadback .feadback-container .feadback-items .all-text p{
            padding: 18px 13px;  
            color: #101311;
}
#feadback .feadback-container .feadback-items .all-text .btn {
            padding: 12px 15px;  
            margin: 10px 0;
            display: inline-block;
            margin-left: 10px;
            border-radius: 20px;   
            color: red;
            border: 1px solid red;
            font-size: 20px;
            transition: 0.5s all ease;
}
#feadback .feadback-container .feadback-items .all-text .btn:hover{
            letter-spacing: 2px;
            background: #9b23ca;
            color: #fff;
}




#main-laptop.service .items .img-thumb img{
       object-fit: cover;
       background-position: center ;
       background-repeat: no-repeat;
       background-size: cover;
      
}

#main-laptop .service .items .img-thumb  .service-contects .button .price{
       display: flex;
       justify-content: space-between;
}
#main-laptop .service .items .img-thumb  .service-contects .button .price a  {
      margin: 6px 0;
     color: red;
     padding: 10px 15px;
     margin: 20px 0;
     border: 1px solid grey ;
     display: inline-block;
     border-radius: 10px;
     transition: 0.5s all ease;
}
#main-laptop .service .items .img-thumb  .service-contects .button .price a:hover{
       background: #14b990;
       cursor: pointer;
       letter-spacing: 2px;
}
#main-laptop .service .items .img-thumb .rating a i{
               color: red;
               font-size: 20px;
               cursor: pointer;
}
#main-laptop .service .items .img-thumb .rating .n2{
       color: #C050EC;
}
#main-laptop .service .items .img-thumb .rating .n3{
       color: green;
}
#main-laptop .service .items .img-thumb .rating .n4{
       color: #14b990;
}
#main-laptop .service .items .img-thumb .rating .n5{
       color: #d16d0f;
}

#global {
       width: 100%;
       height: 100%;
}
#global .global-containers{
       width: 100%;
       height: 60vh;
       background: no-repeat url(../img/buy.webp);
       object-fit: cover;
       background-position: center;
       background-size: cover;
}
#global .global-containers .global-contents{
       float:right;
       margin: 80px;
       
      
}
#global .global-containers .global-contents h3{
       font-size: 45px;
       color: red;
}
#global .global-containers .global-contents h1{
       font-size: 50px;
}
#global .global-containers .global-contents a{
       background: rgb(50, 11, 223);
       padding: 16px 50px;
       display: inline-block;
       font-size: 30px;
       color: #fff;
       border-radius: 10px;
       margin-top: 10px;
       transition: 0.5s all ease;
}
#global .global-containers .global-contents a:hover{
       background: #14b990;
       color: red;
       letter-spacing: 2px;
}

/* ====================brand name design================ */


#brandName{
              width: 100%;
              height: 100%;
              margin: 80px 0;   
       }
#brandName .brand-container  .brand-items{
            display: grid;
            grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) );
            flex-direction: column;
            gap: 1rem;
            padding: 0 30px;
           
}
#brandName .brand-container  .brand-items img{
       object-fit: cover;
       object-fit: cover;
       background-position: center;
       background-size: cover;
       padding: 0 20px;
       align-items: center;

          
}
.buttom-line {
       border-bottom: 2px solid #333;
       box-shadow: 12px 2px 2px 0 #9b23ca;
}
#footer{
       width: 100%;
      height: auto;
      background: #e3ffe1 ;
}

#footer .sub-footer {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px ,1fr));
       flex-direction: column;
}
#footer .sub-footer .footer-content h5{
              font-size: 27px;
              color: #221f1f;
              padding: 15px 0;
}

#footer .sub-footer .footer-content li a{
       font-size: 20px;
       text-transform: capitalize;
       padding: 5px 0;
       display: inline-block;
       color: #473c3c;
}

#footer .main-foot{
       margin: 70px 0;
       display: flex;
       justify-content: space-between;
       
       
       /* grid-template-columns: repeat(auto-fit, minmax(500px ,1fr)); */
}
#footer .main-foot .foot-text span{
        font-size: 20px;
        color: #473c3c;
}
#footer .main-foot .foot-icons a i {
       display: inline-flex;
       width: 37px;
       height: 37px;
       background: #000;
       color: #fff;
       justify-content: center;
       align-items: center;
       border-radius: 50%;
       margin: 8px;
       transition: 0.5s all ease;
       font-size: 25px; 
   -webkit-box-shadow: inset 0px 0px 26px 1px rgba(70,219,59,1);
   -moz-box-shadow: inset 0px 0px 26px 1px rgba(70,219,59,1);
   box-shadow: inset 0px 0px 26px 1px rgba(70,219,59,1);
}
#footer .main-foot .foot-icons a i:hover {
       transform: scale(1.2);
       color:#221f1f!important;
       background: #09e74c;
       
}