/* personaliziamo il Font rispetto a quello di default
di Bootstrap. Prendiamo il Font da Google Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Raleway'); /* importato il Font Raleway
da Google Fonts   tolto da url dopo Raleway la stringa :wght@100&display=swap perché ero troppo fine
il Font*/

/*adesso indichiamo quali parti della pagina abbiano questo font importato, particamente tutti */

html, h1, h2, h3, h4, h5, h6, a {
    font-family: 'Raleway', sans-serif; /* regola copiata da Google Fonts al Font Raleway per indicare
                                       che queste parti abbiano questo Font */
}

/* adesso per dare il colore arancione alla navbar poiché non abbiamo
     personalizzato il SASS di Bootrstrap lo dobbiamo fare così */

.bg-light {
    background: #F97300 !important;
                                          /*abbiano dato il colore arancione alla barra di navigazione
                                      ricorda che la direttiva !important non si dovrebbe usare ma adesso
                                       la utilizza perché non abbiamo personalizzato il SASS */
}

/*cambiamo il colore del testo della barra di navigazione */

.navbar-light, .navbar-light, .navbar-bar .navbar-link, .navbar-light .navbar-brand {
    color: #f4f4f4; /* colore del testo */
    cursor: pointer;
}

/* adesso si devono spostare tutti gli elementi della navbar-collapse a destra
per fare questo siccome Bootstrap usa i posizionamenti flex si va ad utilizzare
un posizionamento flex custom sull'elemento navbar collapse siccome dobbiamo agire
sull'asse orizzontale si usa la proprietà justify-content del contenitore
*/

.navbar-light .navbar-collapse {
   justify-content: flex-end;
}

/* facciamo l'hover sui link */

.navbar-light .navbar-nav .nav-link:hover {
    background: #f4f4f4;
    color: #f97300;
}

/*adesso scriviamo la regola per l'hover sul menu
 toggle-menu ( hamburger )
 */

.navbar-light .navbar-toggler {
    background: #fff;
}

/*HEADER START regole */

.header {
    background-image: url(../images/headerback.jpg);
    background-attachment: fixed; /* questa regola e la successiva indicano come
                                  si deve comportare l'immagine rispetto allo scroll della
                                  pagina */
    background-position: top ;
    /* siccome la immagine in background si ripete, noi non vogliamo questo comportamento
e andiamo a cambiare alcune regole usando background size che dice come l'immagine deve essere posta
dentro il contenitore
 */
    background-size: cover; /*cover significa spalmare l'immagine dentro tutto il contenitore
                             e può anche distorcela, se non si vuole distorcela si usa "contain" */
    position:relative; /* si usa position relative per posizionare il div overlay sopra come se fosse
                       posizionato in maniera assoluta */
}

.overlay {
    position:absolute;
    top: 0;  /*usiamo i posizionamenti assoluti */
    left: 0;
    min-height: 100%; /* copriamo tutto lo spazio del contenitore che ha l'immagine di sfondo */
    min-width: 100%;
    /*per fare l'overlay opaco e trasparente si usa la regola CSS3 rgba */
    background: rgba(244, 244, 244, 0.79);
}

.description { /*lavoriamo sul contenitore di tutte le scritte */
    position: absolute; /* si ancora rispetto all'absolute overlay per lui il container è come se
                      non ci fosse */
    top: 30%;
    padding: 2em;

}


.description h1 {

    color: #F97300;
}

.description p {
    color: #666; /*grigio mediamente scuro */
    font-size: 20px;
    line-height: 1.5em;
}
.description button {
    background: #F97300;
    color: #fff;
    border: 1px solid #F97300;
}

.description button:hover {
    background: #F97300;
    color: #fff;
    border: 1px solid #F97300;
}

/*END HEADER regole */

/*START ABOUT SECTION */

.about {
    margin: 4em 0; /*margine in alto 4 em e 0 ai lati*/
    padding: 1em; /*spazio tra il bordo e il contenuto e tra il contenuto e gli altri elementi */
}

/*stondiamo la immagine */
.about img {
    border-radius: 50%; /* si usa la regole CSS3 border-radius che è il raggio applicato al bordo */
}

/*gestiamo il colore del teso */

.about p { /*questo selettore è una classe e un p, valore di specificità = 11 */
    color: #888;

}

/*alla classe desc applicchiamo */
.about .desc { /*questo selettore sono 2 classi valore di specificità = 20 */
   padding: 2em;
    border-left: 2px solid #10828C;
}

.about .desc h2 {
    color: #10828C;
}

/* END ABOUT SECTION */

/* START PORTFOLIO SECTION */

.portfolio {
    margin: 4em 0; /* in alto 4em e 0 ai lati */
}

.portfolio h2 {
    color: #F97300;
    margin-top: 2em; /*em è una grandezza relativa che si somma alle altre */
    margin-bottom: 2rem; /* rem è una grandezza che parte sempre dalla radice della pagina
                       cioè dal Font size applicato all'HTML , e quindi in pratica divide
                        IN QUESTO MODO HA PIU' SENSO LA PAROLA PORTFOLIO PERCHE' PIU' VICINA
                        AGLI ELEMENTI DI CUI E' L'INTESTAZIONE ( vedi anche regole Gestalt ) */
}

/* margine tra le immagini */

.portfolio img {
    margin-bottom: 20px;
}


/* END PORTFOLIO SECTION  */

/* BLOG SECTION STARTS */

.blog {
    margin: 4em 0;
}


.blog h2 {
    color: #F97300;
    margin-top: 2em; /*em è una grandezza relativa che si somma alle altre */
    margin-bottom: 2rem; /* rem è una grandezza che parte sempre dalla radice della pagina
                       cioè dal Font size applicato all'HTML , e quindi in pratica divide
                        IN QUESTO MODO HA PIU' SENSO LA PAROLA PORTFOLIO PERCHE' PIU' VICINA
                        AGLI ELEMENTI DI CUI E' L'INTESTAZIONE ( vedi anche regole Gestalt ) */
}

/* margine tra le immagini */

.blog card {
    margin-bottom: 30px;
    box-shadow: 0 0 20px #ccc; /* box-shadow parte da OFFSET angolo in alto a sinistra 0 0
                                20px è la quantità di blur e #ccc è il colore
                                SI PUO' APPLICARE SU QUALUNQUE ELEMENTO ABBIA DISPLAY BLOCK */
}

/* BLOG SECTION ENDS */

/*TEAM SECTION START */

.team {
    margin: 4em 0;
}


.team h2 {
    color: #F97300;
    margin-top: 2em; /*em è una grandezza relativa che si somma alle altre */
    margin-bottom: 2rem; /* rem è una grandezza che parte sempre dalla radice della pagina
                       cioè dal Font size applicato all'HTML , e quindi in pratica divide
                        IN QUESTO MODO HA PIU' SENSO LA PAROLA PORTFOLIO PERCHE' PIU' VICINA
                        AGLI ELEMENTI DI CUI E' L'INTESTAZIONE ( vedi anche regole Gestalt ) */
}

.team .des {
    background: #F97300;
    color: #fff; /*testo bianco */
    text-align: center;
    border-bottom-left-radius: 93%; /* effetto di sdonamento solo per l'angolo a sinistra */
    transition: .3s ease-in-out ; /* effetto usando funzioni ease-in-out che sono funzioni
                                di animazione nel tempo che iniziano piano progrediscono costanti
                                e finiscono piano SCRITTA IN QUESTO MODO E' APPLICATA A TUTTE LE REGOLE
                                CHE CAMBIANO QUINDI ANCHE ALLA ALTEZZA
                                INOLTRE LE TRANSITION FUNZIONANO SU ELEMENTI CON
                                POSITION ABSOLUTE RELATIVE O FIXED
                                   QUINDI L'ELEMENTO CHE LO CONTIENE SARA' RELATIVE
                                   VEDI DI SEGUITO*/
}

.team .item { /*questo elemento è position relative in modo che il transition funzioni sull'elemento
             des che contiene */
    position: relative;
}

.team .item:hover .des { /*l'elemento a cui è applicata la transizione è des quindi si è scritto
                          hover .des */
     position:absolute;
    height: 100%;   /*animiamo la altezza */
    /*background: #F97300;*/ /* al posto del colore sostituiamo il background della opacità */
    background: rgba(249, 115, 0, 0.4); /* questo rgba è per l'opacità */
    width: 90%; /*animiamo la larghezza */
    padding: 5em;
    top: 0; /*elemento posizionato all'inizio del contenitore */
    border-bottom-left-radius: 0; /* riportiamo a 0 la quantità di curvatura dell'elemento */
}

/*TEAM SECTION END */

/* FORM SECTION START */

.contact-form {
    margin: 6em 0;
}

.contact-form h2 {
    color: #F97300;
}

.contact-form .btn-secondary {
     background: #F97300;
    color: #fff;
}

/* FORM SECTION END */