/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /* Color mode HSL(hue, saturation, lightness)*/
  /*
        Purple: hsl(250, 66%, 75%)
        Blue: hsl(207, 90%, 72%)
        Pink: hsl(356, 66%, 75%)
        Teal: hsl(174, 63%, 62%)
  */
  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;
   
  --first-color:#205d88 ;
  /* hsl(var(--first-hue), var(--sat), var(--lig)); */
  --first-color-alt: hsl(var(--first-hue), var(--sat), 71%); /* -4% */
  --title-color: hsl(var(--second-hue), 15%, 95%);
  --text-color: hsl(var(--second-hue), 8%, 75%);
  --text-color-light: hsl(var(--second-hue), 4%, 55%);
  --body-color: hsl(var(--second-hue), 48%, 8%);
  --container-color: hsl(var(--second-hue), 32%, 12%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 1.75rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semibold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Responsive typography */
@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 2.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
textarea {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
  transition: .4s; /* for light mode animation */
}

h1, h2, h3 {
  color: var(--title-color);
  font-weight: var(--font-semibold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

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

/*=============== THEME ===============*/


/*========== Variables Dark theme ==========*/


/*========== 
    Color changes in some parts of 
    the website, in light theme
==========*/


/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 968px;
  margin-left: 1rem;
  margin-right: 1rem;
}

.grid {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

.main {
  overflow: hidden;
}

.section {
  padding: 4.5rem 0 1rem;
}

.section__title, 
.section__subtitle {
  text-align: center;
}

.section__title {
  font-size: var(--h2-font-size);
  color: var(--first-color);
  margin-bottom: 2rem;
}

.section__subtitle {
  display: block;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

/*=============== HEADER & NAV===============*/
 .header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--body-color);
  z-index: var(--z-fixed);   
 }

.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav_logo{
  color: #205d88;
  font-weight: var(--font-semibold);
  transition: .5S;
  /* var(--first-color-alt) */
}

.nav_logo:hover{
  color:#2cb3ec;
  
}
.nav_menu{
  position: fixed;
  bottom: 1.1rem;
  background-color: hsla(var(--second-hue), 45%, 35%, 15%);
  width: 90%;
  border-radius: 3rem;
  padding: .5rem 1.5rem;
  backdrop-filter: blur(6px);
  
}
.nav_list{
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.nav_links{
  color: var(--text-color) ;
font-size: 1rem;
padding: .5rem;
display: flex;
border-radius: 5rem;
}

/* Active link */
.active-link{
  background: rgb(16,153,212);
background: linear-gradient(180deg, rgba(16,153,212,1) 0%, rgba(2,0,36,1) 100%);
box-shadow: 0 0 15px hsla(var(--first-hue), var(--sat), var(--lig), .4);

}
/* background: linear-gradient(190deg,
hsla(var(--first-hue), var(--sat), var(--lig), 1),
hsla(var(--first-hue), var(--sat), var(--lig), .2),
); */

/* Change background header */
.scroll-header{
  box-shadow: 0 4px 4px hsla(80,50%, 5%, .5);
}

/*=============== HOME ===============*/
.home_container{
  position: relative;
  row-gap: 4.5rem;
  padding-top: 2.2rem;
}

 .home_data{
  text-align: center;
 }

.home_greeting, .home_education{
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
}

.home_greeting{
  display: block;
  margin-bottom: .3rem;
  color: var(--title-color);
}

.home_education{
  margin-bottom: 2rem;
  color: var(--text-color);
}

.home_name{
  font-size: var(--biggest-font-size);
}

.home_img{
  width: 150px;
}

.home_handle{
  justify-self: center;
  width: 200px;
  height: 300px;
  background: rgb(16,153,212);
background: linear-gradient(180deg, rgba(16,153,212,1) 0%, rgba(2,0,36,1) 100%);
border-radius: 9rem 9rem .5rem .5rem;
  display: flex;  
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

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

.home_social,.home_scroll{
  position: absolute;
}

.home_social{
  bottom: 7rem;
  left: 0;
  display: grid;
  row-gap: 1rem;
}

.home_social-link{
  background-color: var(--container-color);
  justify-content: center;
  color:#205d88;  
  /* #2c7bb4 */
  padding: .3rem;
  display: flex;
  font-size: 1.5rem;
  border-radius: 10rem;
  transition: .5s;
}

.home_social-link:hover{
background-color: (--first-color);
  color: #2cb3ec;
}

.home_social::after{
  content: '';
 width: 40px;
  height: 3px;
background-color: #205d88;
transform: rotate(90deg) translate(30px, .2px);
}

.home_scroll{
  color:  #205d88;
  right: -1.5rem;
  bottom: 6rem;
  display: grid;
  justify-items: center;
  row-gap: 2.5rem;
  transition: .3s;
}

.home_scroll
.home_scroll-icon{
font-size: 2rem;
}

.home_scroll-name{
  font-size:.8rem;
  transform: rotate(-90deg);
}

/*=============== BUTTONS ===============*/
.button{
  padding:.5rem 1rem;
  background: #205174;
  color:var(--body-color) ;
  font-size: 1rem;
  border-radius: .4rem;
  box-shadow: 0 0 15px hsla(var(--first-hue), var(--sat), var(--lig), .4);
  transition: .5s;
  align-items: center;
  justify-self:center ;
  font-weight: bolder;
  display: flex;
  gap: .6rem;
}

.button:hover{
  background:  #2cb3ec;
}

.box_icon{
  font-size:1.5rem;
}

/*=============== ABOUT ===============*/

.about_container{
  row-gap: 1rem;
}

.about_img{
   width: 250px;
   border-radius: 1.3rem;
   justify-self: center;
}

.about_data{
  text-align: center;
}
 
.about_info{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-bottom: 2rem;
}

.about_box{
  background-color: var(--container-color);
border-radius: .5rem;
padding: 2rem  1rem;
}
.about_icon{
  font-size:2rem ;
  color: var(--first-color);
  margin-bottom: .5rem;
}

.about_title{
  font-size: var(--small-font-size);
}

.about_subtitle{
  font-size: var(--tiny-font-size);
}

.about_description{
  margin-bottom: 2rem;
}


/*=============== SKILLS ===============*/


/*=============== SERVICES ===============*/

/* .portfolio .box-container{ */
  .services_container{
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  padding:2rem 0;
}

/* .portfolio  .box-container .box{ */
  .services_card{
  flex: 15rem;
  text-align: center;
  padding: 2rem 4rem;
  border-radius: .5rem;
  background-color: var(--container-color);
  overflow: hidden;
  cursor: pointer;
}


.services_title{
  font-size: 1rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.services_button{
  color: var(--first-color);
font-size: var(--small-font-size);
display: flex;
align-items: center;
justify-content: center;
column-gap: .3rem;
transition: .5s
}

.services_button:hover{
    color:  #2cb3ec;
}

.services_button:hover .services_icon{
  transform: translateX(.3rem);
}

/* Services modal */


/*Active modal*/


/*=============== WORK ===============*/
.work_container{
  display: flex;
  flex-wrap: wrap;
   padding-top: 1rem;

}

/*======= for WORK MENU FILTER =============== */

/* .work_filters{
  display: flex;
  justify-content: center;
margin-bottom: 1rem;
}

 .work_item{
  cursor: pointer;
  color: var(--title-color);

 } */

 .work_card{
  flex: 15rem;
  background-color: var(--container-color);
  padding: .8rem;
  border-radius: .6rem;
 }

.work_img{
  width: 20rem;
  border-radius: .8rem;
  margin-bottom: .2rem;
}

.work_title{
  margin-bottom: .3rem
}

.work_button{
  display: flex; 
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  width:max-content ;
  color: var(--first-color);
  font-size: var(--small-font-size) ;
  font-weight: var(--font-medium);
  transition: .5s;
}

.work_button:hover{
  color:  #2cb3ec;
}

.work_icon{
  font-size: 1.2rem;
}

.work_button:hover .work_icon{
  transform: translateX(.3rem);
}


/* Active item work*/


/*=============== TESTIMONIAL ===============*/

 
.testimonial_card{
  background-color: var(--container-color);
  padding: 1.3rem 1.5rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
}

.testimonial_img{
  width: 60px;
  border-radius:2rem ;
  margin-bottom: .5rem; 
}
.testimonial_name{
  font-size: var(--font-medium);
  margin-bottom: .5rem;
}

.testimonial_description{
  font-size: var(--small-font-size);
}
 
 .swiper-pagination-bullet{
 background-color: white;
 }

.swiper-pagination-bullet-active{
  background-color: rgb(17, 19, 187);
}


/* Swiper class */


/*=============== CONTACT ===============*/
#contact{
  padding-top: 4rem ;
}

#contact .section__title{
  margin-bottom: .5rem;
}

.contact_container{
  row-gap: 5rem;
  padding-bottom: 3rem;
  
}

.contact_title{
  text-align: center;
  /* font-size: var(--h3-font-size); */
  margin-top: 1.2rem;
margin-bottom: 1.2rem;
}

.contact_info{
  display: grid;
   gap: 1rem;
}

.contact_card{
  padding: 1rem;
  background-color: var(--container-color);
  border-radius: .5rem;
  text-align: center;
}

.contact_card-icon{
  font-size: 2rem;
  color: var(--first-color);
}

.contact_card-title{
font-size: var(--small-font-size);
font-weight: var(--font-semibold);
}

.contact_card-data{
  font-size: var(--smaller-font-size);
  display: block;
}

.contact_button{
  font-size: var(--smaller-font-size);
  color: var(--first-color);
  display: flex;
  align-items: center; 
  justify-content: center;
  column-gap: .5rem;
  transition: .4s;
}

.contact_button:hover{
  color:  #2cb3ec;
}

.contact_button:hover .contact_icon{
  transform: translateX(.3rem);
}

.contact_form-div{
  position: relative;
  margin-bottom: 1rem;
  height: 2.82rem;
}

.contact_form-input{
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  border: 2.5px solid var(--text-color-light);
  background: none;
  color: var(--text-color);
  outline: none;
  padding: 1rem;
  border-radius: .4rem;
  z-index: 1;
}

.contact_form-label{
  position: absolute;
  top: -.8rem;
  left: .5rem;
  font-size: var(--smaller-font-size);
  padding: .2rem;
  background-color: var(--body-color);
  z-index: 10;
}

.contact_form-area{
  height: 15rem;
}

/*=============== FOOTER ===============*/
.footer{
  background-color: var(--first-color);
}

.footer_container{
  padding: 2rem 0 4.5rem;
}

.footer_title, .footer_link{
  color: var(--body-color);
}

.footer_title{
  text-align: center;
  margin-bottom: 1rem;
}

.footer_list{
  display: flex;
  column-gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.footer_social{
  display: flex;
  justify-content: center;
  column-gap: 1rem;
  margin-bottom: .5rem;
}

.footer_social-link{
  color: var(--body-color);
  font-size: 1.2rem;
  padding: .1rem .4rem;
  border-radius: .8rem;
  display: inline;
}


.link_icon{
  background-color: var(--body-color);
  color: var(--first-color);
  font-size: 1.03rem;
  border-radius: .1rem;
  padding: .03rem;
}

.rg_icon{
  padding-top: .27rem;
  font-size: 1.25rem;
}

.footer_cright{
  display: block;
  margin-top: 2rem;
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--container-color);
}

.dev_link{
  color: rgb(145, 145, 145);
}


/*=============== SCROLL BAR ===============*/


/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width:350px )
{

  .nav_menu{
    padding: .5rem  1rem;
  }


.home_buttons{
  flex-direction: column;
}

.home_social{
 bottom: 4rem;
}

.home_social-link{
  font-size: 1rem;
  padding:  .4rem;
}

.home_social::after{
  width: 30px;
  height: 3px;
  transform: rotate(90deg) translate(8px, .2px);
}

.home_scroll{
  gap: 2rem;
  bottom: 4rem;
}

.home_scroll
.home_scroll-icon{
  font-size: 1.4rem;
}
 
.home_scroll-name{
font-size: .7rem;
}

.home_handle{
  width: 160px;
  height: 220px;
}

.home_img{
  width: 140px;
}

.about_info{
  grid-template-columns: repeat(2,1fr);
}

}

/* For medium devices */

@media screen and (min-width:350px )
 and (max-width:580px ){

  .home_container{
    padding: 0;
  }

  .home_social{
    bottom: 3rem;
   }
   
   .home_social-link{
     font-size: 1rem;
     padding:  .4rem;
   }
   
   .home_social::after{
     width: 30px;
     height: 3px;
     transform: rotate(90deg) translate(8px, .2px);
   }
   
   .home_scroll{
     gap: 2rem;
     bottom: 3rem;
   }
   
   .home_scroll
   .home_scroll-icon{
     font-size: 1.4rem;
   }
    
   .home_scroll-name{
   font-size: .7rem;
   }

   .home_handle{
    width: 200px;
    height: 270px;
  }
  
  .home_img{
    width: 180px;
  }

}


/* For medium devices */

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

  .nav_menu{
     width:340px;
     left: 0;
     right: 0;
     margin: 0 auto;

  }

  .home_social{
    bottom: 5rem;
   }
   
   .home_social-link{
     font-size: 1rem;
     padding:  .4rem;
   }
   
   .home_social::after{
     width: 30px;
     height: 3px;
     transform: rotate(90deg) translate(8px, .2px);
   }
   
   .home_scroll{
     gap: 2rem;
     bottom: 5rem;
   }
   
   .home_scroll
   .home_scroll-icon{
     font-size: 1.4rem;
   }
    
   .home_scroll-name{
   font-size: .7rem;
   }

   .home_handle{
    width: 200px;
    height: 270px;
  
  }
  
  .home_img{
    width: 180px;
  }


.about_info{
  grid-template-columns: repeat(2, 250px);
  justify-content: center;
}

.about_description{
  padding: 0 1.5rem;
}

.services_container{
  grid-template-columns: repeat(2, 200px);
  justify-content: center;
  gap: 1rem;
}

.work_container{
  justify-content: center;
}
}


/* For large devices */
@media screen and (min-width: 992px) {

  .nav_menu{
    width:440px;
    /* height: ; */
    left: 0;
    right: 0;
    margin: 0 auto;

 }

  .container{
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .services_container{
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 1rem;
  }

.section__title{
  margin-bottom: 3rem;
}
    
.home_handle{
  width: 300px;
  height: 400px;
}

.home_img{
width: 260px;
}

.home_social-link{
  font-size: 1.5rem;
  padding: .5rem;
}

.home_social::after{
  transform: rotate(90deg) translate(10px, -4px) ;
}

.home_scroll
.home_scroll-icon{
  font-size: 2rem;
}

  
.home_scroll-name{
  font-size: .8rem;
  }

.about_container{
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  column-gap: 5rem;
}


.about_img{
  width: 350px;
}

.about_description{
padding: 0 1rem;
margin: 0;
}

.services_container{
  margin-bottom: 2.2rem;
}
 
.testimonial_container{
  width: 800px;
}

  

.testimonial_card{
  padding: 1.3rem 2rem;
}

.contact_container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
  padding-bottom: 3rem;
  column-gap: 5rem;
  
}
}
 
/* .footer_container{
 

} */