@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
--color-1:rgb(1, 25, 54);
--text-color: rgb(255, 255, 255);
--accet-color: rgb(0, 180, 120);
    
}

*{

margin: 0px;
padding: 0px;
box-sizing: border-box;



}

html{
font-size: 12px;
font-family: ;
font-family: "Poppins", sans-serif;
font-weight: 600;
}

body{
background: var(--color-1);


}

nav{
height: 60px;
background-color: var(--color-1);
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid var(--accet-color);

}

.link-container{

height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;

}



nav a{

height: 100%;
padding: 0 20px;
display: flex;
align-items: center;
text-decoration: none;
color: var(--text-color);

}





nav a:hover{
background-color:var(--accet-color);


}

nav .home-link{
font-style: var(--color-1);
margin-left: auto;
background: var(--accet-color);

}

nav svg{
fill: var(--text-color);


}

#sidebar-active{

    display: none;
}

.open-sidebar-buton {
padding: 20px;
display: none;


}

.close-sidebar-buton{
padding: 20px;
display: none;


}

/* nav bar logo */

.logo{
width: 50px;
display: flex;
justify-content: flex-start;
margin: auto;
cursor: pointer;

}

/* section ka website ka */

.ciwaanka-kore{

width: 100%;
margin-top: 200px;
position: absolute;


}

.title{
    /* border: 2px solid red; */

justify-content: center;
margin-top: -190px;

}



#kaliya{

font-size: 16px;
color: var(--text-color);
text-align: center;


}

#kaliya span{
color: var(--accet-color);

}

#kaliya #somali{

font-size: 40px;
color: white;

}

#kaliya #freepips{

font-size: 40px;
color:var(--accet-color);

}

/* section2 */

.section2{

display: flex;
justify-content: center;



}



.button{
    display: flex;
    align-items: center;
    margin-top: 125px;
width: 150px;
height: 50px;
display: flex;
justify-content: center;

}



.get{
text-decoration: none;
font-size: 12px;
font-weight: 500;
background: var(--accet-color);
color: var(--color-1);
padding: 10px 20px;
border-radius: 7px;
}


.get:hover{
background: var(--text-color);
text-decoration: none;
transition: 0.5s ease-in-out;
}




/* SECTION3 */

.section0-update3{
grid-template-columns: repeat(2, 500px);
grid-auto-rows: minmax(700px, auto);
display: grid;
justify-content: center;
align-items: center;
gap: 20px;

}

.sdiv3{
border-radius: 10px;
padding: 10px;
}



.altimage{
width: 700px;
object-fit: cover;


}

.xirfadu{
font-size: 40px;
color: var(--text-color);
text-align: center;
padding: 10px;
line-height: 50px;


}

.xirfadu span{

    color: var(--accet-color);
}


.halkan{
font-size: 15px;
color: var(--text-color);
text-align: left;


}

.halkan span{

color: var(--accet-color);

}








/* SECTION 4 */

#ourskills{
display: grid;
justify-content: center;
grid-template-columns: repeat(1, 200px);
grid-auto-rows: minmax(50px, auto);

}

.our-skills{

font-size: 25px;
font-weight: 700;
color: var(--accet-color);
justify-content: center;

}


.section4{
display: grid;
color: white;
grid-template-columns: repeat(3, 350px);
grid-auto-rows: minmax(500px,auto);
gap: 30px;
justify-content: center;
margin-top: 20px;

}


.grid4{
border-radius: 10px;
border: 2px solid var(--accet-color);
    
}

.ict {
object-fit: cover;
width: 345px;
padding: 5px;


}

.barashada{
font-size: 19px;
font-weight: 700;
padding: 5px;
text-align: left;


}

.forextrading{

    color: var(--accet-color);
}

.eng-mohamed{

    color: rgba(240, 248, 255, 0.503);
padding: 5px;
font-weight: 200;

}
.coursekan{
font-weight: 0;
padding: 5px;
line-height: 25px;


}

.qiimaha{

    font-size: 19px;
    font-weight: 700;
    padding: 10px;
    color: var(--accet-color);
    line-height: 10px;


}


.year{

color: var(--text-color);
padding: 10px;
font-weight: 500;
line-height: 5px;
font-size: 10px;

}


.iibso a{
padding: 8px 30px;
color: var(--text-color);
text-decoration: none   ;
font-size: 20px;
background-color: var(--accet-color);
line-height: 100px;
border-radius: 0px 10px;

}

.iibso a:hover{
background-color: var(--color-1);
color: var(--accet-color);
border: 1px solid var(--accet-color);
transition: 0.75s ease;

}





/* SECTION 5 */

#ourservices{
display: grid;
justify-content: center;
grid-template-columns: repeat(1, 200px);
grid-auto-rows: minmax(50px, auto);
margin-top: +150px;

}

.our-services{

font-size: 25px;
font-weight: 700;
color: var(--accet-color);
justify-content: center;

}


.dahabka{
display: grid;
grid-template-columns: repeat(1, 800px);
grid-auto-rows: minmax(60px, auto);
justify-content: center;


}

.lacagtadahabka{

color: var(--text-color);
font-size: 32px;
text-align: center;


}

.lacagtadahabka span{
color: var(--accet-color);

}

.ugudhaqaqabadan{

color: var(--text-color);
text-align: center;
font-weight: 300;

}

.picture{

display: grid;
grid-template-columns: repeat(1, 1110px);
grid-auto-rows: minmax(100px, auto);
justify-content: center;
margin-top: 30px;


}

.musawirka{
width: 1110px;
align-items: center;
object-fit: cover;



}


.Instant{

text-align: center;
color: var(--text-color);
font-size: 48px;
font-weight: 800;

}

.Instant span{

color: var(--accet-color);;

}



.section5{
display: grid;
color: white;
grid-template-columns: repeat(3, 350px);
grid-auto-rows: minmax(500px,auto);
gap: 30px;
justify-content: center;
margin-top: 20px;

}


.grid5{
border-radius: 10px;
border: 2px solid var(--accet-color);
    
}

.monthly{
color: var(--accet-color);
font-size: 27px;
text-align: center;
padding: 10px;
font-weight: 600;
line-height: 41px;



}


.month87{

color: var(--accet-color);
font-size: 41px;
text-align: center;
padding: 10px;
font-weight: 700;
line-height: 72px;



}

.month87 span{

color: var(--text-color);
font-size: 16px;
font-weight: 500;
}


.scalping{
padding-left: 50px;
text-align: left;
font-size: 17px;
font-weight: 400;
line-height: 30px;

}

.fa-circle-check{

    color: var(--accet-color);
}


.chooseplan{

font-weight: 500;
font-size: 16px;
line-height: 70px;
text-align: center;
}

.chooseplan a{

background: var(--accet-color);
color: var(--text-color);
padding: 8px 35px;
text-decoration: none;
border-radius: 17px;
border: 1px solid var(--accet-color);
}


.chooseplan a:hover{
background: var(--color-1);
color: var(--accet-color);
transition: 0.50s ease;
}

.Save67{

font-weight: 600;
font-size: 16px;
line-height: 26px;
text-align: center;


}

.Save67 span{
color: var(--accet-color);

}


.strikemoney{
text-align: center;
font-size: 25px;
line-height: 0;
padding-bottom: 30px;


}







/* SECTION 6 */

.dahabka6{
display: grid;
grid-template-columns: repeat(1, 800px);
grid-auto-rows: minmax(60px, auto);
justify-content: center;
margin-top: 100px;


}

.lacagtadahabka6{

color: var(--text-color);
font-size: 32px;
text-align: center;


}

.lacagtadahabka6 span{
color: var(--accet-color);

}

.ugudhaqaqabadan6{

color: var(--text-color);
text-align: center;
font-weight: 300;

}

.picture6{

display: grid;
grid-template-columns: repeat(1, 1110px);
grid-auto-rows: minmax(100px, auto);
justify-content: center;
margin-top: 30px;


}

.musawirka6{
width: 1110px;
align-items: center;
object-fit: cover;



}


.Instant6{

text-align: center;
color: var(--text-color);
font-size: 48px;
font-weight: 800;

}

.Instant6 span{

color: var(--accet-color);;

}



.section6{
display: grid;
color: white;
grid-template-columns: repeat(3, 350px);
grid-auto-rows: minmax(500px,auto);
gap: 30px;
justify-content: center;
margin-top: 20px;

}


.grid6{
border-radius: 10px;
border: 2px solid var(--accet-color);
    
}

.monthly6{
color: var(--accet-color);
font-size: 27px;
text-align: center;
padding: 10px;
font-weight: 600;
line-height: 41px;



}


.month876{

color: var(--accet-color);
font-size: 41px;
text-align: center;
padding: 10px;
font-weight: 700;
line-height: 72px;



}

.month876 span{

color: var(--text-color);
font-size: 16px;
font-weight: 500;
}


.scalping6{
padding-left: 50px;
text-align: left;
font-size: 17px;
font-weight: 400;
line-height: 30px;

}

.fa-circle-check{

    color: var(--accet-color);
}


.chooseplan6{

font-weight: 500;
font-size: 16px;
line-height: 70px;
text-align: center;
}

.chooseplan6 a{

background: var(--accet-color);
color: var(--text-color);
padding: 8px 35px;
text-decoration: none;
border-radius: 17px;
border: 1px solid var(--accet-color);
}


.chooseplan6 a:hover{
background: var(--color-1);
color: var(--accet-color);
transition: 0.50s ease;
}




.strikemoney6{
text-align: center;
font-size: 25px;
line-height: 0;
padding-bottom: 30px;


}



/* SECTION 7 */

.dahabka7{
display: grid;
grid-template-columns: repeat(1, 800px);
grid-auto-rows: minmax(60px, auto);
justify-content: center;
margin-top: 100px;


}

.lacagtadahabka7{

color: var(--text-color);
font-size: 42px;
text-align: center;


}

.lacagtadahabka7 span{
color: var(--accet-color);

}

.ugudhaqaqabadan7{

color: var(--text-color);
text-align: center;
font-weight: 500;
font-size: 15px;

}

.picture7{

display: grid;
grid-template-columns: repeat(1, 1110px);
grid-auto-rows: minmax(100px, auto);
justify-content: center;
margin-top: 30px;


}

.musawirka7{
width: 1110px;
align-items: center;
object-fit: cover;



}


.Instant7{

text-align: center;
color: var(--text-color);
font-size: 48px;
font-weight: 800;

}

.Instant7 span{

color: var(--accet-color);;

}



.section7{
display: grid;
color: white;
grid-template-columns: repeat(3, 350px);
grid-auto-rows: minmax(500px,auto);
gap: 30px;
justify-content: center;
margin-top: 20px;

}


.grid7{
border-radius: 10px;
border: 2px solid var(--accet-color);
    
}

.monthly7{
color: var(--accet-color);
font-size: 27px;
text-align: center;
padding: 10px;
font-weight: 600;
line-height: 41px;



}


.month877{

color: var(--accet-color);
font-size: 41px;
text-align: center;
padding: 10px;
font-weight: 700;
line-height: 72px;



}

.month877 span{

color: var(--text-color);
font-size: 16px;
font-weight: 500;
}


.scalping7{
padding-left: 50px;
text-align: left;
font-size: 17px;
font-weight: 400;
line-height: 30px;

}

.fa-circle-check{

    color: var(--accet-color);
}


.chooseplan7{

font-weight: 500;
font-size: 16px;
line-height: 70px;
text-align: center;
}

.chooseplan7 a{

background: var(--accet-color);
color: var(--text-color);
padding: 8px 35px;
text-decoration: none;
border-radius: 17px;
border: 1px solid var(--accet-color);
}


.chooseplan7 a:hover{
background: var(--color-1);
color: var(--accet-color);
transition: 0.50s ease;
}




.strikemoney7{
text-align: center;
font-size: 25px;
line-height: 0;
padding-bottom: 30px;


}




/* SECTION 8 */

#dahabka8{
display: grid;
grid-template-columns: repeat(1, 800px);
grid-auto-rows: minmax(60px, auto);
justify-content: center;
margin-top: 100px;


}

.lacagtadahabka8{

color: var(--text-color);
font-size: 32px;
text-align: center;


}

.lacagtadahabka8 span{
color: var(--accet-color);

}

.ugudhaqaqabadan8{

color: var(--text-color);
text-align: center;
font-weight: 300;

}

.picture8{

display: grid;
grid-template-columns: repeat(1, 1110px);
grid-auto-rows: minmax(100px, auto);
justify-content: center;
margin-top: 30px;


}

.musawirka8{
width: 1110px;
align-items: center;
object-fit: cover;



}


.Instant8{

text-align: center;
color: var(--text-color);
font-size: 48px;
font-weight: 800;

}

.Instant8 span{

color: var(--accet-color);;

}



.section8{
display: grid;
color: white;
grid-template-columns: repeat(3, 350px);
grid-auto-rows: minmax(500px,auto);
gap: 30px;
justify-content: center;
margin-top: 20px;

}


.grid8{
border-radius: 10px;
border: 2px solid var(--accet-color);
    
}

.monthly8{
color: var(--accet-color);
font-size: 27px;
text-align: center;
padding: 10px;
font-weight: 600;
line-height: 41px;



}


.month878{

color: var(--accet-color);
font-size: 20px;
text-align: center;
padding: 10px;
font-weight: 500;
line-height: 72px;



}

.month878 span{

color: var(--text-color);
font-size: 20px;
font-weight: 500;
}


.scalping8{
padding-left: 50px;
text-align: left;
font-size: 17px;
font-weight: 400;
line-height: 40px;

}

.fa-circle-check{

    color: var(--accet-color);
}


.chooseplan8{

font-weight: 500;
font-size: 16px;
line-height: 70px;
text-align: center;
}

.chooseplan8 a{

background: var(--accet-color);
color: var(--text-color);
padding: 8px 35px;
text-decoration: none;
border-radius: 17px;
border: 1px solid var(--accet-color);
}


.chooseplan8 a:hover{
background: var(--color-1);
color: var(--accet-color);
transition: 0.50s ease;
}




.strikemoney8{
text-align: center;
font-size: 25px;
line-height: 0;
padding-bottom: 30px;


}



/* SECTION 9  | FOOTER*/

.section9{

display: grid;
grid-template-columns: repeat(3, 270px);
grid-auto-rows: minmax(400px, auto);
justify-content: center;
border-top: 2px solid var(--accet-color);
gap: 20px;
align-items: center;
margin-top: 100px;
background-color: black
}


.footer1 {

color: var(--text-color);
padding: 10px;
line-height: 50px;
text-align: center;


}


.title9{
font-size: 16px;
color: var(--accet-color);


}


.subtitles9 a{
color: var(--text-color);
text-decoration: none;


}


.subtitles9 a:hover{
color: var(--accet-color);
transition: 0.75s ease;


}
