@import url(https://fonts.googleapis.com/css?family=Assistant);
@import url(https://fonts.googleapis.com/css2?family=Assistant:wght@800&display=swap);



* {
    font-family: 'Assistant', sans-serif;
}

:root {
    --darkblue: #2C2A70;
    --darkblueOP: #8E8DB0;
    --lightyellow: #F9E6C3;
    --bluepurple: #6F6F8C;
}

body {
    background-color: white;
    direction: rtl;
    color: var(--darkblue);
    margin: 0;
}

header {
    background-image: url("assets/cover2.png");
    background-size: cover;
    height: fit-content;
    background-repeat: no-repeat;
    background-position: top;
    background-position-x: left;
    padding-right: 3vw;
    padding-bottom: 2vw;
}

#logo {
    float: left;
    height: 2.5vw;
    padding: 0.5vw 0vw 0vw 1vw;
}

h1 {
    font-size: 4.2vw;
    font-weight: bolder;
    margin-block: 0 !important;
}

h2 {
    font-size: 2vw;
    margin-block: 0 !important;
}

#addHeight {
    height: 9vw;
}

p {
    font-size: 1.2vw;
    margin-block: 0 !important;
}

b {
    font-size: 1.2vw;
    margin-block: 0 !important;
}

a {
    color: var(--darkblue);
}

li {
    font-size: 1.2vw;
    margin-block: 0 !important;
}

.tinyTxt {
    font-size: 0.9vw;
}

#smallGR {
    width: 26rem;
    position: relative;
}

#bigGR {
    width: 100%;
    position: relative;
    z-index: -1;
}

#accordion {
    background-color: linear-gradient(270deg, rgba(40,164,219,0.4) 0%, rgb(255, 255, 255,0) 60%) !important;
}

button {
    appearance: none;
    background-color: linear-gradient(270deg, rgba(40,164,219,0.4) 0%, rgba(255,255,255,0) 60%) !important;
}

.accordion {
    width: 100%;
    padding: 2vw 3vw;
    text-align: right;
    color: var(--darkblue);
    background-image: linear-gradient(270deg, rgba(40,164,219,0.4) 0%, rgba(255,255,255,0.9) 80%) !important;
    border-style: none;
    border-bottom: 3px white solid;
    transition: 0.4s;
    display: block;
    outline: none;
}

.accordion:after {
    font-family: 'Material Icons';
    content: "add_circle_outline";
    -webkit-font-feature-settings: 'liga';
    font-size:1.6rem; 
    vertical-align: bottom;  
    animation: ease-in-out;
    transition: 0.4s;
  }
  
  .active:after {
    content: "remove_circle_outline";
  }
  

.panel {
    padding: 2vw 3vw;
    background-color: white;
    /* max-height: 0; */
    display: none;
    overflow: hidden;
    transition: display 0.2s ease-out;
}

.unclickable {
    cursor: pointer;
    pointer-events: none;
    width: 100%;
    padding: 2vw 3vw;
    text-align: right;
    color: var(--darkblue);
    background-image: linear-gradient(270deg, rgba(40,164,219,0.4) 0%, rgba(255,255,255,0.9) 80%) !important;
    border-style: none;
    border-bottom: 3px white solid;
    transition: 0.4s;
    display: block;
}

.unclickable:nth-last-child(odd) {
    border-bottom: none !important;
}

/* .listNum {
    height: 1.6vw;
    width: 1.7vw;
    vertical-align: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
} */


#dontForget {
    background-image: linear-gradient(270deg, rgba(45,42,112,0.4) 0%, rgba(255,255,255,0) 80%) !important;
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-top: 1vw; */
    padding-top: 2vw;
}

#donforget2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-top: 1vw;
}

.dontIcons {
    display: inline-block;
    padding-top: 3vw;
    padding-left: 6vw;
}

.startHere {
    font-size: 1.7vw;
    padding-top: 3vw;
    padding-right: 6.6vw;
}

#firstIcon, #secIcon, #thrdIcon {
    vertical-align: middle;
    margin-top: -2vw;
    width: 5vw;
    margin-right: 7.2vw;
}

#firstIlist {
    list-style: none;
    display: block;
    padding-bottom: 1vw;
    padding-inline-start: 1vw;
    text-align: center;
}

#firstIlist li::before {
    content: "\2190  ";
}

#freeLearning {
    margin-right: 4vw;
}

.circles {
    /* display: inline-block;
    margin: 0 4vw 0 0vw;
    height: 14vw; */
    display: inline-flex;
    margin: 0vw 4vw 0 0vw;
    height: 14vw;
}

.weeks {
    position: absolute;
    margin-right: 19vw;
    padding-top: 3.5vw;
}

.circleLists {
    /* text-align: center;
    display: block;
    margin-top: 6vw;
    margin-right: 3vw; */
    text-align: center;
    display: block;
    margin-top: 8.5vw;
    margin-right: 3vw;
}

.circleLists p {
    text-align: center;
    padding: 0 2vw;
    display: inline-flex;
    position: relative;
    width: 10vw;
}

/* #circle2 .circleLists p {
    text-align: center;
    padding: 0 2vw;
    display: inline-flex;
    position: relative;
    width: 10vw;
}

#circle2 .circleLists {
    margin-right: 3vw;
} */

.circleLists p::before {
    content: '•';
    font-size: 4vw;
    position: absolute;
    top: -4.5vw;
    right: 6.5vw;
}

#cyber {
    padding-right: 5.8vw;
    margin-right: -5.3vw;
} 

.circleLists #cyber::before {
    /* right: 4.5vw; */
}

/* .circleLists #meilot::before {
    right: 5vw;
}

.circleLists #negishut {
    padding-inline-start: 4.5vw;
}

.circleLists #jerusalem {
    margin-right: -2vw;
}

.circleLists #maniat {
    margin-right: -2vw;
} */

.circleLists #betihut {
    padding-right: 5.3vw !important;
} 

#GRline1 {
    background: linear-gradient(270deg, rgba(40,164,219,0.5) 0%, rgba(255,255,255,0) 100%);
    height: 2vw;
    width: 80vw;
    /* display: block; */
    z-index: -5;
    margin-top: 6vw;
    margin-right: 15vw;
    position: absolute;
}

#GRline2 {
    background: linear-gradient(270deg, rgba(243,202,132,0.8) 0%, rgba(255,255,255,0) 100%);
    height: 2vw;
    width: 80vw;
    /* display: block; */
    z-index: -5;
    margin-top: 6vw;
    margin-right: 15vw;
    position: absolute;
}

#GRline3 {
    background: linear-gradient(270deg, rgba(229,48,37,0.5) 0%, rgba(255,255,255,0) 100%);
    height: 2vw;
    width: 80vw;
    /* display: block; */
    z-index: -5;
    margin-top: 6vw;
    margin-right: 15vw;
    position: absolute;
}

footer {
    text-align: center;
    background-image: linear-gradient(270deg, rgba(45,42,112,0.4) 0%, rgba(255,255,255,0) 60%) !important;
    padding: 2vw;
}

footer h2 {
    margin-block: 0 !important;
}


@media only screen and (orientation: portrait) {
    
    header {
        background-image: url("assets/cover5.png");
        background-size: cover;
        height: fit-content;
        background-repeat: no-repeat;
        background-position: top;
        background-position-x: left;
        padding-right: 3vw;
        padding-bottom: 2vw;
    }

    h1 {
        font-size: 8vw;
    }

    h2 {
        font-size: 6vw;
        margin-block: 0 !important;
    }

    p {
        font-size: 4vw;
        margin-block: 0 !important;
    }
    
    b {
        font-size: 4vw;
        margin-block: 0 !important;
    }
    
    li {
        font-size: 4vw;
        margin-block: 0 !important;
    }   
    
    .tinyTxt {
        font-size: 3.2vw;
    }
    
    .accordion:after {
        font-family: 'Material Icons';
        content: "add_circle_outline";
        -webkit-font-feature-settings: 'liga';
        font-size: 5vw; 
        vertical-align: bottom;  
        animation: ease-in-out;
        transition: 0.4s;
    }    

    .active:after {
        content: "remove_circle_outline";
    }

    #addHeight {
        height: 10vw;
    }
    
    #smallGR {
        width: 52vw;
        padding-bottom: 1vw;
    }

    #logo {
        float: left;
        height: 5.5vw;
        padding: 1vw 0vw 0vw 1vw;
    }
    
    #circleParent {
        margin-right: 1vw;
    }
    
    .circles {
        margin: 0 0 0 2vw;
        height: 17vw;
    }

    #dontForget {
        padding-top: 3vw;
    }


    #donforget2 b, #donforget2 p {
        font-size: 3vw;
    }

    #firstIcon, #secIcon, #thrdIcon {
        vertical-align: middle;
        margin-top: -12vw;
        width: 15vw;
        margin-right: 2vw;
    }

    #firstIlist {
        padding-inline-start: 0vw;
        padding-bottom: 0vw;
    }

    .dontIcons {
        padding-top: 15vw;
        padding-right: 0vw;
    }

    .startHere {
        font-size: 4.7vw;
        padding-top: 3vw;
        padding-right: 1.2vw;
    }
    
    #dont4 {
        padding-bottom: 5vw;
    }
        
    .circleLists p {
        font-size: 3vw;
        padding-right: 2.6vw;
    }

    /* #circle2 .circleLists p {
        width: 12vw;
    } */

    /* #circle2 .circleLists {
        margin-right: -1vw;
    } */

    .circleLists {
        margin-right: -2vw;
        margin-top: 6.5vw;
    }
    
    .circleLists p::before {
        content: '•';
        font-size: 6vw;
        position: absolute;
        top: -6vw;
        right: 6.5vw;
    }

    #cyber {
        padding-right: 3.8vw;
        margin-right: unset;
    }

    /* .circleLists #cyber::before {
        right: 4.5vw;
    } */
    
    /* .circleLists #meilot::before {
        right: 6.5vw;
    }

    .circleLists #betihut::before {
        right: 7.5vw;
    }
    
    .circleLists #negishut {
        padding-inline-start: 2.5vw;
    }
    
    .circleLists #jerusalem {
        margin-right: -2vw;
    }
    
    .circleLists #maniat {
        margin-right: -2vw;
    } */
    
    .circleLists #betihut {
        padding-right: 2.8vw !important;
    }

    .weeks {
        position: absolute;
        margin-right: 22vw;
        padding-top: 1vw;
    }

    b.weeks {
        font-size: 3vw !important;
    }
    
}