*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body{
    font-family:"Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    background-color: #fff;
    color:#262626;
}
a,i{
    color: #262626;
    text-decoration: none;
    margin-right: 10px;
    
}


ul{
    list-style-type: none;   
   
}

.main{
    width:100%;
    height:max-content;
    padding:0;
    margin:0;
}

    

.header{
     width:100%;
    height:50px;
    display:flex;
}
.navbar {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 15px 0;    
}
.logo {
    width: 120px;
    height: 46px;
    margin-left: 60px;
    margin-top: 7px;
}

.logo img{
    margin: 10px;
    height: 45%;
}

.navbar ul{
    display:flex;
}


.navbar ul li  { 
    text-decoration: none;
    display:flex; 
    margin-top:10px;
    padding:0 5px;
    font-size:12px;
    
    
}
.navbar ul li a:hover {
    border-bottom:#414141 solid;
    
}

.rightmenu{
    margin-right: 60px;;
}

.rightmenu  li img{
    height:100%;
   margin-top: -10px;
   
}
#signin{
    border-bottom:none;
}
.allmicrosoft-menu{
    display:none;
    background-color: #f1f0f1;
    margin:0 75px;
    width:90%;
    height:380px;
    position:absolute;
    font-size: 12px;
    z-index: 56;
    text-align: left;

    .menu-table{ 
      width:100%;
      height:280px;
      border-spacing:20px;
        
    }
}
.table-bottom{
    width:100%;
    height:40px;
    background-color: #e7e5e5;
    text-align: center;
    padding:10px;
    border-bottom:1.5px solid rgb(87, 86, 86)

}
.container{
    width:100%;
    height:max-content;
    margin-top: 10px;
}
.slide-container{
    width:100%;
    
    margin:0%;
    position:flex;
    animation: slidetoLeft 10s infinite ;
}
.content {
    width:100%;
    height:400px;
    margin:0%;
    position:absolute;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
   cursor: pointer;
    padding:40px 50px;
    background-position-y:72%;
    
    
}
#content2{
    background-image: url(image/1st.avif);
    animation:slidefromright 2s;
    animation-delay: 5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards ;
    
 }
#content1{
    background-image: url(image/2nd.avif);
    animation:slidetoleft 2s  ;
    animation-delay: 5s;
    animation-timing-function: linear;
    
    animation-fill-mode:forwards;
   
    z-index:50;
    .inner-div{
       background-color: transparent;
       
    }
}
@keyframes slidetoleft{
    from{transform:translate(0)}
    to{transform:translate(-101%)}
 
   
}
@keyframes slidefromright{
    
    from{transform:translate(100%)}
    to{transform:translate(0)}
    
}

 
.inner-div{
    position:absolute;
    width:36%;
    height:300px;
    margin:10px;
    background-color: #ffffff;
    padding:40px;
   
    
}
.new {
  
    padding:0 5px;
    width:50px;
    height:25px;
    display :block;
    text-align: center;
    background-color: #ffb900;
 
    font-weight:500;
    
    
}
.h2 {
    display:block;
    font-size: 32px;

    font-weight: 600;
    padding-top: 10px ;
    padding-bottom: 10px;
    
}
.para{
   
    font-size: 14px;
    line-height: 1.5;
}
.learn {
    display:inline-block;
    height:auto;
    width:auto;
    background-color: #0067b8;
    color:#fff;
    margin:20px 0;
    padding:10px;
    font-size:14px;
    font-weight: 500;
    color:#fff;
   
    
   
}
.slide-control{
    display:block;
    width:300px;
    margin:auto;
    position: relative;
     height: 70px;
    top:410px;

    ul {
      display:inline ;
      margin:auto;
      
    li {
        list-style-type:none;
        margin:0;
        display:inline;       
        padding:10px;
        font-size:20 ;
        
    }
}
}
.slide-control li,div:hover{
    cursor:pointer;
}
.ctrl-btn{
    display:inline;
    border: none;
    width:10%;
   
    padding:0 10px;
    margin:10px;
    background-position: center;
 }
 #backarrw{
    opacity:50%;
    background-image: url(image/backward-arr.svg);
    background-repeat:no-repeat;


 }
#Btpause-circle{

    background-image: url(image/circle-pause-regular.svg);
    background-repeat:no-repeat;
}
#forwardarrw{
    opacity:50%;
   background-image: url(image/forward-arr.svg);
   background-repeat:no-repeat;

}
#Btpause-circle:hover{
    background-image: url(image/circle-pause-solid.svg);
}
#backarrw:hover{
    transform: translate(0,10px); 
    
}
#forwardarrw:hover{
    transform: translateX(10%);
}
.icon-bar{
    width:100%;
    height:200px;
    position :relative;
    top:400px;
  
    
    .nav-icon{
        
        position:absolute;
        display:flex;
        justify-content:center;
        width:100%;
        height: 200px;
        margin:0;
              
        ul{
            list-style: none;
            margin:auto;
           display:flex;
          justify-content: space-between;
           
          
           
        }
        li{
            width:auto;
          
            margin:auto;
            height: 100px;
        
       
            text-align: center;
            
            padding:0 15px;
            a{  
               text-decoration: underline;
                width:max-content;
                color:#0067b8;
                font-weight: 600;
                font-size: 14px;
            }
            img{
                
                margin:auto 0 10px 0 ;
            
                width:40%;
                height:40%;
                
            }
        }
    }
}

.card-container{
    width:auto;
    height:600px;
    position:relative;
    top:400px;
    margin:0 50px;
    
} 
.card{
        
       
        box-shadow:.5px .5px 5px rgb(196, 196, 203);
        margin:10px;
        width: 23%;
        height:470px;
        float :left;
        display:inline;
       
        #card-pic1{
            background-image: url(image/ms365-Card1.avif);
            width:100%;
            height:170px;
            background-repeat: no-repeat;
            background-position: center;
           
        }
        #card-pic2{
            background-image: url(image/XboxS-Card2.webp);
            width:100%;
            height:170px;
            background-repeat: no-repeat;
            background-position: center;
            
        }
        #card-pic3{
            background-image: url(image/XboxX-Card3.webp);
            width:100%;
            height:170px;
            background-repeat: no-repeat;
            background-position: center;
            
        }
        #card-pic4{
            background-image: url(image/Edge-Card4.webp);
            width:100%;
            height:170px;
            background-repeat: no-repeat;
            background-position: center;
            
        }
       
        .card-body{
            width:100%;
            height:200px;
            padding:20px ;
           
           
            
        }
    
 }
.card:hover{
    cursor: pointer;
}
.card-H{
    display:block;
    font-size: 24px;
    font-weight: 600;
}
.card-p{
    margin-top:10px;
    margin-right: 5px;
    font-size: 14px;
    line-height: 1.5;
             
}
.card-footer{
           
    width:100%;
    height:100px;
    padding:20px;
     .a1,.a2{
        padding:10px 10px ; 
        width:fit-content;
        display:block;
        font-size: 14px;
       font-weight:600;
    }
    .a1{
        background-color:hsl(206, 100%, 36%);
        color:#ffffff;

    }
    .a2{
        color:hsl(206, 100%, 36%);    
      padding:10px 0;
    }
}
.card-footer a:hover{
    background-color: hsl(206, 100%, 30%);
}
.gamepass-container{
    
    width:auto;
    height:400px;
    position:relative;
    top:350px;
    margin:0 60px 0 ; 
    padding-right: 10px;
    
    .gamepass-pic{
        
        background-image: url(image/Gamepass.avif);
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:400px;
        display:inline;
       float:left; 
    }
    .new{
        margin-left:20px;
        margin-bottom: 10px;
    }
    .gamepass-body{
        background-color:transparent;
        margin:10px;
        width:35%;
        height:200px;
        display:block;
        position:absolute;
        top:100px;
        left:50px;align-items: center;
        padding:20px 0 20px 20px;
    
        .card-H{
            color:#0c0c0c;
            font-size:28px;
            padding:0 20px 0;
            margin-bottom: 0;
        }
        .card-p{
            color: #292626;
            padding:10px 20px 0;
            
        }
    }
}
.gamepass-container:hover{
    cursor: pointer;
}
#forbusiness{
   
    width:100%;
    height:70px;
    position: relative;
     margin:0 10px;
   vertical-align: middle;
   h2{
    font-size: 36px;
   }
}


.business-card1{
    background-image: url(image/business-card1.avif);
    width:100%;
    height:170px;
    background-repeat: no-repeat;
    background-position: center;
    
}
.business-card2{
    background-image: url(image/visualStudio-card2.webp);
    width:100%;
    height:170px;
    background-repeat: no-repeat;
    background-position: center;
    
}
.business-card3{
    background-image: url(image/teams-card3.avif);
    width:100%;
    height:170px;
    background-repeat: no-repeat;
    background-position: center;
    
}
.business-card4{
    background-image: url(image/windows365-card4.webp);
    width:100%;
    height:170px;
    background-repeat: no-repeat;
    background-position: center;
    

}
.social-follow{
    
    width:100%;
    height:100px;
    display: inline-block;
    position:relative;
    top:350px;
    margin:20px 70PX;
    align-items: center;
    
    p{
        
        display: inline;
        width:max-content;
        margin-top: 15px;;
        float: left;
        vertical-align: middle;
        font-size: 14px;
       
    }
    ul{
        display: inline-block;
        li{
           display: inline-block; 
        }
    }
}
.follow-img{
    display: inline-block;
    width:30px;
    
    margin-left:5px;
    padding:10px 0 ;
}
.back-to-top{
    width:100%;
    height:100px;
   
    top:230px;
    z-index: 100;
    text-align: right;
    position:relative;
    align-items: end;
    margin:50px 0 0;
    #backtoTopBtn      
    {    background-color: #d3d2d1;
        padding:5px;
     }
     #backtoTopBtn:hover{
        background-color: #e1dede;
    }

}
:target~.back-to-top{
    display:block;
}
footer 
{
    background-color: #efefef;
    height:390px;
    width:100%;
    position: relative;
    top:250px;
    margin-bottom: 0;
}
.footer{
      
    padding:10px  30px;
    font-size: 10px;;
    display: block;
    bottom:0;
    color: #868484;
    td:hover{
        text-decoration: underline;
    }

}
.foot-table{
   width:100%;
   margin:0;
   padding:0;
    border-spacing: 20px;;

th{
    font-size: 12px;
    text-align: left;
}
}
.footline{
    background-color: #efefef;
    width:100%;
    height:40px;
   margin-left:   30px;
   padding-right: 30px;
   padding-bottom: 20px;
    position:relative;
    font-size: 10px;
}
.foot-nav-left{
    width:40%;
    height: 100%;
    display:inline;
    float :left;
    a{
        
        display:inline;
    }
   a:hover{
    text-decoration: underline;
   }
    img{
        width:30px;
      vertical-align: bottom;
    }  
    .globe{
        
        width: 20px;
    }    
    
}
.foot-nav-right 
{
    margin-bottom: 50px;
    width:100%;
    height:100%;
    padding-top: 10px;
    li{
        display:inline;
        
        font-size: 10px;
        padding:0 0  0 15px;
    }
    a:hover{
        text-decoration: underline;
       }
    
}