@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300&display=swap');
@import url("https://use.typekit.net/xmw5fzw.css");
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');



*{
 margin: 0;
 padding: 0; 
 box-sizing: border-box; 
 text-decoration: none;
}

body{
    font-family: 'EB Garamond', serif, 'Roboto',sans-serif;

}
html{
    scroll-behavior: smooth;
}

.container{
    max-width: 1170px;
    padding: 1em ;
    margin: 0 auto;
    display: flex;
	position: relative;
	overflow-x: hidden;
    

}


:root{
	--light:#fff;
	--dark:#181b24;
	--dark-color: rgb(11, 11, 11);
	--dark-color-alt: #3c4858;
	--grey:rgb(137, 148, 149);
	--red:#660000;
	--SectionGrey:rgb(242, 242, 242);
	--grey-color: #f9fafd;
	--grey-color-alt: #8492a6;
	--SectionWhite:#fff;
	--pink:#fdf7f7;
	--black:#000;
	--gold:#ccae4c;
	--yellow: #e0e405;
	--yellowish: #e9e9d0;
	--orangemonet:#c05b3c;
	--greenmonet:#2d3834;
	--creammonet:#b88930;
	--goldmonet:#b28a47;
	--purplemonet:rgb(107, 0, 133);
	--purplemonetbdark:rgb(59, 5, 73);
	--pinkmonet:#f6ebe5;
	--hdbackground:rgb(232, 227, 195);
	--cream:rgb(189, 164, 125);
  --teal:#008080;
  --bg-size: 100% 100%;
  --main_color: #fff;
  --title: 'EB Garamond', serif;
  --font-para: 'David Libre', serif;
  --btn-color: #bbe1fa;
  --btn-font-color: #000;
  --btn-font: 1.5rem;
  --eff: .3s all ease;
  --body-background:hsl(84, 3%, 94%);
--text-gray: #3f4954;
--text-light : #686666da;
--bg-color: #0f0f0f;
--white: #ffffff;
--midnight: #104f55;
--cloudy:#b3aeaa;
--btnblue:#3498db;
--crimson:#dc143c;
--nakita:#1491b6;
--nakita2:#0b407f;
--nakita3: #222d70;
--footerbar: rgb(34, 34, 34);
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* all similar content styling codes */
section{
    padding: 100px 0;
}
.max-width{
    max-width: 1300px;
    padding: 0 40px;
    margin: auto;
}

/*controls the widht of the Skils2,3,4,5 */
.max-width1{
    max-width: 1300px;
    padding: 0 40px;
    margin: auto;
}
.about, .services, .skills, .skills2, .skills5, .bg-primary .teams, .contact, footer{
    font-family: 'EB Garamond', serif;
  

}
.about .about-content, 
.services .serv-content,
.skills .skills-content,
.skills2 .skills2-content,
.skills5 .skills5-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
   
    
}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: var(--nakita3);
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color:var(--nakita);
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}

/* navbar styling */
.navbar{
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'EB Garamond', serif;
    transition: all 0.3s ease;
    
    

}
.navbar.sticky{
    padding: 15px 0;
    background:var(--nakita);
    
}
.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a{
    color: #fff;
    font-size: 40px;
    font-weight: 400;
    
}
.navbar .logo a span{
    color:var(--nakita);
    transition: all 0.3s ease;
    
  
}
.navbar.sticky .logo a span{
    color: #fff;
}
.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-left: 2em;
    transition: color 0.3s ease;
    
}
.navbar .menu li a:hover{
    color:var(--SectionWhite);
}
.navbar.sticky .menu li a:hover{
    color: #fff;
}

/* menu btn styling */
.menu-btn{
    color: var(--nakita2);
    font-size: 23px;
    cursor: pointer;
    display: none;

}

.menu-btn1{
    color: var(--nakita2);
    font-size: 23px;
    cursor: pointer;
    display: none;
}

.menu-btn:hover{
    color: var(--nakita3);
   
}
.menu-btn1:hover{
    color: var(--SectionWhite);
   
}

/* menu btn underline */
.menu-btn1::after{
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: var(--SectionWhite);
    transition: width .3s;
    }

    .menu-btn1:hover::after{
width: 100%;
transition: width .3s;
color: var(--nakita3);
}

/* end menu btn underline */

.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background:var(--nakita);
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}

  
/* home section styling */
.home{
    display: flex;
    background: url("images/Fotolia_Biuro Legal Best2.png") no-repeat center;

    height: 100vh;
    color:var(--nakita);
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'EB Garamond', serif;
}
.home .max-width{
    margin: auto 0 auto 30px;
}
.home .home-content .text-1{
    font-size: 27px;
    color:var(--nakita2);
    font-weight: 600;
   
    
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    margin-left: -3px;
    color:var(--nakita);
    text-transform: uppercase;
}
.home .home-content .text-3{
    font-size: 35px;
    margin: 5px 0;
    padding: 0 .2em;
    color: var(--nakita2);
    font-weight: 400;
    text-transform: uppercase;
    background-color: rgb(242, 242, 242, 0.5);
    margin-bottom: 3.5em;
}
.home .home-content .text-3 span{
    color:var(--nakita);
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background:var(--nakita);
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid var(--nakita);
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color:var(--nakita);
    background: none;
}

/* about section styling */
.about .title::after{
    content: "who i am";
}

.about .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}

.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;
}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color:var(--nakita);
}
.about .about-content .right p{
    text-align: justify;
}
.about .about-content .right a{
    display: inline-block;
    background:var(--nakita);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid var(--nakita);
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color:var(--nakita);
    background: none;
}

/* End about section styling */



/*Start More than section ballet split */





.bg-primary{
	background-color: var(--nakita);
    padding: 1em 0em 0em 0em;
    margin: 0;
    
}

.bg-primary .splitvid {
	display: flex;
	flex-direction: column;
	margin-top: 0em;
	width: auto;
  }

  .bg-primary .splitvid__maintitle{
	width: 100%;
	font-size: 40px;
	font-weight: 100;
	color: var(--SectionWhite);
	padding: .2em;
    text-align: center;
    font-family: 'EB Garamond', serif;
	

  }
  .bg-primary .splitvid__title{
		font-size: 30px;
		font-weight: 300;
		color: var(--SectionWhite);
		padding: .5em 0 .5em 0;
		text-align: start;




  
  }
  
  .bg-primary .splitvid__para{
	font-size: 19px;
	color: var(--SectionWhite);
	font-weight: 300;
	padding: 0em 0 .2em 0;
  }

  
  .bg-primary .splitvid .splitvideo {
	  display: block;
	  max-width: 100%;
	}

	
    /* Split tablet & small screeen */
  @media (min-width: 55em) {
	.bg-primary .splitvid {
	  flex-direction: row;
	}
  
	.splitvid > * {
	  flex-basis: 100%;
	}
  
	.splitvid > * + * {
	  margin-left: 2em;
	}

	.bg-primary .splitvid__maintitle{
		padding: .2em;
	
	  }
	  .bg-primary .splitvid__title{
			padding: 0em 0 .5em 0;
			
			
	  
	  }
	  
	  .bg-primary .splitvid__para{
		padding: 0em 0 1em 0;
	
	
	  }
	  .bg-primary .splitvid .splitvideo {
		display: block;
		max-width: 100%;
	
	  }

  
  }

	/* End Split tablet & small screeen */
	
  
/*End More than section ballet split */








/* services section styling 
.services, .teams{
    color:#fff;
    background: #111;
}
.services .title::before,
.teams .title::before{
    background: #fff;
}
.services .title::after,
.teams .title::after{
    background: #111;
    content: "what i provide";
}
.services .serv-content .card{
    width: calc(33% - 20px);
    background: var(--footerbar);
    text-align: center;
    border-radius: 6px;
    padding: 20px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.services .serv-content .card:hover{
    background:var(--nakita);
}
.services .serv-content .card .box{
    transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
    transform: scale(1.05);
}
.services .serv-content .card i{
    font-size: 50px;
    color:var(--nakita);
    transition: color 0.3s ease;
}
.services .serv-content .card:hover i{
    color: #fff;
}
.services .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
*/






/* skills2 section styling */

.skills2{
background-color: rgb(232, 227, 195, 0.4);
color: var(--nakita3);


}

.skills2 .title{
    content: "";
    color: rgb(34, 34, 34, .5);
    font-size: 45px;
    font-weight: 400;
    font-family: 'EB Garamond', serif;
   
   
}




.skills2 .title::after{
    content: "Simply the Best";
    background-color: var(--nakita3);
    color: var(--SectionWhite);
    font-size: 20px;
    font-weight: 200;
    font-family: 'EB Garamond', serif;
   
   
}

.skills2 .skills2-content .column{
    width: calc(90% - 30px);
    padding-left: 2em;
}

@media only screen and (max-width: 700px){
.skills2 .skills2-content .column{
    width: calc(95% - .5em);
    padding-left: 0em;
}
}


.skills2 .skills2-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--black);

}
.skills2 .skills2-content .left p{
    text-align: justify;
    color: var(--grey);
    font-family: 'EB Garamond', serif;
    font-size: 20px;
   
}

.skills2 .skills2-content .left ul{
    text-align: justify;
    color: var(--grey);
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    padding: .2em 0em .2em 1.4em;

   
}


.skills2 .skills2-content .left ul p{
 padding: 0em 0em .2em .1em;
   
}

.skills2 .skills2-content .left ul li{
    padding: .5em 0em .2em .1em;

   
}

/* Skills2 Button -Menu*/

.skills2 .skills2-content .left a{
    display: inline-block;
    background: rgb(34, 34, 34, .5);
    color: var(--SectionWhite);
    font-size: 25px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.skills2 .skills2-content .left a:hover{
    color:var(--nakita);
    background: none;
}

/* End Skills2 Button -Menu*/

.skills2 .skills2-content .right .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    
 
}
.skills2 .skills2-content .right p{
    text-align: justify;
}
.skills2 .skills2-content .right .bars{
    margin-bottom: 15px;
}
.skills2 .skills2-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills2 .skills2-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills2 .skills2-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills2 .skills2-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background:var(--nakita);
}
.skills2-content .right .html::before{
    width: 90%;
}
.skills2-content .right .css::before{
    width: 60%;
}
.skills2-content .right .js::before{
    width: 80%;
}
.skills2-content .right .php::before{
    width: 50%;
}
.skills2-content .right .mysql::before{
    width: 70%;
}


/* End skills2 section styling */




/* skills section styling */

.skills{
    background-color: var(--footerbar);
    color: var(--SectionWhite);
    }
    
    .skills .title::after{
        content: "See What the Professionals have to say.";
        color: var(--nakita);
        font-size: 20px;
        font-weight: 600;
        font-family: 'EB Garamond', serif;
        background-color: var(--footerbar);
    }
    
    
    .skills .skills-content .column{
        width: calc(90% - 30px);
    }
    .skills .skills-content .left .text{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--black);
    
    }
    .skills .skills-content .left p{
        text-align: justify;
        color: var(--SectionWhite);
        font-family: 'EB Garamond', serif;
        font-size: 18px;
        font-weight: 200;
       
    }

    .skills .skills-content .left p strong{
        text-align: justify;
        color: var(--nakita);
        font-family: 'EB Garamond', serif;
        font-size: 18px;

    }


    .skills .skills-content .left a{
        display: inline-block;
        background:var(--nakita);
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 8px 16px;
        margin-top: 20px;
        border-radius: 6px;
        border: 2px solid var(--nakita);
        transition: all 0.3s ease;
    }
.skills .skills-content .left a:hover{
    color:var(--nakita);
    background: none;
}

.skills .skills-content .right .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    
 
}
.skills .skills-content .right p{
    text-align: justify;
}
.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills .skills-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background:var(--nakita);
}
.skills-content .right .html::before{
    width: 90%;
}
.skills-content .right .css::before{
    width: 60%;
}
.skills-content .right .js::before{
    width: 80%;
}
.skills-content .right .php::before{
    width: 50%;
}
.skills-content .right .mysql::before{
    width: 70%;
}
/* End skills section styling */





/* skills3 section styling */

.skills3{
    background-color: var(--nakita3);
    color: var(--SectionWhite);
    
    }
    
    .skills3 .title::after{
        content: "";
        color: var(--nakita);
        font-size: 20px;
        font-weight: 600;
        font-family: 'EB Garamond', serif;
       
       
    }


    .skills3 .skills3-content .left .text{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--black);

    }


    .skills3 .skills3-content .column{
    width: calc(95% - 30px);
    padding-left: 1em;
}

@media only screen and (max-width: 700px){
    .skills3 .skills3-content .column{
    width: calc(100% - .5em);
    padding-left: 0em;
}
}


    .skills3 .skills3-content .left p{
        text-align: left;
        color: var(--SectionWhite);
        font-family: 'EB Garamond', serif;
        font-size: 20px;
        padding: 0em .1em;
      
      

        
       
    }
    .skills3 .skills3-content .left a{
        display: inline-block;
        background:var(--nakita);
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 8px .1em;
        margin-top: 20px;
        border-radius: 6px;
        border: 2px solidvar(--nakita);
        transition: all 0.3s ease;
    }
 
    .skills3-list {
        display: inline-block;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 8px .1em;
        margin-top: 20px;
        border-radius: 6px;
        transition: all 0.3s ease;
        list-style: disc;
        margin: .5em 1em .2em 1em;
    }
    
    /* End skills3 section styling */
    


    /* skills4 section styling */

.skills4{
    padding: .5em 0em;
    background-color: var(--SectionGrey);
   
    
    }
    
    .skills4 .title::after{
        content: "";
        color: var(--nakita);
        font-size: 20px;
        font-weight: 600;
        font-family: 'EB Garamond', serif;
       
       
    }
    

    .skills4 .skills4-content .left .text{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--black);

    }

    .skills4 .skills4-content .column{
        width: calc(95% - 30px);
        padding-left: 1em;
    }
    
    @media only screen and (max-width: 700px){
        .skills4 .skills4-content .column{
        width: calc(100% - .5em);
        padding-left: 0em;
    }
    }
    

.skills4 .skills4-content .left h1{
    text-align: left;
    font-family: 'EB Garamond', serif;
    font-size: 40px;
    color: var(--nakita);
    text-align: center;
    align-content: center;

    
   
}
    .skills4 .skills4-content .left p{
        text-align: left;
         font-size: 20px;
        color: var(--nakita3);
        text-align: center;
        font-weight: 300;
        margin: 0em 2em;

      

        
       
    }
    .skills4 .skills4-content .left a{
        display: inline-block;
        background:var(--nakita);
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 8px 16px;
        margin-top: 20px;
        border-radius: 6px;
        border: 2px solidvar(--nakita);
        transition: all 0.3s ease;
    }
 
    .skills4-list {
        display: inline-block;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 8px 16px;
        margin-top: 20px;
        border-radius: 6px;
        transition: all 0.3s ease;
        list-style: disc;

    }
    
    /* End skills4 section styling */




   

/* skills5 section styling */

.skills5{
    background-color: rgb(232, 227, 195, 0.4);
    color: var(--nakita3);
    padding-top: 2.5em;
    }
    
    .skills5 .title{
        content: "";
        color: rgb(34, 34, 34, .5);
        font-size: 45px;
        font-weight: 400;
        font-family: 'EB Garamond', serif;
       
       
    }
    
    
    
    .skills5 .title::after{
        content: "Latest Updates";
        background-color: var(--nakita3);
        color: var(--SectionWhite);
        font-size: 20px;
        font-weight: 200;
        font-family: 'EB Garamond', serif;
       
       
    }

    .skills5 .skills5-content .column{
        width: calc(90% - 30px);
        padding-left: 2em;
    }
    
    @media only screen and (max-width: 700px){
        .skills5 .skills5-content .column{
        width: calc(95% - .5em);
        padding-left: 0em;
    }
    }

    .skills5 .skills5-content .left .text{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--black);
    
    }
    .skills5 .skills5-content .left p{
        text-align: justify;
        color: var(--grey);
        font-family: 'EB Garamond', serif;
        font-size: 18px;
       
    }
    
    .skills5 .skills5-content .left ul{
        text-align: justify;
        color: var(--grey);
        font-family: 'EB Garamond', serif;
        font-size: 18px;
        padding: .2em 0em .2em 1.4em;
    
       
    }
    
    
    .skills5 .skills5-content .left ul p{
     padding: 0em 0em .2em .1em;
       
    }
    
    .skills5 .skills5-content .left ul li{
        padding: .5em 0em .2em .1em;
    
       
    }
    
    /* Skills5 Button -Menu*/

    .skills5 .skills5-content .left a{
        display: inline-block;
        background: rgb(34, 34, 34, .5);
        color: var(--SectionWhite);
        font-size: 25px;
        font-weight: 500;
        padding: 8px 16px;
        margin-top: 20px;
        border-radius: 6px;
        
        transition: all 0.3s ease;
    }
    .skills5 .skills5-content .left a:hover{
        color:var(--nakita);
        background: none;
    }
    /* End Skills5 Button -Menu*/
    
    .skills5 .skills5-content .right .text{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        
     
    }
    .skills5 .skills5-content .right p{
        text-align: justify;
    }
    .skills5 .skills5-content .right .bars{
        margin-bottom: 15px;
    }
    .skills5 .skills5-content .right .info{
        display: flex;
        margin-bottom: 5px;
        align-items: center;
        justify-content: space-between;
    }
    .skills5 .skills5-content .right span{
        font-weight: 500;
        font-size: 18px;
    }
    .skills5 .skills5-content .right .line{
        height: 5px;
        width: 100%;
        background: lightgrey;
        position: relative;
    }
    .skills5 .skills5-content .right .line::before{
        content: "";
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        background:var(--nakita);
    }
    .skills5-content .right .html::before{
        width: 90%;
    }
    .skills5-content .right .css::before{
        width: 60%;
    }
    .skills5-content .right .js::before{
        width: 80%;
    }
    .skills5-content .right .php::before{
        width: 50%;
    }
    .skills5-content .right .mysql::before{
        width: 70%;
    }
    
    /* End skills5 section styling */
    







/* teams section styling */

.teams {
    background: var(--black);
color: var(--SectionWhite);
}


.teams .title::after{
    content: "";
}
.teams .carousel .card{
    background: var(--footerbar);
    border-radius: 6px;
    padding: 25px 35px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover{
    background:var(--nakita);
}
.teams .carousel .card .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover .box{
    transform: scale(1.05);
}
.teams .carousel .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
.teams .carousel .card img{
    height: 300px;
    width: 300px;
    object-fit: cover;
    border-radius: 0%;
    border: 5px solid var(--nakita);
    transition: all 0.3s ease;
}
.teams .carousel .card:hover img{
    border-color: #fff;
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid crimson!important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: crimson!important;
}

/* contact section styling */
.contact .title::after{
    content: "get in touch";
}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i{
    font-size: 25px;
    color:var(--nakita);
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: #333;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .email{
    margin-left: 10px;  
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'EB Garamond', serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
    padding-top: 10px;
    resize: none;
}
.contact .right form .button{
    height: 47px;
    width: 170px;
}
.contact .right form .button button{
    width: 100%;
    height: 100%;
    border: 2px solid var(--nakita);
    background:var(--nakita);
    color: #fff;
    outline: none;
    font-size: 20px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.contact .right form .button button:hover{
    color:var(--nakita);
    background: none;
}


/* responsive media query start */
@media (max-width: 1300px) {
    .home .max-width{
        margin-left: 0px;
    }
}

@media (max-width: 1104px) {
    .about .about-content .left img{
        height: 350px;
        width: 350px;
        
    }
}

@media (max-width: 991px) {
    .max-width{
        padding: 0 50px;
    }
    .max-width1{
        padding: 0 50px;
    }
}
@media (max-width: 1240px){

     /* toggle btn*/
    .menu-btn{
        display: block;
        z-index: 999;
        font-size: 32px;
        margin-left: 550px;
        padding: 0em 0em;
      
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }

    @media (max-width: 1000px){

        /* toggle btn*/
       .menu-btn{
           display: block;
           z-index: 999;
           font-size: 32px;
           margin-left: 350px;
           padding: 0em 0em;
         
       }
       .menu-btn i.active:before{
           content: "\f00d";
       }
   
    }

    @media (max-width: 800px){

        /* toggle btn*/
       .menu-btn{
           display: block;
           z-index: 999;
           font-size: 32px;
           margin-left: 220px;
           padding: 0em 0em;
         
       }
       .menu-btn i.active:before{
           content: "\f00d";
       }
   
    }

    @media (max-width: 650px){

        /* toggle btn*/
       .menu-btn{
           display: block;
           z-index: 999;
           font-size: 32px;
           margin-left: 25px;
       }
       .menu-btn i.active:before{
           content: "\f00d";
       }
    }

        /* slide bar menu for medium to small device*/
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: var(--nakita);
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active{
        left: 0;
    }


    .navbar .menu li{
        display: block;
    }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .scroll-up-btn{
        background:var(--nakita);
    }
    
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }

    /* Nav Bar Medium screen size */
    .max-width{
        max-width: 1100px;

        /* End Nav Bar Medium screen size */
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right{
        flex: 100%;
    }
    .services .serv-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
    .skills .skills2-content .skills5-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
}

@media (max-width: 690px) {
    .max-width{
        padding: 0 23px;
    }
    .max-width1{
        padding: 0 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content .card{
        width: 100%;
    }
}

@media (max-width: 500px) {
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 27px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
        
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
        
    }

    .skills2 .skills2-content {
        font-size: 19px;
    }


    .skills5 .skills5-content {
        font-size: 19px;

    }
   
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email{
        margin: 0;
    }
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
}


/*Contact Section*/

.contact{
    padding:80px 30px;
  
  
    
  }
  
  .contact .content{
      -webkit-display: flex;
    display: flex;
    

  }
  .container h2{
    width: 100%;
    color: var(--nakita);
    font-size: 35px;
    margin-bottom: .5em;
    
    }
  
  .form-control{
    border:1px solid var(--nakita);
    width: 98%;
    height: 2em;
    color: var(--nakita);
    background-color: rgb(102, 0, 0, 2%);
  justify-content: center;
  align-items: center;
  margin: .75em .2em;
  font-size: 20px;
  padding: .4em;
  max-width: 98%;
  border-radius: .3em;
  
  }
  
  
  
  .input-group .form-control{
  height: 15em;
  
  
  
  }
  
  
  .btn-primary{
  background-color: var(--nakita);
  color: var(--SectionWhite);
  font-size: 20px;
  padding: .5em 2em;
  margin: .1em 0em;
  border-radius: 0em;
  cursor: pointer;
  }
  .btn-primary:hover{
    background-color: var(--nakita);
    color: var(--SectionWhite);
    
    }
  
    .btn-primary:focus{
      background-color: var(--nakita);
      color: var(--SectionWhite);
      
      }
  
      .g-recaptcha{
  margin: 1em 0em .5em 0em;
  
  
      }
  
       
  @media only screen and (min-width: 700px){
    .contact .content{
      width: 80%;
      align-items: center;
    margin: 0em 10%;
  
    }
  
      }
   
  @media only screen and (min-width: 1050px){
    .contact .content{
      width: 60%;
      align-items: center;
    margin: 0em 20%;
   
  
    }
  
      }
  
  
  
   /* End email contaner  */ 





/* accordion section  */ 

.accordion{
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    background-color: var(--SectionWhite);

 }


 .accordion-item{
    font-size: 1.5rem;
    background: var(--SectionWhite);
       border-radius:  .4rem;
       margin: .2rem;
       padding: .1rem;
       box-shadow: .5rem 2px .5rem rgba(0,0,0,.1);
       border-style: solid;
       border-width: .5px;
       border-color: var(--SectionWhite);
       
   }
   .accordion-link{
     line-height: 1.5rem;
     font-size: 1.5rem;
       color: var(--SectionWhite);
       text-decoration: none;
       background-color: var(--SectionWhite);
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 0;
       opacity: 70%;
   }
   .accordion-link i{
      color: var(--SectionWhite);
      padding: .5rem;
   }
   .accordion-link .fa-minus{
   display: none;
   }
   .answer{
   max-height: 0;
   overflow: hidden;
   position: relative;
   background-color: rgb(241, 236, 241);
   transition: max-height 650ms;
   opacity: 60%;
 
   }
   .answer::before{
   content: "";
   position: absolute;
   width: .6rem;
   height: 90%;
   background: var(--nakita);
   top: 50%;
   left: 0;
   transform: translateY(-50%); 
   }
 
 
   
   /* end of accordion section  */ 
 
 
      /* new accordion section  */ 
 
   *::before,
   ::after{
   margin: 0;
   padding: 0;
   box-sizing: inherit;
   }



   
 
     .container .accordion .accordion-item {
         display: flex;
         flex-direction: column;
     
         
        
     }
     .container .accordion .accordion-item button {
         display: block;
         width: 100%;
         background-color: rgb(232, 227, 195, 0.4);
         color: var(--nakita3);
         font-size: 1rem;   
         text-align: left;
         border: none;
         outline: none;
         transition: .3s ease background;
         display: flex;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
         border-radius:  .4rem;
         margin-bottom: 1rem;
         padding: 1rem;
         box-shadow: .5rem 2px .5rem rgba(0,0,0,.4);
         min-height: 70px;
     }
     .container .accordion .accordion-item .accordion-content {
         padding: 0 20px;
         height: 0;
         display: block;
         background: var(--SectionWhite);
         overflow: hidden;
         transition: .3s ease height;
     }
     .sub__title{
        color: var(--nakita);
        padding: 0rem;
        margin-left: 1rem;
        text-transform: capitalize;
font-weight: 600;
margin-top: 3rem;
margin-bottom: 1rem;
letter-spacing: 0.2rem;
font-size: 2rem;  
font-family: 'EB Garamond', serif;

     }

     .container .accordion .accordion-item .accordion-content .accordion__title {
         color: var(--black);
         padding: .5rem;
         text-transform: capitalize;
 font-weight: 400;
 margin-top: .5rem;
 margin-bottom: .5rem;
 letter-spacing: 0.2rem;
 font-size: 2.5rem;  
 
     }
     .container .accordion .accordion-item .accordion__text {
         margin-top: .5rem;
         margin-bottom: 1rem;
         font-size: 1.2rem;
         padding: 1rem;
         color: var(--black);
     }
 
 
     .accordionul{
        margin-top: .5rem;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        padding: 1rem;
        color: var(--black);
       }
 
       .accordionul li{
           padding: .2rem;
       }
 
     .accordionol{
        margin-top: .5rem;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        padding: 1rem;
        color: var(--black);
  
     }
 
     
     .container .accordion .accordion-item.active button,
     .container .accordion .accordion-item button:hover {
         background:var(--nakita);
         color: var(--SectionWhite);
     }
     .container .accordion .accordion-item.active .accordion-content {
         display: block;
     }
     /* button icon */
     .container .accordion .accordion-item button .icon {
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         display: block;
         color: var(--SectionWhite);
         margin-bottom: 1.5rem;
         margin-right: .5rem;
        
     }
     .container .accordion .accordion-item button .icon::before,
     .container .accordion .accordion-item button .icon::after {
         content: '';
         position: absolute;
         right: 0;
         height: 2px;
         width: 15px;
       color: var(--black);
          background-color: rgb(241, 236, 241);
         transform-origin: center;
         transition: .3s ease transform;
         
         
     }
     .container .accordion .accordion-item button .icon::after {
         transform: rotate(90deg);
     }
     
     .container .accordion .accordion-item.active button .icon::before,
     .container .accordion .accordion-item.active button .icon::after {
         transform: rotate(360deg);
     }

 



 @media screen and (max-width: 800px){
    .accordion{
    grid-template-columns: 1fr;
 }
     /* button icon */
     .container .accordion .accordion-item button .icon {
        margin-bottom: 1rem;
        margin-right: .5rem;
       
    }
   
}




  /* end new accordion section  */ 

    /* end accordion section  */ 











      /* footer section  */ 
  /* New Content Footer */

  .contenu {
    /* grow shrink basis */
      flex: 1 0 auto;
  }
  .contenu p {
      padding: 5vw 10vw;
      text-align: justify;
  }
  
  footer {
    background: url(https://dancetours.org/image/img/lmteachingjp.jpg) center/cover fixed no-repeat;
      flex-shrink: 0;
      border-top: 1px dashed var(--black);
      width: 100%;
      background-color: var(--footerbar);
  
  }
  .contenu-footer {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      font-size: 20px;
    padding: 1em;
    
  }
  
    .bloc {
          width: 30%;
      margin: 0 .5em;
    
    }
  .bloc1 {
    width: 30%;
    margin: 0 .5rem;

  }

  .bloc1 a{
    width: 30%;
    margin: 0 .5rem;
    color: var(--SectionWhite);
    font-size: 22px;
    opacity: 60%;

  }
  
  
  /* contact */
  .footer-contact h3,
  .footer-services h3,
  .footer-horaires h3,
  .footer-medias h3 {
      font-size: 30px;
    padding-bottom: 20px;
    color: var(--SectionWhite);
    font-weight: 500;
    
  }
  
  .footer-contact p {
      padding: 5px 0;
      color: var(--SectionWhite);
  }
  
  /* Services */
  
  
  .liste-services,
  .liste-horaires,
  .liste-media {
      list-style-type: none;
  }
  .liste-services li {
      padding: 2px 0;
      
  }
  .liste-services a {
      text-decoration: none;
    color: var(--SectionWhite);
    opacity: 60%;
    font-size: 22px;

  
}
  .liste-services a:hover {
      color: var(--nakita);
      text-decoration: underline;
      opacity: 100%;
  }

  .liste-services .firstoftype {
    color: var(--SectionWhite);
    text-decoration: none;
    font-size: 1.4rem;
    cursor: text;
}

  .liste-services li .firstoftype:hover {
    text-decoration: none;
    cursor: text;
   

}
  
  
  /* Medias */
  
  .liste-media {
      position: relative;
      right: 10px;
  }
  .liste-media img {
      width: 40px;
      margin: 10px 10px;
  }
  .liste-media a {
      text-decoration: none;
      color: var(--SectionWhite);
      display: flex;
      align-items: center;
      font-size: 20px;
  }
  .liste-media a:hover {
      color: var(--orangemonet);
  }
  
  /* ----------------- added Footer --------------------- */
   /* Social Us */
  
  .bloc .instagram div > img{
      display: inline-block;
      width: 30%;
      height: 60%;
      margin: .3rem .1rem;
      cursor: pointer;
  }
  
  
  .bloc .instagram h2 {
      font-size: 25px;
    padding-bottom: 20px;
    color: var(--SectionWhite);
    cursor: pointer;
  }


  .footer .bloc div i{
    background-color: var(--bg-size);
    font-size: 40px;
    color: var(--SectionWhite);
    text-align: center;
    
    
}
  

   /* Media queries */
  
   @media screen and (max-width: 700px) {
    .contenu-footer {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      font-size: 20px;
    padding: 50px 0 10px;

    
  }


  .bloc .instagram div > img{
    display: inline-block;
    width: 30%;
    height: 60%;
    margin: .3rem .2rem;
}
}


  
  .bloc .follow div > i {
    color: var(--SectionWhite);
    padding: 0 .6rem;
    font-size: 6rem;
    
  
  }
  .bloc .follow a{
    color: var(--SectionWhite);
    padding: 0 .6rem;
    font-size: 3rem;

  }

  
  .bloc .follow h2 {
      font-size: 25px;
    padding-bottom: 20px;
    color: var(--SectionWhite);

  }
  
  .bloc .follow p {
  text-decoration: none;
  color: var(--SectionWhite);
  display: flex;
  align-items: center;
  font-size: 20px;
  font-family: 'EB Garamond', serif;
  }

     /* End Social Us */

  /* Contact US  */
/*



    /* end Contact US  */

    /* Copy right */
  
  .rights{
      justify-content: center;
      text-align: center;
      font-family: 'EB Garamond', serif;
  }
  
 
  .rights h4{
    font-size: 18px;
    padding-bottom: 20px;
    color: var(--SectionWhite);
text-align: center;
justify-content: center;
font-weight: 400;
opacity: 60%;
  
  }
  
  .rights h4 a{
    color: var(--SectionWhite);
  }
  
 
 /* End Copy right */

  /* ----------------- end added Footer --------------------- */
  
  
  /* Media queries */
  
  @media screen and (max-width: 1300px) {
  
      .contenu-footer {
          width: 100%;
          flex-wrap: wrap;
      }
      .bloc {
          width: 20%;
      margin: 0 .5rem;
      
    }
    .bloc1 {
      width: 20%;
      margin: 0 .5rem;
      }
      .bloc:nth-child(1),
      .bloc:nth-child(2) {
          margin-bottom: 50px;
      }
      .rights {
        width: 80%;
        margin: 0 .5rem;
        }
  
  }
  
  @media screen and (max-width: 1027px) {
  
      .contenu-footer {
          width: 100%;
      flex-wrap: wrap;
      }
      .bloc {
          width: 30%;
      margin: 0 .5rem;
      
    }
    .bloc1 {
      width: 30%;
      margin: 0 .5rem;
      }
      .bloc:nth-child(1),
      .bloc:nth-child(2) {
          margin-bottom: 50px;
      }
      .rights {
        width: 75%;
        margin: 0 .2rem;
        }
  
  }
  @media screen and (max-width: 600px) {
    .rights{
        width: 80%;
        margin: 0 .1rem;
        }
    }
  
  @media screen and (max-width: 750px) {
      .contenu-footer {
      width: 100%;
      }

      .bloc {
          width: 300px;
      margin: 30px 30px;

      
      }
      .bloc1 {
        width: 300px;
    margin: 30px 30px;

    
    }

      .bloc:nth-child(1),
      .bloc:nth-child(2) {
          margin-bottom: 30px;
      }
      .bloc:nth-child(1) {
          margin-top: 0;
      }
  }
  
  
  
  
  /* End of New Content Footer */
          /* footer section  */ 
.footer{
  background: var(--dark);
  padding: 3rem 0rem;
  }
  .footer__icons{
  display: flex;
  justify-content: space-around;
  }
  .footer__single-icon{
  font-size: 2rem;
  color: var(--light);
  transition: all 2s ease;
  }
  .footer__single-icon:hover{
  color: var(--grey);
  }
  
  
  
  
  
  
      /* enb of footer section  */






  /* sales-points */ 


  
  .grid {
    display: flex;
    flex-wrap: wrap; 
    
    
}
  
  .col {
    flex: 0 0 100%;
    padding: 0 .75em; 
}


    @media (min-width: 725px) {
      .col:first-of-type {
        padding-left: 0; 
          
        
    }
      .col:last-of-type {
        padding-right: 0; 
  
    
    }
}
  
  .col--full {
    flex: 0 0 100%; 
}

 
  
  @media (min-width: 725px) {
    .col--1-3 {
      flex-basis: 49%; 
    }
   
}

@media (min-width: 950px) {
    .col--1-3 {
      flex-basis: 32.3333%; 
    }

    
}
  
  *, *::before, *::after {
    box-sizing: border-box; 
}


    .sales-points {
        padding: 2vh 0 2vh 0; 
        text-align: center;
        background-color: var(--SectionWhite);
        
           
 /*
   background: url("images/phone-in-hand.jpg") no-repeat center;
*/  
        
    }
        .sales-points .sales-point {
            margin-bottom: 0; 
            cursor: pointer;
        }
          .sales-points .sales-point:first-of-type {
            margin-top: 1.5em; 
            margin-bottom: 0; 
            background-color: var(--SectionWhite);
          
        
        }
          .sales-points .sales-point:last-child {
            margin-bottom: 0; 

        }

        .sales-point{
            margin: 3em .2em;
            padding: .2em;
            box-shadow: .5rem 2px .5rem rgba(0,0,0,.1);
            background-color: var(--SectionWhite);
        }

         .sales-points .title{
font-size: 45px;
font-weight: 400;
color: rgb(34, 34, 34, .5);
text-transform: uppercase;
margin-bottom: .2em;
font-family: 'EB Garamond', serif;

            }

            .sales-point h2{
                color: rgb(34, 34, 34, .5);
                font-size: 30px;
                font-weight: 400;
                
                
                            }

            .sales-points .col--fullpara{
                font-size: 20px;
                color: rgb(34, 34, 34, .5);
                padding: .1em .2em 1em .2em;
             
                
                            }

                            .sales-points .title::after{
                                content: "LTF";
                            
                                background-color: var(--nakita3);
                                color: var(--SectionWhite);
                                font-size: 20px;
                                font-weight: 200;
                                font-family: 'EB Garamond', serif;
                          
                               
                            }

          @media (min-width: 725px) {
            .sales-points .sales-point:first-of-type {
              margin-top: 3em; 
            } 
        }

        @media (max-width: 650px) {
            .sales-points .sales-point:first-of-type {
              margin-top: 5em; 
           
            } 

        } 




.service{
	padding:20px 0px;
	background-color: rgb(232, 227, 195, 0.4);
  
}

.service .content{
	-webkit-display:flex;
	display:flex;
}

.service .content .box{
	flex:0 0 50%;
	max-width: 50%;
	padding:15px;
}

.service .content .text h2{
    content: "";
    color: rgb(34, 34, 34, .5);
    font-size: 45px;
    font-weight: 400;
    font-family: 'EB Garamond', serif;
}

.service .content .text p{
    font-size: 20px;
	line-height:20px;
	color:var(--nakita3);
	margin:0;
	padding:0px 0px 20px;
	font-family: 'EB Garamond', serif;
}

.service .content  .title::after{
    content: "latest Deals";
    background-color: var(--nakita3);
    color: var(--SectionWhite);
    font-size: 20px;
    font-weight: 200;
    font-family: 'EB Garamond', serif;

   
}

.service .content .text .menu-btn{
	padding:8px 30px;
	background-color: var(--nakita);
	color:#ffffff;
	text-decoration: none;
	display: inline-block;
	border:1px solid transparent;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.service .content .text .menu-btn:hover{
	border:1px solid #ffffff;
	color:#ffffff;
	background-color: transparent;
}
.service .content .accordian-container{
	margin-bottom: 5px;
}
.service .content .accordian-container .head{
	background-color:rgba(0,0,0,0.2);
	position: relative;
	padding:12px 15px;
	cursor: pointer;
}
.service .content .accordian-container .head .fa{
	position: absolute;
	right: 10px;
	top:13px;
	color:#ffffff;
	height:30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
}
.service .content .accordian-container .head h4{
  font-size: 20px;
  margin:0;
  padding:0;
  font-weight: 500;
  color: #ffffff;
  text-transform: capitalize;
}
.service .content .accordian-container.active .head{
  background-color: #222222;	
}
.service .content .accordian-container .body{
	display: none;
	padding:15px;
	background-color: #222222;
	border-top:1px solid #333333;
}

.service .content .accordian-container:nth-child(1) .body{
	display: block;
}
.service .content .accordian-container .body p{
    font-size: 18px;
	line-height:20px;
	color:#ffffff;
	margin:0;
	padding:0;
	font-family: 'EB Garamond', serif;	
}

/*if screen width is less than or equal to 767px then*/
@media(max-width: 767px){

  .service .content{
      flex-wrap: wrap;
  }
  .service .content .box {
      flex: 0 0 100%;
      max-width: 100%;
  }

}






/* Start phonenumber  */
.phonenumber .services__single-serviceul1{
    text-decoration: none;
    color: var(--SectionWhite);
    width: 100%;
     font-size: 1.75rem;
     font-weight: 400;
     margin: .2rem auto ;
     text-align: left;
     line-height: 1;
     letter-spacing: 0.2rem; 
     padding: 1rem 0em 0em 1em;
   
}


.phonenumber .contact-link {
text-decoration: none;
 width: 100%;
 font-size: 1.75rem;
 font-weight: 400;
 margin: 1rem auto;
 text-align: left;
 line-height: 1.5;
 letter-spacing: 0.2rem; 
 padding: .5rem;
}


@media screen and (min-width:600px){
    .phonenumber .services__single-serviceul1 {
        text-decoration: none;
    color: var(--SectionWhite);
    width: 100%;
     font-size: 2rem;
     font-weight: 400;
     margin: .2rem auto ;
     text-align: left;
     line-height: 1;
     letter-spacing: 0.2rem; 
     padding: 2rem;

    } 
    .phonenumber .contact-link {
        text-decoration: none;
        width: 100%;
        font-size: 2rem;
         font-weight: 400;
         margin: 1rem auto;
         text-align: left;
         line-height: 1.5;
         letter-spacing: 0.2rem; 
         padding: .5rem;
       } 

}

@media screen and (min-width:1000px){
    .phonenumber .services__single-serviceul1{
        text-decoration: none;
        color: var(--SectionWhite);
        width: 100%;
         font-size: 2rem;
         font-weight: 400;
         margin: .2rem auto ;
         text-align: left;
         line-height: 1;
         letter-spacing: 0.2rem; 
         padding: 1rem;
   
    }
    
    
    
    .phonenumber .contact-link {
    text-decoration: none;
    width: 100%;
     font-size: 2rem;
     font-weight: 400;
     margin: 1rem auto;
     text-align: left;
     line-height: 1.5;
     letter-spacing: 0.2rem; 
     padding: .5rem;
    }
    }
    
/*  End phonenumber  */


.lang-menu {
    width: 100px;
    text-align: left;
    font-weight: bold;
    margin-top: 10px;
    position: relative;
    
    
}
.lang-menu .selected-lang {
    display: flex;   
    justify-content: space-between;
    line-height: 2;
    cursor: pointer;
    
}
.lang-menu .selected-lang:before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
     background-size: contain;
    background-repeat: no-repeat;
}

.lang-menu ul {
    margin: 0;
    padding: 0;
    display: none;
    background-color: var(--SectionWhite);
    border: 1px solid var(--SectionWhite);
    position: absolute;
    top: 35px;
    right: 0px;
    width: 125px;
    border-radius: 5px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    
}


.lang-menu ul li {
    list-style: none;
    text-align: left;
    display: flex;
    justify-content: space-between;

}

.lang-menu ul li a {
    text-decoration: none;
    width: 125px;
    padding: 5px 10px;
    display: block;
    font-family: 'EB Garamond', serif;
    color: var(--nakita3);
}

.lang-menu ul li:hover {
    background-color: var(--crimson);
    color: var(--SectionWhite);
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    
}

.lang-menu ul li a:before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;

}

.en:before {
    background-image: url(https://www.countryflags.io/gb/flat/32.png);
}

.ru:before {
    background-image: url(https://www.countryflags.io/ru/flat/32.png);
}


.lang-menu:hover ul {
    display: block;
    
}