/*start*/           
@import url('https://fonts.googleapis.com/css2? family=Poppins:wght@300;400;500;600;700;800;900& display=swap');
body{
 background-image: url("https://www.freecodecamp.org/news/content/images/size/w2000/2022/09/jonatan-pie-3l3RwQdHRHg-unsplash.jpg");
background-repeat:no-repeat;                                       background-size:cover;
      background-position:center;
      background-attachment: fixed;
} 
   *{
margin:0;
padding:0;
box-sizing:border-box;
text-decoration:none;
border:none;
outline:none;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

:root{
--bg-color:#3b83c27a; 
--second-bg-color:#58636beb;
--text-color:#4a8bb9eb;
--main-color:#ffffff;
--wt-color:#ffffff; 
--blue-color:#1a82be;
--nav-color:rgb(4, 129, 231);
}

html
{
font-size:62.5%;overflow-x:hidden;
}
section
{
min-height:100vh;
padding:10rem  9% 2rem ;
}
.header
  { 
position:fixed;
top:0;
left:0;
width:100%;
padding: 2rem 9%;
background:#2babff;
display:flex;
justify-content:space-between;
align-items:center;
Z-index:100;
}

.header.sticky{
    border-bottom: .1rem solid rgba(0, 0 ,0, .2);
}
.logo{
font-size:3.7em;
color:var(--main-color);
font-weight:600;
cursor:default;
text-decoration:none;
}
.logo img{
    border-radius: 50%;
    
}
.navbar a{
text-decoration:none;
font-size:1.7rem;
color:#000000;
margin-left:4rem;
 transition:3s;
 }
.navbar a:hover, .navbar a.active{color:var(--main-color);}

  .home-img img{         
width: auto 9vw;
ime-mode:32px;
border-radius:46%;
animation: floatImage 4s ease-in-out infinite;   
 }
 @keyframes floaImage{
     0%{
         transform: translate (0);
     }
50%{
         transform: translate (-2.4rem);
     }     
100%{
         transform: translate (0);
     }    

    }

#menu-icon{
font-size:3.6em;
color:var(--text-color);
display:none;
}
.home{
    display:flex ;
    justify-content: center;
    align-items:center;
}
.social-media a{ 
display:inline-flex;
justify-content:center;
align-items:center;
width:4rem;
height:4rem;
background:transparent;
border:2rem solid  #40b6ff;
border-radius:50%;
font-size:4rem;
color:#c73c3c;
margin:3rem 1.5rem 3rem 0;
    transition: .5s ease;
    }

.social-media a :hover {
    background:var(--main-color);
    color:var(--second-bg-color);
   box-shadow:00  1rem var(--main-color);
}


   .home{
   display:flex;
   justify-content:center;
   align-items:center;
   }
   .home-content h3{
   font-size:3.2rem;
   font-weight:700;
   color: #2babff;
   }
   
   
   .home-content h3:nth-of-type(2){
   margin-bottom:2rem;
   }
   
   span{color:var(--text-color);}
   
   
   .home-content h1{
   font-size:7.6rem;
   font-weight:700;
   line-height:1.3;
   color: #2babff;
   }
   
  .service-container {
      font-size:1.6rem; 
color:var(-wtd-color);
  }
.home-content p
   {
font-size:1.6rem; 
color:#ffffff;
}
    
    .btn{
    text-decoration:none;
    display:inline-block;
    padding:1rem 2.8rem ;
     background:var(--main-color);
    border-radius:4rem;
     box-shadow:0 0 1rem  var(--main-color);
     font-size:1.6rem; 
     color:(--second-bg-color);
     position:0 ;
     top: 0;
     letter-spacing: .1rem;
      font-weight:600;
      transition:5s ease;
}
   
    .btn:hover{box-shadow:none;

    }
.about{
display:flex;
justify-content: center;
align-items: center;
gap:2rem;
background:var(--second-bg-color);
 }
 .about-img img{
   width: auto 9vw;
    border-radius:46%;
    animation: floatImage 4s ease-in-out infinite;
   
 }
 @keyframes floaImage{
     0%{
         transform: translate (0);
     }
50%{
         transform: translate (-2.4rem);
     }     
100%{
         transform: translate (0);
     }        
 }
 
 .heading{
   text-align: center;
   font-size:4.5rem ;  
 }
 .about-content h2{
     text-align: left;
     line-height:1.2;
     
     
 }
 .about-content h3{
     font-size:2.6rem;
     
 }
  
 .about-content p{
     font-size:1.6rem;
     Margin:2rem 0 3rem; 
     color: white;         
 }
.service h2{
margin-bottom:5rem;
color:#000000;
}

.service-container{
   display:flex;
   justify-content: center;
   align-items: center;
   flex-wrap:wrap; 
   gap:2rem;
       
}
.service-container .service-box{
   flex:1 1 30rem;
   background:var(--second-bg-color);
   padding:3rem 2rem 4rem ;
   border-radius:2rem;
   text-align: center;
   border:.2rem solid var(--bg-color);  
   transition:.5s ease;
               
}

.service-container .service-box:hover{
   border-color:var(--main-color);
   transform:scale(1.02); 
}
.table-container{ position: relative;
    flex-direction: row;
    border-radius:2rem;
    overflow:hidden;
    align-items: center;
    justify-content: center;
    display:flex;}

table {
    border-collapse: collapse;
    color: white;
    font-family: sans-serif;
 }
 table, th, td {
    border: 1px solid black;
    text-align: center;
 }
 th, td {
    padding: 5px;
 }
 /* selects odd rows */
 tr:nth-child(odd) {
    background: #36586b;
 }
 /* selects even rows */
 tr:nth-child(even) {
    background: #903C56;
 }
.service-box i{
    font-size:7rem;
    color:var (--main-color);
}
.service-box p{
    font-size:1.6rem;
    color: var(--main-color); 
    margin:1rem 0 3rem;
}

.portfolio{
    background: var(--second-bg-color);
    
    
}
.portfolio-container{
    width: 100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content: center;
}
.swiper{
    width: 80%;
    color:#615858;
    height: fit-content;
}
.swiper-slide img{
    width: auto;
    max-height: fit-content;

}
.swiper .swiper-button-prev, .swiper .swiper-button-next{
 color:#000000;
 font-size:1.3em;
}
.swiper .swiper-pagination-bullet-active{
    background: #000000;
}


.portfolio h2{
    margin-bottom:4rem;
    color:#000000;    
}
.portfolio p{
    font-size:2.3em;
}


.portfolio-container{
    display:flex;
    flex-direction: row;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap:2.5rem;
}


.portfolio-container .portfolio-box{
    position: relative;
    flex-direction: row;
    border-radius:2rem;
    box-shadow:0 0 1rem var(--bg-color);
    overflow:hidden;
    display:flex;
}

.portfolio-box img{
    width:100%;
    transition: .5s ease;
}

.box{
    background: rgba(0,0,0,0.5);
    width: 100%;
    padding:25px;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    text-align: center;
}


.portfolio-box:hover img{
    transform: scale(1.1);
}
.portfolio-box .portfolio-layer{          
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    text-align: center;
    padding:0 4rem;
    transform:translateY(100%);
    transition: .5s ease;
}
.portfolio-box:hover .portfolio-layer{
  transform:translateY(0%);  
}
.portfolio-layer h4{
    font-size:3rem;   
}
.portfolio-layer p{
    font-size:1.6rem;
    margin:3rem 0 1rem;
    color:#fff;
}

.portfolio-layer a{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    width:5rem;
    height:5rem;
    background:var(--text-color);
    border-radius:50%;    
}

.portfolio-layer a i{
    font-size:2rem;
    color:var(--second-bg-color);
}



.contact h2{
    margin-bottom:3rem;
}
.contact form{
    max-width:78rem;
    margin:1rem auto;
    text-align: center;
    margin-bottom:3rem;
}

.contact form .input-box{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;    
}
.contact form{
    max-width:78rem;
    margin:1rem auto;
    text-align: center;
    margin-bottom:3rem;
}

.contact form .input-box{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;    
}

.contact form .input-box input,
.contact form textarea{
    width:100%;
    padding:1.5rem;
    font-size:1.6rem;
    color:var(--text-color);
    background:var(--second-bg-color);
    border-radius:.8rem;
    margin: .7rem 0;
}
.contact form .input-box input{
    width:49%;
}

.contact form textarea{
    resize:none ;
    
}

.contact form #btn{
    margin-top:2rem;
    cursor:pointer;
    
}
.footer{
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap:wrap;
    max-width:auto;
    padding:2rem 9%;
    background:#0d89c2e0;
}

.footer-text p{
    font-size:1.6rem;
    
}
.footer-iconTop a{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background:var(--main-color);
    border-radius: .8rem;
   transition: .5s ease; 
}

.footer-iconTop a:hover{
    box-shadow:0  0 1rem var(--main-color);
}
.footer-iconTop a i{
    font-size:2.4rem;
    color:var(--second-bg-color);
    
}
.footer{
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap:wrap;
    max-width:auto;
    height:fit-content;
    background:#14a9edb4;
    background-color: #2bb1c9;
    padding: 36px 0px;
}

.footer-text p{
    font-size:1.6rem;
    
}
  @media(max-width:365px){
  .footer-text{
   flex-direction:column-reverse;
 }
 .footer p{
   text-align: center;
   margin-top:2rem;        
   }
 }
.footer-iconTop a{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background:var(--main-color);
    border-radius: .8rem;
   transition: .5s ease; 
}

.footer-iconTop a:hover{
    box-shadow:0  0 1rem var(--main-color);
}



.footer-iconTop a i{
    font-size:2.4rem;
    color:var(--second-bg-color);
    
}

/* BREAKPOINTS */
@media(max-width:1200px){
       html{font-size:55%;}    
}


@media(max-width:991px){
       .header{padding: 2rem 3%;} 
       section {padding:10rem 3% 2rem;} 
       .service{padding-bottom:7rem ;}
       
       .footer{padding:2rem 3%;}  
}

@media(max-width:768px){
       #menu-icon{display:block;} 
         
       .navbar{
           position: absolute;
           top:100%;
           left:0;
           width:100%;
           padding:1rem 3%;
           background:var(--nav-color);
           border-top: .1rem solid rgba(0,0,0,.2);
           box-shadow:0 .5rem 1rem rgba(0,0,0,.2);
           display: none;
           
       }
              
.navbar.active {
    display: block;
    
}       
       
        
.navbar a {
    display:block;
    font-size:2rem;
    margin:3rem 0;
}       
       
    .home{
        flex-direction:colum;        
    }   
.home content h3{
    font-size:2.6rem;
}       
.home-content  h1{
    font-size:5rem;
}     


.home-img img{
    width:7vw;
    margin-top:4rem;
}
.about{
    flex-direction:column-reverse;    
}
.about img{
    width:78vw;
    margin-top:4rem;
}

.service h2{
    margin-bottom: 3rem;    
}
.portfolio h2{
    margin-bottom: 3rem;
}
.portfolio-container{
    grid-template-columns: repeat(2 1fr);
    }
       
}

@media(max-width:617px){
.portfolio{
grid-template-columns:1fr;
      }    
}
@media(max-width:450px){
html{
    font-size:50%;
}
.contact form .input-box input{
    width:100%;
}   
}
@media( max-width:365px){
.home-img img{
    width:90vw;
    border-radius:56%;
}
.about-img img{
   width:90vw; 
   border-radius:56%;
}
.footer{
    flex-direction:column-reverse;
}
.footer p{
    text-align: center;
    margin-top:2rem;        
    }
}
/* Media Queries@media(max-width: 768px){} */